Merge remote-tracking branch 'origin/feature/i18n-arabic' into feature/i18n-arabic

2026-02-17 21:30:31 +00:00 · 2021-06-07 18:58:56 +02:00
parent d520e016f2 536c4a32fb
commit f6bdd20210
33 changed files with 421 additions and 240 deletions
--- a/client/src/components/ContactsSuggestField.js
+++ b/client/src/components/ContactsSuggestField.js
@@ -5,12 +5,13 @@ import { Suggest } from '@blueprintjs/select';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
+import { formatMessage } from 'services/intl';

 export default function ContactsSuggestField({
  contactsList,
  initialContactId,
  selectedContactId,
-  defaultTextSelect = 'Select contact',
+  defaultTextSelect = formatMessage({id:'select_contact'}),
  onContactSelected,

  selectedContactType = [],
--- a/client/src/components/DataTable.js
+++ b/client/src/components/DataTable.js
@@ -10,6 +10,7 @@ import {
  useAsyncDebounce,
 } from 'react-table';
 import { useSticky } from 'react-table-sticky';
+import { formatMessage } from 'services/intl';

 import { useUpdateEffect } from 'hooks';
 import { saveInvoke } from 'utils';
@@ -52,7 +53,7 @@ export default function DataTable(props) {
    payload,
    expandable = false,
    noInitialFetch = false,
-    
+
    pagesCount: controlledPageCount,

    // Pagination props.
@@ -122,7 +123,7 @@ export default function DataTable(props) {
      autoResetFilters,
      autoResetRowState,

-      ...restProps
+      ...restProps,
    },
    useSortBy,
    useExpanded,
@@ -181,7 +182,6 @@ export default function DataTable(props) {
  );
 }

-
 DataTable.defaultProps = {
  pagination: false,
  spinnerProps: { size: 30 },
@@ -209,6 +209,6 @@ DataTable.defaultProps = {
  TablePaginationRenderer: TablePagination,
  TableNoResultsRowRenderer: TableNoResultsRow,

-  noResults: 'There is no results in the table.',
+  noResults: formatMessage({ id: 'there_is_no_results_in_the_table' }),
  payload: {},
-};
+};
--- a/client/src/components/Preferences/PreferencesSidebar.js
+++ b/client/src/components/Preferences/PreferencesSidebar.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import { useHistory, useLocation } from 'react-router-dom';
+import { FormattedMessage as T } from 'react-intl';
 import preferencesMenu from 'config/preferencesMenu';
 import PreferencesSidebarContainer from './PreferencesSidebarContainer';

@@ -32,7 +33,7 @@ export default function PreferencesSidebar() {
  return (
    <PreferencesSidebarContainer>
      <div class="preferences-sidebar__head">
-        <h2>Preferences</h2>
+        <h2>{<T id={'preferences'} />}</h2>
      </div>

      <Menu className="preferences-sidebar__menu">{items}</Menu>
--- a/client/src/config/financialReportsMenu.js
+++ b/client/src/config/financialReportsMenu.js
@@ -1,45 +1,56 @@
+import React from 'react';
+import { FormattedMessage as T } from 'react-intl';
+
 export const financialReportMenus = [
  {
-    sectionTitle: 'Financial Accounting',
+    sectionTitle: <T id={'financial_accounting'} />,
    reports: [
      {
-        title: 'Balance Sheet Report',
-        desc: "Reports a company's assets, liabilities and shareholders' equity at a specific point in time with comparison period(s).",
+        title: <T id={'balance_sheet_report'} />,
+        desc: (
+          <T id={'reports_a_company_s_assets_liabilities_and_shareholders'} />
+        ),
        link: '/financial-reports/balance-sheet',
      },
      {
-        title: 'Trial Balance Sheet',
-        desc: 'Summarizes the credit and debit balance of each account in your chart of accounts at a specific point in time.',
+        title: <T id={'trial_balance_sheet'} />,
+        desc: (
+          <T id={'summarizes_the_credit_and_debit_balance_of_each_account'} />
+        ),
        link: '/financial-reports/trial-balance-sheet',
      },
      {
-        title: 'Profit/Loss Report',
-        desc: 'Reports the revenues, costs and expenses incurred during a specific point in time with comparison period(s).',
+        title: <T id={'profit_loss_report'} />,
+        desc: <T id={'reports_the_revenues_costs_and_expenses'} />,
        link: '/financial-reports/profit-loss-sheet',
      },
      {
-        title: 'Cash Flow Statement',
-        desc: 'Reports inflow and outflow of cash and cash equivalents between a specific two points of time.',
+        title: <T id={'cash_flow_statement'} />,
+        desc: (
+          <T id={'reports_inflow_and_outflow_of_cash_and_cash_equivalents'} />
+        ),
        link: '/financial-reports/cash-flow',
      },
      {
-        title: 'Journal Report',
-        desc: 'The debit and credit entries of system transactions, sorted by date.',
+        title: <T id={'journal_report'} />,
+        desc: <T id={'the_debit_and_credit_entries_of_system_transactions'} />,
        link: '/financial-reports/journal-sheet',
      },
      {
-        title: 'General Ledger Report',
-        desc: 'Reports every transaction going in and out of your accounts and organized by accounts and date to monitoring activity of accounts.',
+        title: <T id={'general_ledger_report'} />,
+        desc: <T id={'reports_every_transaction_going_in_and_out_of_your'} />,
        link: '/financial-reports/general-ledger',
      },
      {
-        title: 'Receivable Aging Summary',
-        desc: 'Summarize total unpaid balances of customers invoices with number of days the unpaid invoice is overdue.',
+        title: <T id={'receivable_aging_summary'} />,
+        desc: (
+          <T id={'summarize_total_unpaid_balances_of_customers_invoices'} />
+        ),
        link: '/financial-reports/receivable-aging-summary',
      },
      {
-        title: 'Payable Aging Summary',
-        desc: 'Summarize total unpaid balances of vendors purchase invoices with the number of days the unpaid invoice is overdue.',
+        title: <T id={'payable_aging_summary'} />,
+        desc: <T id={'summarize_total_unpaid_balances_of_vendors_purchase'} />,
        link: '/financial-reports/payable-aging-summary',
      },
    ],
@@ -48,46 +59,82 @@ export const financialReportMenus = [

 export const SalesAndPurchasesReportMenus = [
  {
-    sectionTitle: 'Sales/Purchases Reports',
+    sectionTitle: <T id={'sales_purchases_reports'} />,
    reports: [
      {
-        title: 'Purchases By Items',
-        desc: 'Shows the average age of unresolved issues for a project or filter. This helps you see whether your backlog is being kept up to date.',
+        title: <T id={'purchases_by_items'} />,
+        desc: (
+          <T
+            id={
+              'shows_the_average_age_of_unresolved_issues_for_a_project_or_filter'
+            }
+          />
+        ),
        link: '/financial-reports/purchases-by-items',
      },
      {
-        title: 'Sales By Items',
-        desc: 'Summarize the business’s sold items quantity, income and average income rate of each item during a specific point in time.',
+        title: <T id={'sales_by_items'} />,
+        desc: (
+          <T
+            id={
+              'summarize_the_business_s_sold_items_quantity_income_and_average_income_rate'
+            }
+          />
+        ),
        link: '/financial-reports/sales-by-items',
      },
      {
-        title: 'Inventory valuation',
-        desc: 'Summarize the business’s purchase items quantity, cost and average cost rate of each item during a specific point in time.',
+        title: <T id={'inventory_valuation'} />,
+        desc: (
+          <T
+            id={
+              'summarize_the_business_s_purchase_items_quantity_cost_and_average'
+            }
+          />
+        ),
        link: '/financial-reports/inventory-valuation',
      },
      {
-        title: 'Customers Balance summary',
-        desc: 'Summerize the total amount of each customer owes your business.',
+        title: <T id={'customers_balance_summary'} />,
+        desc: (
+          <T
+            id={
+              'summerize_the_total_amount_of_each_customer_owes_your_business'
+            }
+          />
+        ),
        link: '/financial-reports/customers-balance-summary',
      },
      {
-        title: 'Vendors Balance summary',
-        desc: 'Summerize the total amount your business owes each vendor.',
+        title: <T id={'vendors_balance_summary'} />,
+        desc: 'summerize_the_total_amount_your_business_owes_each_vendor',
        link: '/financial-reports/vendors-balance-summary',
      },
      {
-        title: 'Customers Transactions',
-        desc: 'Reports every transaction going in and out of each customer.',
+        title: <T id={'customers_transactions'} />,
+        desc: (
+          <T
+            id={'reports_every_transaction_going_in_and_out_of_each_customer'}
+          />
+        ),
        link: '/financial-reports/transactions-by-customers',
      },
      {
-        title: 'Vendors Transactions',
-        desc: 'Reports every transaction going in and out of each vendor/supplier.',
+        title: <T id={'vendors_transactions'} />,
+        desc: (
+          <T
+            id={
+              'reports_every_transaction_going_in_and_out_of_each_vendor_supplier'
+            }
+          />
+        ),
        link: '/financial-reports/transactions-by-vendors',
      },
      {
-        title: 'Inventory Item details',
-        desc: 'Reports every transaction going in and out of your items to monitoring activity of items.',
+        title: <T id={'inventory_item_details'} />,
+        desc: (
+          <T id={'reports_every_transaction_going_in_and_out_of_your_items'} />
+        ),
        link: '/financial-reports/inventory-item-details',
      },
    ],
--- a/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
+++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
@@ -42,9 +42,7 @@ function ManualJournalActionsBar({
  };

  // Handle delete button click.
-  const handleBulkDelete = () => {
-
-  };
+  const handleBulkDelete = () => {};

  // Handle tab change.
  const handleTabChange = (customView) => {
@@ -77,7 +75,7 @@ function ManualJournalActionsBar({
            className={classNames(Classes.MINIMAL, 'button--filter', {
              'has-active-filters': false,
            })}
-            text="Filter"
+            text={<T id={'filter'} />}
            icon={<Icon icon="filter-16" iconSize={16} />}
          />
        </Popover>
--- a/client/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js
+++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js
@@ -2,17 +2,17 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'react-intl';

 export default function ManualJournalsEmptyStatus() {
  const history = useHistory();

  return (
    <EmptyStatus
-      title={'Create your first journal entries on accounts chart.'}
+      title={<T id={'create_your_first_journal_entries_on_accounts_chart'} />}
      description={
        <p>
-          It is a long established fact that a reader will be distracted by the
-          readable content of a page when looking at its layout.
+          <T id={'it_is_a_long_established_fact_that_a_reader'} />
        </p>
      }
      action={
@@ -24,11 +24,11 @@ export default function ManualJournalsEmptyStatus() {
              history.push('/make-journal-entry');
            }}
          >
-            Make journal
+            <T id={'make_journal'} />
          </Button>

          <Button intent={Intent.NONE} large={true}>
-            Learn more
+            <T id={'learn_more'} />
          </Button>
        </>
      }
--- a/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.js
+++ b/client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.js
@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
 import { CLASSES } from 'common/classes';
+import { FormattedMessage as T } from 'react-intl';
 import MakeJournalEntriesHeaderFields from './MakeJournalEntriesHeaderFields';
 import { PageFormBigNumber } from 'components';
 import { safeSumBy } from 'utils';
@@ -20,7 +21,7 @@ export default function MakeJournalEntriesHeader() {
      <MakeJournalEntriesHeaderFields />

      <PageFormBigNumber
-        label={'Due Amount'}
+        label={<T id={'due_amount'} />}
        amount={total}
        currencyCode={currency_code}
      />
--- a/client/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.js
+++ b/client/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.js
@@ -11,7 +11,7 @@ import { inputIntent } from 'utils';
 export default function MakeJournalFormFooter() {
  return (
    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={'Journal details'} defaultOpen={false}>
+      <Postbox title={<T id={'journal_details'} />} defaultOpen={false}>
        <Row>
          <Col md={8}>
            <FastField name={'description'}>
@@ -34,7 +34,7 @@ export default function MakeJournalFormFooter() {
              initialFiles={[]}
              // onDrop={handleDropFiles}
              // onDeleteFile={handleDeleteFile}
-              hint={'Attachments: Maxiumum size: 20MB'}
+              hint={<T id={'attachments_maximum'} />}
            />
          </Col>
        </Row>
--- a/client/src/containers/Accounting/MakeJournal/components.js
+++ b/client/src/containers/Accounting/MakeJournal/components.js
@@ -44,7 +44,11 @@ export function DebitHeaderCell({ payload: { currencyCode } }) {
 * Account footer cell.
 */
 function AccountFooterCell({ payload: { currencyCode } }) {
-  return <span>{`Total ${currencyCode} `}</span>;
+  return (
+    <span>
+      {formatMessage({ id: 'total_currency' }, { currency: currencyCode })}
+    </span>
+  );
 }

 /**
--- a/client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherForm.js
+++ b/client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherForm.js
@@ -10,7 +10,6 @@ import { useAutofocus } from 'hooks';

 import withDialogActions from 'containers/Dialog/withDialogActions';

-
 /**
 * Payment via license form.
 */
@@ -31,7 +30,9 @@ function PaymentViaLicenseForm({
  return (
    <Form>
      <div className={CLASSES.DIALOG_BODY}>
-        <p>Please enter your preferred payment method below.</p>
+        <p>
+          <T id={'please_enter_your_preferred_payment_method_below'} />
+        </p>

        <FastField name="license_code">
          {({ field, meta: { error, touched } }) => (
@@ -72,6 +73,4 @@ function PaymentViaLicenseForm({
  );
 }

-export default compose(
-  withDialogActions
-)(PaymentViaLicenseForm);
+export default compose(withDialogActions)(PaymentViaLicenseForm);
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js
@@ -18,7 +18,9 @@ export default function AccountDrawerHeader({
  return (
    <div className={'account-drawer__content'}>
      <div>
-        <span>Closing Balance</span>
+        <span>
+          <T id={'closing_balance'} />
+        </span>
        <p className={'balance'}>
          {<Money amount={amount} currency={currency_code} />}
        </p>
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js
@@ -11,13 +11,11 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 /**
 * account drawer table.
 */
-function AccountDrawerTable({
-  closeDrawer
-}) {
+function AccountDrawerTable({ closeDrawer }) {
  const {
    account: { currency_code },
    accounts,
-    drawerName
+    drawerName,
  } = useAccountDrawerContext();

  const columns = React.useMemo(
@@ -69,14 +67,15 @@ function AccountDrawerTable({
      <DataTable columns={columns} data={accounts} />

      <div class="account-drawer__table-footer">
-        <Link to={`/financial-reports/general-ledger`} onClick={handleLinkClick}>
-          ← View more transactions.
+        <Link
+          to={`/financial-reports/general-ledger`}
+          onClick={handleLinkClick}
+        >
+          ←{formatMessage({ id: 'view_more_transactions' })}
        </Link>
      </div>
    </div>
  );
 }

-export default compose(
-  withDrawerActions
-)(AccountDrawerTable);
+export default compose(withDrawerActions)(AccountDrawerTable);
--- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { If, Money } from 'components';
+import { FormattedMessage as T } from 'react-intl';

 export default function ExpenseDrawerFooter({
  expense: { total_amount, currency_code },
@@ -8,11 +9,11 @@ export default function ExpenseDrawerFooter({
    <div className="expense-drawer__content--footer">
      <div className="wrapper">
        <div>
-          <span>Sub Total</span>
+          <span><T id={'sub_total'}/></span>
          <p>{<Money amount={total_amount} currency={currency_code} />}</p>
        </div>
        <div>
-          <span>Total</span>
+          <span><T id={'total'}/></span>
          <p>{<Money amount={total_amount} currency={currency_code} />}</p>
        </div>
      </div>
--- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
@@ -12,12 +12,12 @@ export default function ExpenseDrawerTable({
  const columns = React.useMemo(
    () => [
      {
-        Header: formatMessage({ id: 'Expense account' }),
+        Header: formatMessage({ id: 'expense_account' }),
        accessor: 'expense_account.name',
        width: 110,
      },
      {
-        Header: formatMessage({ id: 'Amount' }),
+        Header: formatMessage({ id: 'amount' }),
        accessor: ({ amount }) => (
          <Money amount={amount} currency={currency_code} />
        ),
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormattedMessage as T } from 'react-intl';

 export default function ManualJournalDrawerFooter({
  manualJournal: { amount_formatted },
@@ -7,11 +8,15 @@ export default function ManualJournalDrawerFooter({
    <div className="journal-drawer__content--footer">
      <div className="wrapper">
        <div>
-          <span>Sub Total</span>
+          <span>
+            <T id={'sub_total'} />
+          </span>
          <p>{amount_formatted}</p>
        </div>
        <div>
-          <span>Total</span>
+          <span>
+            <T id={'total'} />
+          </span>
          <p>{amount_formatted}</p>
        </div>
      </div>
--- a/client/src/containers/Drawers/PaperTemplate/PaperTemplate.js
+++ b/client/src/containers/Drawers/PaperTemplate/PaperTemplate.js
@@ -3,18 +3,19 @@ import PaperTemplateHeader from './PaperTemplateHeader';
 import PaperTemplateTable from './PaperTemplateTable';
 import PaperTemplateFooter from './PaperTemplateFooter';
 import { updateItemsEntriesTotal } from 'containers/Entries/utils';
+import { formatMessage } from 'services/intl';

 import 'style/components/Drawer/DrawerTemplate.scss';

 function PaperTemplate({ labels: propLabels, paperData, entries }) {
  const labels = {
-    name: 'Estimate',
-    billedTo: 'Billed to',
-    date: 'Estimate date',
-    refNo: 'Estimate No.',
-    billedFrom: 'Billed from',
-    amount: 'Estimate amount',
-    dueDate: 'Due date',
+    name: formatMessage({ id: 'estimate_' }),
+    billedTo: formatMessage({ id: 'billed_to' }),
+    date: formatMessage({ id: 'estimate_date' }),
+    refNo: formatMessage({ id: 'estimate_no' }),
+    billedFrom: formatMessage({ id: 'billed_from' }),
+    amount: formatMessage({ id: 'estimate_amount' }),
+    dueDate: formatMessage({ id: 'due_date_' }),
    ...propLabels,
  };

--- a/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js
+++ b/client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js
@@ -19,7 +19,7 @@ export default function DrawerTemplateTable({ tableData, currencyCode }) {
        width: 80,
      },
      {
-        Header: formatMessage({ id: 'Qty' }),
+        Header: formatMessage({ id: 'qty' }),
        accessor: 'quantity',
        disableSortBy: true,
        width: 50,
--- a/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js
+++ b/client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PaymentPaperTemplateHeader from './PaymentPaperTemplateHeader';
 import PaymentPaperTemplateTable from './PaymentPaperTemplateTable';
+import { formatMessage } from 'services/intl';

 import 'style/components/Drawer/DrawerTemplate.scss';

@@ -9,14 +10,14 @@ export default function PaymentPaperTemplate({
  paperData,
 }) {
  const labels = {
-    name: 'Payment receive',
-    billedTo: 'Billed to',
-    date: 'Payment date',
-    refNo: 'Payment No.',
-    billedFrom: 'Billed from',
-    referenceNo: 'Reference No',
-    amount: 'Amount received',
-    dueDate: 'Due date',
+    name: formatMessage({ id: 'payment_receive' }),
+    billedTo: formatMessage({ id: 'billed_to' }),
+    date: formatMessage({ id: 'payment_date_' }),
+    refNo: formatMessage({ id: 'payment_no' }),
+    billedFrom: formatMessage({ id: 'billed_from' }),
+    referenceNo: formatMessage({ id: 'reference_no' }),
+    amount: formatMessage({ id: 'amount_received' }),
+    dueDate: formatMessage({ id: 'due_date_' }),
    ...propLabels,
  };
  const defaultValues = {
--- a/client/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.js
+++ b/client/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.js
@@ -10,7 +10,7 @@ import { CLASSES } from 'common/classes';
 export default function ExpenseFormFooter() {
  return (
    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={'Expense details'} defaultOpen={false}>
+      <Postbox title={<T id={'expense_details'} />} defaultOpen={false}>
        <Row>
          <Col md={8}>
            <FastField name={'description'}>
@@ -31,7 +31,7 @@ export default function ExpenseFormFooter() {
              initialFiles={[]}
              // onDrop={handleDropFiles}
              // onDeleteFile={handleDeleteFile}
-              hint={'Attachments: Maxiumum size: 20MB'}
+              hint={<T id={'attachments_maximum'} />}
            />
          </Col>
        </Row>
--- a/client/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.js
+++ b/client/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.js
@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { sumBy } from 'lodash';
 import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'react-intl';

 import { CLASSES } from 'common/classes';

@@ -21,7 +22,7 @@ export default function ExpenseFormHeader() {
    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
      <ExpenseFormHeaderFields />
      <PageFormBigNumber
-        label={'Expense Amount'}
+        label={<T id={'expense_amount'}/>}
        amount={totalExpenseAmount}
        currencyCode={values?.currency_code}
      />
--- a/client/src/containers/Expenses/ExpenseForm/components.js
+++ b/client/src/containers/Expenses/ExpenseForm/components.js
@@ -60,7 +60,7 @@ function AmountFooterCell({ payload: { currencyCode }, rows }) {
 /**
 * Expense amount header cell.
 */
- export function ExpenseAmountHeaderCell({ payload: { currencyCode } }) {
+export function ExpenseAmountHeaderCell({ payload: { currencyCode } }) {
  return formatMessage({ id: 'amount_currency' }, { currency: currencyCode });
 }

@@ -68,14 +68,13 @@ function AmountFooterCell({ payload: { currencyCode }, rows }) {
 * Expense account footer cell.
 */
 function ExpenseAccountFooterCell() {
-  return 'Total';
+  return <T id={'total'} />;
 }

 /**
 * Retrieve expense form table entries columns.
 */
 export function useExpenseFormTableColumns() {
-
  return React.useMemo(
    () => [
      {
--- a/client/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
@@ -81,7 +81,7 @@ function ExpensesActionsBar({
            className={classNames(Classes.MINIMAL, 'button--filter', {
              'has-active-filters': filterCount > 0,
            })}
-            text="Filter"
+            text={<T id={'filter'}/>}
            icon={<Icon icon="filter-16" iconSize={16} />}
          />
        </Popover>
--- a/client/src/containers/Expenses/ExpensesLanding/ExpensesEmptyStatus.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpensesEmptyStatus.js
@@ -2,17 +2,17 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'react-intl';

 export default function InvoicesEmptyStatus() {
  const history = useHistory();

  return (
    <EmptyStatus
-      title={"Create and manage your organization's expenses"}
+      title={<T id={'create_and_manage_your_organization_s_expenses'} />}
      description={
        <p>
-          It is a long established fact that a reader will be distracted by the
-          readable content of a page when looking at its layout.
+          <T id={'it_is_a_long_established_fact_that_a_reader'} />
        </p>
      }
      action={
@@ -24,11 +24,11 @@ export default function InvoicesEmptyStatus() {
              history.push('/expenses/new');
            }}
          >
-            New expense
+            <T id={'new_expense'} />
          </Button>

          <Button intent={Intent.NONE} large={true}>
-            Learn more
+            <T id={'learn_more'} />
          </Button>
        </>
      }
--- a/client/src/containers/Preferences/Accountant/AccountantForm.js
+++ b/client/src/containers/Preferences/Accountant/AccountantForm.js
@@ -48,7 +48,11 @@ export default function AccountantForm() {
            <FormGroup inline={true}>
              <Checkbox
                inline={true}
-                label={'Make account code required when create a new accounts.'}
+                label={
+                  <T
+                    id={'make_account_code_required_when_create_a_new_accounts'}
+                  />
+                }
                name={'account_code_required'}
                {...field}
              />
@@ -62,7 +66,11 @@ export default function AccountantForm() {
              <Checkbox
                inline={true}
                label={
-                  'Should account code be unique when create a new account.'
+                  <T
+                    id={
+                      'should_account_code_be_unique_when_create_a_new_account'
+                    }
+                  />
                }
                name={'account_code_unique'}
                {...field}
@@ -115,7 +123,11 @@ export default function AccountantForm() {
              </strong>
            }
            helperText={
-              'Select a preferred account to deposit into it after customer make payment.'
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
+                }
+              />
            }
            labelInfo={<FieldRequiredHint />}
            intent={inputIntent({ error, touched })}
@@ -147,7 +159,11 @@ export default function AccountantForm() {
              </strong>
            }
            helperText={
-              'Select a preferred account to deposit into it after customer make payment.'
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
+                }
+              />
            }
            labelInfo={<FieldRequiredHint />}
            intent={inputIntent({ error, touched })}
@@ -178,7 +194,11 @@ export default function AccountantForm() {
              </strong>
            }
            helperText={
-              'Select a preferred account to deposit into it vendor advanced deposits.'
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
+                }
+              />
            }
            labelInfo={<FieldRequiredHint />}
            intent={inputIntent({ error, touched })}
--- a/client/src/containers/Preferences/Currencies/CurrenciesActions.js
+++ b/client/src/containers/Preferences/Currencies/CurrenciesActions.js
@@ -1,15 +1,11 @@
-import React, {useCallback} from 'react';
-import {
-  Button,
-  Intent,
-} from '@blueprintjs/core';
+import React, { useCallback } from 'react';
+import { Button, Intent } from '@blueprintjs/core';
 import Icon from 'components/Icon';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import {compose} from 'utils';
+import { compose } from 'utils';
+import { FormattedMessage as T } from 'react-intl';

-function CurrenciesActions({
-  openDialog,
-}) {
+function CurrenciesActions({ openDialog }) {
  const handleClickNewCurrency = useCallback(() => {
    openDialog('currency-form');
  }, [openDialog]);
@@ -17,15 +13,14 @@ function CurrenciesActions({
  return (
    <div class="users-actions">
      <Button
-        icon={<Icon icon='plus' iconSize={12} />}
+        icon={<Icon icon="plus" iconSize={12} />}
        onClick={handleClickNewCurrency}
-        intent={Intent.PRIMARY}>
-        New Currency
+        intent={Intent.PRIMARY}
+      >
+        <T id={'new_currency'} />
      </Button>
-    </div>    
+    </div>
  );
 }

-export default compose(
-  withDialogActions,
-)(CurrenciesActions);
+export default compose(withDialogActions)(CurrenciesActions);
--- a/client/src/containers/Preferences/General/GeneralForm.js
+++ b/client/src/containers/Preferences/General/GeneralForm.js
@@ -44,7 +44,7 @@ export default function PreferencesGeneralForm({}) {
            inline={true}
            intent={inputIntent({ error, touched })}
            className={'form-group--org-name'}
-            helperText={'Shown on sales forms and purchase orders.'}
+            helperText={<T id={'shown_on_sales_forms_and_purchase_orders'} />}
          >
            <InputGroup medium={'true'} {...field} />
          </FormGroup>
@@ -59,9 +59,7 @@ export default function PreferencesGeneralForm({}) {
            inline={true}
            intent={inputIntent({ error, touched })}
            className={classNames('form-group--select-list', CLASSES.FILL)}
-            helperText={
-              'For reporting, you can specify any month as the start of your financial year (also called your financial reporting year or accounting year).'
-            }
+            helperText={<T id={'for_reporting_you_can_specify_any_month'} />}
          >
            <DateInput
              {...momentFormatter('MMMM Do YYYY')}
@@ -125,7 +123,11 @@ export default function PreferencesGeneralForm({}) {
            inline={true}
            intent={inputIntent({ error, touched })}
            helperText={
-              "You can't change the base currency as there are transactions recorded in your organization."
+              <T
+                id={
+                  'you_can_t_change_the_base_currency_as_there_are_transactions'
+                }
+              />
            }
          >
            <ListSelect
--- a/client/src/containers/Preferences/Item/ItemForm.js
+++ b/client/src/containers/Preferences/Item/ItemForm.js
@@ -38,7 +38,11 @@ export default function ItemForm() {
              </strong>
            }
            helperText={
-              'Select a preferred account to deposit into it after customer make payment.'
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
+                }
+              />
            }
            labelInfo={<FieldRequiredHint />}
            intent={inputIntent({ error, touched })}
@@ -70,7 +74,11 @@ export default function ItemForm() {
              </strong>
            }
            helperText={
-              'Select a preferred account to deposit into it after customer make payment.'
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
+                }
+              />
            }
            labelInfo={<FieldRequiredHint />}
            intent={inputIntent({ error, touched })}
@@ -102,7 +110,11 @@ export default function ItemForm() {
              </strong>
            }
            helperText={
-              'Select a preferred account to deposit into it vendor advanced deposits.'
+              <T
+                id={
+                  'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
+                }
+              />
            }
            labelInfo={<FieldRequiredHint />}
            intent={inputIntent({ error, touched })}
--- a/client/src/containers/Preferences/Users/Users.js
+++ b/client/src/containers/Preferences/Users/Users.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
+import { formatMessage } from 'services/intl';
 import classNames from 'classnames';

-import 'style/pages/Preferences/Users.scss'
+import 'style/pages/Preferences/Users.scss';

 import { CLASSES } from 'common/classes';
 import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
@@ -16,15 +17,17 @@ function UsersPreferences({ openDialog }) {
  const onChangeTabs = (currentTabId) => {};

  return (
-    <div className={classNames(
-      CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
-      CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_USERS,
-    )}>
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_USERS,
+      )}
+    >
      <div className={classNames(CLASSES.CARD)}>
        <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
          <Tabs animate={true} onChange={onChangeTabs}>
-            <Tab id="users" title="Users" />
-            <Tab id="roles" title="Roles" />
+            <Tab id="users" title={formatMessage({ id: 'users' })} />
+            <Tab id="roles" title={formatMessage({ id: 'roles' })} />
          </Tabs>
        </div>
        <PreferencesSubContent preferenceTab="users" />
--- a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoicePaper.js
+++ b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoicePaper.js
@@ -1,19 +1,20 @@
 import React from 'react';
 import { useInvoiceDrawerContext } from './InvoiceDrawerProvider';
 import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
+import { formatMessage } from 'services/intl';

 export default function InvoicePaper() {
  const { invoice, entries } = useInvoiceDrawerContext();

  const propLabels = {
    labels: {
-      name: 'Invoice',
-      billedTo: 'Billed to',
-      date: 'Invoice date',
-      refNo: 'Invoice No.',
-      billedFrom: 'Billed from',
-      amount: 'Invoice amount',
-      dueDate: 'Due date',
+      name: formatMessage({ id: 'invoice' }),
+      billedTo: formatMessage({ id: 'billed_to' }),
+      date: formatMessage({ id: 'invoice_date_' }),
+      refNo: formatMessage({ id: 'invoice_no__' }),
+      billedFrom: formatMessage({ id: 'billed_from' }),
+      amount: formatMessage({ id: 'invoice_amount' }),
+      dueDate: formatMessage({ id: 'due_date_' }),
    },
  };

--- a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptPaper.js
+++ b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptPaper.js
@@ -1,19 +1,20 @@
 import React from 'react';
 import { useReceiptDrawerContext } from './ReceiptDrawerProvider';
 import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
+import { formatMessage } from 'services/intl';

 export default function ReceiptPaper() {
  const { receipt, entries } = useReceiptDrawerContext();

  const propLabels = {
    labels: {
-      name: 'Receipt',
-      billedTo: 'Billed to',
-      date: 'Receipt date',
-      refNo: 'Receipt No.',
-      billedFrom: 'Billed from',
-      amount: 'Receipt amount',
-      dueDate: 'Due date',
+      name: formatMessage({ id: 'receipt_' }),
+      billedTo: formatMessage({ id: 'billed_to' }),
+      date: formatMessage({ id: 'receipt_date_' }),
+      refNo: formatMessage({ id: 'receipt_no' }),
+      billedFrom: formatMessage({ id: 'billed_from' }),
+      amount: formatMessage({ id: 'receipt_amount' }),
+      dueDate: formatMessage({ id: 'due_date_' }),
    },
  };

--- a/client/src/containers/Subscriptions/LicenseTab.js
+++ b/client/src/containers/Subscriptions/LicenseTab.js
@@ -28,8 +28,12 @@ function LicenseTab({ openDialog }) {
        <T id={'cards_will_be_charged'} />
      </p>

-      <Button onClick={handleSubmitBtnClick} intent={Intent.PRIMARY} large={true}>
-        Submit Voucher
+      <Button
+        onClick={handleSubmitBtnClick}
+        intent={Intent.PRIMARY}
+        large={true}
+      >
+        <T id={'submit_voucher'} />
      </Button>
    </div>
  );
--- a/client/src/lang/en/index.json
+++ b/client/src/lang/en/index.json
@@ -939,12 +939,67 @@
  "there_is_no_payable_bills_for_this_vendor_that_can_be_applied_for_this_payment": "There is no payable bills for this vendor that can be applied for this payment",
  "please_select_a_vendor_to_display_all_open_bills_for_it": "Please select a vendor to display all open bills for it.",
  "payment_made_details": "Payment made details",
-  "there_is_no_inventory_adjustments_transactions_yet":"There is no inventory adjustments transactions yet.",
-  "create_and_manage_your_organization_s_customers":"Create and manage your organization's customers.",
-  "salutation":"Salutation", 
-   "work":"work",
-   "mobile":"Mobile",
-   "phone":"Phone",
-   "create_and_manage_your_organization_s_vendors":"Create and manage your organization's vendors."
-
+  "there_is_no_inventory_adjustments_transactions_yet": "There is no inventory adjustments transactions yet.",
+  "create_and_manage_your_organization_s_customers": "Create and manage your organization's customers.",
+  "salutation": "Salutation",
+  "work": "work",
+  "mobile": "Mobile",
+  "phone": "Phone",
+  "create_and_manage_your_organization_s_vendors": "Create and manage your organization's vendors.",
+  "balance_sheet_report": "Balance Sheet Report",
+  "reports_a_company_s_assets_liabilities_and_shareholders": "Reports a company's assets, liabilities and shareholders' equity at a specific point in time with comparison period(s).",
+  "summarizes_the_credit_and_debit_balance_of_each_account": "Summarizes the credit and debit balance of each account in your chart of accounts at a specific point in time.",
+  "profit_loss_report": "Profit/Loss Report",
+  "reports_the_revenues_costs_and_expenses": "Reports the revenues, costs and expenses incurred during a specific point in time with comparison period(s).",
+  "reports_inflow_and_outflow_of_cash_and_cash_equivalents": "Reports inflow and outflow of cash and cash equivalents between a specific two points of time.",
+  "journal_report": "Journal Report",
+  "the_debit_and_credit_entries_of_system_transactions": "The debit and credit entries of system transactions, sorted by date.",
+  "general_ledger_report": "General Ledger Report",
+  "reports_every_transaction_going_in_and_out_of_your": "Reports every transaction going in and out of your accounts and organized by accounts and date to monitoring activity of accounts.",
+  "summarize_total_unpaid_balances_of_customers_invoices": "Summarize total unpaid balances of customers invoices with number of days the unpaid invoice is overdue.",
+  "summarize_total_unpaid_balances_of_vendors_purchase": "Summarize total unpaid balances of vendors purchase invoices with the number of days the unpaid invoice is overdue.",
+  "sales_purchases_reports": "Sales/Purchases Reports",
+  "reports_every_transaction_going_in_and_out_of_your_items": "Reports every transaction going in and out of your items to monitoring activity of items.",
+  "reports_every_transaction_going_in_and_out_of_each_vendor_supplier": "Reports every transaction going in and out of each vendor/supplier.",
+  "reports_every_transaction_going_in_and_out_of_each_customer": "Reports every transaction going in and out of each customer.",
+  "summerize_the_total_amount_your_business_owes_each_vendor": "Summarize the total amount your business owes each vendor.",
+  "summerize_the_total_amount_of_each_customer_owes_your_business": "Summarize the total amount of each customer owes your business.",
+  "summarize_the_business_s_purchase_items_quantity_cost_and_average": "Summarize the business’s purchase items quantity, cost and average cost rate of each item during a specific point in time.",
+  "summarize_the_business_s_sold_items_quantity_income_and_average_income_rate": "Summarize the business’s sold items quantity, income and average income rate of each item during a specific point in time.",
+  "shows_the_average_age_of_unresolved_issues_for_a_project_or_filter": "Shows the average age of unresolved issues for a project or filter. This helps you see whether your backlog is being kept up to date",
+  "categories": "Categories",
+  "duplicate_item": "Duplicate item",
+  "summerize_your_transactions_for_each_inventory_item": "Summarize your transactions for each inventory item and how they affect quantity, valuation and weighted average.",
+  "summerize_how_much_each_customer_owes_your_business": "Summarize how much each customer owes your business.",
+  "duplicate_customer": "Duplicate customer",
+  "duplicate_vendor": "Duplicate vendor",
+  "new_billing": "New Billing",
+  "shown_on_sales_forms_and_purchase_orders": "Shown on sales forms and purchase orders.",
+  "for_reporting_you_can_specify_any_month": "For reporting, you can specify any month as the start of your financial year (also called your financial reporting year or accounting year).",
+  "you_can_t_change_the_base_currency_as_there_are_transactions": "You can't change the base currency as there are transactions recorded in your organization.",
+  "make_account_code_required_when_create_a_new_accounts": "Make account code required when create a new accounts.",
+  "should_account_code_be_unique_when_create_a_new_account": "Should account code be unique when create a new account.",
+  "select_a_preferred_account_to_deposit_into_it_after_customer_make_payment": "Select a preferred account to deposit into it after customer make payment.",
+  "select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits": "Select a preferred account to deposit into it vendor advanced deposits.",
+  "roles": "Roles",
+  "closing_balance": "Closing Balance",
+  "view_more_transactions": "View more transactions.",
+  "there_is_no_results_in_the_table": "There is no results in the table.",
+  "create_your_first_journal_entries_on_accounts_chart": "Create your first journal entries on accounts chart.",
+  "journal_details": "Journal details",
+  "create_and_manage_your_organization_s_expenses": "Create and manage your organization's expenses",
+  "expense_amount": "Expense Amount",
+  "expense_details": "Expense details",
+  "sub_total": "Sub Total",
+  "estimate_": "Estimate",
+  "billed_to": "Billed to",
+  "estimate_no": "Estimate No.",
+  "billed_from": "Billed from",
+  "estimate_amount": "Estimate amount",
+  "invoice": "Invoice",
+  "receipt_": "Receipt",
+  "receipt_no": "Receipt No.",
+  "receipt_amount": "Receipt amount",
+  "please_enter_your_preferred_payment_method_below": "Please enter your preferred payment method below.",
+  "submit_voucher": "Submit Voucher",
 }
--- a/client/src/routes/dashboard.js
+++ b/client/src/routes/dashboard.js
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import React, { lazy } from 'react';
 import { formatMessage } from 'services/intl';

 // const BASE_URL = '/dashboard';
@@ -8,9 +8,9 @@ export default [
  {
    path: `/accounts`,
    component: lazy(() => import('containers/Accounts/AccountsChart')),
-    breadcrumb: 'Accounts Chart',
+    breadcrumb: formatMessage({ id: 'accounts_chart' }),
    hotkey: 'shift+a',
-    pageTitle: 'Accounts Chart',
+    pageTitle: formatMessage({ id: 'accounts_chart' }),
  },
  // Custom views.
  // {
@@ -29,7 +29,7 @@ export default [
    component: lazy(() =>
      import('containers/Accounting/MakeJournal/MakeJournalEntriesPage'),
    ),
-    breadcrumb: 'Make Journal Entry',
+    breadcrumb: formatMessage({ id: 'make_journal_entry' }),
    hotkey: 'ctrl+shift+m',
    pageTitle: formatMessage({ id: 'new_journal' }),
    sidebarExpand: false,
@@ -40,7 +40,7 @@ export default [
    component: lazy(() =>
      import('containers/Accounting/MakeJournal/MakeJournalEntriesPage'),
    ),
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
    pageTitle: formatMessage({ id: 'edit_journal' }),
    sidebarExpand: false,
    backLink: true,
@@ -50,7 +50,7 @@ export default [
    component: lazy(() =>
      import('containers/Accounting/JournalsLanding/ManualJournalsList'),
    ),
-    breadcrumb: 'Manual Journals',
+    breadcrumb: formatMessage({ id: 'manual_journals' }),
    hotkey: 'shift+m',
    pageTitle: formatMessage({ id: 'manual_journals' }),
  },
@@ -59,7 +59,7 @@ export default [
    component: lazy(() =>
      import('containers/ItemsCategories/ItemCategoriesList'),
    ),
-    breadcrumb: 'Categories',
+    breadcrumb: formatMessage({ id: 'categories' }),
    pageTitle: formatMessage({ id: 'category_list' }),
  },
  // Items.
@@ -67,7 +67,7 @@ export default [
    path: `/items/:id/edit`,
    component: lazy(() => import('containers/Items/ItemFormPage')),
    name: 'item-edit',
-    breadcrumb: 'Edit Item',
+    breadcrumb: formatMessage({ id: 'edit_item' }),
    pageTitle: formatMessage({ id: 'edit_item' }),
    backLink: true,
  },
@@ -76,13 +76,13 @@ export default [
    component: lazy({
      loader: () => import('containers/Items/ItemFormPage'),
    }),
-    breadcrumb: 'Duplicate Item',
+    breadcrumb: formatMessage({ id: 'duplicate_item' }),
  },
  {
    path: `/items/new`,
    component: lazy(() => import('containers/Items/ItemFormPage')),
    name: 'item-new',
-    breadcrumb: 'New Item',
+    breadcrumb: formatMessage({ id: 'new_item' }),
    hotkey: 'ctrl+shift+w',
    pageTitle: formatMessage({ id: 'new_item' }),
    backLink: true,
@@ -90,7 +90,7 @@ export default [
  {
    path: `/items`,
    component: lazy(() => import('containers/Items/ItemsList')),
-    breadcrumb: 'Items',
+    breadcrumb: formatMessage({ id: 'items' }),
    hotkey: 'shift+w',
    pageTitle: formatMessage({ id: 'items_list' }),
  },
@@ -101,7 +101,7 @@ export default [
    component: lazy(() =>
      import('containers/InventoryAdjustments/InventoryAdjustmentList'),
    ),
-    breadcrumb: 'Inventory a adjustments',
+    breadcrumb: formatMessage({ id: 'inventory_adjustments' }),
    pageTitle: formatMessage({ id: 'inventory_adjustment_list' }),
  },

@@ -111,8 +111,10 @@ export default [
    component: lazy(() =>
      import('containers/FinancialStatements/GeneralLedger/GeneralLedger'),
    ),
-    breadcrumb: 'General Ledger',
-    hint: 'Reports every transaction going in and out of your accounts and organized by accounts and date to monitoring activity of accounts.',
+    breadcrumb: formatMessage({ id: 'general_ledger' }),
+    hint: formatMessage({
+      id: 'reports_every_transaction_going_in_and_out_of_your',
+    }),
    hotkey: 'shift+4',
    pageTitle: formatMessage({ id: 'general_ledger' }),
    backLink: true,
@@ -123,8 +125,10 @@ export default [
    component: lazy(() =>
      import('containers/FinancialStatements/BalanceSheet/BalanceSheet'),
    ),
-    breadcrumb: 'Balance Sheet',
-    hint: "Reports a company's assets, liabilities and shareholders' equity at a specific point in time with comparison period(s).",
+    breadcrumb: formatMessage({ id: 'balance_sheet' }),
+    hint: formatMessage({
+      id: 'reports_a_company_s_assets_liabilities_and_shareholders',
+    }),
    hotkey: 'shift+1',
    pageTitle: formatMessage({ id: 'balance_sheet' }),
    backLink: true,
@@ -137,8 +141,10 @@ export default [
        'containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet'
      ),
    ),
-    breadcrumb: 'Trial Balance Sheet',
-    hint: 'Summarizes the credit and debit balance of each account in your chart of accounts at a specific point in time. ',
+    breadcrumb: formatMessage({ id: 'trial_balance_sheet' }),
+    hint: formatMessage({
+      id: 'summarizes_the_credit_and_debit_balance_of_each_account',
+    }),
    hotkey: 'shift+5',
    pageTitle: formatMessage({ id: 'trial_balance_sheet' }),
    backLink: true,
@@ -149,8 +155,8 @@ export default [
    component: lazy(() =>
      import('containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet'),
    ),
-    breadcrumb: 'Profit Loss Sheet',
-    hint: 'Reports the revenues, costs and expenses incurred during a specific point in time with comparison period(s).',
+    breadcrumb: formatMessage({ id: 'profit_loss_sheet' }),
+    hint: formatMessage({ id: 'reports_the_revenues_costs_and_expenses' }),
    hotkey: 'shift+2',
    pageTitle: formatMessage({ id: 'profit_loss_sheet' }),
    backLink: true,
@@ -161,8 +167,10 @@ export default [
    component: lazy(() =>
      import('containers/FinancialStatements/ARAgingSummary/ARAgingSummary'),
    ),
-    breadcrumb: 'Receivable Aging Summary',
-    hint: 'Summarize total unpaid balances of customers invoices with number of days the unpaid invoice is overdue.',
+    breadcrumb: formatMessage({ id: 'receivable_aging_summary' }),
+    hint: formatMessage({
+      id: 'summarize_total_unpaid_balances_of_customers_invoices',
+    }),
    pageTitle: formatMessage({ id: 'receivable_aging_summary' }),
    backLink: true,
    sidebarExpand: false,
@@ -172,8 +180,10 @@ export default [
    component: lazy(() =>
      import('containers/FinancialStatements/APAgingSummary/APAgingSummary'),
    ),
-    breadcrumb: 'Payable Aging Summary',
-    hint: 'Summarize total unpaid balances of vendors purchase invoices with the number of days the unpaid invoice is overdue.',
+    breadcrumb: formatMessage({ id: 'payable_aging_summary' }),
+    hint: formatMessage({
+      id: 'summarize_total_unpaid_balances_of_vendors_purchase',
+    }),
    pageTitle: formatMessage({ id: 'payable_aging_summary' }),
    backLink: true,
    sidebarExpand: false,
@@ -183,8 +193,10 @@ export default [
    component: lazy(() =>
      import('containers/FinancialStatements/Journal/Journal'),
    ),
-    breadcrumb: 'Journal Sheet',
-    hint: 'The debit and credit entries of system transactions, sorted by date.',
+    breadcrumb: formatMessage({ id: 'journal_sheet' }),
+    hint: formatMessage({
+      id: 'the_debit_and_credit_entries_of_system_transactions',
+    }),
    hotkey: 'shift+3',
    pageTitle: formatMessage({ id: 'journal_sheet' }),
    sidebarExpand: false,
@@ -197,7 +209,7 @@ export default [
        'containers/FinancialStatements/PurchasesByItems/PurchasesByItems'
      ),
    ),
-    breadcrumb: 'Purchases by Items',
+    breadcrumb: formatMessage({ id: 'purchases_by_items' }),
    // hotkey: '',
    pageTitle: formatMessage({ id: 'purchases_by_items' }),
    backLink: true,
@@ -208,9 +220,11 @@ export default [
    component: lazy(() =>
      import('containers/FinancialStatements/SalesByItems/SalesByItems'),
    ),
-    breadcrumb: 'Sales by Items',
+    breadcrumb: formatMessage({ id: 'sales_by_items' }),
    pageTitle: formatMessage({ id: 'sales_by_items' }),
-    hint: 'Summarize the business’s sold items quantity, income and average income rate of each item during a specific point in time.',
+    hint: formatMessage({
+      id: 'summarize_the_business_s_sold_items_quantity_income_and_average_income_rate',
+    }),
    backLink: true,
    sidebarExpand: false,
  },
@@ -221,8 +235,10 @@ export default [
        'containers/FinancialStatements/InventoryValuation/InventoryValuation'
      ),
    ),
-    breadcrumb: 'Inventory Valuation ',
-    hint: 'Summerize your transactions for each inventory item and how they affect quantity, valuation and weighted average.',
+    breadcrumb: formatMessage({ id: 'inventory_valuation' }),
+    hint: formatMessage({
+      id: 'summerize_your_transactions_for_each_inventory_item',
+    }),
    pageTitle: formatMessage({ id: 'inventory_valuation' }),
    backLink: true,
    sidebarExpand: false,
@@ -234,8 +250,10 @@ export default [
        'containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary'
      ),
    ),
-    breadcrumb: 'Customers Balance Summary ',
-    hint: 'Summerize how much each customer owes your business.',
+    breadcrumb: formatMessage({ id: 'customers_balance_summary' }),
+    hint: formatMessage({
+      id: 'summerize_how_much_each_customer_owes_your_business',
+    }),
    pageTitle: formatMessage({ id: 'customers_balance_summary' }),
    backLink: true,
    sidebarExpand: false,
@@ -247,8 +265,10 @@ export default [
        'containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary'
      ),
    ),
-    breadcrumb: 'Vendors Balance Summary ',
-    hint: 'Summerize the total amount your business owes each vendor.',
+    breadcrumb: formatMessage({ id: 'vendors_balance_summary' }),
+    hint: formatMessage({
+      id: 'summerize_the_total_amount_your_business_owes_each_vendor',
+    }),
    pageTitle: formatMessage({ id: 'vendors_balance_summary' }),
    backLink: true,
    sidebarExpand: false,
@@ -260,8 +280,10 @@ export default [
        'containers/FinancialStatements/CustomersTransactions/CustomersTransactions'
      ),
    ),
-    breadcrumb: 'Customers Transactions ',
-    hint: 'Reports every transaction going in and out of each customer.',
+    breadcrumb: formatMessage({ id: 'customers_transactions' }),
+    hint: formatMessage({
+      id: 'reports_every_transaction_going_in_and_out_of_each_customer',
+    }),
    pageTitle: formatMessage({ id: 'customers_transactions' }),
    backLink: true,
    sidebarExpand: false,
@@ -273,8 +295,10 @@ export default [
        'containers/FinancialStatements/VendorsTransactions/VendorsTransactions'
      ),
    ),
-    breadcrumb: 'Vendors Transactions ',
-    hint: 'Reports every transaction going in and out of each vendor/supplier.',
+    breadcrumb: formatMessage({ id: 'vendors_transactions' }),
+    hint: formatMessage({
+      id: 'reports_every_transaction_going_in_and_out_of_each_vendor_supplier',
+    }),
    pageTitle: formatMessage({ id: 'vendors_transactions' }),
    backLink: true,
    sidebarExpand: false,
@@ -286,8 +310,10 @@ export default [
        'containers/FinancialStatements/CashFlowStatement/CashFlowStatement'
      ),
    ),
-    breadcrumb: 'Cash Flow Statement',
-    hint: 'Reports inflow and outflow of cash and cash equivalents between a specific two points of time.',
+    breadcrumb: formatMessage({ id: 'cash_flow_statement' }),
+    hint: formatMessage({
+      id: 'reports_inflow_and_outflow_of_cash_and_cash_equivalents',
+    }),
    pageTitle: formatMessage({ id: 'cash_flow_statement' }),
    backLink: true,
    sidebarExpand: false,
@@ -299,8 +325,10 @@ export default [
        'containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails'
      ),
    ),
-    breadcrumb: 'Inventory Item Details',
-    hint: 'Reports every transaction going in and out of your items to monitoring activity of items.',
+    breadcrumb: formatMessage({ id: 'inventory_item_details' }),
+    hint: formatMessage({
+      id: 'reports_every_transaction_going_in_and_out_of_your_items',
+    }),
    pageTitle: formatMessage({ id: 'inventory_item_details' }),
    backLink: true,
    sidebarExpand: false,
@@ -310,14 +338,14 @@ export default [
    component: lazy(() =>
      import('containers/FinancialStatements/FinancialReports'),
    ),
-    breadcrumb: 'Financial Reports',
+    breadcrumb: formatMessage({ id: 'financial_reports' }),
    pageTitle: formatMessage({ id: 'all_financial_reports' }),
  },
  // Exchange Rates
  {
    path: `/exchange-rates`,
    component: lazy(() => import('containers/ExchangeRates/ExchangeRatesList')),
-    breadcrumb: 'Exchange Rates',
+    breadcrumb: formatMessage({ id: 'exchange_rates_list' }),
    pageTitle: formatMessage({ id: 'exchange_rates_list' }),
  },
  // Expenses.
@@ -326,7 +354,7 @@ export default [
    component: lazy(() =>
      import('containers/Expenses/ExpenseForm/ExpenseFormPage'),
    ),
-    breadcrumb: 'Expenses',
+    breadcrumb: formatMessage({ id: 'expenses' }),
    hotkey: 'ctrl+shift+x',
    pageTitle: formatMessage({ id: 'new_expense' }),
    sidebarExpand: false,
@@ -337,7 +365,7 @@ export default [
    component: lazy(() =>
      import('containers/Expenses/ExpenseForm/ExpenseFormPage'),
    ),
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
    pageTitle: formatMessage({ id: 'edit_expense' }),
    sidebarExpand: false,
    backLink: true,
@@ -347,7 +375,7 @@ export default [
    component: lazy(() =>
      import('containers/Expenses/ExpensesLanding/ExpensesList'),
    ),
-    breadcrumb: 'Expenses List',
+    breadcrumb: formatMessage({ id: 'expenses_list' }),
    pageTitle: formatMessage({ id: 'expenses_list' }),
    hotkey: 'shift+x',
  },
@@ -359,7 +387,7 @@ export default [
      import('containers/Customers/CustomerForm/CustomerFormPage'),
    ),
    name: 'customer-edit',
-    breadcrumb: 'Edit Customer',
+    breadcrumb: formatMessage({ id: 'edit_customer' }),
    pageTitle: formatMessage({ id: 'edit_customer' }),
    backLink: true,
  },
@@ -369,7 +397,7 @@ export default [
      import('containers/Customers/CustomerForm/CustomerFormPage'),
    ),
    name: 'customer-new',
-    breadcrumb: 'New Customer',
+    breadcrumb: formatMessage({ id: 'new_customer' }),
    hotkey: 'ctrl+shift+c',
    pageTitle: formatMessage({ id: 'new_customer' }),
    backLink: true,
@@ -379,7 +407,7 @@ export default [
    component: lazy(() =>
      import('containers/Customers/CustomersLanding/CustomersList'),
    ),
-    breadcrumb: 'Customers',
+    breadcrumb: formatMessage({ id: 'customers' }),
    hotkey: 'shift+c',
    pageTitle: formatMessage({ id: 'customers_list' }),
  },
@@ -389,7 +417,7 @@ export default [
      import('containers/Customers/CustomerForm/CustomerFormPage'),
    ),
    name: 'duplicate-customer',
-    breadcrumb: 'Duplicate  Customer',
+    breadcrumb: formatMessage({ id: 'duplicate_customer' }),
    pageTitle: formatMessage({ id: 'new_customer' }),
    backLink: true,
  },
@@ -401,7 +429,7 @@ export default [
      import('containers/Vendors/VendorForm/VendorFormPage'),
    ),
    name: 'vendor-edit',
-    breadcrumb: 'Edit Vendor',
+    breadcrumb: formatMessage({ id: 'edit_vendor' }),
    pageTitle: formatMessage({ id: 'edit_vendor' }),
    backLink: true,
  },
@@ -411,7 +439,7 @@ export default [
      import('containers/Vendors/VendorForm/VendorFormPage'),
    ),
    name: 'vendor-new',
-    breadcrumb: 'New Vendor',
+    breadcrumb: formatMessage({ id: 'new_vendor' }),
    hotkey: 'ctrl+shift+v',
    pageTitle: formatMessage({ id: 'new_vendor' }),
    backLink: true,
@@ -421,7 +449,7 @@ export default [
    component: lazy(() =>
      import('containers/Vendors/VendorsLanding/VendorsList'),
    ),
-    breadcrumb: 'Vendors',
+    breadcrumb: formatMessage({ id: 'vendors' }),
    hotkey: 'shift+v',
    pageTitle: formatMessage({ id: 'vendors_list' }),
  },
@@ -431,7 +459,7 @@ export default [
      import('containers/Vendors/VendorForm/VendorFormPage'),
    ),
    name: 'duplicate-vendor',
-    breadcrumb: 'Duplicate  Vendor',
+    breadcrumb: formatMessage({ id: 'duplicate_vendor' }),
    pageTitle: formatMessage({ id: 'new_vendor' }),
    backLink: true,
  },
@@ -443,7 +471,7 @@ export default [
      import('containers/Sales/Estimates/EstimateForm/EstimateFormPage'),
    ),
    name: 'estimate-edit',
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
    pageTitle: formatMessage({ id: 'edit_estimate' }),
    backLink: true,
    sidebarExpand: false,
@@ -454,7 +482,7 @@ export default [
      import('containers/Sales/Estimates/EstimateForm/EstimateFormPage'),
    ),
    name: 'convert-to-invoice',
-    breadcrumb: 'New Estimate',
+    breadcrumb: formatMessage({ id: 'new_estimate' }),
    pageTitle: formatMessage({ id: 'new_estimate' }),
    backLink: true,
    sidebarExpand: false,
@@ -465,7 +493,7 @@ export default [
      import('containers/Sales/Estimates/EstimateForm/EstimateFormPage'),
    ),
    name: 'estimate-new',
-    breadcrumb: 'New Estimate',
+    breadcrumb: formatMessage({ id: 'new_estimate' }),
    hotkey: 'ctrl+shift+e',
    pageTitle: formatMessage({ id: 'new_estimate' }),
    backLink: true,
@@ -477,7 +505,7 @@ export default [
      import('containers/Sales/Estimates/EstimatesLanding/EstimatesList'),
    ),
    name: 'estimates-list',
-    breadcrumb: 'Estimates List',
+    breadcrumb: formatMessage({ id: 'estimates_list' }),
    hotkey: 'shift+e',
    pageTitle: formatMessage({ id: 'estimates_list' }),
  },
@@ -489,7 +517,7 @@ export default [
      import('containers/Sales/Invoices/InvoiceForm/InvoiceFormPage'),
    ),
    name: 'invoice-edit',
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
    pageTitle: formatMessage({ id: 'edit_invoice' }),
    sidebarExpand: false,
    backLink: true,
@@ -500,7 +528,7 @@ export default [
      import('containers/Sales/Invoices/InvoiceForm/InvoiceFormPage'),
    ),
    name: 'invoice-new',
-    breadcrumb: 'New Invoice',
+    breadcrumb: formatMessage({ id: 'new_invoice' }),
    hotkey: 'ctrl+shift+i',
    pageTitle: formatMessage({ id: 'new_invoice' }),
    sidebarExpand: false,
@@ -511,7 +539,7 @@ export default [
    component: lazy(() =>
      import('containers/Sales/Invoices/InvoicesLanding/InvoicesList'),
    ),
-    breadcrumb: 'Invoices List',
+    breadcrumb: formatMessage({ id: 'invoices_list' }),
    hotkey: 'shift+i',
    pageTitle: formatMessage({ id: 'invoices_list' }),
  },
@@ -523,7 +551,7 @@ export default [
      import('containers/Sales/Receipts/ReceiptForm/ReceiptFormPage'),
    ),
    name: 'receipt-edit',
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
    pageTitle: formatMessage({ id: 'edit_receipt' }),
    backLink: true,
    sidebarExpand: false,
@@ -534,7 +562,7 @@ export default [
      import('containers/Sales/Receipts/ReceiptForm/ReceiptFormPage'),
    ),
    name: 'receipt-new',
-    breadcrumb: 'New Receipt',
+    breadcrumb: formatMessage({ id: 'new_receipt' }),
    hotkey: 'ctrl+shift+r',
    pageTitle: formatMessage({ id: 'new_receipt' }),
    backLink: true,
@@ -545,7 +573,7 @@ export default [
    component: lazy(() =>
      import('containers/Sales/Receipts/ReceiptsLanding/ReceiptsList'),
    ),
-    breadcrumb: 'Receipts List',
+    breadcrumb: formatMessage({ id: 'receipts_list' }),
    hotkey: 'shift+r',
    pageTitle: formatMessage({ id: 'receipts_list' }),
  },
@@ -559,7 +587,7 @@ export default [
      ),
    ),
    name: 'payment-receive-edit',
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
    pageTitle: formatMessage({ id: 'edit_payment_receive' }),
    backLink: true,
    sidebarExpand: false,
@@ -572,7 +600,7 @@ export default [
      ),
    ),
    name: 'payment-receive-new',
-    breadcrumb: 'New Payment Receive',
+    breadcrumb: formatMessage({ id: 'new_payment_receive' }),
    pageTitle: formatMessage({ id: 'new_payment_receive' }),
    backLink: true,
    sidebarExpand: false,
@@ -584,7 +612,7 @@ export default [
        'containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList'
      ),
    ),
-    breadcrumb: 'Payment Receives List',
+    breadcrumb: formatMessage({ id: 'payment_receives_list' }),
    pageTitle: formatMessage({ id: 'payment_receives_list' }),
  },

@@ -595,7 +623,7 @@ export default [
      import('containers/Purchases/Bills/BillForm/BillFormPage'),
    ),
    name: 'bill-edit',
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
    pageTitle: formatMessage({ id: 'edit_bill' }),
    sidebarExpand: false,
    backLink: true,
@@ -606,7 +634,7 @@ export default [
      import('containers/Purchases/Bills/BillForm/BillFormPage'),
    ),
    name: 'bill-new',
-    breadcrumb: 'New Bill',
+    breadcrumb: formatMessage({ id: 'new_bill' }),
    hotkey: 'ctrl+shift+b',
    pageTitle: formatMessage({ id: 'new_bill' }),
    sidebarExpand: false,
@@ -617,7 +645,7 @@ export default [
    component: lazy(() =>
      import('containers/Purchases/Bills/BillsLanding/BillsList'),
    ),
-    breadcrumb: 'Bills List',
+    breadcrumb: formatMessage({ id: 'bills_list' }),
    hotkey: 'shift+b',
    pageTitle: formatMessage({ id: 'bills_list' }),
  },
@@ -626,7 +654,7 @@ export default [
  {
    path: `/billing`,
    component: lazy(() => import('containers/Subscriptions/BillingForm')),
-    breadcrumb: 'New Billing',
+    breadcrumb: formatMessage({ id: 'new_billing' }),
  },
  // Payment modes.
  {
@@ -637,7 +665,7 @@ export default [
      ),
    ),
    name: 'payment-made-edit',
-    breadcrumb: 'Edit',
+    breadcrumb: formatMessage({ id: 'edit' }),
    pageTitle: formatMessage({ id: 'edit_payment_made' }),
    sidebarExpand: false,
    backLink: true,
@@ -650,7 +678,7 @@ export default [
      ),
    ),
    name: 'payment-made-new',
-    breadcrumb: 'New Payment Made',
+    breadcrumb: formatMessage({ id: 'new_payment_made' }),
    pageTitle: formatMessage({ id: 'new_payment_made' }),
    sidebarExpand: false,
    backLink: true,
@@ -662,13 +690,13 @@ export default [
        'containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList'
      ),
    ),
-    breadcrumb: 'Payment Made List',
+    breadcrumb: formatMessage({ id: 'payment_made_list' }),
    pageTitle: formatMessage({ id: 'payment_made_list' }),
  },
  // Homepage
  {
    path: `/`,
    component: lazy(() => import('containers/Homepage/Homepage')),
-    breadcrumb: 'Home',
+    breadcrumb: formatMessage({ id: 'homepage' }),
  },
 ];