Merge remote-tracking branch 'origin/feature/exchange_rates'

2026-02-18 13:50:31 +00:00 · 2020-05-12 01:10:11 +02:00
parent e56a50c3ff 98edc66dd2
commit 4ab85eaf09
62 changed files with 2587 additions and 1155 deletions
--- a/client/src/containers/Accounting/MakeJournalEntriesFooter.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesFooter.js
@@ -1,9 +1,6 @@
-import React, {useMemo} from 'react';
-import {
-  Intent,
-  Button,
-} from '@blueprintjs/core';
-import { FormattedList } from 'react-intl';
+import React, { useMemo } from 'react';
+import { Intent, Button } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';

 export default function MakeJournalEntriesFooter({
  formik: { isSubmitting },
@@ -12,15 +9,16 @@ export default function MakeJournalEntriesFooter({
 }) {
  return (
    <div>
-      <div class="form__floating-footer">
+      <div class='form__floating-footer'>
        <Button
          disabled={isSubmitting}
          intent={Intent.PRIMARY}
          name={'save'}
          onClick={() => {
            onSubmitClick({ publish: true, redirect: true });
-          }}>
-          Save
+          }}
+        >
+          <T id={'save'} />
        </Button>

        <Button
@@ -29,28 +27,31 @@ export default function MakeJournalEntriesFooter({
          className={'ml1'}
          name={'save_and_new'}
          onClick={() => {
-            onSubmitClick({ publish: true, redirect: false }); 
-          }}>
-          Save & New
+            onSubmitClick({ publish: true, redirect: false });
+          }}
+        >
+          <T id={'save_new'} />
        </Button>

        <Button
          disabled={isSubmitting}
          className={'button-secondary ml1'}
          onClick={() => {
-            onSubmitClick({ publish: false, redirect: false }); 
-          }}>
-          Save as Draft
+            onSubmitClick({ publish: false, redirect: false });
+          }}
+        >
+          <T id={'save_as_draft'} />
        </Button>

        <Button
          className={'button-secondary ml1'}
          onClick={() => {
            onCancelClick && onCancelClick();
-          }}>
-          Cancel
+          }}
+        >
+          <T id={'cancel'}/>
        </Button>
      </div>
    </div>
  );
-}
+}
--- a/client/src/containers/Accounting/MakeJournalEntriesForm.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesForm.js
@@ -1,9 +1,10 @@
 import React, {useMemo, useState, useEffect, useRef, useCallback} from 'react';
 import * as Yup from 'yup';
-import {useFormik} from "formik";
+import { useFormik } from "formik";
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { pick } from 'lodash';

 import MakeJournalEntriesHeader from './MakeJournalEntriesHeader';
 import MakeJournalEntriesFooter from './MakeJournalEntriesFooter';
@@ -15,7 +16,6 @@ import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withDashboardActions from 'containers/Dashboard/withDashboard';

 import AppToaster from 'components/AppToaster';
-import {pick} from 'lodash';
 import Dragzone from 'components/Dragzone';
 import MediaConnect from 'connectors/Media.connect';

