chrone: sperate client and server to different repos.

src/containers/Preferences/Accounts/Accounts.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Tabs, Tab} from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
+import {  FormattedMessage as T } from 'components';
+
+export default function AccountsPreferences() {
+  const history = useHistory();
+  const onChangeTabs = (currentTabId) => {
+    switch(currentTabId) {
+      default:
+        history.push('/preferences/accounts/general');
+        break;
+      case 'custom_fields':
+        history.push('/preferences/accounts/custom_fields');
+        break;
+    }
+  };
+  return (
+    <div class="preferences__inside-content preferences__inside-content--accounts">
+      <Tabs
+        animate={true}
+        large={true}
+        onChange={onChangeTabs}>
+        <Tab id="general" title={<T id={'general'}/>} />
+        <Tab id="custom_fields" title={<T id={'custom_fields'}/>} />
+      </Tabs>
+
+      <PreferencesSubContent preferenceTab="accounts" />
+    </div>
+  );
+}
+

src/containers/Preferences/Accounts/AccountsCustomFields.js

@@ -0,0 +1,83 @@
+import React, { useEffect } from 'react';
+import {
+  Popover,
+  Button,
+  Menu,
+  MenuDivider,
+  MenuItem,
+  Position,
+  Icon
+} from '@blueprintjs/core';
+import {
+  GridComponent,
+  ColumnsDirective,
+  ColumnDirective,
+} from '@syncfusion/ej2-react-grids';
+import useAsync from 'hooks/async';
+import {connect} from 'react-redux';
+import {
+  fetchResourceFields,
+} from 'store/customFields/customFields.actions';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+
+function AccountsCustomFields({ fetchResourceFields, fields }) {
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      // fetchResourceFields('accounts'),
+    ]);
+  }, false);
+
+  useEffect(() => { fetchHook.execute(); }, []);
+
+  const actionMenuList = (column) => (
+    <Menu>
+      <MenuItem text={<T id={'view_details'}/>} />
+      <MenuDivider />
+      <MenuItem text={<T id={'edit_account'}/>} />
+      <MenuItem text={<T id={'new_account'}/>} />
+      <MenuDivider />
+      <MenuItem text={<T id={'inactivate_account'}/>} />
+      <MenuItem text={<T id={'delete_account'}/>} />
+    </Menu>
+  );
+
+  const statusRowTemplate = (column) => {
+    return ('Active');
+  };
+  const actionsRowTemplate = (column) => (
+    <Popover content={actionMenuList(column)} position={Position.RIGHT_BOTTOM}>
+      <Button icon={<Icon icon="ellipsis-h" />} />
+    </Popover>
+  );
+ 
+  const columns = [
+    {field: 'label_name', headerText: 'Field Label'},
+    {field: 'data_type', headerText: 'Type'},
+    {template: statusRowTemplate, headerText: 'Status'},
+    {template: actionsRowTemplate, headerText: ''},
+  ];
+  return (
+    <div class="preferences__inside-content-tab preferences__inside-content-tab--custom-fields">
+      <GridComponent dataSource={fields}>
+        <ColumnsDirective>
+          {columns.map((column) => {
+            return (<ColumnDirective
+              field={column.field}
+              headerText={column.headerText}
+              template={column.template} />);
+          })}
+        </ColumnsDirective>
+      </GridComponent>
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  fields: state.fields.custom_fields['accounts'] || [],
+});
+const mapDispatchToProps = (dispatch) => ({
+  fetchResourceFields: (resourceSlug) => dispatch(fetchResourceFields({ resourceSlug })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(AccountsCustomFields);

src/containers/Preferences/Accounts/AccountsGeneral.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function AccountsGeneralPreferences() {
+  return (
+    <div class="preferences__inside-content preferences__inside-content--general">
+
+    </div>
+  );
+}