WIP

client/src/components/Accounts/AccountsActionsBar.js

@@ -0,0 +1,99 @@
+import React, { useMemo } from 'react';
+import Icon from 'components/Icon';
+import {
+  Button,
+  NavbarGroup,
+  Navbar,
+  Classes,
+  NavbarDivider,
+  MenuItem,
+  Menu,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from "@blueprintjs/core";
+import classNames from 'classnames';
+import {connect} from 'react-redux';
+import {useRouteMatch} from 'react-router-dom';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import DialogConnect from 'connectors/Dialog.connector';
+import AccountsConnect from 'connectors/Accounts.connector';
+import {compose} from 'utils';
+
+function AccountsActionsBar({
+  openDialog,
+  views,
+  bulkActions,
+}) {
+  const {path} = useRouteMatch();
+  const onClickNewAccount = () => { openDialog('account-form', {}); };
+
+  const viewsMenuItems = views.map((view) => {
+    return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />);
+  });
+
+  const hasBulkActionsSelected = useMemo(() => {
+    return Object.keys(bulkActions).length > 0;
+  }, [bulkActions]);
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Popover
+          content={<Menu>{viewsMenuItems}</Menu>}
+          minimal={true}
+          interactionKind={PopoverInteractionKind.HOVER}
+          position={Position.BOTTOM_LEFT}>
+          
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--table-views')}
+            icon={ <Icon icon="table" /> }
+            text="Table Views"
+            rightIcon={'caret-down'} />
+        </Popover>
+
+        <NavbarDivider />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={ <Icon icon="plus" /> }
+          text="New Account"
+          onClick={onClickNewAccount} />
+
+        {hasBulkActionsSelected && (
+          <Button
+            className={Classes.MINIMAL}
+            icon={ <Icon icon="trash" />} 
+            text="Archive" />)}
+
+        {hasBulkActionsSelected && (
+          <Button
+            className={Classes.MINIMAL}
+            icon={ <Icon icon="trash" />} 
+            text="Delete" />)}
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={ <Icon icon="file-import" /> }
+          text="Import" />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={ <Icon icon="file-export" /> }
+          text="Export" />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  )
+}
+
+const mapStateToProps = (state) => {
+  return {
+    bulkActions: state.accounts.bulkActions,
+  };
+};
+
+export default compose(
+  DialogConnect,
+  AccountsConnect,
+  connect(mapStateToProps),
+)(AccountsActionsBar);

client/src/components/Accounts/AccountsDataTable.js

@@ -0,0 +1,168 @@
+import {
+  GridComponent,
+  ColumnsDirective,
+  ColumnDirective,
+  Inject,
+  Sort,
+} from '@syncfusion/ej2-react-grids';
+import React, {useEffect} from 'react';
+import {
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+  Checkbox,
+} from '@blueprintjs/core';
+import {useParams} from 'react-router-dom';
+import useAsync from 'hooks/async';
+import Icon from 'components/Icon';
+import { handleBooleanChange, compose } from 'utils';
+import AccountsConnect from 'connectors/Accounts.connector';
+import DialogConnect from 'connectors/Dialog.connector';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import ViewConnect from 'connectors/View.connector';
+import LoadingIndicator from 'components/LoadingIndicator';
+
+function AccountsDataTable({
+  accounts,
+  onDeleteAccount,
+  onInactiveAccount,
+  openDialog,
+  addBulkActionAccount,
+  removeBulkActionAccount,
+  fetchAccounts,
+  changeCurrentView,
+  changePageSubtitle,
+  getViewItem,
+  setTopbarEditView
+}) {
+  const { custom_view_id: customViewId } = useParams();
+
+  // Fetch accounts list according to the given custom view id.
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      fetchAccounts({ custom_view_id: customViewId }),
+    ]);
+  });
+  // Refetch accounts list after custom view id change.
+  useEffect(() => {
+    const viewMeta = getViewItem(customViewId);
+    fetchHook.execute();
+
+    if (customViewId) {
+      changeCurrentView(customViewId);
+      setTopbarEditView(customViewId);
+    }
+    if (customViewId && viewMeta) {
+      changePageSubtitle(viewMeta.name);
+    } else {
+      changePageSubtitle('');
+    }
+  }, [customViewId]);
+
+  useEffect(() => () => {
+    // Clear page subtitle when unmount the page.
+    changePageSubtitle('');
+  }, []);
+
+  const handleEditAccount = (account) => () => {
+    openDialog('account-form', {action: 'edit', id: account.id});
+  };
+  const actionMenuList = (account) =>
+    (<Menu>
+      <MenuItem text="View Details" />
+      <MenuDivider />
+      <MenuItem text="Edit Account" onClick={handleEditAccount(account)} />
+      <MenuItem text="New Account" />
+      <MenuDivider />
+      <MenuItem text="Inactivate Account" onClick={() => onInactiveAccount(account)} />
+      <MenuItem text="Delete Account" onClick={() => onDeleteAccount(account)} />
+    </Menu>);
+  
+  const handleClickCheckboxBulk = (account) => handleBooleanChange((value) => {
+    if (value) {
+      addBulkActionAccount(account.id);
+    } else {
+      removeBulkActionAccount(account.id);
+    }
+  });
+
+  const columns = [
+    {
+      field: '',
+      headerText: '',
+      template: (account) => (<Checkbox onChange={handleClickCheckboxBulk(account)} />),
+      customAttributes: {class: 'checkbox-row'}
+    },
+    {
+      field: 'name',
+      headerText: 'Account Name',
+      customAttributes: {class: 'account-name'},
+    },
+    {
+      field: 'code',
+      headerText: 'Code',
+    },
+    {
+      field: 'type.name',
+      headerText: 'Type',
+    },
+    {
+      headerText: 'Normal',
+      template: (column) => {
+        const type = column.type ? column.type.normal : '';
+        return type === 'credit' ? (<Icon icon={'arrow-down'} />) : ((<Icon icon={'arrow-up'} />));
+      },
+      customAttributes: {class: 'account-normal'},
+    },
+    {
+      field: 'balance',
+      headerText: 'Balance',
+      template: (column, data) => { return <span>$10,000</span>; },
+    },
+    {
+      headerText: '',
+      template: (account) => (
+        <Popover content={actionMenuList(account)} position={Position.RIGHT_BOTTOM}>
+          <Button icon={<Icon icon="ellipsis-h" />} />
+        </Popover>
+      ),
+    }
+  ];
+
+  const dataStateChange = (state) => {
+    
+  }
+  return (
+    <LoadingIndicator loading={fetchHook.pending} spinnerSize={30}>
+      <GridComponent
+        allowSorting={true}
+        allowGrouping={true}
+        dataSource={{result: accounts, count: 12}}
+        dataStateChange={dataStateChange}
+        >
+        <ColumnsDirective>
+          {columns.map((column) => {
+            return (<ColumnDirective
+              field={column.field}
+              headerText={column.headerText}
+              template={column.template}
+              allowSorting={true}
+              customAttributes={column.customAttributes}
+              />);
+          })}
+        </ColumnsDirective>
+        <Inject services={[Sort]} />
+      </GridComponent>
+    </LoadingIndicator>
+  );
+}
+
+export default compose(
+  AccountsConnect,
+  DialogConnect,
+  DashboardConnect,
+  ViewConnect,
+)(AccountsDataTable);

