Merge remote-tracking branch 'origin/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,17 @@
+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>
+);
+  
+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/DashboardBreadcrumbs.js

@@ -3,38 +3,47 @@ import {
   CollapsibleList,
   MenuItem,
   Classes,
-  Boundary
+  Boundary,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
+import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
+import routes from 'routes/dashboard';
 
-export default function DashboardBreadcrumbs() {
+function DashboardBreadcrumbs({breadcrumbs}){
-  function renderBreadcrumb(props) {
+
-    if (props.href != null) {
+  const renderBreadcrumb =(props)=>{
-      return <a className={Classes.BREADCRUMB}>{props.text}</a>;
+
-    } else {
+    if(props.href != null){
-      return (
+
+    return <a className={Classes.BREADCRUMB}>{props.text}</a>;
+    }else{
+
+      return(
         <span
-          className={classNames(Classes.BREADCRUMB, Classes.BREADCRUMB_CURRENT)}
+        className={classNames(Classes.BREADCRUMB, Classes.BREADCRUMB_CURRENT)}>
-        >
+
           {props.text}
         </span>
-      );
+      )
     }
   }
-  return (
+  return(
-    <CollapsibleList
+<CollapsibleList
-      className={Classes.BREADCRUMBS}
+   className={Classes.BREADCRUMBS}
-      dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
+   dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
-      visibleItemRenderer={renderBreadcrumb}
+   visibleItemRenderer={renderBreadcrumb}
-      collapseFrom={Boundary.START}
+   collapseFrom={Boundary.START}
-      visibleItemCount={0}
+   visibleItemCount={0}>
-    >
+
-      <MenuItem icon='folder-close' text='All files' href='#' />
+     {
-      <MenuItem icon='folder-close' text='Users' href='#' />
+       breadcrumbs.map(({breadcrumb,match},index)=>{
-      <MenuItem icon='folder-close' text='Jane Person' href='#' />
+
-      <MenuItem icon='folder-close' text='My documents' href='#' />
+        return <MenuItem key={match.url} icon={'folder-close'} text={breadcrumb} href={match.url} />
-      <MenuItem icon='folder-close' text='Classy dayjob' href='#' />
+       })
-      <MenuItem icon='document' text='How to crush it' />
+     }
-    </CollapsibleList>
+</CollapsibleList>
-  );
+
+  )
 }
+
+export default withBreadcrumbs(routes)(DashboardBreadcrumbs)

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

@@ -32,14 +32,14 @@ export default function ExpenseForm({
     selectedPaymentAccount: null
   });
   const validationSchema = Yup.object().shape({
-    date: Yup.date().required(),
+    date: Yup.date().required().label(formatMessage({id:'date'})),
-    description: Yup.string().trim(),
+    description: Yup.string().trim().label(formatMessage({id:'description'})),
-    expense_account_id: Yup.number().required(),
+    expense_account_id: Yup.number().required().label(formatMessage({id:'expense_account_id'})),
-    payment_account_id: Yup.number().required(),
+    payment_account_id: Yup.number().required().label(formatMessage({id:'payment_account_id'})),
-    amount: Yup.number().required(),
+    amount: Yup.number().required().label(formatMessage({id:'amount'})),
-    currency_code: Yup.string().required(),
+    currency_code: Yup.string().required().label(formatMessage({id:'currency_code_'})),
-    publish: Yup.boolean(),
+    publish: Yup.boolean().label(formatMessage({id:'publish'})),
-    exchange_rate: Yup.number()
+    exchange_rate: Yup.number().label(formatMessage({id:'exchange_rate_'}))
   });
 
   const formik = useFormik({
@@ -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,42 +19,44 @@ 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>
     </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/MakeJournalEntriesForm.js

@@ -63,8 +63,8 @@ function MakeJournalEntriesForm({
   }, [changePageTitle, changePageSubtitle, manualJournal]);
 
   const validationSchema = Yup.object().shape({
-    journal_number: Yup.string().required(),
+    journal_number: Yup.string().required().label(formatMessage({id:'journal_number_'})),
-    date: Yup.date().required(),
+    date: Yup.date().required().label(formatMessage({id:'date'})),
     reference: Yup.string(),
     description: Yup.string(),
     entries: Yup.array().of(
@@ -147,7 +147,7 @@ function MakeJournalEntriesForm({
       // Validate the total credit should be eqials total debit.
       if (totalCredit !== totalDebit) {
         AppToaster.show({
-          message: 'credit_and_debit_not_equal',
+          message: formatMessage({id:'credit_and_debit_not_equal'}),
         });
         setSubmitting(false);
         return;

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

@@ -54,7 +54,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

@@ -122,7 +122,7 @@ function ManualJournalsTable({
 
   const handleEditJournal = useCallback(
     (journal) => {
-      history.push(`/dashboard/accounting/manual-journals/${journal.id}/edit`);
+      history.push(`/manual-journals/${journal.id}/edit`);
     },
     [history]
   );
@@ -182,8 +182,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',
             ]}> 
             <ManualJournalsViewTabs />
 

client/src/containers/Accounting/ManualJournalsViewTabs.js

@@ -41,7 +41,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);
@@ -63,7 +63,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`}

client/src/containers/Accounts/AccountsActionsBar.js

@@ -53,7 +53,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

@@ -98,7 +98,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'})
       });
     }
   }
@@ -313,8 +313,8 @@ const handleConfirmBulkActivate = useCallback(() => {
           <Route
             exact={true}
             path={[
-              '/dashboard/accounts/:custom_view_id/custom_view',
+              '/accounts/:custom_view_id/custom_view',
-              '/dashboard/accounts',
+              '/accounts',
             ]}
           >
             <AccountsViewsTabs onViewChanged={handleViewChanged} />
@@ -373,8 +373,8 @@ const handleConfirmBulkActivate = useCallback(() => {
         </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

@@ -33,14 +33,14 @@ function Invite({ requestInviteAccept, requestInviteMetaByToken }) {
   }, [shown]);
 
   const ValidationSchema = Yup.object().shape({
-    first_name: Yup.string().required(formatMessage({ id: 'required' })),
+    first_name: Yup.string().required().label(formatMessage({id:'first_name_'})),
-    last_name: Yup.string().required(formatMessage({ id: 'required' })),
+    last_name: Yup.string().required().label(formatMessage({id:'last_name_'})),
     phone_number: Yup.string()
       .matches()
-      .required(formatMessage({ id: 'required' })),
+      .required().label(formatMessage({id:''})),
     password: Yup.string()
-      .min(4, 'Password has to be longer than 4 characters!')
+      .min(4)
-      .required('Password is required!'),
+      .required().label(formatMessage({id:'password'}))
   });
 
   const inviteMeta = useAsync(() => {
@@ -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

@@ -1,6 +1,8 @@
 import React, { useMemo, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import * as Yup from 'yup';
+
+
 import { useFormik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import {
@@ -34,14 +36,15 @@ function Login({
   const [shown, setShown] = useState(false);
   const passwordRevealer = () => { setShown(!shown); };
 
+
   // Validation schema.
-  const loginValidationSchema =  Yup.object().shape({
+  const loginValidationSchema = Yup.object().shape({
     crediential: Yup.string()
-      .required(formatMessage({ id: 'required' }))
+      .required()
-      .email(formatMessage({ id: 'invalid_email_or_phone_numner' })),
+      .email().label(formatMessage({id:'email'})),
     password: Yup.string()
-      .required(formatMessage({ id: 'required' }))
+      .required()
-      .min(4),
+      .min(4).label(formatMessage({id:'password'}))
   });
 
   // Formik validation schema and submit handler.
@@ -63,13 +66,13 @@ function Login({
         crediential: values.crediential,
         password: values.password,
       }).then(() => {
-        history.go('/dashboard/homepage');
+        history.go('/homepage');
         setSubmitting(false);
       }).catch((errors) => {
         const toastBuilders = [];
         if (errors.find((e) => e.type === ERRORS_TYPES.INVALID_DETAILS)) {
           toastBuilders.push({
-            message: formatMessage({id:'email_and_password_entered_did_not_match'}),
+            message: formatMessage({ id: 'email_and_password_entered_did_not_match' }),
             intent: Intent.DANGER,
           });
         }
@@ -110,7 +113,7 @@ function Login({
           <FormGroup
             label={<T id={'email_or_phone_number'} />}
             intent={(errors.crediential && touched.crediential) && Intent.DANGER}
-            helperText={<ErrorMessage name={'crediential'} {...{errors, touched}} />}
+            helperText={<ErrorMessage name={'crediential'} {...{ errors, touched }} />}
             className={'form-group--crediential'}
           >
             <InputGroup
@@ -119,13 +122,13 @@ function Login({
               {...getFieldProps('crediential')}
             />
           </FormGroup>
-      
+
           <FormGroup
             label={<T id={'password'} />}
             labelInfo={passwordRevealerTmp}
             intent={(errors.password && touched.password) && Intent.DANGER}
-            helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
+            helperText={<ErrorMessage name={'password'} {...{ errors, touched }} />}
-            className={'form-group--password has-password-revealer'} 
+            className={'form-group--password has-password-revealer'}
           >
             <InputGroup
               large={true}
@@ -134,12 +137,12 @@ function Login({
               {...getFieldProps('password')}
             />
           </FormGroup>
-        
+
           <div className={'login-form__checkbox-section'}>
             <Checkbox
               large={true}
               className={'checkbox--remember-me'}>
-                <T id={'keep_me_logged_in'} />
+              <T id={'keep_me_logged_in'} />
             </Checkbox>
           </div>
 
@@ -155,7 +158,7 @@ function Login({
             </Button>
           </div>
         </form>
-      
+
         <div class="authentication-page__footer-links">
           <Link to={'/auth/send_reset_password'}>
             <T id={'forget_my_password'} />

client/src/containers/Authentication/Register.js

@@ -10,6 +10,7 @@ import {
   FormGroup,
   Spinner,
 } from '@blueprintjs/core';
+
 import { Row, Col } from 'react-grid-system';
 import { Link, useHistory } from 'react-router-dom';
 import withAuthenticationActions from './withAuthenticationActions';
@@ -29,18 +30,19 @@ function Register({ requestRegister }) {
   }, [shown]);
 
   const ValidationSchema = Yup.object().shape({
-    organization_name: Yup.string().required(formatMessage({ id: 'required' })),
+    organization_name: Yup.string().required().label(formatMessage({id:'organization_name_'})),
-    first_name: Yup.string().required(formatMessage({ id: 'required' })),
+    first_name: Yup.string().required().label(formatMessage({id:'first_name_'})),
-    last_name: Yup.string().required(formatMessage({ id: 'required' })),
+    last_name: Yup.string().required().label(formatMessage({id:'last_name_'})),
     email: Yup.string()
       .email()
-      .required(formatMessage({ id: 'required' })),
+      .required()
+      .label(formatMessage({ id: 'email' })),
     phone_number: Yup.string()
       .matches()
-      .required(formatMessage({ id: 'required' })),
+      .required().label(formatMessage({id:'phone_number_'})),
     password: Yup.string()
-      .min(4, 'Password has to be longer than 8 characters!')
+      .min(4)
-      .required('Password is required!'),
+      .required().label(formatMessage({id:'password'})),
   });
 
   const initialValues = useMemo(

client/src/containers/Authentication/ResetPassword.js

@@ -17,18 +17,21 @@ import withAuthenticationActions from './withAuthenticationActions';
 import AuthInsider from 'containers/Authentication/AuthInsider';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
+
+
 function ResetPassword({ requestResetPassword }) {
   const { formatMessage } = useIntl();
   const { token } = useParams();
   const history = useHistory();
 
+  
   const ValidationSchema = Yup.object().shape({
     password: Yup.string()
-      .min(4, 'Password has to be longer than 4 characters!')
+      .min(4)
-      .required('Password is required!'),
+      .required().label(formatMessage({id:'password'})),
     confirm_password: Yup.string()
-      .oneOf([Yup.ref('password'), null], 'Passwords must match')
+      .oneOf([Yup.ref('password'), null])
-      .required('Confirm Password is required'),
+      .required().label(formatMessage({id:'confirm_password'})),
   });
 
   const initialValues = useMemo(

client/src/containers/Authentication/SendResetPassword.js

@@ -4,7 +4,6 @@ import { useFormik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
-import { FormattedMessage } from 'react-intl';
 
 import { compose } from 'utils';
 
@@ -21,9 +20,9 @@ function SendResetPassword({ requestSendResetPassword }) {
 
   // Validation schema.
   const ValidationSchema = Yup.object().shape({
-    crediential: Yup.string('')
+    crediential: Yup.string()
-      .required(formatMessage({ id: 'required' }))
+      .required()
-      .email(formatMessage({ id: 'invalid_email_or_phone_numner' })),
+      .email().label(formatMessage({id:''})),
   });
 
   const initialValues = useMemo(
@@ -52,8 +51,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 +60,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

@@ -52,11 +52,11 @@ function AccountFormDialog({
 }) { 
   const { formatMessage } = useIntl();
   const accountFormValidationSchema = Yup.object().shape({
-    name: Yup.string().required(formatMessage({ id: 'required' })),
+    name: Yup.string().required().label(formatMessage({id:'account_name_'})),
     code: Yup.number(),
     account_type_id: Yup.string()
       .nullable()
-      .required(formatMessage({ id: 'required' })),
+      .required().label(formatMessage({id:'account_type_id'})),
     description: Yup.string().trim()
   });
 
@@ -375,7 +375,7 @@ function AccountFormDialog({
                   text={
                     selectedSubaccount
                       ? selectedSubaccount.name
-                      : 'Select Parent Account'
+                      : <T id={'select_parent_account'}/>
                   }
                 />
               </Select>

client/src/containers/Dialogs/CurrencyDialog.js

@@ -46,13 +46,11 @@ function CurrencyDialog({
 }) {
   const {formatMessage} = useIntl();
 
-  const ValidationSchema = Yup.object().shape({
+  const validationSchema = Yup.object().shape({
-    currency_name: Yup.string().required(
+    currency_name: Yup.string().required().label(formatMessage({id:'currency_name_'})),
-      formatMessage({ id: 'required' })
-    ),
     currency_code: Yup.string()
       .max(4)
-      .required(formatMessage({ id: 'required' })),
+      .required().label(formatMessage({id:'currency_code_'})),
   });
   const initialValues = useMemo(() => ({
     currency_name: '',
@@ -63,9 +61,9 @@ function CurrencyDialog({
     values, 
     errors,
     touched,
+    isSubmitting,
     setFieldValue,
     getFieldProps,
-    isSubmitting,
     handleSubmit,
     resetForm,
   } = useFormik({
@@ -74,13 +72,13 @@ function CurrencyDialog({
       ...(payload.action === 'edit' &&
         pick(currency, Object.keys(initialValues))),
     },
-    validationSchema: ValidationSchema,
+    validationSchema: validationSchema,
     onSubmit: (values, { setSubmitting }) => {
       if (payload.action === 'edit') {
         requestEditCurrency(currency.id, values).then((response) => {
           closeDialog(name);
           AppToaster.show({
-            message: 'the_currency_has_been_edited',
+            message: formatMessage({id:'the_currency_has_been_successfully_edited'}),
             intent: Intent.SUCCESS,
           });
           setSubmitting(false);
@@ -92,7 +90,7 @@ function CurrencyDialog({
         requestSubmitCurrencies(values).then((response) => {
           closeDialog(name);
           AppToaster.show({
-            message: 'the_currency_has_been_submit',
+            message: formatMessage({id:'the_currency_has_been_successfully_created'}),
             intent: Intent.SUCCESS,
           });
           setSubmitting(false);

client/src/containers/Dialogs/ExchangeRateDialog.js

@@ -49,9 +49,9 @@ function ExchangeRateDialog({
   const [selectedItems, setSelectedItems] = useState({});
 
   const validationSchema = Yup.object().shape({
-    exchange_rate: Yup.number().required(),
+    exchange_rate: Yup.number().required().label(formatMessage({id:'exchange_rate_'})),
-    currency_code: Yup.string().max(3).required(),
+    currency_code: Yup.string().max(3).required(formatMessage({id:'currency_code_'})),
-    date: Yup.date().required(),
+    date: Yup.date().required().label(formatMessage({id:'date'})),
   });
 
   const initialValues = useMemo(() => ({
@@ -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

@@ -37,12 +37,12 @@ function InviteUserDialog({
   }, false);
 
   const validationSchema = Yup.object().shape({
-    first_name: Yup.string().required(formatMessage({ id: 'required' })),
+    first_name: Yup.string().required().label(formatMessage({id:'first_name_'})),
-    last_name: Yup.string().required(formatMessage({ id: 'required' })),
+    last_name: Yup.string().required().label(formatMessage({id:'last_name_'})),
     email: Yup.string()
       .email()
-      .required(formatMessage({ id: 'required' })),
+      .required().label(formatMessage({id:'email'})),
-    phone_number: Yup.number().required(formatMessage({ id: 'required' })),
+    phone_number: Yup.number().required().label(formatMessage({id:'phone_number_'})),
   });
 
   const initialValues = useMemo(
@@ -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/ItemCategoryDialog.js

@@ -61,7 +61,7 @@ function ItemCategoryDialog({
     () => requestFetchItemCategories());
 
   const validationSchema = Yup.object().shape({
-    name: Yup.string().required(),
+    name: Yup.string().required().label(formatMessage({id:'category_name_'})),
     parent_category_id: Yup.string().nullable(),
     description: Yup.string().trim()
   });

client/src/containers/Dialogs/ItemFromDialog.js

@@ -30,7 +30,7 @@ function ItemFromDialog({
   const [state, setState] = useState({});
   const { formatMessage } = useIntl();
   const ValidationSchema = Yup.object().shape({
-    name: Yup.string().required(formatMessage({ id: 'required' })),
+    name: Yup.string().required().label(formatMessage({id:'category_name_'})),
     description: Yup.string().trim(),
   });
 
@@ -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/Dialogs/UserFormDialog.js

@@ -36,7 +36,7 @@ function UserFormDialog({
   }, false);
 
   const validationSchema = Yup.object().shape({
-    email: Yup.string().email().required(),
+    email: Yup.string().email().required().label(formatMessage({id:'email'})),
   });
 
   const initialValues = {

client/src/containers/ExchangeRates/ExchangeRate.js

@@ -68,7 +68,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({
@@ -36,6 +36,7 @@ function ExchangeRateActionsBar({
   onBulkDelete
 }) {
   const [filterCount, setFilterCount] = useState(0);
+const {formatMessage} =useIntl()
 
   const onClickNewExchangeRate = () => {
     openDialog('exchangeRate-form', {});
@@ -86,7 +87,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 withSettings from 'containers/Settings/withSettings';
 import withBalanceSheetActions from './withBalanceSheetActions';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
 
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 
 function BalanceSheet({
   // #withDashboard
@@ -24,14 +25,14 @@ function BalanceSheet({
 
   // #withBalanceSheetActions
   fetchBalanceSheet,
-  
+
   // #withBalanceSheetDetail
   balanceSheetLoading,
 
   // #withPreferences
   organizationSettings
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
   const [filter, setFilter] = useState({
     from_date: moment().startOf('year').format('YYYY-MM-DD'),
     to_date: moment().endOf('year').format('YYYY-MM-DD'),
@@ -52,7 +53,7 @@ function BalanceSheet({
   }, []);
 
   useEffect(() => {
-    changePageTitle('Balance Sheet');
+    changePageTitle(formatMessage({ id: 'balance_sheet' }));
   }, []);
 
   // Handle re-fetch balance sheet after filter change.

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js

@@ -15,6 +15,7 @@ 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({
@@ -33,7 +34,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 />
 
@@ -44,19 +45,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 { 
+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,13 +14,14 @@ 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,
@@ -32,8 +32,8 @@ export default function BalanceSheetHeader({
       to_date: moment(pageFilter.to_date).toDate(),
     },
     validationSchema: Yup.object().shape({
-      from_date: Yup.date().required(),
+      from_date: Yup.date().required().label(formatMessage({id:'from_data'})),
-      to_date: Yup.date().min(Yup.ref('from_date')).required(),
+      to_date: Yup.date().min(Yup.ref('from_date')).required().label(formatMessage({id:'to_date'})),
     }),
     onSubmit: (values, actions) => {
       onSubmitFilter(values);
@@ -50,18 +50,18 @@ export default function BalanceSheetHeader({
   // Handle submit filter submit button.
   const handleSubmitClick = useCallback(() => {
     formik.submitForm();
-  }, [formik]);  
+  }, [formik]);
 
   const filterAccountsOptions = useMemo(() => [
-    {key: '', name: 'Accounts with Zero Balance'},
+    { key: '', 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 }) => {
     return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
   }, []);
 
-  const infoIcon = useMemo(() => 
+  const infoIcon = useMemo(() =>
     (<Icon icon="info-circle" iconSize={12} />), []);
 
   const handleAccountingBasisChange = useCallback((value) => {
@@ -80,7 +80,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}>
 
@@ -95,8 +95,8 @@ export default function BalanceSheetHeader({
 
         <Col sm={3}>
           <RadiosAccountingBasis
-            selectedValue={formik.values.basis} 
+            selectedValue={formik.values.basis}
-            onChange={handleAccountingBasisChange} />          
+            onChange={handleAccountingBasisChange} />
         </Col>
 
         <Col sm={3}>
@@ -105,7 +105,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

@@ -30,6 +30,7 @@ function GeneralLedger({
   // #withSettings
   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'),
@@ -40,7 +41,7 @@ function GeneralLedger({
 
   // Change page title of the dashboard.
   useEffect(() => {
-    changePageTitle('General Ledger');
+    changePageTitle(formatMessage({id:'general_ledger'}));
   }, []);
 
   const fetchAccounts = useQuery(['accounts-list'],
@@ -74,7 +75,7 @@ function GeneralLedger({
     setRefetch(true);
   }, [setFilter]);
 
-  const handleFilterChanged = () => {};
+  const handleFilterChanged = () => { };
 
   return (
     <DashboardInsider>

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.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';
 
 /**
  * General ledger actions bar.
@@ -34,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 />
 
@@ -45,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

@@ -5,6 +5,7 @@ import {
   defaultExpanderReducer,
   compose
 } from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
@@ -31,9 +32,10 @@ function GeneralLedgerTable({
   generalLedgerTableRows,
   generalLedgerQuery,
 }) {
+  
   // 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:
@@ -59,32 +61,32 @@ function GeneralLedgerTable({
     const transaction = cell.row.original
 
     if (transaction.rowType === ROW_TYPE.ACCOUNT) {
-      return (!cell.row.isExpanded) ? 
+      return (!cell.row.isExpanded) ?
         (<Money amount={transaction.closing.amount} currency={"USD"} />) : '';
     }
     return (<Money amount={transaction.amount} currency={"USD"} />);
   }, []);
 
   const referenceLink = useCallback((row) => {
-    return (<a href="">{ row.referenceId }</a>);
+    return (<a href="">{row.referenceId}</a>);
   });
-
+  const { formatMessage } = useIntl();
   const columns = useMemo(() => [
     {
       // Build our expander column
       id: 'expander', // Make sure it has an ID
-      className: 'expander',      
+      className: 'expander',
       Header: ({
         getToggleAllRowsExpandedProps,
         isAllRowsExpanded
       }) => (
-        <span {...getToggleAllRowsExpandedProps()} className="toggle">
+          <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
@@ -110,37 +112,37 @@ 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',
     },
@@ -172,7 +174,7 @@ function GeneralLedgerTable({
         expanded={expandedRows}
         virtualizedRows={true}
         fixedItemSize={37}
-        fixedSizeHeight={1000}  />
+        fixedSizeHeight={1000} />
     </FinancialSheet>
   ); 
 }
@@ -201,4 +203,4 @@ export default compose(
     generalLedgerSheetLoading,
     generalLedgerQuery
   })),
-)(GeneralLedgerTable);
+)(GeneralLedgerTable);

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

@@ -1,8 +1,9 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { useQuery } from 'react-query';
-import {compose} from 'utils';
-
 import moment from 'moment';
+import { useIntl } from 'react-intl';
+
+import { compose } from 'utils';
 import JournalTable from './JournalTable';
 
 import JournalHeader from './JournalHeader';
@@ -15,6 +16,7 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import withJournalActions from './withJournalActions';
 
 
+
 function Journal({
   // #withJournalActions
   requestFetchJournalSheet,
@@ -30,10 +32,11 @@ function Journal({
     to_date: moment().endOf('year').format('YYYY-MM-DD'),
     basis: 'accural'
   });
+  const { formatMessage } = useIntl();
   const [refetch, setRefetch] = useState(false);
 
   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,5 +1,5 @@
-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,
@@ -17,7 +17,7 @@ export default function JournalHeader({
   pageFilter,
   onSubmitFilter,
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -38,18 +38,18 @@ export default function JournalHeader({
   const handleSubmitClick = useCallback(() => {
     formik.submitForm();
   }, [formik]);
-  
+
   return (
     <FinancialStatementHeader>
       <FinancialStatementDateRange formik={formik} />
-      
+
       <Row>
         <Col sm={3}>
           <Button
             type="submit"
             onClick={handleSubmitClick}
             className={'button--submit-filter'}>
-            { 'Run Report' }
+            <T id={'run_report'} />
           </Button>
         </Col>
       </Row>

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({
@@ -31,46 +32,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: {
@@ -26,8 +26,8 @@ export default function JournalHeader({
       to_date: moment(pageFilter.to_date).toDate()
     },
     validationSchema: Yup.object().shape({
-      from_date: Yup.date().required(),
+      from_date: Yup.date().required().label(formatMessage({id:'from_date'})),
-      to_date: Yup.date().min(Yup.ref('from_date')).required(),
+      to_date: Yup.date().min(Yup.ref('from_date')).required().label(formatMessage({id:'to_date'})),
     }),
     onSubmit: (values, actions) => {
       onSubmitFilter(values);
@@ -60,7 +60,7 @@ export default function JournalHeader({
 
         <Col sm={3}>
           <RadiosAccountingBasis
-            selectedValue={formik.values.basis} 
+            selectedValue={formik.values.basis}
             onChange={handleAccountingBasisChange} />
         </Col>
 
@@ -69,7 +69,7 @@ export default function JournalHeader({
             type="submit"
             onClick={handleSubmitClick}
             className={'button--submit-filter mt2'}>
-            { 'Run Report' }
+            <T id={'run_report'} />
           </Button>
         </Col>
       </Row>

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

@@ -1,21 +1,23 @@
 import React, { useEffect, useCallback, useState, useMemo } from 'react';
-import TrialBalanceSheetHeader from "./TrialBalanceSheetHeader";
-import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 import { useQuery } from 'react-query';
 import moment from 'moment';
-import {compose} from 'utils';
+import { useIntl } from 'react-intl';
-
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
+import TrialBalanceSheetHeader from "./TrialBalanceSheetHeader";
+import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 import TrialBalanceActionsBar from './TrialBalanceActionsBar';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
+import { compose } from 'utils';
+
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import withDashboard from 'containers/Dashboard/withDashboard';
 import withTrialBalanceActions from './withTrialBalanceActions';
 import withTrialBalance from './withTrialBalance';
 import withSettings from 'containers/Settings/withSettings';
 
 
+
 function TrialBalanceSheet({
   // #withDashboard
   changePageTitle,
@@ -36,6 +38,7 @@ function TrialBalanceSheet({
     none_zero: false,
   });
   const [refetch, setRefetch] = useState(false);
+  const { formatMessage } = useIntl();
 
   const fetchHook = useQuery(['trial-balance', filter],
     (key, query) => fetchTrialBalanceSheet(query),
@@ -48,7 +51,7 @@ function TrialBalanceSheet({
 
   // 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,11 +1,10 @@
-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 { 
+import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
-  Button,
+import { Button } from "@blueprintjs/core";
-} 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 FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
@@ -16,7 +15,7 @@ export default function TrialBalanceSheetHeader({
   pageFilter,
   onSubmitFilter,
 }) {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -25,8 +24,8 @@ export default function TrialBalanceSheetHeader({
       to_date: moment(pageFilter.to_date).toDate()
     },
     validationSchema: Yup.object().shape({
-      from_date: Yup.date().required(),
+      from_date: Yup.date().required().label(formatMessage({id:'from_date'})),
-      to_date: Yup.date().min(Yup.ref('from_date')).required(),
+      to_date: Yup.date().min(Yup.ref('from_date')).required().label(formatMessage({id:'to_date'})),
     }),
     onSubmit: (values, { setSubmitting }) => {
       onSubmitFilter(values);
@@ -49,7 +48,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

@@ -1,5 +1,7 @@
-import React, {useEffect, useState, useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import { connect } from 'react-redux';
+import { useIntl } from 'react-intl';
+
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
@@ -24,6 +26,9 @@ function TrialBalanceSheetTable({
   loading,
   companyName,
 }) {
+
+  const {formatMessage} =useIntl();
+
   const columns = useMemo(() => [
     {
       // Build our expander column
@@ -35,8 +40,7 @@ function TrialBalanceSheetTable({
       }) => (
         <span {...getToggleAllRowsExpandedProps()} className="toggle">
           {isAllRowsExpanded ?
-            (<span class="arrow-down" />) :
+            (<span class="arrow-down" />) : (<span class="arrow-right" />)
-            (<span class="arrow-right" />)
           }
         </span>
       ),
@@ -55,40 +59,37 @@ function TrialBalanceSheetTable({
               className: 'toggle',
             })}
           >
-            {row.isExpanded ?
+            {row.isExpanded ? (<span class="arrow-down" />) : (<span class="arrow-right" />) }
-              (<span class="arrow-down" />) :
-              (<span class="arrow-right" />)
-            }
           </span>
         ) : null,
       width: 20,
       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,21 +57,21 @@ 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'}) },
   ], []);
 
   const validationSchema = Yup.object().shape({
     active: Yup.boolean(),
-    name: Yup.string().required(),
+    name: Yup.string().required().label(formatMessage({id:'item_name_'})),
-    type: Yup.string().trim().required(),
+    type: Yup.string().trim().required().label(formatMessage({id:'item_type_'})),
     sku: Yup.string().trim(),
     cost_price: Yup.number(),
     sell_price: Yup.number(),
-    cost_account_id: Yup.number().required(),
+    cost_account_id: Yup.number().required().label(formatMessage({id:'cost_account_id'})),
-    sell_account_id: Yup.number().required(),
+    sell_account_id: Yup.number().required().label(formatMessage({id:'sell_account_id'})),
     inventory_account_id: Yup.number().when('type', {
       is: (value) => value === 'inventory',
       then: Yup.number().required(),
@@ -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,23 +38,26 @@ 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(() => {
     openDialog('item-form', {});
   }, [openDialog]);
@@ -71,7 +74,7 @@ const ItemsActionsBar = ({
           <Button
             className={classNames(Classes.MINIMAL, 'button--table-views')}
             icon={<Icon icon='table' />}
-            text={<T id={'table_views'}/>}
+            text={<T id={'table_views'} />}
             rightIcon={'caret-down'}
           />
         </Popover>
@@ -81,14 +84,14 @@ const ItemsActionsBar = ({
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='plus' />}
-          text={<T id={'new_item'}/>}
+          text={<T id={'new_item'} />}
           onClick={onClickNewItem}
         />
 
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='plus' />}
-          text={<T id={'new_category'}/>}
+          text={<T id={'new_category'} />}
           onClick={onClickNewCategory}
         />
 
@@ -99,7 +102,13 @@ const ItemsActionsBar = ({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`}
+            text={
+              filterCount <= 0 ? (
+                <T id={'filter'} />
+              ) : (
+                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
+              )
+            }
             icon={<Icon icon='filter' />}
           />
         </Popover>
@@ -109,19 +118,19 @@ const ItemsActionsBar = ({
             className={Classes.MINIMAL}
             intent={Intent.DANGER}
             icon={<Icon icon='trash' />}
-            text={<T id={'delete'}/>}
+            text={<T id={'delete'} />}
           />
         </If>
 
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='file-import' />}
-          text={<T id={'import'}/>}
+          text={<T id={'import'} />}
         />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='file-export' />}
-          text={<T id={'export'}/>}
+          text={<T id={'export'} />}
         />
       </NavbarGroup>
     </DashboardActionsBar>
@@ -135,5 +144,5 @@ export default compose(
   })),
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,
-  })),
+  }))
 )(ItemsActionsBar);

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({
@@ -32,7 +32,7 @@ function GeneralPreferences({
   requestSubmitOptions,
   requestFetchOptions,
 }) {
-  const intl = useIntl();
+  const {formatMessage} = useIntl();
   const [selectedItems, setSelectedItems] = useState({});
   const [timeZone, setTimeZone] = useState('');
 
@@ -65,16 +65,16 @@ function GeneralPreferences({
   ];
 
   const validationSchema = Yup.object().shape({
-    name: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    name: Yup.string().required().label(formatMessage({id:'organization_name_'})),
-    industry: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    industry: Yup.string().required().label(formatMessage({id:'organization_industry_'})),
-    location: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    location: Yup.string().required().label(formatMessage({id:'location'})),
     base_currency: Yup.string().required(
-      intl.formatMessage({ id: 'required' })
+      formatMessage({ id: 'required' })
     ),
-    fiscal_year: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    fiscal_year: Yup.string().required().label(formatMessage({id:'base_currency_'})),
-    language: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    language: Yup.string().required().label(formatMessage({id:'language'})),
-    // time_zone: Yup.object().required(intl.formatMessage({ id: 'required' })),
+    // time_zone: Yup.object().required()..label(formatMessage({id:''})),
-    date_format: Yup.date().required(intl.formatMessage({ id: 'required' })),
+    date_format: Yup.date().required().label(formatMessage({id:'date_format_'})),
   });
 
   const {
@@ -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

@@ -25,6 +25,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({
@@ -34,7 +35,7 @@ function UsersListPreferences({
 
   // #withUsers  
   usersList,
-  
+
   // #withUsersActions
   requestDeleteUser,
   requestInactiveUser,
@@ -45,14 +46,14 @@ function UsersListPreferences({
 }) {
   const [deleteUserState, setDeleteUserState] = useState(false);
   const [inactiveUserState, setInactiveUserState] = useState(false);
-
+  const { formatMessage } = useIntl()
-  const fetchUsers = useQuery('users-table', 
+  const fetchUsers = useQuery('users-table',
     () => requestFetchUsers());
 
   const onInactiveUser = (user) => {
     setInactiveUserState(user);
   };
-  
+
   // Handle cancel inactive user alert
   const handleCancelInactiveUser = useCallback(() => {
     setInactiveUserState(false);
@@ -62,7 +63,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]);
 
@@ -99,7 +100,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'}),
       });
     });
   };
@@ -107,11 +108,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>
     ),
     []
@@ -120,19 +121,19 @@ 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,
     },
@@ -140,8 +141,8 @@ function UsersListPreferences({
       id: 'active',
       Header: 'Status',
       accessor: (user) => user.active ?
-        <Tag intent={Intent.SUCCESS} minimal={true}>Active</Tag> :
+        <Tag intent={Intent.SUCCESS} minimal={true}><T id={'activate'} /></Tag> :
-        <Tag intent={Intent.WARNING} minimal={true}>Inactivate</Tag>,
+        <Tag intent={Intent.WARNING} minimal={true}><T id={'inactivate'} /></Tag>,
       width: 50,
       className: 'status',
     },
@@ -177,8 +178,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}
@@ -192,8 +193,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/index.js

@@ -6,7 +6,12 @@ import App from 'components/App';
 import * as serviceWorker from 'serviceWorker';
 import createStore from 'store/createStore';
 import AppProgress from 'components/NProgress/AppProgress';
+import { setLocale } from 'yup';
+import {locale} from 'lang/en/locale';
 
+
+
+setLocale(locale)
 ReactDOM.render(
   <Provider store={createStore}>
     <BrowserRouter>

client/src/lang/en/index.js

@@ -1,10 +1,10 @@
 export default {
   hello_world: 'Hello World',
-  email_or_phone_number: 'Email or phone number',
+  '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',
+  'required': 'Required',
   reset_password: 'Reset Password',
   the_user_has_been_suspended_from_admin: 'The user has been suspended from the administrator.',
   email_and_password_entered_did_not_match:
@@ -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',
@@ -74,7 +75,6 @@ export default {
   new_exchange_rate: 'New Exchange Rate',
   delete_exchange_rate: 'Delete Exchange Rate',
   exchange_rate: 'Exchange Rate',
-  currency_code: 'Currency Code',
   edit_invite: 'Edit invite',
   edit_category: 'Edit Category',
   delete_category: 'Delete Category',
@@ -118,7 +118,7 @@ export default {
   cancel: 'Cancel',
   move_to_trash: 'Move to Trash',
   save_new: 'Save & New',
-  journal_number: 'Journal number',
+  journal_number: 'Journal Number',
   credit_currency: 'Credit ({currency})',
   debit_currency: 'Debit ({currency})',
   note: 'Note',
@@ -137,6 +137,7 @@ export default {
   inactivate: 'Inactivate',
   activate: 'Activate',
   inactivate_account: 'Inactivate Account',
+  activate_account:'Activate Account',
   delete_account: 'Delete Account',
   code: 'Code',
   type: 'Type',
@@ -167,51 +168,162 @@ 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',
-  'the_journal_has_been_successfully_deleted': 'The journal #{number} has been successfully deleted.',
+  debit: 'Debit',
-  'the_journals_has_been_successfully_deleted': 'The journals {count} have been successfully deleted.',
+  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.`,
-  'credit': 'Credit',
+  the_item_has_been_successfully_deleted: 'The item has been successfully deleted.',
-  'debit': 'Debit',
+  the_item_category_has_been_successfully_created: 'The item category has been successfully created.',
-  '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_category_has_been_successfully_edited: 'The item category has been successfully edited.',
-  'the_item_has_been_successfully_deleted': 'The item has been successfully deleted.',
+  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_item_category_has_been_successfully_created': 'The item category has been successfully created.',
+  the_custom_view_has_been_successfully_deleted: 'The custom view has been successfully deleted.',
-  'the_item_category_has_been_successfully_edited': 'The item category has been successfully edited.',
+  teammate_invited_to_organization_account: 'Your teammate has been invited to the organization account.',
-  '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?',
+  select_account_type: 'Select account type',
-  'the_custom_view_has_been_successfully_deleted': 'The custom view has been successfully deleted.',
+  menu:'Menu',
-  'teammate_invited_to_organization_account': 'Your teammate has been invited to the organization account.',
+  graph:'Graph',
-  'select_account_type': 'Select account type',
+  map:'Map',
-  'the_item_category_has_been_successfully_deleted': 'The item category has been successfully deleted.',
+  table:'Table',
-  'once_delete_this_item_category_you_will_able_to_restore_it': 'Once you delete this item category, you won\'t be able to restore the item later. Are you sure you want to delete?',
+  nucleus:'Nucleus',
-  'once_delete_this_journal_category_you_will_able_to_restore_it': 'Once you delete this journal, you won\'t be able to restore the item later. Are you sure you want to delete?',
+  logout:'Logout',
-  'all': 'All',
+  the_expense_has_been_successfully_created: 'The expense has been successfully created.',
-  'once_delete_these_journalss_you_will_not_able_restore_them': 'Once you delete these journals, you won\'t be able to retrieve them later. Are you sure you want to delete them?',
+  select_payment_account:'Select Payment Account',
-  'journal_number_is_already_used': 'Journal number is already used.',
+  select_expense_account:'Select Expense Account',
-  
+  and:'And',
-  the_item_categories_has_been_successfully_deleted:'The item categories has been successfully deleted',
+  or:'OR',
-  once_delete_these_item_categories_you_will_not_able_restore_them:'Once you delete these item categories, you won\'t be able to retrieve them later. Are you sure you want to delete them?',
+  select_a_comparator:'Select a comparator',
-  once_delete_this_exchange_rate_you_will_able_to_restore_it: `Once you delete this exchange rate, you won\'t be able to restore it later. Are you sure you want to delete?`,
+  equals:'Equals',
-  once_delete_these_exchange_rates_you_will_not_able_restore_them:'Once you delete these item categories, you won\'t be able to retrieve them later. Are you sure you want to delete them?',
+  not_equal:'Not Equal',
-  the_accounts_has_been_successfully_activated:'The Accounts has been Successfully activated',
+  contain:'Contain',
-  are_sure_to_activate_this_accounts: 'Are you sure you want to activate this accounts? You will be able to inactivate it later',
+  not_contain:'Not Contain',
-  are_sure_to_inactive_this_accounts: 'Are you sure you want to inactive this accounts? You will be able to activate it later',
+  cash:'Cash',
-  the_accounts_has_been_successfully_inactivated: 'The accounts has been successfully inactivated.',
+  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...',
+  credit_and_debit_not_equal:'credit and debit not equal',
+  the_currency_has_been_successfully_edited:'The currency has been successfully edited',
+  the_currency_has_been_successfully_created:'The currency has been successfully created',
 
+  // Name Labels
+  expense_account_id :'Expense account',
+  payment_account_id: 'Payment account',
+  currency_code_: 'Currency code',
+  publish:'Publish',
+  exchange_rate_:'Exchange rate',
+  journal_number_:'Journal number',
+  first_name_: 'First name',
+  last_name_:'Last name',
+  phone_number_:'Phone number',
+  organization_name_:'Organization name',
+  confirm_password:'Confirm password',
+  crediential:'Email or Phone number',
+  account_type_id:'Account type',
+  account_name_:'Account name',
+  currency_name_:'Currency name',
+  cost_account_id:'Cost account',
+  sell_account_id:'Sell account',
+  item_type_:'Item type',
+  item_name_:'Item name',
+  organization_industry_:'Organization industry',
+  base_currency_:'Base currency',
+  date_format_:'Date format',
+  view_name_:'View name'
 };
+
+
+

client/src/lang/en/locale.js

@@ -0,0 +1,60 @@
+import printValue from '../printValue';
+export const locale = {
+
+  mixed: {
+    default: "${path} is invalid",
+    required: "${path} is a required field ",
+    oneOf: "${path} must be one of the following values: ${values}",
+    notOneOf: "${path} must not be one of the following values: ${values}",
+    notType: ({ path, type, value, originalValue }) => {
+      let isCast = originalValue != null && originalValue !== value;
+      let msg =
+        `${path} must beeeeee a \`${type}\` type, ` +
+        `but the final value was: \`${printValue(value, true)}\`` +
+        (isCast
+          ? ` (cast from the value \`${printValue(originalValue, true)}\`).`
+          : '.');
+  
+      if (value === null) {
+        msg += `\n If "null" is intended as an empty value be sure to mark the schema as \`.nullable()\``;
+      }
+  
+      return msg;
+    },
+    defined: '${path} must be defined',
+  },
+  string: {
+    length: "${path} must be exactly ${length} characters",
+    min: "${path} must be at least ${min} characters",
+    max: "${path} must be at most ${max} characters",
+    matches: '${path} must match the following: "${regex}"',
+    email: "${path} must be a valid email",
+    url: "${path} must be a valid URL",
+    trim: "${path} must be a trimmed string",
+    lowercase: "${path} must be a lowercase string",
+    uppercase: "${path} must be a upper case string"
+  },
+  number: {
+    min: "${path} must be greater than or equal to ${min}",
+    max: "${path} must be less than or equal to ${max}",
+    lessThan: "${path} must be less than ${less}",
+    moreThan: "${path} must be greater than ${more}",
+    notEqual: "${path} must be not equal to ${notEqual}",
+    positive: "${path} must be a positive number",
+    negative: "${path} must be a negative number",
+    integer: "${path} must be an integer"
+  },
+  date: {
+    min: "${path} field must be later than ${min}",
+    max: "${path} field must be at earlier than ${max}"
+  },
+  boolean : {},
+  object: {
+    noUnknown:
+      "${path} field cannot have keys not specified in the object shape"
+  },
+  array: {
+    min: "${path} field must have at least ${min} items",
+    max: "${path} field must have less than or equal to ${max} items"
+  }
+};

client/src/lang/printValue.js

@@ -0,0 +1,48 @@
+const toString = Object.prototype.toString;
+const errorToString = Error.prototype.toString;
+const regExpToString = RegExp.prototype.toString;
+const symbolToString =
+  typeof Symbol !== 'undefined' ? Symbol.prototype.toString : () => '';
+const SYMBOL_REGEXP = /^Symbol\((.*)\)(.*)$/;
+
+function printNumber(val) {
+  if (val != +val) return 'NaN';
+  const isNegativeZero = val === 0 && 1 / val < 0;
+  return isNegativeZero ? '-0' : '' + val;
+}
+
+function printSimpleValue(val, quoteStrings = false) {
+  if (val == null || val === true || val === false) return '' + val;
+
+  const typeOf = typeof val;
+  if (typeOf === 'number') return printNumber(val);
+  if (typeOf === 'string') return quoteStrings ? `"${val}"` : val;
+  if (typeOf === 'function')
+    return '[Function ' + (val.name || 'anonymous') + ']';
+  if (typeOf === 'symbol')
+    return symbolToString.call(val).replace(SYMBOL_REGEXP, 'Symbol($1)');
+
+  const tag = toString.call(val).slice(8, -1);
+  if (tag === 'Date')
+    return isNaN(val.getTime()) ? '' + val : val.toISOString(val);
+  if (tag === 'Error' || val instanceof Error)
+    return '[' + errorToString.call(val) + ']';
+  if (tag === 'RegExp') return regExpToString.call(val);
+
+  return null;
+}
+
+export default function printValue(value, quoteStrings) {
+  let result = printSimpleValue(value, quoteStrings);
+  if (result !== null) return result;
+
+  return JSON.stringify(
+    value,
+    function(key, value) {
+      let result = printSimpleValue(this[key], quoteStrings);
+      if (result !== null) return result;
+      return value;
+    },
+    2,
+  );
+}

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