feat: apply new cards design system.

feat: empty status datatables.
fix: edit account.

client/src/components/Dashboard/DashboardCard.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
+
+// Dashboard card.
+export default function DashboardCard({ children, page }) {
+  return (
+    <div
+      className={classNames(CLASSES.DASHBOARD_CARD, {
+        [CLASSES.DASHBOARD_CARD_PAGE]: page,
+      })}
+    >
+      {children}
+    </div>
+  );
+}

client/src/components/Dashboard/DashboardContent.js

@@ -1,15 +1,18 @@
 import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import DashboardTopbar from 'components/Dashboard/DashboardTopbar';
 import DashboardContentRoute from 'components/Dashboard/DashboardContentRoute';
 import DashboardFooter from 'components/Dashboard/DashboardFooter';
+import DashboardErrorBoundary from './DashboardErrorBoundary';
 
-export default function() {
+export default function () {
   return (
-    <div className="dashboard-content" id="dashboard">
-      <DashboardTopbar />
-      <DashboardContentRoute />
-
-      <DashboardFooter />
-    </div>
+    <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
+      <div className="dashboard-content" id="dashboard">
+        <DashboardTopbar />
+        <DashboardContentRoute />
+        <DashboardFooter />
+      </div>
+    </ErrorBoundary>
   );
-}
+}

client/src/components/Dashboard/DashboardErrorBoundary.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from 'components';
+
+export default function DashboardErrorBoundary({}) {
+  return (
+    <div class="dashboard__error-boundary">
+      <h1>Sorry about that! Something went wrong</h1>
+      <p>If the problem stuck, please <a href="#">contact us</a> as soon as possible.</p>
+      <Icon icon="bigcapital" height={30} width={160} />
+    </div>
+  )
+}

client/src/components/Dashboard/DashboardTopbar.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { useHistory } from 'react-router';
 import {
   Navbar,
@@ -14,7 +13,7 @@ import { FormattedMessage as T } from 'react-intl';
 
 import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
 import DashboardBreadcrumbs from 'components/Dashboard/DashboardBreadcrumbs';
-import { Icon, If } from 'components';
+import { Icon, Hint, If } from 'components';
 
 import withSearch from 'containers/GeneralSearch/withSearch';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -78,8 +77,18 @@ function DashboardTopbar({
         <div class="dashboard__title">
           <h1>{pageTitle}</h1>
 
+          <If condition={true}>
+            <div class="dashboard__hint">
+              <Hint
+                content={
+                  'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
+                }
+              />
+            </div>
+          </If>
+
           <If condition={pageSubtitle}>
-            <h3>{ pageSubtitle }</h3>
+            <h3>{pageSubtitle}</h3>
           </If>
 
           <If condition={pageSubtitle && editViewId}>

client/src/components/DataTable.js

@@ -343,6 +343,7 @@ export default function DataTable({
     <div
       className={classnames('bigcapital-datatable', className, {
         'has-sticky': sticky,
+        'has-pagination': pagination,
         'is-expandable': expandable,
         'is-loading': loading,
         'has-virtualized-rows': virtualizedRows,

client/src/components/FieldHint.js

@@ -2,11 +2,15 @@ import React from 'react';
 import { Tooltip, Position } from '@blueprintjs/core';
 import Icon from './Icon';
 
-export default function FieldHint({ content, position }) {
+export default function FieldHint({
+  content,
+  position,
+  iconSize = 12
+}) {
   return (
     <span class="hint">
       <Tooltip content={content} position={position}>
-        <Icon icon="info-circle" iconSize={12} />
+        <Icon icon="info-circle" iconSize={iconSize} />
       </Tooltip>
     </span>
   );

client/src/components/Forms/Checkbox.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import {
+  Checkbox as BPCheckbox,    
+} from '@blueprintjs/core';
+
+export default function CheckboxComponent(props) {
+  const { field, form, ...rest } = props;
+  const [value, setValue] = useState(field.value || false);
+
+  const handleChange = () => {
+    const checked = !value;
+    form.setFieldValue(field.name, checked);
+    setValue(checked);
+  };
+
+  const handleBlur = () => {
+    form.setFieldTouched(field.name);
+  };
+
+  const checkboxProps = {
+    ...rest,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    checked: value,
+  }
+  return <BPCheckbox {...checkboxProps} />;
+}

client/src/components/index.js

@@ -38,6 +38,7 @@ import DisplayNameList from './DisplayNameList';
 import MoneyInputGroup from './MoneyInputGroup';
 import Dragzone from './Dragzone';
 import EmptyStatus from './EmptyStatus';
+import DashboardCard from './Dashboard/DashboardCard';
 
 const Hint = FieldHint;
 
@@ -81,5 +82,6 @@ export {
   SalutationList,
   MoneyInputGroup,
   Dragzone,
-  EmptyStatus
+  EmptyStatus,
+  DashboardCard,
 };