client/src/components/Accounts/AccountsViewsTabs.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import {useHistory} from 'react-router';
+import {connect} from 'react-redux';
+import {
+  Alignment,
+  Navbar,
+  NavbarGroup,
+  Tabs,
+  Tab,
+  Button
+} from "@blueprintjs/core";
+import {useParams} from 'react-router-dom';
+import Icon from 'components/Icon';
+import {Link} from 'react-router-dom';
+import {compose} from 'utils';
+import AccountsConnect from 'connectors/Accounts.connector';
+
+function AccountsViewsTabs({ views }) {
+  const history = useHistory();
+  const { custom_view_id: customViewId } = useParams();
+
+  const handleClickNewView = () => {
+    history.push('/dashboard/custom_views/accounts/new');
+  };
+  const tabs = views.map((view) => {
+    const baseUrl = '/dashboard/accounts';
+    const link = (<Link to={`${baseUrl}/${view.id}/custom_view`}>{ view.name }</Link>);
+    return (<Tab id={`custom_view_${view.id}`} title={link} />);
+  });
+  return (
+    <Navbar className="navbar--dashboard-views">
+      <NavbarGroup
+        align={Alignment.LEFT}>
+        <Tabs
+          id="navbar"
+          large={true}
+          selectedTabId={`custom_view_${customViewId}`}
+          className="tabs--dashboard-views">
+          <Tab 
+            id="all"
+            title={<Link to={`/dashboard/accounts`}>All</Link>} />
+
+          { tabs }
+          <Button
+            className="button--new-view"
+            icon={<Icon icon="plus" />}
+            onClick={handleClickNewView} />
+        </Tabs>
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(AccountsConnect)(AccountsViewsTabs);

client/src/components/App.js

@@ -1,33 +1,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {IntlProvider} from 'react-intl';
-import {connect} from 'react-redux';
+import { IntlProvider } from 'react-intl';
+import { connect } from 'react-redux';
+import { Router } from 'react-router';
 import PrivateRoute from 'components/PrivateRoute';
 import Authentication from 'components/Authentication';
 import Dashboard from 'components/Dashboard/Dashboard';
-// import {isAuthenticated} from 'reducers/authentication'
+import { isAuthenticated } from 'store/authentication/authentication.reducer'
 import messages from 'lang/en';
 import 'style/App.scss';
+import { createBrowserHistory } from 'history';
 
 function App(props) {
+  const history = createBrowserHistory();
+
   return (
     <IntlProvider locale={props.locale} messages={messages}>
       <div className="App">
-        <Authentication isAuthenticated={props.isAuthorized} />
-        <PrivateRoute isAuthenticated={props.isAuthorized} component={Dashboard} />
+        <Router history={history}>
+          <Authentication isAuthenticated={props.isAuthorized} />
+          <PrivateRoute isAuthenticated={props.isAuthorized} component={Dashboard} />
+        </Router>
       </div>
     </IntlProvider>
   );
 }
+
 App.defaultProps = {
   locale: 'en',
 };
+
 App.propTypes = {
   locale: PropTypes.string,
   isAuthorized: PropTypes.bool,
 };
 
 const mapStateToProps = (state) => ({
-  isAuthorized: true,
+  isAuthorized: isAuthenticated(state),
 });
 export default connect(mapStateToProps)(App);

client/src/components/AppToaster.js

@@ -0,0 +1,8 @@
+import { Position, Toaster, Intent } from "@blueprintjs/core";
+
+const AppToaster = Toaster.create({
+  position: Position.TOP,
+  intent: Intent.WARNING,
+});
+
+export default AppToaster;

client/src/components/Authentication.js

@@ -7,7 +7,7 @@ export default function({ isAuthenticated =false, ...rest }) {
 
   return (
     <Route path="/auth">
-      { isAuthenticated ?
+      { (isAuthenticated) ?
         (<Redirect to={to} />) : (
         <Switch>
           <div class="authentication-page">

client/src/components/Dashboard/Dashboard.js

@@ -1,12 +1,27 @@
 import React from 'react';
+import {Switch, Route} from 'react-router';
 import Sidebar from 'components/Sidebar/Sidebar';
 import DashboardContent from 'components/Dashboard/DashboardContent';
+import DialogsContainer from 'components/DialogsContainer';
+import PreferencesContent from 'components/Preferences/PreferencesContent';
+import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 
 export default function() {
-  return ( 
-    <div className="dashboard" id="dashboard">
-      <Sidebar />
-      <DashboardContent />
+  return (
+    <div className="dashboard dashboard--preferences">
+      <Switch>
+        <Route path="/dashboard/preferences">
+          <Sidebar />
+          <PreferencesSidebar />
+          <PreferencesContent />
+        </Route>
+
+        <Route path="/dashboard">
+          <Sidebar />
+          <DashboardContent />
+        </Route>
+      </Switch>
+      <DialogsContainer />
     </div>
-  )
+  );
 }

client/src/components/Dashboard/DashboardActionsBar.js

@@ -1,10 +1,18 @@
 import React from 'react';
+import classnames from 'classnames';
+import { Navbar } from "@blueprintjs/core";
 
-
-export default function DashboardActionsBar() {
+export default function DashboardActionsBar({
+  children, name
+}) {
   return (
-    <div class="dashboard__actions-bar">
-      
+    <div className={classnames({
+      'dashboard__actions-bar': true,
+      [`dashboard__actions-bar--${name}`]: !!name,
+    })}>
+      <Navbar className="navbar--dashboard-actions-bar">
+        { children }
+      </Navbar>
     </div>
-  )
+  );
 }

client/src/components/Dashboard/DashboardBreadcrumbs.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  CollapsibleList,
+  MenuItem,
+  Classes,
+  Boundary,
+} from "@blueprintjs/core";
+import classNames from "classnames";
+
+export default function DashboardBreadcrumbs() {
+
+  function renderBreadcrumb(props) {
+    if (props.href != null) {
+      return <a className={Classes.BREADCRUMB}>{props.text}</a>;
+    } else {
+      return <span className={classNames(Classes.BREADCRUMB, Classes.BREADCRUMB_CURRENT)}>{props.text}</span>;
+    }
+  }
+  return (
+    <CollapsibleList
+      className={Classes.BREADCRUMBS}
+      dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
+      visibleItemRenderer={renderBreadcrumb}
+      collapseFrom={Boundary.START}
+      visibleItemCount={0}
+    >
+      <MenuItem icon="folder-close" text="All files" href="#" />
+      <MenuItem icon="folder-close" text="Users" href="#" />
+      <MenuItem icon="folder-close" text="Jane Person" href="#" />
+      <MenuItem icon="folder-close" text="My documents" href="#" />
+      <MenuItem icon="folder-close" text="Classy dayjob" href="#" />
+      <MenuItem icon="document" text="How to crush it" />
+  </CollapsibleList>
+  );
+}

client/src/components/Dashboard/DashboardContent.js

@@ -1,25 +1,12 @@
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
-import dashboardRoutes from 'routes/dashboard'
 import DashboardTopbar from 'components/Dashboard/DashboardTopbar';
+import DashboardContentRoute from 'components/Dashboard/DashboardContentRoute';
 
 export default function() {
   return (
     <div className="dashboard-content" id="dashboard">
-      <DashboardTopbar pageTitle={"asdad"}/>
-      
-      <Route pathname="/dashboard/">
-        <Switch>
-          { dashboardRoutes.map((route, index) => (
-            <Route
-              key={index}
-              path={route.path}
-              exact={route.exact}
-              component={route.component}
-            />          
-          ))}
-        </Switch>
-      </Route>
+      <DashboardTopbar />
+      <DashboardContentRoute />
     </div>
-  )
+  );
 }

client/src/components/Dashboard/DashboardContentRoute.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Route, Switch  } from 'react-router-dom';
+import routes from 'routes/dashboard'
+
+export default function DashboardContentRoute() {
+
+  return (
+    <Route pathname="/dashboard">
+      <Switch>
+        { routes.map((route, index) => (
+          <Route
+            key={index}
+            path={`${route.path}`}
+            component={route.component} />
+        ))}
+      </Switch>
+    </Route>
+  );
+}

client/src/components/Dashboard/DashboardInsider.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classnames from 'classnames';
+import LoadingIndicator from 'components/LoadingIndicator';
+
+export default function DashboardInsider({ loading, children, name }) {
+  return (
+    <div className={classnames({
+      'dashboard__insider': true,
+      'dashboard__insider--loading': loading,
+      [`dashboard__insider--${name}`]: !!name,
+    })}>
+      <LoadingIndicator loading={loading}>
+        { children }
+      </LoadingIndicator>
+    </div>
+  );
+}

client/src/components/Dashboard/DashboardTopbar.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {connect} from 'react-redux';
+import {useHistory} from 'react-router';
 import {
   Navbar,
   NavbarGroup,
@@ -10,44 +11,64 @@ import {
   Menu,
   Popover,
 } from '@blueprintjs/core';
+import DashboardBreadcrumbs from 'components/Dashboard/DashboardBreadcrumbs';
+import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
+import Icon from 'components/Icon';
 
-function DashboardTopbar({ pageTitle }) {
-  const userAvatarDropMenu = (
-    <Menu>
-      <MenuItem icon="graph" text="Graph" />
-      <MenuItem icon="map" text="Map" />
-      <MenuItem icon="th" text="Table" shouldDismissPopover={false} />
-      <MenuItem icon="zoom-to-fit" text="Nucleus" disabled={true} />
-      <MenuDivider />
-      <MenuItem icon="cog" text="Logout" />
-    </Menu>
-  );
+function DashboardTopbar({
+  pageTitle,
+  pageSubtitle,
+  editViewId,
+}) {
+  const history = useHistory();
+
+  const handlerClickEditView = () => {
+    history.push(`/dashboard/custom_views/${editViewId}/edit`)
+  }
   return (
     <div class="dashboard__topbar">
-      <div>
-        <Button>
-          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false">
-            <title>Menu</title>
-            <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path>
-          </svg>
-        </Button>
-        <h1 class="dashboard__title">{ pageTitle }</h1>
+      <div class="dashboard__topbar-left">
+        <div class="dashboard__topbar-sidebar-toggle">
+          <Button>
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" role="img" focusable="false">
+              <title>Menu</title>
+              <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="5" stroke-width="2" d="M4 7h15M4 12h15M4 17h15"></path>
+            </svg>
+          </Button>
+        </div>
+
+        <div class="dashboard__title">
+          <h1>{ pageTitle }</h1>
+
+          { pageSubtitle && (
+            <>
+              <span class="sep"></span>
+              <h3>{ pageSubtitle }</h3>  
+              <Button
+                className="button--view-edit"
+                icon={<Icon icon="pen" />}
+                onClick={handlerClickEditView} />
+            </>
+          )}
+        </div>
+
+        <div class="dashboard__breadcrumbs">
+          <DashboardBreadcrumbs />
+        </div>
       </div>
 
-      <div class="dashboard__topbar-actions">
+      <div class="dashboard__topbar-right">
         <Navbar class="dashboard__topbar-navbar">
           <NavbarGroup>
-            <Button className={Classes.MINIMAL} icon="home" text="Home" />
-            <Button className={Classes.MINIMAL} icon="document" text="Files" />
+            <Button className={Classes.MINIMAL} icon="home" text="Search" />
+            <Button className={Classes.MINIMAL} icon="document" text="Filters" />
+            <Button className={Classes.MINIMAL} icon="document" text="Add order" />
+            <Button className={Classes.MINIMAL} icon="document" text="More" />
           </NavbarGroup>
         </Navbar>
 
-        <div class="dashboard__user">
-          <Popover content={userAvatarDropMenu}>
-            <Button>
-              <div className="user-avatar"></div>
-            </Button>
-          </Popover>
+        <div class="dashboard__topbar-user">
+          <DashboardTopbarUser />
         </div>
       </div>
     </div>
@@ -56,5 +77,8 @@ function DashboardTopbar({ pageTitle }) {
 
 const mapStateToProps = (state) => ({
   pageTitle: state.dashboard.pageTitle,
+  pageSubtitle: state.dashboard.pageSubtitle,
+  editViewId: state.dashboard.topbarEditViewId, 
 });
+
 export default connect(mapStateToProps)(DashboardTopbar);

client/src/components/Dashboard/TopbarUser.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import {Menu, MenuItem, MenuDivider, Button, Popover} from '@blueprintjs/core';
+import t from 'store/types';
+
+function DashboardTopbarUser({ logout }) {
+  const onClickLogout = () => { logout(); };
+
+  const userAvatarDropMenu = (
+    <Menu>
+      <MenuItem icon="graph" text="Graph" />
+      <MenuItem icon="map" text="Map" />
+      <MenuItem icon="th" text="Table" shouldDismissPopover={false} />
+      <MenuItem icon="zoom-to-fit" text="Nucleus" disabled={true} />
+      <MenuDivider />
+      <MenuItem icon="cog" text="Logout" onClick={onClickLogout} />
+    </Menu>
+  );
+
+  return (
+    <Popover content={userAvatarDropMenu}>
+      <Button>
+        <div className="user-avatar"></div>
+      </Button>
+    </Popover>
+  )
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  logout: () => dispatch({ type: t.LOGOUT }),
+});
+
+export default connect(null, mapDispatchToProps)(DashboardTopbarUser);

client/src/components/DataTable.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { useTable, usePagination } from 'react-table'
+
+export default function DataTable({
+  columns,
+  data,
+  loading,
+}) {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    prepareRow,
+    page,
+    canPreviousPage,
+    canNextPage,
+    pageOptions,
+    pageCount,
+    gotoPage,
+    nextPage,
+    previousPage,
+    setPageSize,
+    // Get the state from the instance
+    state: { pageIndex, pageSize },
+  } = useTable(
+    {
+      columns,
+      data,
+      initialState: { pageIndex: 0 }, // Pass our hoisted table state
+      manualPagination: true, // Tell the usePagination
+      // hook that we'll handle our own data fetching
+      // This means we'll also have to provide our own
+      // pageCount.
+      // pageCount: controlledPageCount,
+    },
+    usePagination
+  );
+
+  return (
+    <div className={'bigcapital-datatable'}>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps({
+                  className: column.className || '',
+                })}>
+                  {column.render('Header')}
+                  <span>
+                    {column.isSorted
+                      ? column.isSortedDesc
+                        ? ' 🔽'
+                        : ' 🔼'
+                      : ''}
+                  </span>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {page.map((row, i) => {
+            prepareRow(row)
+            return (
+              <tr {...row.getRowProps()}>
+                {row.cells.map((cell) => {
+                  return <td {...cell.getCellProps({
+                    className: cell.column.className || '',
+                  })}>{ cell.render('Cell') }</td>
+                })}
+              </tr>
+            )
+          })}
+          <tr>
+            {loading ? (
+              // Use our custom loading state to show a loading indicator
+              <td colSpan="10000">Loading...</td>
+            ) : (
+              <td colSpan="10000">
+                {/* Showing {page.length} of ~{controlledPageCount * pageSize}{' '} results */}
+              </td>
+            )}
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  )
+}

client/src/components/Dialog.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import {Dialog, Spinner, Classes} from '@blueprintjs/core';
+
+export default function DialogComponent(props) {
+  const loadingContent = (
+    <div className={Classes.DIALOG_BODY}><Spinner size={30} /></div>
+  );
+  return (
+    <Dialog {...props}>
+      {props.isLoading ? loadingContent : props.children}
+    </Dialog>
+  );
+}

client/src/components/DialogReduxConnect.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+export default (Dialog) => {
+
+  function DialogReduxConnect(props) {
+    return (<Dialog {...props} />);
+  };
+
+  const mapStateToProps = (state, props) => {
+    const dialogs = state.dashboard.dialogs;
+
+    if (dialogs && dialogs.hasOwnProperty['name'] && dialogs[props.name]) {
+      const { isOpen, payload } = dialogs[props.name];
+      return { isOpen, payload };
+    }
+  };
+
+  return connect(
+    mapStateToProps,
+  )(DialogReduxConnect);
+}

client/src/components/DialogsContainer.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import AccountFormDialog from 'containers/Dashboard/Dialogs/AccountFormDialog';
+import UserFormDialog from 'containers/Dashboard/Dialogs/UserFormDialog';
+
+export default function DialogsContainer() {
+  return (
+    <React.Fragment>
+      <AccountFormDialog />
+      <UserFormDialog />
+    </React.Fragment>
+  );
+}

client/src/components/Expenses/ExpenseForm.js

@@ -0,0 +1,228 @@
+import React, {useState} from 'react';
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import {
+  FormGroup,
+  MenuItem,
+  Intent,
+  InputGroup,
+  Position,
+  Button,
+  TextArea,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from "@blueprintjs/datetime";
+import { Select } from '@blueprintjs/select';
+import { useIntl } from 'react-intl';
+import { momentFormatter } from 'utils';
+import moment from 'moment';
+import AppToaster from 'components/AppToaster';
+
+export default function ExpenseForm({
+  accounts,
+  editExpense,
+  submitExpense,
+  expenseDetails,
+  currencies,
+}) {
+  const intl = useIntl();
+
+  const [state, setState] = useState({
+    selectedExpenseAccount: null,
+    selectedPaymentAccount: null,
+  });
+  const validationSchema = Yup.object().shape({
+    date: Yup.date().required(),
+    description: Yup.string().trim(),
+    expense_account_id: Yup.number().required(),
+    payment_account_id: Yup.number().required(),
+    amount: Yup.number().required(),
+    currency_code: Yup.string().required(),
+    publish: Yup.boolean(),
+    exchange_rate: Yup.number(),
+  });
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema: validationSchema,
+    initialValues: {
+      date: null,
+    },
+    onSubmit: (values) => {
+      submitExpense(values).then((response) => {
+        AppToaster.show({
+          message: 'the_expense_has_been_submit',
+        });
+      }).catch((error) => {
+        
+      })
+    }
+  });
+
+  // Account item of select accounts field.
+  const accountItem = (item, { handleClick, modifiers, query }) => {
+    return (<MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />)
+  };
+
+  const onChangeAccount = () => {
+
+  };
+
+  const onChangePaymentAccount = () => {
+
+  };
+
+  const handleDateChange = (date) => {
+    const formatted = moment(date).format('YYYY/MM/DD');
+    formik.setFieldValue('date', formatted);
+  };
+
+  // Filters accounts items.
+  const filterAccountsPredicater = (query, account, _index, exactMatch) => {
+    const normalizedTitle = account.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+    }
+  };
+
+  const onExpenseAccountSelect = (account) => {
+    setState({ ...state, selectedExpenseAccount: account });
+    formik.setFieldValue('expense_account_id', account.id);
+  };
+
+  const onChangePaymentAccountSelect = (account) => {
+    setState({ ...state, selectedPaymentAccount: account });
+    formik.setFieldValue('payment_account_id', account.id);
+  };
+
+  const onAmountCurrencySelect = (currency) => {
+    formik.setFieldValue('currency_code', currency.id);
+  };
+
+  const paymentAccountLabel = state.selectedPaymentAccount ? 
+    state.selectedPaymentAccount.name : 'Select Payment Account';
+  
+  const expenseAccountLabel = state.selectedExpenseAccount ?
+    state.selectedExpenseAccount.name : 'Select Expense Account';
+
+  const handleClose = () => {
+
+  };
+
+  return (
+    <div class="expense-form">
+      <form onSubmit={formik.handleSubmit}>
+        <FormGroup
+          label={'Date'}
+          inline={true}
+          intent={formik.errors.date && Intent.DANGER}
+          helperText={formik.errors.date && formik.errors.date}>
+
+          <DateInput
+            {...momentFormatter('YYYY/MM/DD')}
+            defaultValue={new Date()}
+            onChange={handleDateChange}
+            popoverProps={{ position: Position.BOTTOM }} />
+        </FormGroup>
+
+        <FormGroup
+          label={'Expense Account'}
+          className={'form-group--expense-account'}
+          inline={true}
+          intent={formik.errors.expense_account_id && Intent.DANGER}
+          helperText={formik.errors.expense_account_id && formik.errors.expense_account_id}>
+
+          <Select
+            items={accounts}
+            itemRenderer={accountItem}
+            itemPredicate={filterAccountsPredicater}
+            popoverProps={{ minimal: true }}
+            onItemSelect={onExpenseAccountSelect}>
+
+            <Button
+              fill={true}
+              rightIcon="caret-down"
+              text={expenseAccountLabel} />
+          </Select>
+        </FormGroup>
+
+        <FormGroup
+          label={'Amount'}
+          className={'form-group--amount'}
+          intent={formik.errors.amount && Intent.DANGER}
+          helperText={formik.errors.amount && formik.errors.amount}
+          inline={true}>
+
+          <ControlGroup>
+            <Select
+              items={currencies.map(c => ({ id: c.currency_code, name: c.currency_code }))}
+              itemRenderer={accountItem}
+              itemPredicate={filterAccountsPredicater}
+              popoverProps={{ minimal: true }}
+              onItemSelect={onAmountCurrencySelect}>
+
+              <Button
+                rightIcon="caret-down"
+                text={formik.values.currency_code} />
+            </Select>
+
+            <InputGroup
+              medium={true}
+              intent={formik.errors.amount && Intent.DANGER}
+              {...formik.getFieldProps('amount')} />
+          </ControlGroup>
+        </FormGroup>
+
+        <FormGroup
+          label={'Exchange Rate'}
+          className={'form-group--exchange-rate'}
+          inline={true}>
+
+          <InputGroup />
+        </FormGroup>
+
+        <FormGroup
+          label={'Payment Account'}
+          className={'form-group--payment-account'}
+          inline={true}
+          intent={formik.errors.payment_account_id && Intent.DANGER}
+          helperText={formik.errors.payment_account_id && formik.errors.payment_account_id}>
+
+          <Select
+            items={accounts}
+            itemRenderer={accountItem}
+            itemPredicate={filterAccountsPredicater}
+            popoverProps={{ minimal: true }}
+            onItemSelect={onChangePaymentAccountSelect}>
+
+            <Button
+              fill={true}
+              rightIcon="caret-down"
+              text={paymentAccountLabel} />
+          </Select>
+        </FormGroup>
+
+        <FormGroup
+          label={'Description'}
+          className={'form-group--description'}
+          inline={true}>
+          
+          <TextArea
+            growVertically={true}
+            large={true}
+            {...formik.getFieldProps('description')} />
+        </FormGroup>
+
+        <div class="form__floating-footer">
+          <Button intent={Intent.PRIMARY} type="submit">Save</Button>
+          <Button>Save as Draft</Button>
+          <Button onClick={handleClose}>Close</Button>
+        </div>
+      </form>
+    </div>
+  );
+}

client/src/components/Expenses/ExpensesActionsBar.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  Button,
+  AnchorButton,
+  Classes,
+  Icon
+} from '@blueprintjs/core';
+
+export default function ExpensesActionsBar() {
+
+  const onClickNewAccount = () => {
+
+  };
+
+  return (
+    <div class="dashboard__actions-bar">
+      <AnchorButton
+        className={Classes.MINIMAL}
+        icon={ <Icon icon="plus" /> }
+        href="/dashboard/expenses/new"
+        text="New Expense"
+        onClick={onClickNewAccount} />
+      
+      <Button
+        className={Classes.MINIMAL}
+        icon={ <Icon icon="plus" /> }
+        text="Delete Expense"
+        onClick={onClickNewAccount} />
+
+      <Button
+        className={Classes.MINIMAL}
+        icon={ <Icon icon="plus" /> }
+        text="Bulk Update"
+        onClick={onClickNewAccount} />
+    </div>
+  )
+}

client/src/components/Expenses/ExpensesTable.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+  GridComponent,
+  ColumnsDirective,
+  ColumnDirective,
+  Inject,
+  Sort,
+  
+} from '@syncfusion/ej2-react-grids';
+import {
+  Checkbox,
+  Popover,
+  Button,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+} from '@blueprintjs/core';
+import Icon from 'components/Icon';
+import moment from 'moment';
+
+export default function ExpensesTable({
+  expenses,
+  onDeleteExpense,
+  onEditExpense,
+}) {
+  const onDateStateChange = () => {
+
+  }
+
+  const actionMenuList = (expense) => (
+    <Menu>
+      <MenuItem text="View Details" />
+      <MenuDivider />
+      <MenuItem text="Edit Expense" onClick={() => onEditExpense(expense)} />
+      <MenuItem text="Delete Expense" onClick={() => onDeleteExpense(expense)} />
+    </Menu>
+  );
+  const columns = [
+    {
+      headerText: '',
+      template: () => (<Checkbox />)
+    },
+    {
+      headerText: 'Date',
+      template: (row) => (<span>{ moment(row.date).format('YYYY/MM/DD') }</span>),
+    },
+    {
+      headerText: 'Expense Account',
+      template: (row) => (<span>{ row.expenseAccount.name }</span>),
+    },
+    {
+      headerText: 'Paid Through',
+      template: (row) => (<span>{ row.paymentAccount.name }</span>),
+    },
+    {
+      headerText: 'Amount',
+      field: 'amount'
+    },
+    {
+      headerText: 'Status',
+    },
+    {
+      headerText: '',
+      template: (expense) => (
+        <Popover content={actionMenuList(expense)} position={Position.RIGHT_BOTTOM}>
+          <Button icon={<Icon icon="ellipsis-h" />} />
+        </Popover>
+      )
+    }
+  ]
+  return (
+    <GridComponent
+      allowSorting={true}
+      dataSource={{ result: expenses, count: 20 }}
+      dataStateChange={onDateStateChange}>
+
+      <ColumnsDirective>
+        {columns.map((column) => {
+          return (<ColumnDirective
+            field={column.field}
+            headerText={column.headerText}
+            template={column.template}
+            allowSorting={true}
+            customAttributes={column.customAttributes}
+            />);
+        })}
+      </ColumnsDirective>
+      <Inject services={[Sort]} />
+    </GridComponent>
+  );
+}

client/src/components/Expenses/ExpensesViewsTabs.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import {useHistory} from 'react-router';
+import {connect} from 'react-redux';
+import {
+  Alignment,
+  Navbar,
+  NavbarGroup,
+  Tabs,
+  Tab,
+  Button
+} from "@blueprintjs/core";
+import Icon from 'components/Icon';
+import {useRouteMatch, Link} from 'react-router-dom';
+
+function AccountsViewsTabs({ views }) {
+  const history = useHistory();
+  const {path} = useRouteMatch();
+
+  const handleClickNewView = () => {
+    history.push('/dashboard/custom_views/new');
+  };
+
+  const tabs = views.map((view) => {
+    const link = (<Link to={`${path}/${view.id}/custom_view`}>{ view.name }</Link>);
+    return (<Tab id={`custom_view_${view.id}`} title={link} />);
+  });
+  return (
+    <Navbar className="navbar--dashboard-views">
+      <NavbarGroup
+        align={Alignment.LEFT}>
+        <Tabs
+          id="navbar"
+          large={true}
+          className="tabs--dashboard-views"
+        >
+          { tabs }
+          <Button
+            className="button--new-view"
+            icon={<Icon icon="plus" />}
+            onClick={handleClickNewView} />
+        </Tabs>
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  views: state.views.resourceViews['expenses'],
+});
+
+export default connect(mapStateToProps)(AccountsViewsTabs);

client/src/components/FinancialSheet.js

@@ -0,0 +1,26 @@
+import React, { Children } from 'react';
+
+
+export default function FinancialSheet({
+  companyTitle,
+  sheetType,
+  date,
+  children,
+  accountingBasis
+}) {
+  return (
+    <div class="financial-sheet">
+      <h1 class="financial-sheet__title">{ companyTitle }</h1>
+      <h6 class="financial-sheet__sheet-type">{ sheetType }</h6>
+      <span class="financial-sheet__date">{ date }</span>
+
+      <div class="financial-sheet__table">
+        { children }
+      </div>
+
+      <div class="financial-sheet__accounting-basis">
+        { accountingBasis }
+      </div>
+    </div>
+  );
+}

client/src/components/Icon.js

@@ -0,0 +1,146 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import classNames from "classnames";
+import * as React from "react";
+import { Classes } from '@blueprintjs/core';
+import IconSvgPaths from "static/json/icons";
+import PropTypes from 'prop-types';
+
+export default class Icon extends React.Component{
+  static displayName = `af.Icon`;
+
+  static SIZE_STANDARD = 16;
+  static SIZE_LARGE = 20;
+
+  render() {
+    const { icon } = this.props;
+    if (icon == null || typeof icon === "boolean") {
+      return null;
+    } else if (typeof icon !== "string") {
+      return icon;
+    }
+
+    const {
+      className,
+      color,
+      htmlTitle,
+      iconSize = Icon.SIZE_STANDARD,
+      intent,
+      title = icon,
+      tagName = "span",
+      ...htmlprops
+    } = this.props;
+
+    // choose which pixel grid is most appropriate for given icon size
+    const pixelGridSize = iconSize >= Icon.SIZE_LARGE ? Icon.SIZE_LARGE : Icon.SIZE_STANDARD;
+    const iconPath = this.getSvgPath(icon);
+
+    if (!iconPath){ return null; }
+
+    // render path elements, or nothing if icon name is unknown.
+    const paths = this.renderSvgPaths(iconPath.path);
+
+    const classes = classNames(Classes.ICON, Classes.iconClass(icon), Classes.intentClass(intent), className);
+    const viewBox = iconPath.viewBox;
+
+    return React.createElement(
+      tagName,
+      {
+        ...htmlprops,
+        className: classes,
+        title: htmlTitle,
+      },
+      <svg fill={color} data-icon={icon} width={iconSize} height={iconSize} viewBox={viewBox}>
+        {title && <desc>{title}</desc>}
+        {paths}
+      </svg>,
+    );
+  }
+
+  getSvgPath(iconName) {
+    const svgPathsRecord = IconSvgPaths;
+    const pathStrings = svgPathsRecord[iconName];
+
+    return pathStrings;
+  }
+
+  /** Render `<path>` elements for the given icon name. Returns `null` if name is unknown. */
+  renderSvgPaths(pathStrings) {
+    if (pathStrings == null) {
+      return null;
+    }
+    return pathStrings.map((d, i) => <path key={i} d={d} fillRule="evenodd" />);
+  }
+}
+
+Icon.propTypes = {
+  /**
+   * Color of icon. This is used as the `fill` attribute on the `<svg>` image
+   * so it will override any CSS `color` property, including that set by
+   * `intent`. If this prop is omitted, icon color is inherited from
+   * surrounding text.
+   */
+  color: PropTypes.string,
+
+  /**
+   * String for the `title` attribute on the rendered element, which will appear
+   * on hover as a native browser tooltip.
+   */
+  htmlTitle: PropTypes.string,
+
+  /**
+   * Name of a Blueprint UI icon, or an icon element, to render. This prop is
+   * required because it determines the content of the component, but it can
+   * be explicitly set to falsy values to render nothing.
+   *
+   * - If `null` or `undefined` or `false`, this component will render
+   *   nothing.
+   * - If given an `IconName` (a string literal union of all icon names), that
+   *   icon will be rendered as an `<svg>` with `<path>` tags. Unknown strings
+   *   will render a blank icon to occupy space.
+   * - If given a `JSX.Element`, that element will be rendered and _all other
+   *   props on this component are ignored._ This type is supported to
+   *   simplify icon support in other Blueprint components. As a consumer, you
+   *   should avoid using `<Icon icon={<Element />}` directly; simply render
+   *   `<Element />` instead.
+   */
+  // icon: IconName | MaybeElement;
+
+  /**
+   * Size of the icon, in pixels. Blueprint contains 16px and 20px SVG icon
+   * images, and chooses the appropriate resolution based on this prop.
+   * @default Icon.SIZE_STANDARD = 16
+   */
+  iconSize: PropTypes.number,
+
+  /** CSS style properties. */
+  style: PropTypes.object,
+
+  /**
+   * HTML tag to use for the rendered element.
+   * @default "span"
+   */
+  // tagName?: keyof JSX.IntrinsicElements
+
+  /**
+   * Description string. This string does not appear in normal browsers, but
+   * it increases accessibility. For instance, screen readers will use it for
+   * aural feedback. By default, this is set to the icon's name. Pass an
+   * explicit falsy value to disable.
+   */
+  title: PropTypes.string,
+}

client/src/components/Items/ItemForm.js

@@ -0,0 +1,15 @@
+
+
+export default function ItemForm() {
+  
+  // Type
+  // Name
+  //
+  
+  return (
+    <div class="item-form">
+
+
+    </div>
+  )
+};

client/src/components/JournalEntry/MakeJournalEntry.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  FormGroup,
+  MenuItem,
+  Intent,
+  InputGroup,
+  Position,
+  Button,
+} from '@blueprintjs/core';
+import { DateInput, TimePrecision } from "@blueprintjs/datetime";
+import {
+  GridComponent,
+  ColumnsDirective,
+  ColumnDirective,
+  Inject,
+  Sort,
+} from '@syncfusion/ej2-react-grids';
+import {momentFormatter} from 'utils';
+
+export default function MakeJournalEntry({
+  accounts,
+  currencies,
+}) {
+
+  const handleDateChange = () => {
+
+  };
+
+  const handleClose = () => {
+
+  };
+
+  const columns = [
+    {
+      headerText: 'Account',
+    },
+    {
+      headerText: 'Description',
+    },
+    {
+      headerText: 'Account',
+    },
+    {
+      headerText: 'Debit',
+    },
+    {
+      headerText: 'Credit',
+    }
+  ];
+
+  return (
+    <div class="make-journal-entry">
+      <div class="make-journal-entry__details">
+        <FormGroup
+          label={'Date'}
+          inline={true}>
+
+          <DateInput
+            {...momentFormatter('MM/DD/YYYY')}
+            defaultValue={new Date()}
+            onChange={handleDateChange}
+            popoverProps={{ position: Position.BOTTOM }}
+          />
+        </FormGroup>
+
+        <GridComponent>
+          <ColumnsDirective>
+            {columns.map((column) => {
+              return (<ColumnDirective
+                field={column.field}
+                headerText={column.headerText}
+                template={column.template}
+                allowSorting={true}
+                customAttributes={column.customAttributes}
+                />);
+              })}
+          </ColumnsDirective>
+        </GridComponent>
+
+        <div class="form__floating-footer">
+          <Button onClick={handleClose}>Close</Button>
+          <Button intent={Intent.PRIMARY} type="submit">
+            { 'Save and Publish' }
+          </Button>
+
+          <Button intent={Intent.PRIMARY} type="submit">
+            { 'Save as Draft' }
+          </Button>
+        </div>
+
+      </div>
+    </div>
+  )
+}

client/src/components/LazyLoader.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as Loadable from 'react-loadable';
+
+const Loader = (config) =>
+  Loadable({
+    loading: (props) => {
+      if (props.error) {
+        /* tslint:disable */
+        console.error(`======= DefaultLoader Error =======`);
+        console.error(props.error);
+        console.error(`======= DefaultLoader Error =======`);
+        /* tslint:enable */
+        return null;
+      }
+      return null;
+    },
+    delay: 250,
+    ...config
+  });
+
+export default Loader;

client/src/components/LoadingIndicator.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {Spinner} from '@blueprintjs/core';
+
+export default function LoadingIndicator({
+  loading,
+  spinnerSize = 40,
+  children
+}) {
+  return (
+    <>
+      { (loading) ? (
+        <div class="dashboard__loading-indicator">
+          <Spinner size={spinnerSize} value={null} />
+        </div>) : children }
+    </>
+  );
+}

client/src/components/Preferences/PreferencesContent.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
+import PreferencesContentRoute from 'components/Preferences/PreferencesContentRoute';
+
+export default function() {
+  return (
+    <div className="dashboard-content" id="dashboard">
+      <PreferencesTopbar pageTitle={"asdad"}/>
+      
+      <div class="dashboard__preferences-content">
+        <PreferencesContentRoute />
+      </div>
+    </div>
+  )
+}

client/src/components/Preferences/PreferencesContentRoute.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Route, Switch, useRouteMatch } from 'react-router-dom';
+import preferencesRoutes from 'routes/preferences'
+
+export default function DashboardContentRoute() {
+  const { path } = useRouteMatch();
+
+  return (
+    <Route pathname="/dashboard/preferences">
+      <Switch>
+        { preferencesRoutes.map((route, index) => (
+          <Route
+            key={index}
+            path={`${path}/${route.path}`}
+            exact={route.exact}
+            component={route.component}
+          />          
+        ))}
+      </Switch>
+    </Route>
+  );
+}