@@ -55,10 +55,10 @@ function MakeJournalEntriesForm({

  useEffect(() => {
    if (manualJournal && manualJournal.id) {
-      changePageTitle('Edit Journal');
+      changePageTitle(formatMessage({id:'edit_journal'}));
      changePageSubtitle(`No. ${manualJournal.journal_number}`);
    } else {
-      changePageTitle('New Journal');  
+      changePageTitle(formatMessage({id:'new_journal'}));  
    }
  }, [changePageTitle, changePageSubtitle, manualJournal]);

--- a/client/src/containers/Accounting/MakeJournalEntriesHeader.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesHeader.js
@@ -6,7 +6,7 @@ import {
  Position,
 } from '@blueprintjs/core';
 import {DateInput} from '@blueprintjs/datetime';
-import {useIntl} from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import {Row, Col} from 'react-grid-system';
 import moment from 'moment';
 import {momentFormatter} from 'utils';
@@ -17,7 +17,7 @@ import ErrorMessage from 'components/ErrorMessage';
 export default function MakeJournalEntriesHeader({
  formik: { errors, touched, setFieldValue, getFieldProps }
 }) {
-  const intl = useIntl();
+  const {formatMessage} = useIntl();
 
  const handleDateChange = useCallback((date) => {
    const formatted = moment(date).format('YYYY-MM-DD');
@@ -32,7 +32,7 @@ export default function MakeJournalEntriesHeader({
      <Row>
        <Col sm={3}>
          <FormGroup
-            label={'Journal number'}
+            label={<T id={'journal_number'}/>}
            labelInfo={infoIcon}
            className={'form-group--journal-number'}
            intent={(errors.journal_number && touched.journal_number) && Intent.DANGER}
@@ -48,7 +48,7 @@ export default function MakeJournalEntriesHeader({

        <Col sm={2}>
          <FormGroup
-            label={intl.formatMessage({'id': 'date'})}
+          label={<T id={'date'}/>}
            intent={(errors.date && touched.date) && Intent.DANGER}
            helperText={<ErrorMessage name="date" {...{errors, touched}} />}
            minimal={true}>
@@ -63,7 +63,7 @@ export default function MakeJournalEntriesHeader({

        <Col sm={4}>
          <FormGroup
-            label={intl.formatMessage({'id': 'description'})}
+            label={<T id={'description'}/>}
            className={'form-group--description'}
            intent={(errors.name && touched.name) && Intent.DANGER}
            helperText={<ErrorMessage name="description" {...{errors, touched}} />}
@@ -80,7 +80,7 @@ export default function MakeJournalEntriesHeader({
      <Row>
        <Col sm={3}>
          <FormGroup
-            label={'Reference'}
+            label={<T id={'reference'}/>}
            labelInfo={infoIcon}
            className={'form-group--reference'}
            intent={(errors.reference && touched.reference) && Intent.DANGER}
--- a/client/src/containers/Accounting/MakeJournalEntriesTable.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesTable.js
@@ -1,11 +1,8 @@
-import React, {useState, useMemo, useEffect, useCallback} from 'react';
-import {
-  Button,
-  Intent,
-} from '@blueprintjs/core';
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { Button, Intent } from '@blueprintjs/core';
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
-import { compose, formattedAmount} from 'utils';
+import { compose, formattedAmount } from 'utils';
 import {
  AccountsListFieldCell,
  MoneyFieldCell,
@@ -14,7 +11,7 @@ import {
 import { omit } from 'lodash';

 import withAccounts from 'containers/Accounts/withAccounts';
-
+import { FormattedMessage as T, useIntl } from 'react-intl';

 // Actions cell renderer.
 const ActionsCellRenderer = ({
@@ -24,55 +21,54 @@ const ActionsCellRenderer = ({
  data,
  payload,
 }) => {
-  if (data.length <= (index + 2)) {
+  if (data.length <= index + 2) {
    return '';
  }
  const onClickRemoveRole = () => {
    payload.removeRow(index);
  };
-
  return (
-    <Button 
-      icon={<Icon icon="times-circle" iconSize={14} />}
+    <Button
+      icon={<Icon icon='times-circle' iconSize={14} />}
      iconSize={14}
-      className="ml2"
+      className='ml2'
      minimal={true}
      intent={Intent.DANGER}
-      onClick={onClickRemoveRole} />
+      onClick={onClickRemoveRole}
+    />
  );
 };

 // Total text cell renderer.
 const TotalAccountCellRenderer = (chainedComponent) => (props) => {
-  if (props.data.length === (props.row.index + 2)) {
-    return (<span>{ 'Total USD' }</span>);
+  if (props.data.length === props.row.index + 2) {
+    return <span>{'Total USD'}</span>;
  }
  return chainedComponent(props);
 };

 // Total credit/debit cell renderer.
 const TotalCreditDebitCellRenderer = (chainedComponent, type) => (props) => {
-  if (props.data.length === (props.row.index + 2)) {
-      const total = props.data.reduce((total, entry) => {
+  if (props.data.length === props.row.index + 2) {
+    const total = props.data.reduce((total, entry) => {
      const amount = parseInt(entry[type], 10);
      const computed = amount ? total + amount : total;

      return computed;
    }, 0);

-    return (<span>{ formattedAmount(total, 'USD') }</span>);
+    return <span>{formattedAmount(total, 'USD')}</span>;
  }
  return chainedComponent(props);
 };

 const NoteCellRenderer = (chainedComponent) => (props) => {
-  if (props.data.length === (props.row.index + 2)) {
+  if (props.data.length === props.row.index + 2) {
    return '';
  }
  return chainedComponent(props);
 };

-
 /**
 * Make journal entries table component.
 */
@@ -88,116 +84,128 @@ function MakeJournalEntriesTable({
  formik: { errors, values, setFieldValue },
 }) {
  const [rows, setRow] = useState([]);
-
-  useEffect(() => { 
+  const { formatMessage } = useIntl();
+  useEffect(() => {
    setRow([
-      ...initialValues.entries.map((e) => ({ ...e, rowType: 'editor'})),
+      ...initialValues.entries.map((e) => ({ ...e, rowType: 'editor' })),
      defaultRow,
      defaultRow,
-    ])
-  }, [initialValues, defaultRow])
+    ]);
+  }, [initialValues, defaultRow]);

  // Handles update datatable data.
-  const handleUpdateData = useCallback((rowIndex, columnId, value) => {
-    const newRows = rows.map((row, index) => {
-      if (index === rowIndex) {
-        return { ...rows[rowIndex], [columnId]: value };
-      }
-      return { ...row };
-    });
-    setRow(newRows);
-    setFieldValue('entries', newRows.map(row => ({
-      ...omit(row, ['rowType']),
-    })));
-  }, [rows, setFieldValue]);
+  const handleUpdateData = useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = rows.map((row, index) => {
+        if (index === rowIndex) {
+          return { ...rows[rowIndex], [columnId]: value };
+        }
+        return { ...row };
+      });
+      setRow(newRows);
+      setFieldValue(
+        'entries',
+        newRows.map((row) => ({
+          ...omit(row, ['rowType']),
+        }))
+      );
+    },
+    [rows, setFieldValue]
+  );

  // Handles click remove datatable row.
-  const handleRemoveRow = useCallback((rowIndex) => {
-    const removeIndex = parseInt(rowIndex, 10);
-    const newRows = rows.filter((row, index) => index !== removeIndex);
-    
-    setRow([ ...newRows ]);
-    setFieldValue('entries', newRows
-      .filter(row => row.rowType === 'editor')
-      .map(row => ({ ...omit(row, ['rowType']) })
-    ));
-    onClickRemoveRow && onClickRemoveRow(removeIndex);
-  }, [rows, setFieldValue, onClickRemoveRow]);
+  const handleRemoveRow = useCallback(
+    (rowIndex) => {
+      const removeIndex = parseInt(rowIndex, 10);
+      const newRows = rows.filter((row, index) => index !== removeIndex);
+
+      setRow([...newRows]);
+      setFieldValue(
+        'entries',
+        newRows
+          .filter((row) => row.rowType === 'editor')
+          .map((row) => ({ ...omit(row, ['rowType']) }))
+      );
+      onClickRemoveRow && onClickRemoveRow(removeIndex);
+    },
+    [rows, setFieldValue, onClickRemoveRow]
+  );

  // Memorized data table columns.
-  const columns = useMemo(() => [
-    {
-      Header: '#',
-      accessor: 'index',
-      Cell: ({ row: {index} }) => (
-        <span>{ index + 1 }</span>
-      ),
-      className: "index",
-      width: 40,
-      disableResizing: true,
-      disableSortBy: true,
-    },
-    {
-      Header: 'Account',
-      id: 'account_id',
-      accessor: 'account_id',
-      Cell: TotalAccountCellRenderer(AccountsListFieldCell),
-      className: "account",
-      disableSortBy: true,
-      disableResizing: true,
-      width: 250,
-    },
-    {
-      Header: 'Credit (USD)',
-      accessor: 'credit',
-      Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'credit'),
-      className: "credit",
-      disableSortBy: true,
-      disableResizing: true,
-      width: 150,
-    },
-    {
-      Header: 'Debit (USD)',
-      accessor: 'debit',
-      Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'debit'),
-      className: "debit",
-      disableSortBy: true,
-      disableResizing: true,
-      width: 150,
-    },
-    {
-      Header: 'Note', 
-      accessor: 'note',
-      Cell: NoteCellRenderer(InputGroupCell),
-      disableSortBy: true,
-      className: "note",
-    },
-    {
-      Header: '',
-      accessor: 'action',
-      Cell: ActionsCellRenderer,
-      className: "actions",
-      disableSortBy: true,
-      disableResizing: true,
-      width: 45,
-    }
-  ], []);
+  const columns = useMemo(
+    () => [
+      {
+        Header: '#',
+        accessor: 'index',
+        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
+        className: 'index',
+        width: 40,
+        disableResizing: true,
+        disableSortBy: true,
+      },
+      {
+        Header: formatMessage({ id: 'account' }),
+        id: 'account_id',
+        accessor: 'account_id',
+        Cell: TotalAccountCellRenderer(AccountsListFieldCell),
+        className: 'account',
+        disableSortBy: true,
+        disableResizing: true,
+        width: 250,
+      },
+      {
+        Header: formatMessage({ id: 'credit_currency' }, { currency: 'USD' }),
+        accessor: 'credit',
+        Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'credit'),
+        className: 'credit',
+        disableSortBy: true,
+        disableResizing: true,
+        width: 150,
+      },
+      {
+        Header: formatMessage({ id: 'debit_currency' }, { currency: 'USD' }),
+        accessor: 'debit',
+        Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'debit'),
+        className: 'debit',
+        disableSortBy: true,
+        disableResizing: true,
+        width: 150,
+      },
+      {
+        Header: formatMessage({ id: 'note' }),
+        accessor: 'note',
+        Cell: NoteCellRenderer(InputGroupCell),
+        disableSortBy: true,
+        className: 'note',
+      },
+      {
+        Header: '',
+        accessor: 'action',
+        Cell: ActionsCellRenderer,
+        className: 'actions',
+        disableSortBy: true,
+        disableResizing: true,
+        width: 45,
+      },
+    ],
+    []
+  );

  // Handles click new line.
  const onClickNewRow = useCallback(() => {
-    setRow([
-      ...rows,
-      { ...defaultRow, rowType: 'editor' },
-    ]);
+    setRow([...rows, { ...defaultRow, rowType: 'editor' }]);
    onClickAddNewRow && onClickAddNewRow();
  }, [defaultRow, rows, onClickAddNewRow]);

-  const rowClassNames = useCallback((row) => ({
-    'row--total': rows.length === (row.index + 2),
-  }), [rows]);
+  const rowClassNames = useCallback(
+    (row) => ({
+      'row--total': rows.length === row.index + 2,
+    }),
+    [rows]
+  );

  return (
-    <div class="make-journal-entries__table">
+    <div class='make-journal-entries__table'>
      <DataTable
        columns={columns}
        data={rows}
@@ -207,21 +215,24 @@ function MakeJournalEntriesTable({
          errors: errors.entries || [],
          updateData: handleUpdateData,
          removeRow: handleRemoveRow,
-        }}/>
+        }}
+      />

-      <div class="mt1">
+      <div class='mt1'>
        <Button
          small={true}
          className={'button--secondary button--new-line'}
-          onClick={onClickNewRow}>
-          New lines
+          onClick={onClickNewRow}
+        >
+          <T id={'new_lines'} />
        </Button>

        <Button
          small={true}
          className={'button--secondary button--clear-lines ml1'}
-          onClick={onClickNewRow}>
-          Clear all lines
+          onClick={onClickNewRow}
+        >
+          <T id={'clear_all_lines'} />
        </Button>
      </div>
    </div>
@@ -232,4 +243,4 @@ export default compose(
  withAccounts(({ accounts }) => ({
    accounts,
  })),
-)(MakeJournalEntriesTable);
+)(MakeJournalEntriesTable);
--- a/client/src/containers/Accounting/ManualJournalActionsBar.js
+++ b/client/src/containers/Accounting/ManualJournalActionsBar.js
@@ -25,6 +25,7 @@ import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withManualJournals from 'containers/Accounting/withManualJournals';
 import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';

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

 function ManualJournalActionsBar({
  // #withResourceDetail
@@ -43,6 +44,7 @@ function ManualJournalActionsBar({
 }) {
  const { path } = useRouteMatch();
  const history = useHistory();
+  const {formatMessage} = useIntl();

  const viewsMenuItems = manualJournalsViews.map(view => {
    return (
@@ -82,7 +84,7 @@ function ManualJournalActionsBar({
          <Button
            className={classNames(Classes.MINIMAL, 'button--table-views')}
            icon={<Icon icon='table' />}
-            text='Table Views'
+            text={<T id={'table_views'}/>}
            rightIcon={'caret-down'}
          />
        </Popover>
@@ -92,7 +94,7 @@ function ManualJournalActionsBar({
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='plus' />}
-          text='New Journal'
+          text={<T id={'new_journal'}/>}
          onClick={onClickNewManualJournal}
        />
        <Popover
@@ -111,7 +113,7 @@ function ManualJournalActionsBar({
          <Button
            className={Classes.MINIMAL}
            icon={<Icon icon='trash' iconSize={15} />}
-            text='Delete'
+            text={<T id={'delete'}/>}
            intent={Intent.DANGER}
            onClick={handleBulkDelete}
          />
@@ -120,12 +122,12 @@ function ManualJournalActionsBar({
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-import' />}
-          text='Import'
+          text={<T id={'import'}/>}
        />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='file-export' />}
-          text='Export'
+          text={<T id={'export'}/>}
        />
      </NavbarGroup>
    </DashboardActionsBar>
--- a/client/src/containers/Accounting/ManualJournalsDataTable.js
+++ b/client/src/containers/Accounting/ManualJournalsDataTable.js
@@ -11,6 +11,8 @@ import {
  Position,
 } from '@blueprintjs/core';
 import { useParams } from 'react-router-dom';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import Icon from 'components/Icon';
 import { compose } from 'utils';
 import moment from 'moment';
@@ -20,14 +22,13 @@ import DialogConnect from 'connectors/Dialog.connector';

 import { useUpdateEffect } from 'hooks';
 import DataTable from 'components/DataTable';
-import Money from 'components/Money';

 import withDashboardActions from 'containers/Dashboard/withDashboard';
 import withViewDetails from 'containers/Views/withViewDetails';
 import withManualJournals from 'containers/Accounting/withManualJournals';
 import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';

-import { If } from 'components';
+import { If, Money } from 'components';


 function ManualJournalsDataTable({
@@ -52,6 +53,8 @@ function ManualJournalsDataTable({
  const { custom_view_id: customViewId } = useParams();
  const [initialMount, setInitialMount] = useState(false);

+  const { formatMessage } = useIntl();
+
  useUpdateEffect(() => {
    if (!manualJournalsLoading) {
      setInitialMount(true);
@@ -72,63 +75,75 @@ function ManualJournalsDataTable({
    viewMeta,
  ]);

-  const handlePublishJournal = useCallback((journal) => () => {
-    onPublishJournal && onPublishJournal(journal);
-  }, [onPublishJournal]);
+  const handlePublishJournal = useCallback(
+    (journal) => () => {
+      onPublishJournal && onPublishJournal(journal);
+    },
+    [onPublishJournal]
+  );

-  const handleEditJournal = useCallback((journal) => () => {
-    onEditJournal && onEditJournal(journal);
-  }, [onEditJournal]);
+  const handleEditJournal = useCallback(
+    (journal) => () => {
+      onEditJournal && onEditJournal(journal);
+    },
+    [onEditJournal]
+  );

-  const handleDeleteJournal = useCallback((journal) => () => {
-    onDeleteJournal && onDeleteJournal(journal);
-  }, [onDeleteJournal]);
+  const handleDeleteJournal = useCallback(
+    (journal) => () => {
+      onDeleteJournal && onDeleteJournal(journal);
+    },
+    [onDeleteJournal]
+  );

  const actionMenuList = (journal) => (
    <Menu>
-      <MenuItem text='View Details' />
+      <MenuItem text={<T id={'view_details'} />} />
      <MenuDivider />
      {!journal.status && (
        <MenuItem
-          text="Publish Journal"
-          onClick={handlePublishJournal(journal)} />
-      )}      
+          text={<T id={'publish_journal'} />}
+          onClick={handlePublishJournal(journal)}
+        />
+      )}
      <MenuItem
-        text='Edit Journal'
-        onClick={handleEditJournal(journal)} />
+        text={<T id={'edit_journal'} />}
+        onClick={handleEditJournal(journal)}
+      />
      <MenuItem
-        text='Delete Journal'
+        text={<T id={'delete_journal'} />}
        intent={Intent.DANGER}
-        onClick={handleDeleteJournal(journal)} />
+        onClick={handleDeleteJournal(journal)}
+      />
    </Menu>
  );

  const columns = useMemo(() => [
    {
      id: 'date',
-      Header: 'Date',
-      accessor: r => moment().format('YYYY-MM-DD'),
+      Header: formatMessage({ id: 'date' }),
+      accessor: (r) => moment().format('YYYY-MM-DD'),
      disableResizing: true,
      width: 150,
      className: 'date',
    },
    {
      id: 'amount',
-      Header: 'Amount',
+      Header: formatMessage({ id: 'amount' }),
      accessor: r => (<Money amount={r.amount} currency={'USD'} />),
      disableResizing: true,
      className: 'amount',
    },
    {
      id: 'journal_number',
-      Header: 'Journal No.',
+      Header: formatMessage({ id: 'journal_no' }),
      accessor: 'journal_number',
      disableResizing: true,
      className: 'journal_number',
    },
    {
      id: 'status',
-      Header: 'Status',
+      Header: formatMessage({ id: 'status' }),
      accessor: (r) => {
        return r.status ? 'Published' : 'Draft';
      },
@@ -138,7 +153,7 @@ function ManualJournalsDataTable({
    },
    {
      id: 'note',
-      Header: 'Note',
+      Header: formatMessage({ id: 'note' }),
      accessor: (row) => (
        <If condition={row.description}>
          <Tooltip
@@ -157,14 +172,14 @@ function ManualJournalsDataTable({
    },
    {
      id: 'transaction_type',
-      Header: 'Transaction type ',
+      Header: formatMessage({ id: 'transaction_type' }),
      accessor: 'transaction_type',
      width: 100,
      className: 'transaction_type',
    },
    {
      id: 'created_at',
-      Header: 'Created At',
+      Header: formatMessage({ id: 'created_at' }),
      accessor: r => moment().format('YYYY-MM-DD'),
      disableResizing: true,
      width: 150,
@@ -192,7 +207,7 @@ function ManualJournalsDataTable({
  }, [onFetchData]);

  const handleSelectedRowsChange = useCallback((selectedRows) => {
-    onSelectedRowsChange && onSelectedRowsChange(selectedRows.map(s => s.original));
+    onSelectedRowsChange && onSelectedRowsChange(selectedRows.map((s) => s.original));
  }, [onSelectedRowsChange]);

  return (
@@ -214,7 +229,6 @@ function ManualJournalsDataTable({
 export default compose(
  DialogConnect,
  withDashboardActions,
-  // withViewsActions,
  withManualJournalsActions,
  withManualJournals(({ manualJournals, manualJournalsLoading, }) => ({
    manualJournals,
--- a/client/src/containers/Accounting/ManualJournalsList.js
+++ b/client/src/containers/Accounting/ManualJournalsList.js
@@ -3,6 +3,7 @@ import { Route, Switch, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
 import AppToaster from 'components/AppToaster';
+import { FormattedMessage as T, useIntl } from 'react-intl';

 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
@@ -17,7 +18,6 @@ import withViewsActions from 'containers/Views/withViewsActions';

 import { compose } from 'utils';

-
 /**
 * Manual journals table.
 */
@@ -39,22 +39,26 @@ function ManualJournalsTable({
  const [deleteManualJournal, setDeleteManualJournal] = useState(false);
  const [selectedRows, setSelectedRows] = useState([]);
  const [bulkDelete, setBulkDelete] = useState(false);
-
+  const { formatMessage } = useIntl();
  const fetchViews = useQuery('journals-resource-views', () => {
    return requestFetchResourceViews('manual_journals');
  });

-  const fetchManualJournals = useQuery('manual-journals-table', () => 
-    requestFetchManualJournalsTable());
+  const fetchManualJournals = useQuery('manual-journals-table', () =>
+    requestFetchManualJournalsTable()
+  );

  useEffect(() => {
-    changePageTitle('Manual Journals');
+    changePageTitle(formatMessage({id:'manual_journals'}));
  }, [changePageTitle]);

  // Handle delete manual journal click.
-  const handleDeleteJournal = useCallback((journal) => {
-    setDeleteManualJournal(journal);
-  }, [setDeleteManualJournal]);
+  const handleDeleteJournal = useCallback(
+    (journal) => {
+      setDeleteManualJournal(journal);
+    },
+    [setDeleteManualJournal]
+  );

  // Handle cancel delete manual journal.
  const handleCancelManualJournalDelete = useCallback(() => {
@@ -69,30 +73,35 @@ function ManualJournalsTable({
    });
  }, [deleteManualJournal, requestDeleteManualJournal]);

-  const handleBulkDelete = useCallback((accountsIds) => {
-    setBulkDelete(accountsIds);
-  }, [setBulkDelete]);
+  const handleBulkDelete = useCallback(
+    (accountsIds) => {
+      setBulkDelete(accountsIds);
+    },
+    [setBulkDelete]
+  );

  const handleConfirmBulkDelete = useCallback(() => {
-    requestDeleteBulkManualJournals(bulkDelete).then(() => {
-      setBulkDelete(false);
-      AppToaster.show({ message: 'the_accounts_have_been_deleted' });
-    }).catch((error) => {
-      setBulkDelete(false);
-    });
-  }, [
-    requestDeleteBulkManualJournals,
-    bulkDelete,
-  ]);
+    requestDeleteBulkManualJournals(bulkDelete)
+      .then(() => {
+        setBulkDelete(false);
+        AppToaster.show({ message: 'the_accounts_have_been_deleted' });
+      })
+      .catch((error) => {
+        setBulkDelete(false);
+      });
+  }, [requestDeleteBulkManualJournals, bulkDelete]);

  const handleCancelBulkDelete = useCallback(() => {
    setBulkDelete(false);
  }, []);

-  const handleEditJournal = useCallback((journal) => {
-    history.push(`/dashboard/accounting/manual-journals/${journal.id}/edit`);
-  }, [history]);
-  
+  const handleEditJournal = useCallback(
+    (journal) => {
+      history.push(`/dashboard/accounting/manual-journals/${journal.id}/edit`);
+    },
+    [history]
+  );
+
  // Handle filter change to re-fetch data-table.
  const handleFilterChanged = useCallback(() => {
    fetchManualJournals.refetch();
@@ -104,36 +113,49 @@ function ManualJournalsTable({
  }, [fetchManualJournals]);

  // Handle fetch data of manual jouranls datatable.
-  const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
-    addManualJournalsTableQueries({
-      ...(sortBy.length > 0) ? {
-        column_sort_by: sortBy[0].id,
-        sort_order: sortBy[0].desc ? 'desc' : 'asc',
-      } : {},
-    });
-  }, [
-    addManualJournalsTableQueries,
-  ]);
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      addManualJournalsTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+      });
+    },
+    [addManualJournalsTableQueries]
+  );

-  const handlePublishJournal = useCallback((journal) => {
-    requestPublishManualJournal(journal.id).then(() => {
-      AppToaster.show({ message: 'the_manual_journal_id_has_been_published' });
-    })
-  }, [requestPublishManualJournal]);
+  const handlePublishJournal = useCallback(
+    (journal) => {
+      requestPublishManualJournal(journal.id).then(() => {
+        AppToaster.show({
+          message: 'the_manual_journal_id_has_been_published',
+        });
+      });
+    },
+    [requestPublishManualJournal]
+  );

  // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback((accounts) => {
-    setSelectedRows(accounts);
-  }, [setSelectedRows]);
+  const handleSelectedRowsChange = useCallback(
+    (accounts) => {
+      setSelectedRows(accounts);
+    },
+    [setSelectedRows]
+  );

  return (
    <DashboardInsider
      loading={fetchViews.isFetching || fetchManualJournals.isFetching}
-      name={'manual-journals'}>
+      name={'manual-journals'}
+    >
      <ManualJournalsActionsBar
        onBulkDelete={handleBulkDelete}
        selectedRows={selectedRows}
-        onFilterChanged={handleFilterChanged} />
+        onFilterChanged={handleFilterChanged}
+      />

      <DashboardPageContent>
        <Switch>
@@ -142,8 +164,7 @@ function ManualJournalsTable({
            path={[
              '/dashboard/accounting/manual-journals/:custom_view_id/custom_view',
              '/dashboard/accounting/manual-journals',
-            ]}>
-            
+            ]}> 
          </Route>
        </Switch>

@@ -152,11 +173,12 @@ function ManualJournalsTable({
          onFetchData={handleFetchData}
          onEditJournal={handleEditJournal}
          onPublishJournal={handlePublishJournal}
-          onSelectedRowsChange={handleSelectedRowsChange} />
+          onSelectedRowsChange={handleSelectedRowsChange}
+        />

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

        <Alert
-          cancelButtonText='Cancel'
-          confirmButtonText='Move to Trash'
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'move_to_trash'} />}
          icon='trash'
          intent={Intent.DANGER}
          isOpen={bulkDelete}
@@ -191,5 +213,5 @@ function ManualJournalsTable({
 export default compose(
  withDashboardActions,
  withManualJournalsActions,
-  withViewsActions,
+  withViewsActions
 )(ManualJournalsTable);