feat: tables empty status.

client/src/containers/Items/ItemFormPage.js

@@ -50,7 +50,6 @@ const ItemFormContainer = ({
   );
 
   const handleCancel = useCallback(() => {
-    // history.push('/items');
     history.goBack();
   }, [history]);
 

client/src/containers/Items/ItemsDataTable.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   Button,
   Popover,
@@ -10,14 +10,18 @@ import {
   Tag,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { Icon, DataTable, Money } from 'components';
-import { useIsValuePassed } from 'hooks';
+import classNames from 'classnames';
+
+import { Icon, DataTable, Money, LoadingIndicator, Choose } from 'components';
+import ItemsEmptyStatus from './ItemsEmptyStatus';
+import { useIsValuePassed } from 'hooks';
+import { CLASSES } from 'common/classes';
 
-import LoadingIndicator from 'components/LoadingIndicator';
 import withItems from 'containers/Items/withItems';
 import withItemsActions from 'containers/Items/withItemsActions';
 import { compose, saveInvoke } from 'utils';
 
+// Items datatable.
 function ItemsDataTable({
   // #withItems
   itemsTableLoading,
@@ -181,31 +185,38 @@ function ItemsDataTable({
   );
 
   return (
-    <LoadingIndicator
-      loading={itemsTableLoading && !isLoadedBefore}
-      mount={false}
-    >
-      <DataTable
-        columns={columns}
-        data={itemsCurrentPage}
-        onFetchData={handleFetchData}
-        noInitialFetch={true}
-        expandable={true}
-        selectionColumn={true}
-        spinnerProps={{ size: 30 }}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        rowContextMenu={handleRowContextMenu}
-        sticky={true}
-        pagination={true}
-        pagesCount={2}
-        autoResetSortBy={false}
-        autoResetPage={false}
-        initialPageSize={itemsTableQuery.page_size}
-        initialPageIndex={itemsTableQuery.page - 1}
-      />
-    </LoadingIndicator>
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <LoadingIndicator loading={itemsTableLoading && !isLoadedBefore}>
+        <Choose>
+          <Choose.When condition={true}>
+            <ItemsEmptyStatus />
+          </Choose.When>
+
+          <Choose.Otherwise>
+            <DataTable
+              columns={columns}
+              data={itemsCurrentPage}
+              onFetchData={handleFetchData}
+              noInitialFetch={true}
+              expandable={true}
+              selectionColumn={true}
+              spinnerProps={{ size: 30 }}
+              onSelectedRowsChange={handleSelectedRowsChange}
+              rowContextMenu={handleRowContextMenu}
+              sticky={true}
+              pagination={true}
+              pagesCount={2}
+              autoResetSortBy={false}
+              autoResetPage={false}
+              initialPageSize={itemsTableQuery.page_size}
+              initialPageIndex={itemsTableQuery.page - 1}
+            />
+          </Choose.Otherwise>
+        </Choose>
+      </LoadingIndicator>
+    </div>
   );
-};
+}
 
 export default compose(
   withItems(({ itemsCurrentPage, itemsTableLoading, itemsTableQuery }) => ({

client/src/containers/Items/ItemsEmptyStatus.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from 'components';
+
+export default function ItemsEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={'Manage the organization’s services and products.'}
+      description={
+        <p>
+          Here a list of your organization products and services, to be used when you create invoices or bills to your customers or vendors.
+        </p>
+      }
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/items/new');
+            }}
+          >
+            New Item
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            Learn more
+          </Button>
+        </>
+      }
+    />
+  );
+}

client/src/containers/Items/ItemsList.js

@@ -50,7 +50,7 @@ function ItemsList({
 
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'items_list' }));
-  }, [changePageTitle]);
+  }, [changePageTitle, formatMessage]);
 
   // Handle fetching the resource views.
   const fetchResourceViews = useQuery(