client/src/components/Preferences/PreferencesPage.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
+
+export default function PreferencesPage() {
+  return (
+    <div class="preferences-page">
+      <PreferencesSidebar />
+    </div>
+  )
+}

client/src/components/Preferences/PreferencesSidebar.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {Menu, MenuItem, MenuDivider} from '@blueprintjs/core';
+import {useHistory} from 'react-router-dom';
+import preferencesMenu from 'config/preferencesMenu';
+
+export default function PreferencesSidebar() {
+  const history = useHistory();
+  
+  const items = preferencesMenu.map((item) => (
+    (item.divider) ?
+      <MenuDivider title={item.title} /> : 
+      <MenuItem
+        text={item.text}
+        label={item.label}
+        disabled={item.disabled}
+        onClick={() => { history.push(item.href); }} />
+  ));
+
+  return (
+    <div class="preferences__sidebar">
+      <div class="preferences__sidebar-head">
+        <h2>Preferences</h2>
+      </div>
+
+      <Menu className="preferences__sidebar-menu">
+        { items }
+      </Menu>
+    </div>
+  );
+}

client/src/components/Preferences/PreferencesSubContent.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import preferencesTabs from 'routes/preferencesTabs';
+import {Switch, Route, useRouteMatch} from 'react-router-dom';
+
+export default function PreferencesSubContent({ preferenceTab }) {
+  const routes = preferencesTabs[preferenceTab];
+  const {path} = useRouteMatch();
+
+  if (routes.length <= 0) { return null; }
+
+  return (
+    <Switch>
+      { routes.map((route, index) => (
+        <Route
+          key={index}
+          path={`${path}/${route.path}`}
+          exact={route.exact}
+          component={route.component}
+        />          
+      ))}
+    </Switch>);
+}

