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

2026-02-17 21:30: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/Items/ItemCategoriesList.js
+++ b/client/src/containers/Items/ItemCategoriesList.js
@@ -9,6 +9,7 @@ import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar';
 import withDashboardActions from 'containers/Dashboard/withDashboard';
 import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
 import { compose } from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';


 const ItemCategoryList = ({
@@ -20,11 +21,11 @@ const ItemCategoryList = ({
 }) => {
  const { id } = useParams();
  const [selectedRows, setSelectedRows] = useState([]);
-
+  const {formatMessage} =useIntl()
  useEffect(() => {
    id
-      ? changePageTitle('Edit Category Details')
-      : changePageTitle('Category List');
+      ? changePageTitle(formatMessage({id:'edit_category_details'}))
+      : changePageTitle(formatMessage({id:'category_list'}));
  }, []);

  const fetchCategories = useQuery('items-categories-table',
--- a/client/src/containers/Items/ItemCategoriesTable.js
+++ b/client/src/containers/Items/ItemCategoriesTable.js
@@ -6,6 +6,8 @@ import {
  MenuItem,
  Position,
 } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import Icon from 'components/Icon';
 import LoadingIndicator from 'components/LoadingIndicator';
 import { compose } from 'utils';
@@ -19,13 +21,15 @@ const ItemsCategoryList = ({
  // #withItemCategories
  categoriesList,

+  // #ownProps
  onFetchData,
  onDeleteCategory,
  onEditCategory,
  openDialog,
-  count,
  onSelectedRowsChange,
 }) => {
+
+  const {formatMessage} = useIntl();
  const handelEditCategory = (category) => () => {
    openDialog('item-form', { action: 'edit', id: category.id });
    onEditCategory(category.id);
@@ -37,9 +41,9 @@ const ItemsCategoryList = ({

  const actionMenuList = (category) => (
    <Menu>
-      <MenuItem text='Edit Category' onClick={handelEditCategory(category)} />
+      <MenuItem text={<T id={'edit_category'} />} onClick={handelEditCategory(category)} />
      <MenuItem
-        text='Delete Category'
+        text={<T id={'delete_category'}/>}
        onClick={handleDeleteCategory(category)}
      />
    </Menu>
@@ -48,20 +52,20 @@ const ItemsCategoryList = ({
  const columns = useMemo(() => [
    {
      id: 'name',
-      Header: 'Category Name',
+      Header: formatMessage({ id:'category_name' }),
      accessor: 'name',
      width: 150,
    },
    {
      id: 'description',
-      Header: 'Description',
+      Header: formatMessage({ id:'description' }),
      accessor: 'description',
      className: 'description',
      width: 150,
    },
    {
      id: 'count',
-      Header: 'Count',
+      Header: formatMessage({ id:'count' }),
      accessor: (r) => r.count || '',
      className: 'count',
      width: 50,
--- a/client/src/containers/Items/ItemForm.js
+++ b/client/src/containers/Items/ItemForm.js
@@ -12,18 +12,19 @@ import {
  Checkbox,
 } from '@blueprintjs/core';
 import { Row, Col } from 'react-grid-system';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Select } from '@blueprintjs/select';
+
 import AppToaster from 'components/AppToaster';
 import AccountsConnect from 'connectors/Accounts.connector';
 import ItemsConnect from 'connectors/Items.connect';
-import {compose} from 'utils';
+import { compose } from 'utils';
 import ErrorMessage from 'components/ErrorMessage';
 import classNames from 'classnames';
 import Icon from 'components/Icon';
 import ItemCategoryConnect from 'connectors/ItemsCategory.connect';
 import MoneyInputGroup from 'components/MoneyInputGroup';
-import {useHistory} from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import Dragzone from 'components/Dragzone';
 import MediaConnect from 'connectors/Media.connect';
 import useMedia from 'hooks/useMedia';
@@ -31,7 +32,7 @@ import useMedia from 'hooks/useMedia';

 const ItemForm = ({
  requestSubmitItem,
-  
+
  accounts,
  categories,

@@ -54,12 +55,15 @@ const ItemForm = ({
    deleteCallback: requestDeleteMedia,
  });

-  const ItemTypeDisplay = useMemo(() => ([
-    { value: null, label: 'Select Item Type' },
-    { value: 'service', label: 'Service' },
-    { value: 'inventory', label: 'Inventory' },
-    { value: 'non-inventory', label: 'Non-Inventory' }
-  ]), []);
+  const ItemTypeDisplay = useMemo(
+    () => [
+      { value: null, label: 'Select Item Type' },
+      { value: 'service', label: 'Service' },
+      { value: 'inventory', label: 'Inventory' },
+      { value: 'non-inventory', label: 'Non-Inventory' },
+    ],
+    []
+  );

  const validationSchema = Yup.object().shape({
    active: Yup.boolean(),
@@ -76,22 +80,25 @@ const ItemForm = ({
      otherwise: Yup.number().nullable(),
    }),
    category_id: Yup.number().nullable(),
-    stock: Yup.string() || Yup.boolean()
+    stock: Yup.string() || Yup.boolean(),
  });

-  const initialValues = useMemo(() => ({
-    active: true,
-    name: '',
-    type: '',
-    sku: '',
-    cost_price: 0,
-    sell_price: 0,
-    cost_account_id: null,
-    sell_account_id: null,
-    inventory_account_id: null,
-    category_id: null,
-    note: '',
-  }), []);
+  const initialValues = useMemo(
+    () => ({
+      active: true,
+      name: '',
+      type: '',
+      sku: '',
+      cost_price: 0,
+      sell_price: 0,
+      cost_account_id: null,
+      sell_account_id: null,
+      inventory_account_id: null,
+      category_id: null,
+      note: '',
+    }),
+    []
+  );

  const {
    getFieldProps,
@@ -121,27 +128,29 @@ const ItemForm = ({
            }),
            intent: Intent.SUCCESS,
          });
-          setSubmitting(false);
-          history.push('/dashboard/items');
-        })
-        .catch((error) => {
-          setSubmitting(false);
        });
      };

-      Promise.all([
-        saveMedia(),
-        deleteMedia(),
-      ]).then(([savedMediaResponses]) => {
-        const mediaIds = savedMediaResponses.map(res => res.data.media.id);
-        return saveItem(mediaIds);
-      });
-    }
+      Promise.all([saveMedia(), deleteMedia()]).then(
+        ([savedMediaResponses]) => {
+          const mediaIds = savedMediaResponses.map((res) => res.data.media.id);
+          return saveItem(mediaIds);
+        }
+      );
+    },
  });

-  const accountItem = useCallback((item, { handleClick }) => (
-    <MenuItem key={item.id} text={item.name} label={item.code} onClick={handleClick} />
-  ), []);
+  const accountItem = useCallback(
+    (item, { handleClick }) => (
+      <MenuItem
+        key={item.id}
+        text={item.name}
+        label={item.code}
+        onClick={handleClick}
+      />
+    ),
+    []
+  );

  // Filter Account Items
  const filterAccounts = (query, account, _index, exactMatch) => {
@@ -154,27 +163,37 @@ const ItemForm = ({
    }
  };

-  const onItemAccountSelect = useCallback((filedName) => {
-    return (account) => {
-      setSelectedAccounts({
-        ...selectedAccounts,
-        [filedName]: account
-      });
-      setFieldValue(filedName, account.id);
-    };
-  }, [setFieldValue, selectedAccounts]);
+  const onItemAccountSelect = useCallback(
+    (filedName) => {
+      return (account) => {
+        setSelectedAccounts({
+          ...selectedAccounts,
+          [filedName]: account,
+        });
+        setFieldValue(filedName, account.id);
+      };
+    },
+    [setFieldValue, selectedAccounts]
+  );

-  const categoryItem = useCallback((item, { handleClick }) => (
-    <MenuItem text={item.name} onClick={handleClick} />
-  ), []);
+  const categoryItem = useCallback(
+    (item, { handleClick }) => (
+      <MenuItem text={item.name} onClick={handleClick} />
+    ),
+    []
+  );

-  const getSelectedAccountLabel = useCallback((fieldName, defaultLabel) => {
-    return typeof selectedAccounts[fieldName] !== 'undefined'
-      ? selectedAccounts[fieldName].name : defaultLabel;
-  }, [selectedAccounts]);
+  const getSelectedAccountLabel = useCallback(
+    (fieldName, defaultLabel) => {
+      return typeof selectedAccounts[fieldName] !== 'undefined'
+        ? selectedAccounts[fieldName].name
+        : defaultLabel;
+    },
+    [selectedAccounts]
+  );

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

  const handleMoneyInputChange = (fieldKey) => (e, value) => {
    setFieldValue(fieldKey, value);
@@ -188,31 +207,36 @@ const ItemForm = ({
    setFiles(_files.filter((file) => file.uploaded === false));
  }, []);

-  const handleDeleteFile = useCallback((_deletedFiles) => {
-    _deletedFiles.forEach((deletedFile) => {
-      if (deletedFile.uploaded && deletedFile.metadata.id) {
-        setDeletedFiles([
-          ...deletedFiles, deletedFile.metadata.id,
-        ]);
-      }
-    });
-  }, [setDeletedFiles, deletedFiles]);  
+  const handleDeleteFile = useCallback(
+    (_deletedFiles) => {
+      _deletedFiles.forEach((deletedFile) => {
+        if (deletedFile.uploaded && deletedFile.metadata.id) {
+          setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
+        }
+      });
+    },
+    [setDeletedFiles, deletedFiles]
+  );

-  const handleCancelClickBtn = () => { history.goBack(); };
+  const handleCancelClickBtn = () => {
+    history.goBack();
+  };

  return (
    <div class='item-form'>
      <form onSubmit={handleSubmit}>
-        <div class="item-form__primary-section">
+        <div class='item-form__primary-section'>
          <Row>
            <Col xs={7}>
              <FormGroup
                medium={true}
-                label={'Item Type'}
+                label={<T id={'item_type'} />}
                labelInfo={requiredSpan}
                className={'form-group--item-type'}
-                intent={(errors.type && touched.type) && Intent.DANGER}
-                helperText={<ErrorMessage {...{errors, touched}} name="type" />}
+                intent={errors.type && touched.type && Intent.DANGER}
+                helperText={
+                  <ErrorMessage {...{ errors, touched }} name='type' />
+                }
                inline={true}
              >
                <HTMLSelect
@@ -223,45 +247,53 @@ const ItemForm = ({
              </FormGroup>

              <FormGroup
-                label={'Item Name'}
+                label={<T id={'item_name'} />}
                labelInfo={requiredSpan}
                className={'form-group--item-name'}
-                intent={(errors.name && touched.name) && Intent.DANGER}
-                helperText={<ErrorMessage {...{errors, touched}} name="name" />}
+                intent={errors.name && touched.name && Intent.DANGER}
+                helperText={
+                  <ErrorMessage {...{ errors, touched }} name='name' />
+                }
                inline={true}
              >
                <InputGroup
                  medium={true}
-                  intent={(errors.name && touched.name) && Intent.DANGER}
+                  intent={errors.name && touched.name && Intent.DANGER}
                  {...getFieldProps('name')}
                />
              </FormGroup>

              <FormGroup
-                label={'SKU'}
+                label={<T id={'sku'} />}
                labelInfo={infoIcon}
                className={'form-group--item-sku'}
-                intent={(errors.sku && touched.sku) && Intent.DANGER}
-                helperText={<ErrorMessage {...{errors, touched}} name="sku" />}
+                intent={errors.sku && touched.sku && Intent.DANGER}
+                helperText={
+                  <ErrorMessage {...{ errors, touched }} name='sku' />
+                }
                inline={true}
              >
                <InputGroup
                  medium={true}
-                  intent={(errors.sku && touched.sku) && Intent.DANGER}
+                  intent={errors.sku && touched.sku && Intent.DANGER}
                  {...getFieldProps('sku')}
                />
              </FormGroup>

              <FormGroup
-                label={'Category'}
+                label={<T id={'category'} />}
                labelInfo={infoIcon}
                inline={true}
-                intent={(errors.category_id && touched.category_id) && Intent.DANGER}
-                helperText={<ErrorMessage {...{errors, touched}} name="category" />}
+                intent={
+                  errors.category_id && touched.category_id && Intent.DANGER
+                }
+                helperText={
+                  <ErrorMessage {...{ errors, touched }} name='category' />
+                }
                className={classNames(
                  'form-group--select-list',
                  'form-group--category',
-                  Classes.FILL,
+                  Classes.FILL
                )}
              >
                <Select
@@ -274,7 +306,10 @@ const ItemForm = ({
                  <Button
                    fill={true}
                    rightIcon='caret-down'
-                    text={getSelectedAccountLabel('category_id', 'Select category')}
+                    text={getSelectedAccountLabel(
+                      'category_id',
+                      'Select category'
+                    )}
                  />
                </Select>
              </FormGroup>
@@ -286,7 +321,7 @@ const ItemForm = ({
              >
                <Checkbox
                  inline={true}
-                  label={'Active'}
+                  label={<T id={'active'}/>}
                  defaultChecked={values.active}
                  {...getFieldProps('active')}
                />
@@ -299,20 +334,25 @@ const ItemForm = ({
                onDrop={handleDropFiles}
                onDeleteFile={handleDeleteFile}
                hint={'Attachments: Maxiumum size: 20MB'}
-                className={'mt2'} />
+                className={'mt2'}
+              />
            </Col>
          </Row>
        </div>

        <Row gutterWidth={16} className={'item-form__accounts-section'}>
          <Col width={404}>
-            <h4>Purchase Information</h4>
+            <h4><T id={'purchase_information'}/></h4>

            <FormGroup
-              label={'Selling Price'}
+              label={<T id={'selling_price'}/>}
              className={'form-group--item-selling-price'}
-              intent={(errors.selling_price && touched.selling_price) && Intent.DANGER}
-              helperText={<ErrorMessage {...{errors, touched}} name="selling_price" />}
+              intent={
+                errors.selling_price && touched.selling_price && Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage {...{ errors, touched }} name='selling_price' />
+              }
              inline={true}
            >
              <MoneyInputGroup
@@ -321,19 +361,31 @@ const ItemForm = ({
                onChange={handleMoneyInputChange('selling_price')}
                inputGroupProps={{
                  medium: true,
-                  intent: (errors.selling_price && touched.selling_price) && Intent.DANGER,
-                }} />
+                  intent:
+                    errors.selling_price &&
+                    touched.selling_price &&
+                    Intent.DANGER,
+                }}
+              />
            </FormGroup>

            <FormGroup
-              label={'Account'}
+              label={<T id={'account'} />}
              labelInfo={infoIcon}
              inline={true}
-              intent={(errors.sell_account_id && touched.sell_account_id) && Intent.DANGER}
-              helperText={<ErrorMessage {...{errors, touched}} name="sell_account_id" />}
+              intent={
+                errors.sell_account_id &&
+                touched.sell_account_id &&
+                Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage {...{ errors, touched }} name='sell_account_id' />
+              }
              className={classNames(
-                'form-group--sell-account', 'form-group--select-list',
-                Classes.FILL)}
+                'form-group--sell-account',
+                'form-group--select-list',
+                Classes.FILL
+              )}
            >
              <Select
                items={accounts}
@@ -345,7 +397,10 @@ const ItemForm = ({
                <Button
                  fill={true}
                  rightIcon='caret-down'
-                  text={getSelectedAccountLabel('sell_account_id', 'Select account')}
+                  text={getSelectedAccountLabel(
+                    'sell_account_id',
+                    'Select account'
+                  )}
                />
              </Select>
            </FormGroup>
@@ -353,14 +408,16 @@ const ItemForm = ({

          <Col width={404}>
            <h4>
-              Sales Information
+              <T id={'sales_information'} />
            </h4>

            <FormGroup
-              label={'Cost Price'}
+              label={<T id={'cost_price'} />}
              className={'form-group--item-cost-price'}
-              intent={(errors.cost_price && touched.cost_price) && Intent.DANGER}
-              helperText={<ErrorMessage {...{errors, touched}} name="cost_price" />}
+              intent={errors.cost_price && touched.cost_price && Intent.DANGER}
+              helperText={
+                <ErrorMessage {...{ errors, touched }} name='cost_price' />
+              }
              inline={true}
            >
              <MoneyInputGroup
@@ -369,21 +426,30 @@ const ItemForm = ({
                onChange={handleMoneyInputChange('cost_price')}
                inputGroupProps={{
                  medium: true,
-                  intent: (errors.cost_price && touched.cost_price) && Intent.DANGER,
-                }} />
+                  intent:
+                    errors.cost_price && touched.cost_price && Intent.DANGER,
+                }}
+              />
            </FormGroup>

            <FormGroup
-              label={'Account'}
+              label={<T id={'account'} />}
              labelInfo={infoIcon}
              inline={true}
-              intent={(errors.cost_account_id && touched.cost_account_id) && Intent.DANGER}
-              helperText={<ErrorMessage {...{errors, touched}} name="cost_account_id" />}
+              intent={
+                errors.cost_account_id &&
+                touched.cost_account_id &&
+                Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage {...{ errors, touched }} name='cost_account_id' />
+              }
              className={classNames(
                'form-group--cost-account',
                'form-group--select-list',
-                Classes.FILL)}
-              >
+                Classes.FILL
+              )}
+            >
              <Select
                items={accounts}
                itemRenderer={accountItem}
@@ -394,7 +460,10 @@ const ItemForm = ({
                <Button
                  fill={true}
                  rightIcon='caret-down'
-                  text={getSelectedAccountLabel('cost_account_id', 'Select account')}
+                  text={getSelectedAccountLabel(
+                    'cost_account_id',
+                    'Select account'
+                  )}
                />
              </Select>
            </FormGroup>
@@ -404,19 +473,29 @@ const ItemForm = ({
        <Row className={'item-form__accounts-section mt2'}>
          <Col width={404}>
            <h4>
-              Inventory Information
+              <T id={'inventory_information'} />
            </h4>

            <FormGroup
-              label={'Inventory Account'}
+              label={<T id={'inventory_account'}/>}
              inline={true}
-              intent={(errors.inventory_account_id && touched.inventory_account_id) && Intent.DANGER}
-              helperText={<ErrorMessage {...{errors, touched}} name="inventory_account_id" />}
+              intent={
+                errors.inventory_account_id &&
+                touched.inventory_account_id &&
+                Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage
+                  {...{ errors, touched }}
+                  name='inventory_account_id'
+                />
+              }
              className={classNames(
                'form-group--item-inventory_account',
                'form-group--select-list',
-                Classes.FILL)}
-              >
+                Classes.FILL
+              )}
+            >
              <Select
                items={accounts}
                itemRenderer={accountItem}
@@ -427,16 +506,17 @@ const ItemForm = ({
                <Button
                  fill={true}
                  rightIcon='caret-down'
-                  text={getSelectedAccountLabel('inventory_account_id','Select account')}
+                  text={getSelectedAccountLabel(
+                    'inventory_account_id',
+                    'Select account'
+                  )}
                />
              </Select>
            </FormGroup>

            <FormGroup
-              label={'Opening Stock'}
+              label={<T id={'opening_stock'}/>}
              className={'form-group--item-stock'}
-              // intent={errors.cost_price && Intent.DANGER}
-              // helperText={formik.errors.stock && formik.errors.stock}
              inline={true}
            >
              <InputGroup
@@ -450,11 +530,16 @@ const ItemForm = ({

        <div class='form__floating-footer'>
          <Button intent={Intent.PRIMARY} disabled={isSubmitting} type='submit'>
-            Save
+            <T id={'save'}/> 
          </Button>

-          <Button className={'ml1'} disabled={isSubmitting}>Save as Draft</Button>
-          <Button className={'ml1'} onClick={handleCancelClickBtn}>Close</Button>
+          <Button className={'ml1'} disabled={isSubmitting}>
+            <T id={'save_as_draft'}/>
+          </Button>
+
+          <Button className={'ml1'} onClick={handleCancelClickBtn}>
+            <T id={'close'} />
+          </Button>
        </div>
      </form>
    </div>
@@ -465,5 +550,5 @@ export default compose(
  AccountsConnect,
  ItemsConnect,
  ItemCategoryConnect,
-  MediaConnect,
-)(ItemForm);
+  MediaConnect
+)(ItemForm);
--- a/client/src/containers/Items/ItemFormPage.js
+++ b/client/src/containers/Items/ItemFormPage.js
@@ -10,6 +10,7 @@ import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';

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


 const ItemFormContainer = ({
@@ -23,11 +24,11 @@ const ItemFormContainer = ({
  requestFetchItemCategories,
 }) => {
  const { id } = useParams();
-
+  const {formatMessage} =useIntl()
  useEffect(() => {
    id ?
-      changePageTitle('Edit Item Details') :
-      changePageTitle('New Item');
+      changePageTitle(formatMessage({id:'edit_item_details'})) :
+      changePageTitle(formatMessage({id:'new_item'}));
  }, [id, changePageTitle]);

  const fetchAccounts = useQuery('accounts-list',
--- a/client/src/containers/Items/ItemsActionsBar.js
+++ b/client/src/containers/Items/ItemsActionsBar.js
@@ -21,6 +21,7 @@ import DialogConnect from 'connectors/Dialog.connector';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withItems from 'containers/Items/withItems';
 import { If } from 'components';
+import { FormattedMessage as T, useIntl } from 'react-intl';

 const ItemsActionsBar = ({
  openDialog,
@@ -70,7 +71,7 @@ const ItemsActionsBar = ({
          <Button
            className={classNames(Classes.MINIMAL, 'button--table-views')}
            icon={<Icon icon='table' />}
-            text='Table Views'
+            text={<T id={'table_views'}/>}
            rightIcon={'caret-down'}
          />
        </Popover>
@@ -80,14 +81,14 @@ const ItemsActionsBar = ({
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='plus' />}
-          text='New Item'
+          text={<T id={'new_item'}/>}
          onClick={onClickNewItem}
        />

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

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

        <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/Items/ItemsCategoryActionsBar.js
+++ b/client/src/containers/Items/ItemsCategoryActionsBar.js
@@ -21,6 +21,7 @@ import FilterDropdown from 'components/FilterDropdown';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withDashboard from 'containers/Dashboard/withDashboard';

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

 const ItemsCategoryActionsBar = ({
  // #withResourceDetail
@@ -57,7 +58,7 @@ const ItemsCategoryActionsBar = ({
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon='plus' />}
-          text='New Category'
+          text={<T id={'new_category'}/>}
          onClick={onClickNewCategory}
        />
        <Popover
@@ -68,7 +69,7 @@ const ItemsCategoryActionsBar = ({
        >
          <Button
            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text='Filter'
+            text={<T id={'filter'}/>}
            icon={<Icon icon='filter' />}
          />
        </Popover>
@@ -77,7 +78,7 @@ const ItemsCategoryActionsBar = ({
          <Button
            className={Classes.MINIMAL}
            icon={<Icon icon='trash' iconSize={15} />}
-            text='Delete'
+            text={<T id={'delete'}/>}
            intent={Intent.DANGER}
            onClick={handleDeleteCategory}
          />
@@ -86,12 +87,12 @@ const ItemsCategoryActionsBar = ({
        <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/Items/ItemsDataTable.js
+++ b/client/src/containers/Items/ItemsDataTable.js
@@ -7,6 +7,8 @@ import {
  MenuDivider,
  Position,
 } from '@blueprintjs/core'
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import {compose} from 'utils';
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
@@ -29,6 +31,8 @@ const ItemsDataTable = ({
  onFetchData,
  onSelectedRowsChange,
 }) => {
+  
+  const {formatMessage} = useIntl();
  const [initialMount, setInitialMount] = useState(false);

  useEffect(() => {
@@ -42,35 +46,35 @@ const ItemsDataTable = ({
  
  const actionMenuList = useCallback((item) =>
    (<Menu>
-      <MenuItem text="View Details" />
+      <MenuItem text={<T id={'view_details'}/>} />
      <MenuDivider />
-      <MenuItem text="Edit Item" onClick={handleEditItem(item)} />
-      <MenuItem text="Delete Item" onClick={handleDeleteItem(item)} />
+      <MenuItem text={<T id={'edit_item'}/>} onClick={handleEditItem(item)} />
+      <MenuItem text={<T id={'delete_item'}/>} onClick={handleDeleteItem(item)} />
    </Menu>), [handleEditItem, handleDeleteItem]);

  const columns = useMemo(() => [
    {
-      Header: 'Item Name',
+      Header: formatMessage({ id:'item_name' }),
      accessor: 'name',
      className: "actions",
    },
    {
-      Header: 'SKU',
+      Header: formatMessage({ id:'sku' }),
      accessor: 'sku',
      className: "sku",
    },
    {
-      Header: 'Category',
+      Header: formatMessage({ id:'category' }),
      accessor: 'category.name',
      className: 'category',
    },
    {
-      Header: 'Sell Price',
+      Header: formatMessage({ id: 'sell_price' }),
      accessor: row => (<Money amount={row.sell_price} currency={'USD'} />),
      className: 'sell-price',
    },
    {
-      Header: 'Cost Price',
+      Header: formatMessage({ id: 'cost_price' }),
      accessor: row => (<Money amount={row.cost_price} currency={'USD'} />),
      className: 'cost-price',
    },
--- a/client/src/containers/Items/ItemsList.js
+++ b/client/src/containers/Items/ItemsList.js
@@ -8,7 +8,7 @@ import {
  Alert,
 } from '@blueprintjs/core';
 import { useQuery } from 'react-query';
-import { FormattedHTMLMessage, useIntl } from 'react-intl';
+import { FormattedMessage as T, FormattedHTMLMessage, useIntl } from 'react-intl';

 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import ItemsActionsBar from 'containers/Items/ItemsActionsBar';
@@ -27,7 +27,6 @@ import withItemsActions from 'containers/Items/withItemsActions';
 import withViewsActions from 'containers/Views/withViewsActions';


-
 function ItemsList({
  // #withDashboard
  changePageTitle,
@@ -150,8 +149,8 @@ function ItemsList({
              onSelectedRowsChange={handleSelectedRowsChange} />

            <Alert
-              cancelButtonText="Cancel"
-              confirmButtonText="Delete"
+              cancelButtonText={<T id={'cancel'}/>}
+              confirmButtonText={<T id={'delete'}/>}
              icon="trash"
              intent={Intent.DANGER}
              isOpen={deleteItem}