client/src/components/Preferences/PreferencesTopbar.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
+
+export default function PreferencesTopbar() {
+  return (
+    <div class="dashboard__preferences-topbar">
+      <h2>Accounts</h2>
+
+      <div class="dashboard__topbar-user">
+        <DashboardTopbarUser />
+      </div>
+    </div>
+  );
+}

client/src/components/Sidebar/SidebarHead.js

@@ -9,7 +9,7 @@ export default function() {
       </div>
 
       <div className="sidebar__head-company-meta">
-        <div className="comapny-name">
+        <div className="company-name">
           { appMeta.app_name } 
         </div>
 

client/src/components/Sidebar/SidebarMenu.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {Menu, MenuItem, MenuDivider} from "@blueprintjs/core";
 import {useHistory} from 'react-router-dom';
 import sidebarMenuList from 'config/sidebarMenu';
+import Icon from 'components/Icon';
 
 export default function SidebarMenu() {
   let history = useHistory();
@@ -11,7 +12,7 @@ export default function SidebarMenu() {
       <MenuDivider
         title={item.title} /> : 
       <MenuItem
-        icon={item.icon}
+        icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
         text={item.text}
         label={item.label}
         disabled={item.disabled}

client/src/components/Views/ViewForm.js

@@ -0,0 +1,329 @@
+import React, {useState, useEffect} from 'react';
+import {Formik, useFormik, ErrorMessage} from "formik";
+import {useIntl} from 'react-intl';
+import {
+  InputGroup,
+  FormGroup,
+  Intent,
+  Button,
+  MenuItem,
+  Classes,
+  HTMLSelect,
+  Menu,
+  H5,
+  H6,
+} from "@blueprintjs/core";
+import {Row, Col} from 'react-grid-system';
+import { ReactSortable } from 'react-sortablejs';
+import * as Yup from 'yup';
+import {pick} from 'lodash';
+import Icon from 'components/Icon';
+import ViewFormConnect from 'connectors/ViewFormPage.connector';
+import {compose} from 'utils';
+
+function ViewForm({
+  columns,
+  fields,
+  viewColumns,
+  viewForm,
+  submitView,
+  editView,
+  onDelete,
+}) {
+  const intl = useIntl();
+  const [draggedColumns, setDraggedColumn] = useState([]);
+  const [availableColumns, setAvailableColumns] = useState(columns); 
+
+  const defaultViewRole = {
+    field_key: '',
+    comparator: 'AND',
+    value: '',
+    index: 1,
+  };
+  const validationSchema = Yup.object().shape({
+    resource_name: Yup.string().required(),
+    name: Yup.string().required(),
+    logic_expression: Yup.string().required(),
+    roles: Yup.array().of(
+      Yup.object().shape({
+        comparator: Yup.string().required(),
+        value: Yup.string().required(),
+        field_key: Yup.string().required(),
+        index: Yup.number().required(),
+      })
+    ),
+    columns: Yup.array().of(
+      Yup.object().shape({
+        key: Yup.string().required(),
+        index: Yup.string().required(),
+      }),
+    )
+  });
+  const initialEmptyForm = {
+    resource_name: '',
+    name: '',
+    logic_expression: '',
+    roles: [
+      defaultViewRole,
+    ],
+    columns: [],
+  };
+  const initialForm = { ...initialEmptyForm, ...viewForm };
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema: validationSchema,
+    initialValues: {
+      ...pick(initialForm, Object.keys(initialEmptyForm)),
+      logic_expression: initialForm.roles_logic_expression || '',
+      roles: [
+        ...initialForm.roles.map((role) => {
+          return {
+            ...pick(role, Object.keys(defaultViewRole)),
+            field_key: role.field ? role.field.key : '',
+          };
+        }),
+      ],
+    },
+    onSubmit: (values) => {
+
+      if (viewForm && viewForm.id) {
+        editView(viewForm.id, values).then((response) => {
+
+        });
+      } else {
+        submitView(values).then((response) => {
+
+        });
+      }
+    },
+  });
+
+  useEffect(() => {
+    formik.setFieldValue('columns', draggedColumns.map((column, index) => ({
+      index, key: column.key,
+    })));
+  }, [draggedColumns]);
+
+  const conditionalsItems = [
+    { value: 'and', label: 'AND' },
+    { value: 'or', label: 'OR' },
+  ];
+  const whenConditionalsItems = [
+    { value: '', label: 'When' },
+  ];
+
+  // Compatotors items.
+  const compatatorsItems = [
+    {value: '', label: 'Select a compatator'},
+    {value: 'equals', label: 'Equals'},
+    {value: 'not_equal', label: 'Not Equal'},
+    {value: 'contain', label: 'Contain'},
+    {value: 'not_contain', label: 'Not Contain'},
+  ];
+
+  // Resource fields.
+  const resourceFields = [
+    {value: '', label: 'Select a field'},
+    ...fields.map((field) => ({ value: field.key, label: field.labelName, })),
+  ];
+  // Account item of select accounts field.
+  const selectItem = (item, { handleClick, modifiers, query }) => {
+    return (<MenuItem text={item.label} key={item.key} onClick={handleClick} />)
+  };
+  // Handle click new condition button.
+  const onClickNewRole = () => {
+    formik.setFieldValue('roles', [
+      ...formik.values.roles,
+      {
+        ...defaultViewRole,
+        index: formik.values.roles.length + 1,
+      }
+    ]);
+  };
+  // Handle click remove view role button.
+  const onClickRemoveRole = (viewRole, index) => () => {
+    const viewRoles = [...formik.values.roles];
+    viewRoles.splice(index, 1);
+    viewRoles.map((role, i) => {
+      role.index = i + 1;
+      return role;
+    });
+    formik.setFieldValue('roles', viewRoles);
+  };
+
+  const onClickDeleteView = () => { onDelete(viewForm); };
+  return (
+    <div class="view-form">
+      <form onSubmit={formik.handleSubmit}>
+        <div class="view-form--name-section">
+          <Row>
+            <Col sm={8}>
+              <FormGroup
+                label={intl.formatMessage({'id': 'View Name'})}
+                className={'form-group--name'}
+                intent={formik.errors.name && Intent.DANGER}
+                helperText={formik.errors.name && formik.errors.label}
+                inline={true}
+                fill={true}>
+
+                <InputGroup
+                  intent={formik.errors.name && Intent.DANGER}
+                  fill={true}
+                  {...formik.getFieldProps('name')} />
+              </FormGroup>
+            </Col>
+          </Row>
+        </div>
+   
+        <H5 className="mb2">Define the conditionals</H5>
+
+        {formik.values.roles.map((role, index) => (
+          <Row class="view-form__role-conditional">
+            <Col sm={2} class="flex">
+              <div class="mr2 pt1 condition-number">{ index + 1 }</div>
+              {(index === 0) ? (
+                <HTMLSelect options={whenConditionalsItems} className={Classes.FILL} />
+              ) : (
+                <HTMLSelect options={conditionalsItems} className={Classes.FILL} />
+              )}
+            </Col>
+
+            <Col sm={2}>
+              <FormGroup
+                intent={formik.getFieldMeta(`roles[${index}].field_key`).error && Intent.DANGER}>
+
+                <HTMLSelect
+                  options={resourceFields}
+                  value={role.field}
+                  className={Classes.FILL}
+                  {...formik.getFieldProps(`roles[${index}].field_key`)} />
+              </FormGroup>
+            </Col>
+
+            <Col sm={2}>
+              <FormGroup
+                intent={formik.getFieldMeta(`roles[${index}].comparator`).error && Intent.DANGER}>
+
+                <HTMLSelect
+                  options={compatatorsItems}
+                  value={role.comparator}
+                  className={Classes.FILL}
+                  {...formik.getFieldProps(`roles[${index}].comparator`)} />
+              </FormGroup>
+            </Col>
+
+            <Col sm={5} class="flex">
+              <FormGroup>
+                <InputGroup
+                  placeholder={intl.formatMessage({'id': 'value'})}
+                  intent={formik.getFieldMeta(`roles[${index}].value`).error && Intent.DANGER}
+                  {...formik.getFieldProps(`roles[${index}].value`)} />
+              </FormGroup>
+              
+              <Button 
+                icon={<Icon icon="mines" />}
+                iconSize={14}
+                className="ml2"
+                minimal={true} 
+                intent={Intent.DANGER}
+                onClick={onClickRemoveRole(role, index)} />
+            </Col>
+          </Row>
+        ))}
+
+      <div class="mt1">
+        <Button
+          minimal={true}
+          intent={Intent.PRIMARY}
+          onClick={onClickNewRole}>
+          + New Conditional
+        </Button>
+      </div>
+
+      <div class="view-form--logic-expression-section">
+        <Row>
+          <Col sm={8}>
+            <FormGroup
+              label={intl.formatMessage({'id': 'Logic Expression'})}
+              className={'form-group--logic-expression'}
+              intent={formik.errors.logic_expression && Intent.DANGER}
+              helperText={formik.errors.logic_expression && formik.errors.logic_expression}
+              inline={true}
+              fill={true}>
+
+              <InputGroup intent={formik.errors.logic_expression && Intent.DANGER} fill={true}
+                {...formik.getFieldProps('logic_expression')} />
+            </FormGroup>
+          </Col>
+        </Row>
+
+      </div>
+      <H5 className={'mb2'}>Columns Preferences</H5>
+      
+      <div class="dragable-columns">
+        <Row>
+          <Col sm={4} className="dragable-columns__column">
+            <H6 className="dragable-columns__title">Available Columns</H6>
+
+            <InputGroup
+              placeholder={intl.formatMessage({id: 'search'})}
+              leftIcon="search" />
+
+            <div class="dragable-columns__items">
+              <Menu>
+                <ReactSortable
+                  list={availableColumns}
+                  setList={setAvailableColumns}
+                  group="shared-group-name">
+                  {availableColumns.map((field) => (
+                    <MenuItem key={field.id} text={field.label} />
+                  ))}
+                </ReactSortable>
+              </Menu>
+            </div>
+          </Col>
+
+          <Col sm={1}>
+            <div class="dragable-columns__arrows">
+              <div><Icon icon="arrow-circle-left" iconSize={30} color="#cecece" /></div>
+              <div class="mt2"><Icon icon="arrow-circle-right" iconSize={30} color="#cecece" /></div>
+            </div>
+          </Col>
+
+          <Col sm={4} className="dragable-columns__column">
+            <H6 className="dragable-columns__title">Selected Columns</H6>
+            <InputGroup placeholder={intl.formatMessage({id: 'search'})} leftIcon="search" />
+
+            <div class="dragable-columns__items">
+              <Menu>
+                <ReactSortable
+                  list={draggedColumns}
+                  setList={setDraggedColumn}
+                  group="shared-group-name">
+                  {draggedColumns.map((field) => (
+                    <MenuItem key={field.id} text={field.label} />
+                  ))}
+                </ReactSortable>
+              </Menu>
+            </div>
+          </Col>
+        </Row>
+      </div>
+      
+      <div class="form__floating-footer">
+        <Button intent={Intent.PRIMARY} type="submit">Submit</Button>
+        <Button intent={Intent.NONE} type="submit" className="ml2">Cancel</Button>
+
+        { (viewForm && viewForm.id) && (
+          <Button intent={Intent.DANGER} onClick={onClickDeleteView}>Delete</Button>
+        ) }
+      </div>
+    </form>
+  </div>
+  );
+}
+
+export default compose(
+  ViewFormConnect,
+)(ViewForm);