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);

client/src/config/app.js

@@ -1,4 +1,4 @@
 export default {
   "app_name": "Ratteb",
-  "app_version": "0.0.1",
+  "app_version": "0.0.1 (build 12344)",
 }

client/src/config/preferencesMenu.js

@@ -0,0 +1,52 @@
+
+export default [
+  {
+    text: 'General',
+    disabled: false,
+    href: '/dashboard/preferences/general',
+  },
+  {
+    text: 'Users',
+    href: '/dashboard/preferences/users',
+  },
+  {
+    text: 'Accountant',
+    disabled: false,
+    href: '/dashboard/preferences/accountant',
+  },
+  {
+    text: 'Accounts',
+    disabled: false,
+    href: '/dashboard/preferences/accounts',
+  },
+  {
+    text: 'Credit Notes',
+    disabled: false,
+    href: '/dashboard/preferences/credit_note',
+  },
+  {
+    text: 'Debit Notes',
+    disabled: false,
+    href: '/dashboard/preferences/debit_note',
+  },
+  {
+    text: 'Accountant',
+    disabled: false,
+    href: '/dashboard/preferences/accountant',
+  },
+  {
+    text: 'Accounts',
+    disabled: false,
+    href: '/dashboard/preferences/accounts',
+  },
+  {
+    text: 'Credit Notes',
+    disabled: false,
+    href: '/dashboard/preferences/credit_note',
+  },
+  {
+    text: 'Debit Notes',
+    disabled: false,
+    href: '/dashboard/preferences/debit_note',
+  },
+]

client/src/config/sidebarMenu.js

@@ -5,7 +5,8 @@ export default [
     divider: true,
   },
   {
-    icon: 'cut',
+    icon: 'homepage',
+    iconSize: 20,
     text: 'Homepage',
     disabled: false,
     href: '/dashboard/homepage',
@@ -14,8 +15,39 @@ export default [
     divider: true,
   },
   {
-    icon: 'cut',
-    text: 'Chart of Accounts',
+    icon: 'balance-scale',
+    iconSize: 20,
+    text: 'Financial',
+    href: '/dashboard/accounts',
+    children: [
+      {
+        text: 'cut',
+        label: '⌘C',
+        disabled: false,
+      },
+
+      {
+        text: 'cut',
+        label: '⌘C',
+        disabled: false,
+      },
+      {
+        text: 'cut',
+        label: '⌘C',
+        disabled: false,
+      },
+
+      {
+        text: 'cut',
+        label: '⌘C',
+        disabled: false,
+      },
+    ]
+  },
+  {
+    icon: 'university',
+    iconSize: 20,
+    text: 'Banking',
     href: '/dashboard/accounts',
     children: [
       {
@@ -26,4 +58,73 @@ export default [
       }
     ]
   },
+  {
+    icon: 'shopping-cart',
+    iconSize: 20,
+    text: 'Sales',
+    href: '/dashboard/accounts',
+    children: [
+      {
+        icon: 'cut',
+        text: 'cut',
+        label: '⌘C',
+        disabled: false,
+      }
+    ]
+  },
+  {
+    icon: 'balance-scale',
+    iconSize: 20,
+    text: 'Purchases',
+    href: '/dashboard/accounts',
+    children: [
+      {
+        icon: 'cut',
+        text: 'cut',
+        label: '⌘C',
+        disabled: false,
+      }
+    ]
+  },
+  {
+    icon: 'analytics',
+    iconSize: 18,
+    text: 'Financial Reports',
+    href: '/dashboard/accounts',
+    children: [
+      {
+        icon: 'cut',
+        text: 'cut',
+        label: '⌘C',
+        disabled: false,
+      }
+    ]
+  },
+  {
+    text: 'Expenses',
+    href: '/dashboard/expenses',
+  },
+  {
+    text: 'New Expenses',
+    href: '/dashboard/expenses/new',
+  },
+  {
+    text: 'Make Journal',
+    href: '/dashboard/accounting/make-journal-entry'
+  },
+  {
+    text: 'Balance Sheet',
+    href: '/dashboard/accounting/balance-sheet',
+  },
+  {
+    divider: true,
+  },
+  {
+    text: 'Preferences',
+    href: '/dashboard/preferences',
+  },
+  {
+    text: 'Auditing System',
+    href: '/dashboard/accounts',
+  },
 ]

client/src/connectors/AccountFormDialog.connector.js

@@ -0,0 +1,31 @@
+import {connect} from 'react-redux';
+import {
+  fetchAccountTypes,
+  fetchAccountsList,
+  submitAccount,
+  fetchAccount,
+  editAccount,
+} from 'store/accounts/accounts.actions';
+import {getDialogPayload} from 'store/dashboard/dashboard.reducer';
+import t from 'store/types';
+
+export const mapStateToProps = (state, props) => {
+  const dialogPayload = getDialogPayload(state, 'account-form');
+
+  return {
+    accountsTypes: state.accounts.accountsTypes,
+    accounts: state.accounts.accounts,
+    name: 'account-form',
+    payload: {action: 'new', id: null},
+    editAccount: dialogPayload && dialogPayload.action === 'edit' 
+      ? state.accounts.accountsById[dialogPayload.id] : {},
+  };
+};
+
+export const mapDispatchToProps = (dispatch) => ({
+  submitAccount: ({ form }) => dispatch(submitAccount({ form })),
+  fetchAccounts: () => dispatch(fetchAccountsList()),
+  fetchAccountTypes: () => dispatch(fetchAccountTypes()),
+  fetchAccount: (id) => dispatch(fetchAccount({ id })),
+});
+export default connect(mapStateToProps, mapDispatchToProps);

client/src/connectors/Accounts.connector.js

@@ -0,0 +1,39 @@
+import { connect } from 'react-redux';
+import {useParams} from 'react-router-dom';
+import t from 'store/types';
+import {
+  fetchAccountTypes,
+  fetchAccountsList,
+  deleteAccount,
+  inactiveAccount,
+} from 'store/accounts/accounts.actions';
+import {
+  getAccountsItems,
+} from 'store/accounts/accounts.selectors';
+import {
+  getResourceViews,
+} from 'store/customViews/customViews.selectors';
+
+const mapStateToProps = (state, props) => ({
+  views: getResourceViews(state, 'accounts'),
+  accounts: getAccountsItems(state, state.accounts.currentViewId),
+});
+
+const mapActionsToProps = (dispatch) => ({
+  fetchAccounts: (query) => dispatch(fetchAccountsList({ query })),
+  fetchAccountTypes: () => dispatch(fetchAccountTypes()),
+  deleteAccount: (id) => dispatch(deleteAccount({ id })),
+  inactiveAccount: (id) => dispatch(inactiveAccount({ id })),
+  addBulkActionAccount: (id) => dispatch({
+    type: t.ACCOUNT_BULK_ACTION_ADD, account_id: id
+  }),
+  removeBulkActionAccount: (id) => dispatch({
+    type: t.ACCOUNT_BULK_ACTION_REMOVE, account_id: id,
+  }),
+  changeCurrentView: (id) => dispatch({
+    type: t.ACCOUNTS_SET_CURRENT_VIEW,
+    currentViewId: parseInt(id, 10),
+  }),
+});
+
+export default connect(mapStateToProps, mapActionsToProps);

client/src/connectors/CustomView.connector.js

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import {
+  fetchResourceViews,
+} from 'store/customViews/customViews.actions';
+
+const mapStateToProps = (state) => ({
+
+});
+
+const mapActionsToProps = (dispatch) => ({
+  fetchResourceViews: (resourceSlug) => dispatch(fetchResourceViews({ resourceSlug })),
+});
+
+export default connect(mapStateToProps, mapActionsToProps);

client/src/connectors/Dashboard.connector.js

@@ -0,0 +1,25 @@
+
+
+
+import { connect } from 'react-redux';
+import t from 'store/types';
+
+const mapStateToProps = (state) => ({
+  
+});
+
+const mapActionsToProps = (dispatch) => ({
+  changePageTitle: (pageTitle) => dispatch({
+    type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle
+  }),
+
+  changePageSubtitle: (pageSubtitle) => dispatch({
+    type: t.ALTER_DASHBOARD_PAGE_SUBTITLE, pageSubtitle,
+  }),
+
+  setTopbarEditView: (id) => dispatch({
+    type: t.SET_TOPBAR_EDIT_VIEW, id,
+  }),
+});
+
+export default connect(mapStateToProps, mapActionsToProps);

client/src/connectors/Dialog.connector.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import t from 'store/types';
+
+export const mapStateToProps = (state, props) => {
+  return {};
+};
+
+export const mapDispatchToProps = (dispatch) => ({
+  openDialog: (name, payload) => dispatch({ type: t.OPEN_DIALOG, name, payload }),
+  closeDialog: (name, payload) => dispatch({ type: t.CLOSE_DIALOG, name, payload }),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

client/src/connectors/ExpenseForm.connector.js

@@ -0,0 +1,37 @@
+import {connect} from 'react-redux';
+import {
+  fetchExpense,
+  submitExpense,
+  editExpense,
+  deleteExpense,
+} from 'store/expenses/expenses.actions';
+import {
+  fetchAccountsList,
+} from 'store/accounts/accounts.actions';
+import {
+  fetchCurrencies,
+} from 'store/currencies/currencies.actions';
+import t from 'store/types';
+
+export const mapStateToProps = (state, props) => {
+  return {
+    expenseDetails: {},
+    accounts: state.accounts.accounts,
+    currencies: state.currencies.registered,
+  };
+};
+
+export const mapDispatchToProps = (dispatch) => ({
+  changePageTitle: pageTitle => dispatch({
+    type: t.CHANGE_DASHBOARD_PAGE_TITLE,
+    pageTitle,
+  }),
+  fetchCurrencies: () => dispatch(fetchCurrencies()),
+  fetchExpense: (id) => dispatch(fetchExpense({ id })),
+  submitExpense: (form) => dispatch(submitExpense({ form })),
+  editExpense: (id, form) => dispatch(editExpense({ id, form })),
+  fetchAccounts: () => dispatch(fetchAccountsList()),
+  deleteExpense: (id) => dispatch(deleteExpense({ id })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

client/src/connectors/ExpensesList.connector.js

@@ -0,0 +1,23 @@
+import {connect} from 'react-redux';
+import {
+  fetchExpensesList,
+  deleteExpense,
+} from 'store/expenses/expenses.actions';
+import t from 'store/types';
+
+export const mapStateToProps = (state, props) => {
+  return {
+    expenses: state.expenses.list,
+  };
+};
+
+export const mapDispatchToProps = (dispatch) => ({
+  changePageTitle: pageTitle => dispatch({
+    type: t.CHANGE_DASHBOARD_PAGE_TITLE,
+    pageTitle,
+  }),
+  fetchExpenses: (id) => dispatch(fetchExpensesList({ id })),
+  deleteExpense: (id) => dispatch(deleteExpense({ id })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

client/src/connectors/FinancialStatements.connector.js

@@ -0,0 +1,17 @@
+import {connect} from 'react-redux';
+import {
+  fetchGeneralLedger,
+  fetchBalanceSheet,
+} from 'store/financialStatement/financialStatements.actions';
+import t from 'store/types';
+
+export const mapStateToProps = (state, props) => ({
+  generalLedeger: state.financialStatements.generalLedger,
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  fetchGeneralLedger: (query = {}) => dispatch(fetchGeneralLedger({ query })),
+  fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

client/src/connectors/MakeJournalEntries.connect.js

@@ -0,0 +1,17 @@
+
+
+import {connect} from 'react-redux';
+import {
+  makeJournalEntries,
+} from 'store/accounting/accounting.actions';
+import t from 'store/types';
+
+export const mapStateToProps = (state, props) => ({
+
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  makeJournalEntries: (form) => dispatch(makeJournalEntries({ form })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

client/src/connectors/Resource.connector.js

@@ -0,0 +1,21 @@
+import {connect} from 'react-redux';
+import {
+  fetchResourceColumns,
+  fetchResourceFields,
+} from 'store/resources/resources.actions';
+import {
+  getResourceColumns,
+  getResourceFields,
+} from 'store/resources/resources.reducer';
+
+export const mapStateToProps = (state, props) => ({
+  getResourceColumns: (resourceSlug) => getResourceColumns(state, resourceSlug),
+  getResourceFields: (resourceSlug) => getResourceFields(state, resourceSlug),
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  fetchResourceFields: (resourceSlug) => dispatch(fetchResourceFields({ resourceSlug })),
+  fetchResourceColumns: (resourceSlug) => dispatch(fetchResourceColumns({ resourceSlug })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

client/src/connectors/UserFormDialog.connector.js

@@ -0,0 +1,32 @@
+import {connect} from 'react-redux';
+import {
+  submitUser,
+  editUser,
+  fetchUser,
+} from 'store/users/users.actions';
+import {
+  getUserDetails
+} from 'store/users/users.reducer';
+import { getDialogPayload } from 'store/dashboard/dashboard.reducer';
+import t from 'store/types';
+
+export const mapStateToProps = (state, props) => {
+  const dialogPayload = getDialogPayload(state, 'user-form');
+
+  return {
+    name: 'user-form',
+    payload: {action: 'new', id: null},
+    userDetails: dialogPayload.action === 'edit'
+      ? getUserDetails(state, dialogPayload.user.id) : {},
+  };
+};
+
+export const mapDispatchToProps = (dispatch) => ({
+  openDialog: (name, payload) => dispatch({ type: t.OPEN_DIALOG, name, payload }),
+  closeDialog: (name, payload) => dispatch({ type: t.CLOSE_DIALOG, name, payload }),
+  submitUser: (form) => dispatch(submitUser({ form })),
+  editUser: (id, form) => dispatch(editUser({ form, id })),
+  fetchUser: (id) => dispatch(fetchUser({ id })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

client/src/connectors/UsersList.connector.js

@@ -0,0 +1,22 @@
+import {connect} from 'react-redux';
+import {
+  fetchUsers,
+  fetchUser,
+  deleteUser,
+} from 'store/users/users.actions';
+import t from 'store/types';
+
+export const mapStateToProps = (state, props) => ({
+  usersList: state.users.list
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  openDialog: (name, payload) => dispatch({ type: t.OPEN_DIALOG, name, payload }),
+  closeDialog: (name, payload) => dispatch({ type: t.CLOSE_DIALOG, name, payload }),
+
+  fetchUsers: () => dispatch(fetchUsers({  })),
+  fetchUser: (id) => dispatch(fetchUser({ id })),
+  deleteUser: (id) => dispatch(deleteUser({ id })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

client/src/connectors/UsersPreferences.connector.js

@@ -0,0 +1,13 @@
+import {connect} from 'react-redux';
+import t from 'store/types';
+
+export const mapStateToProps = (state, props) => {
+
+};
+
+export const mapDispatchToProps = (dispatch) => ({
+  openDialog: (name, payload) => dispatch({ type: t.OPEN_DIALOG, name, payload }),
+  closeDialog: (name, payload) => dispatch({ type: t.CLOSE_DIALOG, name, payload }),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

client/src/connectors/View.connector.js

@@ -0,0 +1,25 @@
+import {connect} from 'react-redux';
+import {
+  fetchView,
+  submitView,
+  deleteView,
+  editView,
+} from 'store/customViews/customViews.actions';
+import {
+  getViewMeta,
+  getViewItem,
+} from 'store/customViews/customViews.selectors';
+
+export const mapStateToProps = (state) => ({
+  getViewMeta: (viewId) => getViewMeta(state, viewId),
+  getViewItem: (viewId) => getViewItem(state, viewId),
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  fetchView: (id) => dispatch(fetchView({ id })),
+  submitView: (form) => dispatch(submitView({ form })),
+  editView: (id, form) => dispatch(editView({ id, form })),
+  deleteView: (id) => dispatch(deleteView({ id })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

client/src/connectors/ViewFormPage.connector.js

@@ -0,0 +1,36 @@
+import {connect} from 'react-redux';
+import {
+  fetchResourceColumns,
+  fetchResourceFields,
+} from 'store/resources/resources.actions';
+import {
+  getResourceColumns,
+  getResourceFields,
+} from 'store/resources/resources.reducer';
+import {
+  fetchView,
+  submitView,
+  editView,
+} from 'store/customViews/customViews.actions';
+import t from 'store/types';
+
+export const mapStateToProps = (state, props) => {
+  return {
+    getResourceColumns: (resourceSlug) => getResourceColumns(state, resourceSlug),
+    getResourceFields: (resourceSlug) => getResourceFields(state, resourceSlug),
+  };
+};
+
+export const mapDispatchToProps = (dispatch) => ({
+  changePageTitle: pageTitle => dispatch({
+    type: t.CHANGE_DASHBOARD_PAGE_TITLE,
+    pageTitle,
+  }),
+  fetchResourceFields: (resourceSlug) => dispatch(fetchResourceFields({ resourceSlug })),
+  fetchResourceColumns: (resourceSlug) => dispatch(fetchResourceColumns({ resourceSlug })),
+  fetchView: (id) => dispatch(fetchView({ id })),
+  submitView: (form) => dispatch(submitView({ form })),
+  editView: (id, form) => dispatch(editView({ id, form })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

client/src/containers/Authentication/Login.js

@@ -1,64 +1,112 @@
-import * as React from "react";
+import React, { useEffect } from "react";
 import {Link} from 'react-router-dom';
 import * as Yup from 'yup';
 import {useFormik} from 'formik';
 import {connect} from 'react-redux';
 import {useIntl} from 'react-intl';
-import login from 'store/actions/auth';
-import {Button, InputGroup, Intent, FormGroup} from "@blueprintjs/core";
+import {
+  Button,
+  InputGroup,
+  Intent,
+  FormGroup,
+} from "@blueprintjs/core";
+import login from 'store/authentication/authentication.actions';
+import {hasErrorType} from 'store/authentication/authentication.reducer';
+import AuthenticationToaster from 'components/AppToaster';
+import t from 'store/types';
 
-const loginValidationSchema = Yup.object().shape({
-  credential: Yup.string().required('Required'),
-  password: Yup.string().required('Required'),
-});
-
-function Login({ login }) {
+const ERRORS_TYPES = {
+  INVALID_DETAILS: 'INVALID_DETAILS',
+  USER_INACTIVE: 'USER_INACTIVE',
+};
+function Login({
+  login,
+  errors,
+  clearErrors,
+  hasError,
+}) {
   const intl = useIntl();
+
+  // Validation schema.
+  const loginValidationSchema = Yup.object().shape({
+    crediential: Yup
+      .string()
+      .required(intl.formatMessage({'id': 'required'}))
+      .email(intl.formatMessage({id: 'invalid_email_or_phone_numner'})),
+    password: Yup
+      .string()
+      .required(intl.formatMessage({id: 'required'}))
+      .min(4),
+  });
+
+  // Formik validation schema and submit handler.
   const formik = useFormik({
     initialValues: {
-      credential: '',
+      crediential: '',
       password: '',
     },
     validationSchema: loginValidationSchema,
-    onSubmit: (values) => {
+    onSubmit: async (values) => {
       login({
-        credential: values.credential,
+        crediential: values.crediential,
         password: values.password,
-      }).then(() => {
-
-      }).catch((errors) => {
-
       });
     },
   });
 
+  useEffect(() => {
+    const toastBuilders = [];
+    if (hasError(ERRORS_TYPES.INVALID_DETAILS)) {
+      toastBuilders.push({
+        message: intl.formatMessage({ id: 'invalid_email_or_phone_numner' }),
+        intent: Intent.WARNING,
+      });
+    }
+    if (hasError(ERRORS_TYPES.USER_INACTIVE)) {
+      toastBuilders.push({
+        message: intl.formatMessage({ id: 'the_user_has_been_suspended_from_admin' }),
+        intent: Intent.WARNING,
+      });
+    }
+    toastBuilders.forEach(builder => {
+      AuthenticationToaster.show(builder);
+    });
+  }, [hasError, intl]);
+
+  // Handle unmount component
+  useEffect(() => () => {
+    if (errors.length > 0) {
+      clearErrors();
+    }
+  });
+
   return (
     <div className="login-page">
       <form onSubmit={formik.handleSubmit}>
         <FormGroup
-          className={'form-group--email-phone-number'}
-          intent={formik.errors.credential && Intent.DANGER}
-          helperText={formik.errors.credential && formik.errors.credential}>
+          className={'form-group--crediential'}
+          intent={formik.errors.crediential && Intent.DANGER}
+          helperText={formik.errors.crediential && formik.errors.crediential}>
 
           <InputGroup
             leftIcon="user"
             placeholder={intl.formatMessage({'id': 'email_or_phone_number'})}
             large={true}
-            
-            intent={formik.errors.credential && Intent.DANGER}
-            {...formik.getFieldProps('credential')} />
+            intent={formik.errors.crediential && Intent.DANGER}
+            {...formik.getFieldProps('crediential')} />
         </FormGroup>
 
         <FormGroup
           className={'form-group--password'}
-          intent={formik.errors.credential && Intent.DANGER}
+          intent={formik.errors.password && Intent.DANGER}
           helperText={formik.errors.password && formik.errors.password}>
 
           <InputGroup
             leftIcon="info-sign"
             placeholder={intl.formatMessage({'id': 'password'})}
             large={true}
-            intent={formik.errors.credential && Intent.DANGER}
+            intent={formik.errors.password && Intent.DANGER}
+            type={"password"}
             {...formik.getFieldProps('password')} />
         </FormGroup>
 
@@ -76,11 +124,17 @@ function Login({ login }) {
         </Link>
       </div>
     </div>
-  )
+  );
 }
 
+const mapStateToProps = (state) => ({
+  hasError: (errorType) => hasErrorType(state, errorType),
+  errors: state.authentication.errors,
+});
+
 const mapDispatchToProps = (dispatch) => ({
   login: form => dispatch(login({ form })),
+  clearErrors: () => dispatch({ type: t.LOGIN_CLEAR_ERRORS }),
 });
 
-export default connect(null, mapDispatchToProps)(Login);
+export default connect(mapStateToProps, mapDispatchToProps)(Login);

client/src/containers/Dashboard/Accounting/MakeJournalEntriesFooter.js

@@ -0,0 +1,51 @@
+import React, {useMemo} from 'react';
+import {
+  Intent,
+  Button,
+} from '@blueprintjs/core';
+import { FormattedList } from 'react-intl';
+
+export default function MakeJournalEntriesFooter({
+  formik,
+}) {
+  const creditSum = useMemo(() => {
+    return formik.values.entries.reduce((sum, entry) => {
+      return entry.credit + sum;
+    }, 0);
+  }, [formik.values.entries]);
+
+  const debitSum = useMemo(() => {
+    return formik.values.entries.reduce((sum, entry) => {
+      return entry.debit + sum;
+    }, 0);
+  }, [formik.values.entries]);
+
+  return (
+    <div>
+      <table>
+        <tbody>
+          <tr>
+            <td><strong>Total</strong></td>
+            <td>{ creditSum }</td>
+            <td>{ debitSum }</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="form__floating-footer">
+        <Button
+          intent={Intent.PRIMARY}
+          type="submit">
+          Save
+        </Button>
+
+        <Button
+          intent={Intent.PRIMARY}
+          type="submit"
+          className={'ml2'}>
+          Save & New
+        </Button>
+      </div>
+    </div>
+  );
+}

client/src/containers/Dashboard/Accounting/MakeJournalEntriesForm.js

@@ -0,0 +1,93 @@
+
+
+import React, {useState, useEffect} from 'react';
+import * as Yup from 'yup';
+import MakeJournalEntriesHeader from './MakeJournalEntriesHeader';
+import MakeJournalEntriesFooter from './MakeJournalEntriesFooter';
+import MakeJournalEntriesTable from './MakeJournalEntriesTable';
+import {Formik, useFormik} from "formik";
+import MakeJournalEntriesConnect from 'connectors/MakeJournalEntries.connect';
+import AccountsConnect from 'connectors/Accounts.connector';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import {compose} from 'utils';
+import useAsync from 'hooks/async';
+import moment from 'moment';
+import AppToaster from 'components/AppToaster';
+
+function MakeJournalEntriesForm({
+  makeJournalEntries,
+  fetchAccounts,
+  changePageTitle,
+}) {
+  useEffect(() => {
+    changePageTitle('New Journal');  
+  }, []);
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      fetchAccounts(),
+    ]);
+  });
+
+  const validationSchema = Yup.object().shape({
+    date: Yup.date().required(),
+    reference: Yup.string(),
+    description: Yup.string(),
+    entries: Yup.array().of(
+      Yup.object().shape({
+        credit: Yup.number().nullable(),
+        debit: Yup.number().nullable(),
+      }),
+    )
+  });
+
+  const defaultEntry = {
+    account_id: null,
+    credit: null,
+    debit: null,
+    note: '',    
+  };
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema,
+    initialValues: {
+      reference: '',
+      date: moment(new Date()).format('YYYY-MM-DD'),
+      description: '',
+      entries: [
+        defaultEntry,
+        defaultEntry,
+        defaultEntry,
+        defaultEntry,
+      ],
+    },
+    onSubmit: (values) => {
+      const form = values.entries.filter((entry) => (
+        (entry.credit || entry.debit)
+      ));
+      makeJournalEntries(values).then((response) => {
+        AppToaster.show({
+          message: 'the_account_has_been_submit',
+        });
+      }).catch((error) => {
+
+      });
+    },
+  });
+
+  console.log(formik.errors);
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <MakeJournalEntriesHeader formik={formik} />
+      <MakeJournalEntriesTable formik={formik} />
+      <MakeJournalEntriesFooter formik={formik} />
+    </form>
+  );
+}
+
+export default compose(
+  MakeJournalEntriesConnect,
+  AccountsConnect,
+  DashboardConnect,
+)(MakeJournalEntriesForm);

client/src/containers/Dashboard/Accounting/MakeJournalEntriesHeader.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import * as Yup from 'yup';
+import {
+  InputGroup,
+  FormGroup,
+  Intent,
+  Position,
+} from '@blueprintjs/core';
+import {DatePicker, DateInput} from '@blueprintjs/datetime';
+import {Formik, useFormik} from "formik";
+import {useIntl} from 'react-intl';
+import {Row, Col} from 'react-grid-system';
+import moment from 'moment';
+import {momentFormatter} from 'utils';
+
+export default function MakeJournalEntriesHeader({
+  formik
+}) {
+  const intl = useIntl();
+ 
+  const handleDateChange = (date) => {
+    const formatted = moment(date).format('YYYY-MM-DD');
+    formik.setFieldValue('date', formatted);
+  };
+  return (
+    <div class="make-journal-entries__header">
+      <Row>
+        <Col sm={4}>
+          <FormGroup
+            label={intl.formatMessage({'id': 'reference'})}
+            className={'form-group--reference'}
+            intent={formik.errors.name && Intent.DANGER}
+            helperText={formik.errors.name && formik.errors.label}
+            fill={true}>
+
+            <InputGroup
+              intent={formik.errors.name && Intent.DANGER}
+              fill={true}
+              {...formik.getFieldProps('reference')} />
+          </FormGroup>
+        </Col>
+
+        <Col sm={3}>
+          <FormGroup
+            label={intl.formatMessage({'id': 'date'})}
+            intent={formik.errors.date && Intent.DANGER}
+            helperText={formik.errors.date && formik.errors.date}
+            minimal={true}>
+
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              defaultValue={new Date()}
+              onChange={handleDateChange}
+              popoverProps={{ position: Position.BOTTOM }} />
+          </FormGroup>
+        </Col>
+
+        <Col sm={4}>
+          <FormGroup
+            label={intl.formatMessage({'id': 'description'})}
+            className={'form-group--description'}
+            intent={formik.errors.name && Intent.DANGER}
+            helperText={formik.errors.name && formik.errors.label}
+            fill={true}>
+
+            <InputGroup
+              intent={formik.errors.name && Intent.DANGER}
+              fill={true}
+              {...formik.getFieldProps('description')} />
+          </FormGroup>
+        </Col>
+      </Row>
+    </div>
+  );
+}

client/src/containers/Dashboard/Accounting/MakeJournalEntriesPage.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import MakeJournalEntriesForm from './MakeJournalEntriesForm';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import {compose} from 'utils';
+
+function MakeJournalEntriesPage() {
+  return (
+    <MakeJournalEntriesForm />
+  );
+}
+
+export default compose(
+  DashboardConnect,
+)(MakeJournalEntriesPage);

client/src/containers/Dashboard/Accounting/MakeJournalEntriesTable.js

@@ -0,0 +1,206 @@
+import React, {useState, useMemo} from 'react';
+import DataTable from 'components/DataTable';
+import {
+  FormGroup,
+  InputGroup,
+  MenuItem,
+  Button,
+  Intent,
+} from '@blueprintjs/core';
+import {Select} from '@blueprintjs/select';
+import Icon from 'components/Icon';
+import AccountsConnect from 'connectors/Accounts.connector.js';
+import {compose} from 'utils';
+
+function MakeJournalEntriesTable({
+  formik,
+  accounts,
+}) {
+  const [selectAccountsState, setSelectedAccount] = useState(false);
+
+  // 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} />)
+  };
+
+  // Filters accounts options by account name or code.
+  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;
+    }
+  };
+
+  // Handle account field change.
+  const onChangeAccount = (index) => (account) => {
+    setSelectedAccount({
+      ...selectAccountsState,
+      [index + 1]: account,
+    });
+    formik.setFieldValue(`entries[${index}].account_id`, account.id);
+  };
+
+  const [data, setData] = useState([
+    ...formik.values.entries,
+  ]);
+
+  const updateData = (rowIndex, columnId, value) => {
+    setData((old) =>
+      old.map((row, index) => {
+        if (index === rowIndex) {
+          return {
+            ...old[rowIndex],
+            [columnId]: value,
+          }
+        }
+        return row
+      })
+    )
+  }
+
+  const CellInputGroupRenderer = ({
+    row: { index },
+    column: { id },
+    cell: { value: initialValue },
+  }) => {
+    const [state, setState] = useState(initialValue);
+
+    return (
+     <InputGroup
+        fill={true}
+        value={state}
+        onChange={(event) => {
+          setState(event.target.value);
+        }}
+        onBlur={(event) => {
+          formik.setFieldValue(`entries[${index}].[${id}]`, event.target.value);
+          updateData(index, id, state);
+        }}
+      />);
+  }
+
+
+  const ActionsCellRenderer = ({
+    row: { index },
+    column: { id },
+    cell: { value: initialValue },
+  }) => {
+
+    const onClickRemoveRole = () => {
+
+    };
+
+    return (
+      <Button 
+        icon={<Icon icon="mines" />}
+        iconSize={14}
+        className="ml2"
+        minimal={true}
+        intent={Intent.DANGER}
+        onClick={onClickRemoveRole()} />
+    );
+  }
+ 
+  const columns = useMemo(() => [
+    {
+      Header: '#',
+      accessor: 'index',
+      Cell: ({ row: {index} }) => (
+        <span>{ index + 1 }</span>
+      ),
+      className: "actions",
+    },
+    {
+      Header: 'Account',
+      accessor: 'account',
+      Cell: ({ row: { index } }) => (
+        <FormGroup
+          className="{'form-group--account'}"
+          inline={true}>
+          <Select
+            items={accounts}
+            noResults={<MenuItem disabled={true} text="No results." />}
+            itemRenderer={accountItem}
+            itemPredicate={filterAccountsPredicater}
+            popoverProps={{ minimal: true }}
+            onItemSelect={onChangeAccount(index)}>
+ 
+            <Button
+              rightIcon="caret-down"
+              text={(selectAccountsState[(index + 1)])
+                ? selectAccountsState[(index + 1)].name : "Select Account"}
+            />
+          </Select>
+        </FormGroup>
+      ),
+      className: "account",
+    },
+    {
+      Header: 'Note', 
+      accessor: 'note',
+      Cell: CellInputGroupRenderer,
+      className: "note",
+    },
+    {
+      Header: 'Credit',
+      accessor: 'credit',
+      Cell: CellInputGroupRenderer,
+      className: "credit",
+    },
+    {
+      Header: 'Debit',
+      accessor: 'debit',
+      Cell: CellInputGroupRenderer,
+      className: "debit",
+    },
+    {
+      Header: '',
+      accessor: 'action',
+      Cell: ActionsCellRenderer,
+      className: "actions",
+    }
+  ]);
+
+  const onClickNewRow = () => {
+    setData([
+      ...data,
+      {
+        credit: 0,
+        debit: 0,
+        account_id: null,
+        note: '',
+      }
+    ]);
+  }
+  return (
+    <div class="make-journal-entries__table">
+      <DataTable
+        columns={columns}
+        data={data} />
+
+      <div class="mt1">
+        <Button
+          minimal={true}
+          intent={Intent.PRIMARY}
+          onClick={onClickNewRow}>
+          + New Entry
+        </Button>
+
+        <Button
+          minimal={true}
+          intent={Intent.PRIMARY}
+          onClick={onClickNewRow}>
+          - Clear all entries
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(
+  AccountsConnect,
+)(MakeJournalEntriesTable);

client/src/containers/Dashboard/Accounts/AccountsChart.js

@@ -1,26 +1,180 @@
-import React, { useEffect } from 'react';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import React, { useEffect, useState } from 'react';
+import {
+  Route,
+  Switch,
+  useParams,
+  useRouteMatch
+} from 'react-router-dom';
+import useAsync from 'hooks/async';
+import { Alert, Intent } from '@blueprintjs/core';
+import AppToaster from 'components/AppToaster';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import { connect } from 'react-redux';
-import t from 'store/types';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import AccountsViewsTabs from 'components/Accounts/AccountsViewsTabs';
+import AccountsDataTable from 'components/Accounts/AccountsDataTable';
+import DashboardActionsBar from 'components/Accounts/AccountsActionsBar';
+import AccountsConnect from 'connectors/Accounts.connector';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import CustomViewConnect from 'connectors/CustomView.connector';
+import { compose } from 'utils';
+
+function AccountsChart({
+  changePageTitle,
+  fetchAccounts,
+  deleteAccount,
+  inactiveAccount,
+  fetchResourceViews
+}) {
+  const [state, setState] = useState({
+    deleteAlertActive: false,
+    restoreAlertActive: false,
+    inactiveAlertActive: false,
+    targetAccount: {},
+  });
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      fetchResourceViews('accounts'),
+    ]);
+  });
 
-function AccountsChart({ changePageTitle }) {  
   useEffect(() => {
     changePageTitle('Chart of Accounts');
-  });
+  }, []);
+
+  /**
+   * Handle click and cancel/confirm account delete
+   */
+  const handleDeleteAccount = (account) => {
+    setState({
+      deleteAlertActive: true,
+      deleteAccount: account,
+    });
+  };
+ 
+  const handleCancelAccountDelete = () => {
+    setState({ deleteAlertActive: false });
+  };
+  const handleConfirmAccountDelete = () => {
+    const { targetAccount: account } = state;
+    deleteAccount(account.id).then(() => {
+      setState({ deleteAlertActive: false });
+      fetchAccounts();
+      AppToaster.show({ message: 'the_account_has_been_deleted' });
+    });
+  };
+
+  /**
+   * Handle cancel/confirm account inactive.
+   */
+  const handleInactiveAccount = (account) => {
+    setState({ inactiveAlertActive: true, targetAccount: account });
+  };
+
+  const handleCancelInactiveAccount = () => {
+    setState({ inactiveAlertActive: false });
+  };
+
+  const handleConfirmAccountActive = () => {
+    const { targetAccount: account } = state;
+    inactiveAccount(account.id).then(() => {
+      setState({ inactiveAlertActive: true });
+      fetchAccounts();
+      AppToaster.show({ message: 'the_account_has_been_inactivated' });
+    });
+  };
+
+  /**
+   * Handle cancel/confirm account restore.
+   */
+  const handleCancelAccountRestore = () => {
+    setState({ restoreAlertActive: false });
+  };
+
+  const handleEditAccount = (account) => {
+
+  };
+
+  const handleRestoreAccount = (account) => {
+    
+  };
+
+  const handleConfirmAccountRestore = (account) => {
+
+  };
+
+  const handleDeleteBulkAccounts = (accounts) => {
+
+  };
   return (
-    <React.Fragment>
+    <DashboardInsider loading={fetchHook.pending} name={'accounts-chart'}>
       <DashboardActionsBar />
       <DashboardPageContent>
-      
+        <Switch>
+          <Route
+            exact={true}
+            path={[
+              '/dashboard/accounts/:custom_view_id/custom_view',
+              '/dashboard/accounts'
+            ]}>
+            <AccountsViewsTabs onDeleteBulkAccounts={handleDeleteBulkAccounts} />
+
+            <AccountsDataTable
+              onDeleteAccount={handleDeleteAccount}
+              onInactiveAccount={handleInactiveAccount}
+              onRestoreAccount={handleRestoreAccount}
+              onEditAccount={handleEditAccount} />
+          </Route>
+        </Switch>
+
+        <Alert
+          cancelButtonText="Cancel"
+          confirmButtonText="Move to Trash"
+          icon="trash"
+          intent={Intent.DANGER}
+          isOpen={state.deleteAlertActive}
+          onCancel={handleCancelAccountDelete}
+          onConfirm={handleConfirmAccountDelete}>
+          <p>
+          Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
+          but it will become private to you.
+          </p>
+        </Alert>
+
+        <Alert
+          cancelButtonText="Cancel"
+          confirmButtonText="Inactivate"
+          icon="trash"
+          intent={Intent.WARNING}
+          isOpen={state.inactiveAlertActive}
+          onCancel={handleCancelInactiveAccount}
+          onConfirm={handleConfirmAccountActive}>
+          <p>
+          Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
+          but it will become private to you.
+          </p>
+        </Alert>
+
+        <Alert
+          cancelButtonText="Cancel"
+          confirmButtonText="Move to Trash"
+          icon="trash"
+          intent={Intent.DANGER}
+          isOpen={state.restoreAlertActive}
+          onCancel={handleCancelAccountRestore}
+          onConfirm={handleConfirmAccountRestore}>
+          <p>
+          Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
+          but it will become private to you.
+          </p>
+        </Alert>
       </DashboardPageContent>
-    </React.Fragment>
+    </DashboardInsider>
   );
 }
 
-const mapActionsToProps = (dispatch) => ({
-  changePageTitle: pageTitle => dispatch({
-    type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle
-  }),
-});
-export default connect(null, mapActionsToProps)(AccountsChart);
+export default compose(
+  AccountsConnect,
+  CustomViewConnect,
+  DashboardConnect,
+)(AccountsChart);

client/src/containers/Dashboard/Dialogs/AccountFormDialog.js

@@ -0,0 +1,273 @@
+import React, { useState} from 'react';
+import { 
+  Button,
+  Classes,
+  FormGroup,
+  InputGroup,
+  Intent,
+  TextArea,
+  MenuItem,
+  Checkbox,
+} from "@blueprintjs/core";
+import {Select} from '@blueprintjs/select';
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import { useIntl } from 'react-intl';
+import { omit } from 'lodash';
+import { compose } from 'utils';
+import useAsync from 'hooks/async';
+import Dialog from 'components/Dialog';
+import AppToaster from 'components/AppToaster';
+import DialogConnect from 'connectors/Dialog.connector';
+import DialogReduxConnect from 'components/DialogReduxConnect';
+import AccountFormDialogConnect from 'connectors/AccountFormDialog.connector';
+
+function AccountFormDialog ({
+  name,
+  payload,
+  isOpen,
+  accountsTypes,
+  accounts,
+  fetchAccounts,
+  fetchAccountTypes,
+  closeDialog,
+  submitAccount,
+  fetchAccount,
+  editAccount
+}) {
+  const intl = useIntl();
+  const accountFormValidationSchema = Yup.object().shape({
+    name: Yup
+      .string()
+      .required(intl.formatMessage({ 'id': 'required' })),
+    code: Yup
+      .number(intl.formatMessage({ id: 'field_name_must_be_number' })),
+    account_type_id: Yup
+      .string()
+      .nullable()
+      .required(intl.formatMessage({ 'id': 'required' })),
+    description: Yup.string().trim(),
+  });
+
+  // Formik
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      ...payload.action === 'edit' && editAccount,
+    },
+    validationSchema: accountFormValidationSchema,
+    onSubmit: (values) => {
+      const exclude = ['subaccount'];
+
+      if (payload.action === 'edit') {
+        editAccount({
+          payload: payload.id,
+          form: { ...omit(values, exclude) }
+        }).then((response) => {
+          closeDialog(name);
+          AppToaster.show({
+            message: 'the_account_has_been_edited',
+          });
+        });
+      } else {
+        submitAccount({ form: { ...omit(values, exclude) } }).then(response => {
+          closeDialog(name);
+          AppToaster.show({
+            message: 'the_account_has_been_submit',
+          });
+        });
+      }
+    },
+  });
+  const [state, setState] = useState({
+    loading: true,
+    dialogActive: true,
+    selectedAccountType: null,
+    selectedSubaccount: null,
+  });
+  
+  // Filters accounts types items.
+  const filterAccountTypeItems = (query, accountType, _index, exactMatch) => {
+    const normalizedTitle = accountType.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
+  };
+
+  // Account type item of select filed.
+  const accountTypeItem = (item, { handleClick, modifiers, query }) => {
+    return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
+  };
+
+  // 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} />)
+  };
+
+  // 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 handleClose = () => { closeDialog(name); };
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      fetchAccounts(),
+      fetchAccountTypes(),
+
+      // Fetch the target in case edit mode.
+      ...(payload.action === 'edit') ? [
+        fetchAccount(payload.id),
+      ] : [],
+    ]);
+  }, false);
+
+  const onDialogOpening = async () => { fetchHook.execute(); }
+  
+  const onChangeAccountType = (accountType) => {
+    setState({ ...state, selectedAccountType: accountType.name });
+    formik.setFieldValue('account_type_id', accountType.id);
+  };
+  const onChangeSubaccount = (account) => {
+    setState({ ...state, selectedSubaccount: account });
+    formik.setFieldValue('parent_account_id', account.id);
+  };
+
+  const onDialogClosed = () => {
+    formik.resetForm();
+    setState({
+      ...state,
+      selectedSubaccount: null,
+      selectedAccountType: null,
+    });
+  };
+  return (
+    <Dialog
+      name={name}
+      title={payload.action === 'edit' ? 'Edit Account' : 'New Account'}
+      className={{'dialog--loading': state.isLoading, 'dialog--account-form': true }}
+      onClosed={onDialogClosed}
+      onOpening={onDialogOpening}
+      isOpen={isOpen}
+      isLoading={fetchHook.pending}
+    >
+      <form onSubmit={formik.handleSubmit}>
+        <div className={Classes.DIALOG_BODY}>
+          <FormGroup
+            label={'Account Type'}
+            className="{'form-group--account-type'}"
+            inline={true}
+            helperText={formik.errors.account_type_id && formik.errors.account_type_id}
+            intent={formik.errors.account_type_id && Intent.DANGER}>
+              
+            <Select
+              items={accountsTypes}
+              noResults={<MenuItem disabled={true} text="No results." />}
+              itemRenderer={accountTypeItem}
+              itemPredicate={filterAccountTypeItems}
+              popoverProps={{ minimal: true }}
+              onItemSelect={onChangeAccountType}>
+              <Button
+                rightIcon="caret-down"
+                text={state.selectedAccountType || 'Select account type'} />
+            </Select>
+          </FormGroup>
+
+          <FormGroup
+            label={'Account Name'}
+            className={'form-group--account-name'}
+            intent={formik.errors.name && Intent.DANGER}
+            helperText={formik.errors.name && formik.errors.name}
+            inline={true}>
+
+            <InputGroup
+              medium={true}
+              intent={formik.errors.name && Intent.DANGER}
+              {...formik.getFieldProps('name')} />
+          </FormGroup>
+
+          <FormGroup
+            label={'Account Code'}
+            className={'form-group--account-code'}
+            intent={formik.errors.code && Intent.DANGER}
+            helperText={formik.errors.code && formik.errors.code}
+            inline={true}>
+
+            <InputGroup
+              medium={true}
+              intent={formik.errors.code && Intent.DANGER}
+              {...formik.getFieldProps('code')} />
+          </FormGroup>
+
+          <FormGroup
+            label={' '}
+            className={'form-group--subaccount'}
+            inline={true}>
+
+            <Checkbox
+              inline={true}
+              label={'Sub account?'} 
+              {...formik.getFieldProps('subaccount')} />
+          </FormGroup>
+
+          { (formik.values.subaccount) &&
+            <FormGroup
+              label={'Sub Account'}
+              className="{'form-group--sub-account'}"
+              inline={true}>
+              <Select
+                items={accounts}
+                noResults={<MenuItem disabled={true} text="No results." />}
+                itemRenderer={accountItem}
+                itemPredicate={filterAccountsPredicater}
+                popoverProps={{ minimal: true }}
+                onItemSelect={onChangeSubaccount}
+                {...formik.getFieldProps('parent_account_id')}>
+                <Button
+                  rightIcon="caret-down"
+                  text={state.selectedSubaccount ? state.selectedSubaccount.name : "Select Parent Account"}
+                />
+              </Select>
+            </FormGroup> }
+
+          <FormGroup
+            label={'Description'}
+            className={'form-group--description'}
+            intent={formik.errors.description && Intent.DANGER}
+            helperText={formik.errors.description && formik.errors.credential}
+            inline={true}>
+
+            <TextArea growVertically={true} large={true} {...formik.getFieldProps('description')} />
+          </FormGroup>
+        </div>
+
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button onClick={handleClose}>Close</Button>
+            <Button intent={Intent.PRIMARY} type="submit">
+              { payload.action === 'edit' ? 'Edit' : 'Submit' }
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+export default compose(
+  AccountFormDialogConnect,
+  DialogReduxConnect,
+  DialogConnect,
+)(AccountFormDialog);

client/src/containers/Dashboard/Dialogs/UserFormDialog.js

@@ -0,0 +1,201 @@
+import React from 'react';
+import { useIntl } from "react-intl"
+import {useFormik} from 'formik';
+import * as Yup from 'yup';
+import {
+  Dialog,
+  Button,
+  FormGroup,
+  InputGroup,
+  Intent,
+  TextArea,
+  MenuItem,
+  Checkbox,
+  Classes,
+  HTMLSelect,
+} from '@blueprintjs/core';
+import UserFormDialogConnect from 'connectors/UserFormDialog.connector';
+import DialogReduxConnect from 'components/DialogReduxConnect';
+import AppToaster from 'components/AppToaster';
+import useAsync from 'hooks/async';
+import {objectKeysTransform} from 'utils';
+import {pick, snakeCase} from 'lodash';
+
+function UserFormDialog({
+  fetchUser,
+  submitUser,
+  editUser,
+  name,
+  payload,
+  isOpen,
+  userDetails,
+  closeDialog,
+}) {
+  const intl = useIntl();
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      ...(payload.action === 'edit') ? [
+        fetchUser(payload.user.id),  
+      ] : [],
+    ]);
+  }, false);
+
+  const validationSchema = Yup.object().shape({
+    first_name: Yup.string().required(),
+    last_name: Yup.string().required(),
+    email: Yup.string().email().required(),
+    phone_number: Yup.string().required(),
+    password: Yup.string().min(5).required(),
+  });
+
+  const initialValues = {
+    status: 1,
+    ...payload.action === 'edit' && 
+      pick(
+        objectKeysTransform(payload.user, snakeCase),
+        Object.keys(validationSchema.fields)
+      ),
+    password: '',
+  };
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues,
+    validationSchema,
+    onSubmit: (values) => {
+      const form = {
+        ...values,
+        confirm_password: values.password,
+      };
+      if (payload.action === 'edit') {
+        editUser(payload.user.id, form).then((response) => {
+          AppToaster.show({
+            message: 'the_user_details_has_been_updated',
+          });
+          closeDialog(name);
+        });
+      } else {
+        submitUser(form).then((response) => {
+          AppToaster.show({
+            message: 'the_user_has_been_invited',
+          });
+          closeDialog(name);
+        });
+      }
+    },
+  });
+
+  const statusOptions = [
+    {value: 1, label: 'Active'},
+    {value: 2, label: 'Inactive'},
+  ];
+
+  const onDialogOpening = () => { fetchHook.execute(); };
+
+  const onDialogClosed = () => {
+    formik.resetForm();
+
+  };
+
+  const handleClose = () => { closeDialog(name); };
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      name={name}
+      title={payload.action === 'edit' ? 'Edit User' : 'New User'}
+      isLoading={fetchHook.pending}
+      onClosed={onDialogClosed}
+      onOpening={onDialogOpening}>
+
+      <form onSubmit={formik.handleSubmit}>
+        <div className={Classes.DIALOG_BODY}>
+          <FormGroup
+            label={'First Name'}
+            className={'form-group--first-name'}
+            intent={formik.errors.first_name && Intent.DANGER}
+            helperText={formik.errors.first_name && formik.errors.first_name}
+            inline={true}>
+
+            <InputGroup
+              intent={formik.errors.first_name && Intent.DANGER}
+              {...formik.getFieldProps('first_name')} />
+          </FormGroup>
+          
+          <FormGroup
+            label={'Last Name'}
+            className={'form-group--last-name'}
+            intent={formik.errors.last_name && Intent.DANGER}
+            helperText={formik.errors.last_name && formik.errors.last_name}
+            inline={true}>
+
+            <InputGroup
+              intent={formik.errors.last_name && Intent.DANGER}
+              {...formik.getFieldProps('last_name')} />
+          </FormGroup>
+
+          <FormGroup
+            label={'Email'}
+            className={'form-group--email'}
+            intent={formik.errors.email && Intent.DANGER}
+            helperText={formik.errors.email && formik.errors.email}
+            inline={true}>
+
+            <InputGroup
+              intent={formik.errors.email && Intent.DANGER}
+              {...formik.getFieldProps('email')} />
+          </FormGroup>
+
+          <FormGroup
+            label={'Phone Number'}
+            className={'form-group--phone-number'}
+            intent={formik.errors.phone_number && Intent.DANGER}
+            helperText={formik.errors.phone_number && formik.errors.phone_number}
+            inline={true}>
+
+            <InputGroup
+              intent={formik.errors.phone_number && Intent.DANGER}
+              {...formik.getFieldProps('phone_number')} />
+          </FormGroup>
+
+          <FormGroup
+            label={'Password'}
+            className={'form-group--password'}
+            intent={formik.errors.password && Intent.DANGER}
+            helperText={formik.errors.password && formik.errors.password}
+            inline={true}>
+
+            <InputGroup
+              intent={formik.errors.password && Intent.DANGER}
+              className={Classes.FILL}
+              {...formik.getFieldProps('password')} />
+          </FormGroup>
+
+          <FormGroup
+            label={'Status'}
+            className={'form-group--status'}
+            intent={formik.errors.status && Intent.DANGER}
+            helperText={formik.errors.status && formik.errors.status}
+            inline={true}>
+
+            <HTMLSelect
+              options={statusOptions}
+              className={Classes.FILL}
+              {...formik.getFieldProps(`status`)} />
+          </FormGroup>
+
+          <div className={Classes.DIALOG_FOOTER}>
+            <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+              <Button onClick={handleClose}>Close</Button>
+              <Button intent={Intent.PRIMARY} type="submit">
+                { payload.action === 'edit' ? 'Edit' : 'Submit' }
+              </Button>
+            </div>
+          </div>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+export default UserFormDialogConnect(DialogReduxConnect(UserFormDialog));

client/src/containers/Dashboard/Expenses/ExpenseForm.js

@@ -0,0 +1,40 @@
+import React, {useEffect} from 'react';
+import { useAsync } from 'react-use';
+import {useParams} from 'react-router-dom';
+import Connector from 'connectors/ExpenseForm.connector';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import ExpenseForm from 'components/Expenses/ExpenseForm';
+
+function ExpenseFormContainer({
+  fetchAccounts,
+  fetchCurrencies,
+  accounts,
+  changePageTitle,
+  submitExpense,
+  editExpense,
+  currencies,
+}) {
+  const { id } = useParams();
+
+  useEffect(() => {
+    if (id) {
+      changePageTitle('Edit Expense Details');
+    } else {
+      changePageTitle('New Expense');
+    }
+  }, []);
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      fetchAccounts(),
+      fetchCurrencies(),
+    ]);
+  });
+  return (
+    <DashboardInsider isLoading={fetchHook.loading} name={'expense-form'}>
+      <ExpenseForm {...{submitExpense, editExpense, accounts, currencies} } />
+    </DashboardInsider>
+  );
+}
+
+export default Connector(ExpenseFormContainer);

client/src/containers/Dashboard/Expenses/ExpensesList.js

@@ -0,0 +1,71 @@
+import React, {useEffect, useState} from 'react';
+import { useAsync } from 'react-use';
+import {Alert, Intent} from '@blueprintjs/core';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import ExpensesActionsBar from 'components/Expenses/ExpensesActionsBar';
+import ExpensesViewsTabs from 'components/Expenses/ExpensesViewsTabs';
+import ExpensesTable from 'components/Expenses/ExpensesTable';
+import connector from 'connectors/ExpensesList.connector';
+import AppToaster from 'components/AppToaster';
+
+function ExpensesList({
+  fetchExpenses,
+  deleteExpense,
+  // fetchViews,
+  expenses,
+  getResourceViews,
+  changePageTitle,
+}) {
+  useEffect(() => {
+    changePageTitle('Expenses List');
+  }, []);
+
+  const [deleteExpenseState, setDeleteExpense] = useState();
+
+  const handleDeleteExpense = (expense) => { setDeleteExpense(expense); };
+  const handleCancelAccountDelete = () => { setDeleteExpense(false); }
+
+  const handleConfirmAccountDelete = () => {
+    deleteExpense(deleteExpenseState.id).then(() => {
+      setDeleteExpense(false);
+      AppToaster.show({
+        message: 'the_expense_has_been_deleted',
+      });
+    });
+  };
+  
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      fetchExpenses(),
+      // getResourceViews('expenses'),
+    ]);
+  });
+
+  return (
+    <DashboardInsider loading={false}>
+      <ExpensesActionsBar />
+      <ExpensesViewsTabs />
+
+      <DashboardPageContent>
+        <ExpensesTable expenses={expenses} onDeleteExpense={handleDeleteExpense} />
+      </DashboardPageContent>
+
+      <Alert
+        cancelButtonText="Cancel"
+        confirmButtonText="Move to Trash"
+        icon="trash"
+        intent={Intent.DANGER}
+        isOpen={deleteExpenseState}
+        onCancel={handleCancelAccountDelete}
+        onConfirm={handleConfirmAccountDelete}>
+        <p>
+        Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
+        but it will become private to you.
+        </p>
+      </Alert>
+    </DashboardInsider>
+  );
+};
+
+export default connector(ExpensesList);

client/src/containers/Dashboard/FinancialStatements/BalanceSheet.js

@@ -0,0 +1,48 @@
+import React, {useEffect} from 'react';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import {compose} from 'utils';
+import useAsync from 'hooks/async';
+import FinancialStatementConnect from 'connectors/FinancialStatements.connector';
+import {useIntl} from 'react-intl';
+import BalanceSheetHeader from './BalanceSheet/BalanceSheetHeader';
+import LoadingIndicator from 'components/LoadingIndicator';
+import BalanceSheetTable from './BalanceSheet/BalanceSheetTable';
+
+function BalanceSheet({
+  fetchBalanceSheet,
+  changePageTitle,
+}) {
+  const intl = useIntl();
+  const handleDateChange = () => {};
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      fetchBalanceSheet({}),
+    ]);
+  });
+
+  useEffect(() => { 
+    changePageTitle('Balance Sheet');
+  }, []);
+
+  const handleFilterSubmit = (filter) => {
+
+  };
+
+  return (
+    <div class="financial-statement">
+      <BalanceSheetHeader onSubmitFilter={handleFilterSubmit} />
+
+      <div class="financial-statement__body">
+        <LoadingIndicator loading={fetchHook.pending}>
+          <BalanceSheetTable />
+        </LoadingIndicator>
+      </div>
+    </div>
+  );
+}
+
+export default compose(
+  DashboardConnect,
+  FinancialStatementConnect,
+)(BalanceSheet);

client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetHeader.js

@@ -0,0 +1,171 @@
+import React, {useState, useMemo} from 'react';
+import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
+import {Row, Col} from 'react-grid-system';
+import { 
+  Button,
+  FormGroup,
+  Position,
+  MenuItem,
+  RadioGroup,
+  Radio,
+  HTMLSelect,
+  Intent,
+} from "@blueprintjs/core";
+import {Select} from '@blueprintjs/select';
+import {DateInput} from '@blueprintjs/datetime';
+import {useIntl} from 'react-intl';
+import {momentFormatter, handleStringChange} from 'utils';
+import moment from 'moment';
+
+export default function BalanceSheetHeader({
+  onSubmitFilter,
+}) {
+  const intl = useIntl();
+  const [filter, setFilter] = useState({
+    from_date: null,
+    to_date: null,
+    accounting_basis: 'cash',
+    display_columns_by: 'total',
+  });
+
+  const setFilterByName = (name, value) => {
+    setFilter({
+      ...filter,
+      [name]: value,
+    });
+  };
+
+  const handleFieldChange = (event) => {
+    setFilterByName(event.target.name, event.target.value);
+  };
+
+  const displayColumnsByOptions = [
+    {key: 'total', name: 'Total'},
+    {key: 'year', name: 'Year'},
+    {key: 'month', name: 'Month'},
+    {key: 'week', name: 'Week'},
+    {key: 'day', name: 'Day'},
+    {key: 'quarter', name: 'Quarter'}
+  ];
+
+  const selectedDisplayColumnOpt = useMemo(() => {
+    return displayColumnsByOptions.find(o => o.key === filter.display_columns_by);
+  }, [filter.display_columns_by, displayColumnsByOptions]);
+
+  // Account type item of select filed.
+  const accountTypeItem = (item, { handleClick, modifiers, query }) => {
+    return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
+  };
+  
+  const onItemSelectDisplayColumns = (item) => {
+    setFilterByName('display_columns_by', item.key);
+  };
+
+  const handleDateChange = (name) => (date) => {
+    setFilterByName(name, moment(date).format('YYYY-MM-DD'));
+  };
+
+  const handleSubmitClick = () => {
+    onSubmitFilter(filter);
+  };
+
+  const dateRangeOptions = [
+    {value: 'today', label: 'Today', },
+    {value: 'this_week', label: 'This Week'},
+    {value: 'this_month', label: 'This Month'},
+    {value: 'this_quarter', label: 'This Quarter'},
+    {value: 'this_year', label: 'This Year'},
+  ];
+
+  return (
+    <FinancialStatementHeader>
+      <Row>
+        <Col sm={4}>
+          <FormGroup
+            label={intl.formatMessage({'id': 'report_date_range'})}
+            minimal={true}
+            fill={true}>
+
+            <HTMLSelect
+              fill={true}
+              options={dateRangeOptions} />
+          </FormGroup>
+        </Col>
+
+        <Col sm={4}>
+          <FormGroup
+            label={intl.formatMessage({'id': 'from_date'})}
+            minimal={true}
+            fill={true}>
+
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              defaultValue={new Date()}
+              onChange={handleDateChange('from_date')}
+              popoverProps={{ position: Position.BOTTOM }}
+              fill={true} />
+          </FormGroup>
+        </Col>
+
+        <Col sm={4}>
+          <FormGroup
+            label={intl.formatMessage({'id': 'to_date'})}
+            minimal={true}
+            fill={true}>
+
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              defaultValue={new Date()}
+              onChange={handleDateChange('to_date')}
+              popoverProps={{ position: Position.BOTTOM }}
+              fill={true} />
+          </FormGroup>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col sm={4}>
+          <FormGroup
+            label={'Display report columns'}
+            className="{'form-group-display-columns-by'}"
+            inline={true}>
+
+            <Select
+              items={displayColumnsByOptions}
+              noResults={<MenuItem disabled={true} text="No results." />}
+              filterable={false}
+              itemRenderer={accountTypeItem}
+              popoverProps={{ minimal: true }}
+              onItemSelect={onItemSelectDisplayColumns}>
+              <Button
+                rightIcon="caret-down"
+                fill={true}
+                text={selectedDisplayColumnOpt ? selectedDisplayColumnOpt.name : 'Select'} />
+            </Select>
+          </FormGroup>
+        </Col>
+
+        <Col sm={4}>
+          <RadioGroup
+            inline={true}
+            label={intl.formatMessage({'id': 'accounting_basis'})}
+            name="accounting_bahandleRadioChangesis"
+            selectedValue={filter.accounting_basis}
+            onChange={handleStringChange((value) => {
+              setFilterByName('accounting_basis', value);
+            })}
+          >
+              <Radio label="Cash" value="cash" />
+              <Radio label="Accural" value="accural" />
+          </RadioGroup>
+        </Col>
+
+        <Col sm={4}>
+        <Button intent={Intent.PRIMARY} type="submit" onClick={handleSubmitClick}>
+          { 'Calculate Report' }
+        </Button>
+        </Col>
+      </Row>
+    </FinancialStatementHeader>
+  )
+}

client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -0,0 +1,41 @@
+import React, {useMemo, useState} from 'react';
+import FinancialSheet from 'components/FinancialSheet';
+import DataTable from 'components/DataTable';
+
+export default function BalanceSheetTable({
+
+}) {
+
+  const columns = useMemo(() => [
+    {
+      Header: 'Account Name',
+      accessor: 'index',
+      className: "actions",
+    },
+    {
+      Header: 'Code', 
+      accessor: 'note',
+      className: "note",
+    },
+    {
+      Header: 'Total',
+      accessor: 'total',
+      className: "credit",
+    },
+  ]);
+
+  const [data, setData] = useState([]);
+
+  return (
+    <FinancialSheet
+      companyTitle={'Facebook, Incopration'}
+      sheetType={'Balance Sheet'}
+      date={''}>
+      
+      <DataTable
+        columns={columns}
+        data={data} />
+
+    </FinancialSheet>
+  )
+} 

client/src/containers/Dashboard/FinancialStatements/FinancialStatementHeader.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function FinancialStatementHeader({ children }) {
+  return (
+    <div class="financial-statement__header">
+      { children }
+    </div>
+  );
+}

client/src/containers/Dashboard/Homepage.js

@@ -4,7 +4,7 @@ import t from 'store/types';
 
 const DashboardHomepage = ({ changePageTitle }) => {
   useEffect(() => {
-    changePageTitle('Homepage')
+    changePageTitle('Craig’s Design and Landscaping Services')
   });
   return (
     <div>asdasd</div>

client/src/containers/Dashboard/Preferences/Accountant.js

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

client/src/containers/Dashboard/Preferences/Accounts.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Tabs, Tab} from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
+
+export default function AccountsPreferences() {
+  const history = useHistory();
+  const onChangeTabs = (currentTabId) => {
+    switch(currentTabId) {
+      default:
+        history.push('/dashboard/preferences/accounts/general');
+        break;
+      case 'custom_fields':
+        history.push('/dashboard/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="General" />
+        <Tab id="custom_fields" title="Custom Fields" />
+      </Tabs>
+
+      <PreferencesSubContent preferenceTab="accounts" />
+    </div>
+  );
+}
+

client/src/containers/Dashboard/Preferences/AccountsCustomFields.js

@@ -0,0 +1,81 @@
+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';
+
+function AccountsCustomFields({ fetchResourceFields, fields }) {
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      // fetchResourceFields('accounts'),
+    ]);
+  }, false);
+
+  useEffect(() => { fetchHook.execute(); }, []);
+
+  const actionMenuList = (column) => (
+    <Menu>
+      <MenuItem text="View Details" />
+      <MenuDivider />
+      <MenuItem text="Edit Account" />
+      <MenuItem text="New Account" />
+      <MenuDivider />
+      <MenuItem text="Inactivate Account" />
+      <MenuItem text="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);

client/src/containers/Dashboard/Preferences/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>
+  );
+}

client/src/containers/Dashboard/Preferences/General.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import {connect} from 'react-redux';
+import {
+  Button,
+  FormGroup,
+  InputGroup,
+  Intent,
+} from "@blueprintjs/core";
+import { useAsync } from 'react-use';
+import {optionsMapToArray} from 'utils';
+import AppToaster from 'components/AppToaster';
+import {
+  savePreferences,
+  fetchPreferences,
+} from 'store/preferences/preferences.actions';
+
+function GeneralPreferences({ savePreferences, fetchPreferences }) {
+  const validationSchema = Yup.object().shape({
+    organization_name: Yup.string().required(),
+    organization_industry: Yup.string().required(),
+  });
+
+  const asyncHook = useAsync(async () => {
+    await fetchPreferences();
+  });
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+    },
+    validationSchema: validationSchema,
+    onSubmit: (values) => {
+      const options = optionsMapToArray(values).map(option => {
+        return {...option, group: 'general'};
+      });
+
+      savePreferences(options).then((response) => {
+        AppToaster.show({
+          message: 'preferences_have_been_updated',
+        });
+      }).catch(error => {
+
+      });
+    },
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <FormGroup
+        label={'Organization Name'}
+        className="{'form-group--organization-name'}"
+        inline={true}
+        helperText={formik.errors.organization_name && formik.errors.organization_name}
+        intent={formik.errors.organization_name && Intent.DANGER}>
+
+        <InputGroup
+          medium={true}
+          intent={formik.errors.organization_name && Intent.DANGER}
+          {...formik.getFieldProps('organization_name')} />
+      </FormGroup>
+
+      <FormGroup
+        label={'Organization Industry'}
+        className="{'form-group--organization-industry'}"
+        inline={true}
+        helperText={formik.errors.organization_industry && formik.errors.organization_industry}
+        intent={formik.errors.organization_industry && Intent.DANGER}>
+
+        <InputGroup
+          medium={true}
+          intent={formik.errors.organization_industry && Intent.DANGER}
+          {...formik.getFieldProps('organization_industry')} />
+      </FormGroup>
+
+      <div class="divider mt3 mb2"></div>
+
+      <Button intent={Intent.PRIMARY} type="submit">{ 'Save' }</Button>
+    </form>
+  )
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  savePreferences: (options) => dispatch(savePreferences({ options })),
+  fetchPreferences: (keys) => dispatch(fetchPreferences())
+});
+
+export default connect(null, mapDispatchToProps)(GeneralPreferences);

client/src/containers/Dashboard/Preferences/Users.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  Tabs,
+  Tab,
+  Button,
+  Intent,
+} from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
+import connector from 'connectors/UsersPreferences.connector';
+
+function UsersPreferences({
+  openDialog,
+}) {
+  const history = useHistory();
+  const onChangeTabs = (currentTabId) => {
+
+  };
+
+  const onClickNewUser = () => {
+    openDialog('user-form');
+  };
+  return (
+    <div class="preferences__inside-content preferences__inside-content--users-roles">
+      <div class="preferences__tabs">
+        <Tabs
+          animate={true}
+          large={true}
+          onChange={onChangeTabs}>
+          <Tab id="users" title="Users" />
+          <Tab id="roles" title="Roles" />
+        </Tabs>
+
+        <div class="preferences__tabs-extra-actions">
+          <Button
+            intent={Intent.PRIMARY}
+            onClick={onClickNewUser}>New User</Button>
+
+          <Button
+            intent={Intent.PRIMARY}
+            onClick={onClickNewUser}>New Role</Button>
+        </div>
+      </div>
+      <PreferencesSubContent preferenceTab="users" />
+    </div>
+  );
+}
+
+export default connector(UsersPreferences);

client/src/containers/Dashboard/Preferences/UsersList.js

@@ -0,0 +1,143 @@
+import React, {useState} from 'react';
+import {useAsync} from 'react-use';
+import {
+  GridComponent,
+  ColumnsDirective,
+  ColumnDirective,
+} from '@syncfusion/ej2-react-grids';
+import {
+  Alert,
+  Popover,
+  Button,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+  Intent,
+} from '@blueprintjs/core';
+import Icon from 'components/Icon';
+import LoadingIndicator from 'components/LoadingIndicator';
+import {snakeCase} from 'lodash';
+import connector from 'connectors/UsersList.connector';
+import AppToaster from 'components/AppToaster';
+
+function UsersListPreferences({
+  fetchUsers,
+  usersList,
+  openDialog,
+  closeDialog,
+  deleteUser,
+}) {
+  const [deleteUserState, setDeleteUserState] = useState(false);
+  const [inactiveUserState, setInactiveUserState] = useState(false);
+
+  const asyncHook = useAsync(async () => {
+    await Promise.all([
+      fetchUsers(),
+    ]);
+  }, []);
+
+  const onInactiveUser = (user) => {
+
+  };
+
+  const onDeleteUser = (user) => { setDeleteUserState(user); };
+  const handleCancelUserDelete = () => { setDeleteUserState(false); };
+
+  const onEditUser = (user) => () => {
+    const form = Object.keys(user).reduce((obj, key) => {
+      const camelKey = snakeCase(key);
+      obj[camelKey] = user[key];
+      return obj;
+    }, {});
+
+    openDialog('user-form', { action: 'edit', user: form, });
+  };
+
+  const handleConfirmUserDelete = () => {
+    if (!deleteUserState) { return; }
+
+    deleteUser(deleteUserState.id).then((response) => {
+      setDeleteUserState(false);
+      AppToaster.show({
+        message: 'the_user_has_been_deleted',
+      });
+    });
+  };
+
+  const actionMenuList = (user) =>
+    (<Menu>
+      <MenuItem text="Edit User" onClick={onEditUser(user)} />
+      <MenuItem text="New Account" />
+      <MenuDivider />
+      <MenuItem text="Inactivate User" onClick={() => onInactiveUser(user)} />
+      <MenuItem text="Delete User" onClick={() => onDeleteUser(user)} />
+    </Menu>);
+
+  const columns = [
+    {
+      field: '',
+      headerText: 'Avatar',
+    },
+    {
+      field: 'fullName',
+      headerText: 'Full Name',
+    },
+    {
+      field: 'email',
+      headerText: 'Email',
+    },
+    {
+      field: 'phoneNumber',
+      headerText: 'Phone Number',
+    },
+    {
+      field: '',
+      headerText: 'Status',
+      template: (user) => user.active
+        ? (<span>Active</span>) : (<span>Inactive</span>)
+    },
+    {
+      template: (user) => (
+        <Popover content={actionMenuList(user)} position={Position.RIGHT_BOTTOM}>
+          <Button icon={<Icon icon="ellipsis-h" />} />
+        </Popover>
+      ),
+    }
+  ]
+  return (
+    <LoadingIndicator loading={asyncHook.loading}>
+      <GridComponent
+        dataSource={{result: usersList.results}}>
+
+        <ColumnsDirective>
+          {columns.map((column) => {
+            return (<ColumnDirective
+              field={column.field}
+              headerText={column.headerText}
+              template={column.template}
+              allowSorting={true}
+              customAttributes={column.customAttributes}
+              />);
+          })}
+        </ColumnsDirective>
+      </GridComponent>
+
+      <Alert
+        cancelButtonText="Cancel"
+        confirmButtonText="Move to Trash"
+        icon="trash"
+        intent={Intent.DANGER}
+        isOpen={deleteUserState}
+        onCancel={handleCancelUserDelete}
+        onConfirm={handleConfirmUserDelete}>
+        <p>
+        Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
+        but it will become private to you.
+        </p>
+      </Alert>
+    </LoadingIndicator>
+  );
+}
+
+export default connector(UsersListPreferences);

client/src/containers/Dashboard/Views/ViewFormPage.js

@@ -0,0 +1,92 @@
+import React, {useEffect, useState} from 'react';
+import { useAsync } from 'react-use';
+import { useParams } from 'react-router-dom';
+import { Intent, Alert } from '@blueprintjs/core';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import ViewForm from 'components/Views/ViewForm';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import ResourceConnect from 'connectors/Resource.connector';
+import ViewConnect from 'connectors/View.connector';
+import {compose} from 'utils';
+import AppToaster from 'components/AppToaster';
+
+function ViewFormPage({
+  changePageTitle,
+  fetchResourceFields,
+  fetchResourceColumns,
+  fetchView,
+  getResourceColumns,
+  getResourceFields,
+  submitView,
+  getViewMeta,
+  deleteView,
+}) {
+  const { resource_slug: resourceSlug, view_id: viewId } = useParams();
+  const columns = getResourceColumns('accounts');
+  const fields = getResourceFields('accounts');
+  const viewForm = (viewId) ? getViewMeta(viewId) : null;
+
+  const [stateDeleteView, setStateDeleteView] = useState(null);
+
+  useEffect(() => {
+    if (viewId) {
+      changePageTitle('Edit Custom View');
+    } else {
+      changePageTitle('New Custom View');
+    }
+  }, [viewId]);
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      fetchResourceColumns('accounts'),
+      fetchResourceFields('accounts'),
+      ...(viewId) ? [
+        fetchView(viewId),
+      ] : [],
+    ]);
+  }, []);
+
+  const handleDeleteView = (view) => { setStateDeleteView(view); };
+  const handleCancelDeleteView = () => { setStateDeleteView(null); };
+
+  const handleConfirmDeleteView = () => {
+    deleteView(stateDeleteView.id).then((response) => {
+      setStateDeleteView(null);
+      AppToaster.show({
+        message: 'the_custom_view_has_been_deleted',
+      });
+    })
+  };
+  return (
+    <DashboardInsider name={'view-form'} loading={fetchHook.loading}>
+      <DashboardPageContent>
+        <ViewForm
+          columns={columns}
+          fields={fields}
+          viewForm={viewForm}
+          onDelete={handleDeleteView} />
+
+        <Alert
+          cancelButtonText="Cancel"
+          confirmButtonText="Move to Trash"
+          icon="trash"
+          intent={Intent.DANGER}
+          isOpen={stateDeleteView}
+          onCancel={handleCancelDeleteView}
+          onConfirm={handleConfirmDeleteView}>
+          <p>
+          Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
+          but it will become private to you.
+          </p>
+        </Alert>
+      </DashboardPageContent>
+    </DashboardInsider>   
+  );
+}
+
+export default compose(
+  DashboardConnect,
+  ResourceConnect,
+  ViewConnect,
+)(ViewFormPage);

client/src/hooks/async.js

@@ -0,0 +1,35 @@
+import {useState, useCallback, useEffect} from 'react';
+
+const useAsync = (asyncFunction, immediate = true) => {
+  const [pending, setPending] = useState(false);
+  const [value, setValue] = useState(null);
+  const [error, setError] = useState(null);
+
+  // The execute function wraps asyncFunction and
+  // handles setting state for pending, value, and error.
+  // useCallback ensures the below useEffect is not called
+  // on every render, but only if asyncFunction changes.
+  const execute = useCallback(() => {
+    setPending(true);
+    setValue(null);
+    setError(null);
+
+    return asyncFunction()
+      .then(response => setValue(response))
+      .catch(error => setError(error))
+      .finally(() => setPending(false));
+  }, [asyncFunction]);
+
+  // Call execute if we want to fire it right away.
+  // Otherwise execute can be called later, such as
+  // in an onClick handler.
+  useEffect(() => {
+    if (immediate) {
+      execute();
+    }
+  }, []);
+
+  return { execute, pending, value, error };
+};
+
+export default useAsync;

client/src/hooks/index.js

@@ -0,0 +1,6 @@
+import useAsync from './async';
+// import use from 'async';
+
+export default {
+  useAsync,
+}

client/src/hooks/stackableState.js

@@ -0,0 +1,36 @@
+import {useState} from 'react';
+
+const useStackableState = (initialState = []) => {
+  const [stackableState, setStackableState] = useState(initialState);
+
+  const indexState = (state) => stackableState.indexOf(state);
+  const hasState = (state) => indexState(state) !== -1;
+
+  const removeState = (state) => {
+    if (this.hasState(state)) {
+      const index = indexState(state);
+      const mutableState = [...stackableState];
+      mutableState.splice(index, 1);
+
+      setStackableState(mutableState);
+    }
+  };
+  const setState = (state) => {
+    if (!hasState(state)) {
+      setStackableState([
+        ...stackableState,
+        state,
+      ]);
+    }
+  };
+
+  return {
+    state: stackableState,
+    removeState,
+    indexState,
+    hasState,
+    setState,
+  };
+};
+
+export default useStackableState;

client/src/hooks/useAppRoutes.js

@@ -0,0 +1,5 @@
+
+
+export default function useAppRoutes() {
+
+}

client/src/lang/en/index.js

@@ -4,5 +4,19 @@ export default {
   'hello_world': 'Hello World',
   'email_or_phone_number': 'Email or phone number',
   'password': 'Password',
-  'login': 'Login'
+  'login': 'Login',
+  'invalid_email_or_phone_numner': 'Invalid email or phone number.',
+  'required': 'Required',
+  'reset_password': 'Reset Password',
+  'the_user_has_been_suspended_from_admin': 'The user has been suspended from the administrator',
+  'field_name_must_be_number': 'field_name_must_be_number',
+  'name': 'Name',
+  "search": "Search",
+  'reference': 'Reference',
+  'date': 'Date',
+  'description': 'Description',
+  'from_date': 'From date',
+  'to_date': 'To date',
+  'accounting_basis': 'Accounting basis',
+  'report_date_range': 'Report date range',
 };

client/src/routes/authentication.js

@@ -1,20 +1,20 @@
-import Login from 'containers/Authentication/Login';
-import ResetPassword from 'containers/Authentication/ResetPassword';
+import LazyLoader from 'components/LazyLoader';
+
+const BASE_URL = '/auth';
 
 export default [
-  // {
-  //   path: '/',
-  //   exact: true,
-  //   component: Login,
-  // },
   {
-    path: '/auth/login',
-    exact: true,
-    component: Login,
+    path: `${BASE_URL}/login`,
+    name: 'auth.login',
+    component: LazyLoader({
+      loader: () => import('containers/Authentication/Login')
+    }),
   },
   {
-    path: '/auth/reset_password',
-    exact: true,
-    component: ResetPassword,
+    path: `${BASE_URL}/reset_password`,
+    name: 'auth.reset_password',
+    component: LazyLoader({
+      loader: () => import('containers/Authentication/ResetPassword')
+    }),
   }
 ];

client/src/routes/dashboard.js

@@ -1,17 +1,92 @@
-import Homepage from "containers/Dashboard/Homepage";
-import AccountsChart from 'containers/Dashboard/Accounts/AccountsChart';
+import LazyLoader from 'components/LazyLoader';
+
+const BASE_URL = '/dashboard';
 
 export default [
+  // Homepage
   {
-    path: '/dashboard/homepage',
-    component: Homepage,
+    path: `${BASE_URL}/homepage`,
+    name: 'dashboard.homepage',
+    component: LazyLoader({
+      loader: () => import('containers/Dashboard/Homepage')
+    }),
     exact: true,
   },
+
+  // Accounts.
   {
-    path: '/dashboard/accounts',
-    component: AccountsChart,
-    icon: 'cut',
-    text: 'Chart of Accounts',
-    label: 'Chart of Accounts'
+    path: `${BASE_URL}/accounts`,
+    name: 'dashboard.accounts',
+    component: LazyLoader({
+      loader: () => import('containers/Dashboard/Accounts/AccountsChart')
+    }),
   },
+
+  // Custom views.
+  {
+    path: `${BASE_URL}/custom_views/:resource_slug/new`,
+    name: 'dashboard.custom_view.new',
+    component: LazyLoader({
+      loader: () => import('containers/Dashboard/Views/ViewFormPage')
+    }),
+  },
+  {
+    path: `${BASE_URL}/custom_views/:view_id/edit`,
+    name: 'dashboard.custom_view.edit',
+    component: LazyLoader({
+      loader: () => import('containers/Dashboard/Views/ViewFormPage')
+    }),
+  },
+
+  // Expenses.
+  {
+    path: `${BASE_URL}/expenses/new`,
+    name: 'dashboard.expense.new',
+    component: LazyLoader({
+      loader: () => import('containers/Dashboard/Expenses/ExpenseForm')
+    }),
+    text: 'New Expense',
+  },
+  {
+    path: `${BASE_URL}/expenses`,
+    name: 'dashboard.expeneses.list',
+    component: LazyLoader({
+      loader: () => import('containers/Dashboard/Expenses/ExpensesList')
+    }),
+  },
+
+
+  // Accounting
+  {
+    path: `${BASE_URL}/accounting/make-journal-entry`,
+    name: 'dashboard.accounting.make.journal',
+    component: LazyLoader({
+      loader: () => import('containers/Dashboard/Accounting/MakeJournalEntriesPage')
+    }),
+    text: 'Make Journal Entry',
+  },
+
+
+  // Financial Reports.
+  {
+    path: `${BASE_URL}/accounting/general-ledger`,
+    name: 'dashboard.accounting.general.ledger',
+    component: LazyLoader({
+      loader: () => import('containers/Dashboard/FinancialStatements/LedgerSheet')
+    }),
+  },
+  {
+    path: `${BASE_URL}/accounting/trial-balance`,
+    name: 'dashboard.accounting.trial.balance',
+    component: LazyLoader({
+      loader: () => import('containers/Dashboard/FinancialStatements/TrialBalanceSheet')
+    }),
+  },
+  {
+    path: `${BASE_URL}/accounting/balance-sheet`,
+    name: 'dashboard.accounting.balance.sheet',
+    component: LazyLoader({
+      loader: () => import('containers/Dashboard/FinancialStatements/BalanceSheet')
+    }),
+  }
 ];

client/src/routes/preferences.js

@@ -0,0 +1,32 @@
+import General from 'containers/Dashboard/Preferences/General';
+import Users from 'containers/Dashboard/Preferences/Users';
+import Accountant from 'containers/Dashboard/Preferences/Accountant';
+import Accounts from 'containers/Dashboard/Preferences/Accounts';
+
+const BASE_URL = '/dashboard/preferences';
+
+export default [
+  {
+    path: `${BASE_URL}/general`,
+    name: 'dashboard.preferences.general',
+    component: General,
+    exact: true,
+  },
+  {
+    path: `${BASE_URL}/users`,
+    name: 'dashboard.preferences.users',
+    component: Users,
+    exact: true,
+  },
+  {
+    path: `${BASE_URL}/accountant`,
+    name: 'dashboard.preferences.accountant',
+    component: Accountant,
+    exact: true,
+  },
+  {
+    path: `${BASE_URL}/accounts`,
+    name: 'dashboard.preferences.accounts',
+    component: Accounts,
+  },
+];

client/src/routes/preferencesTabs.js

@@ -0,0 +1,32 @@
+import AccountsCustomFields from "containers/Dashboard/Preferences/AccountsCustomFields";
+import UsersList from 'containers/Dashboard/Preferences/UsersList';
+import RolesList from 'containers/Dashboard/Preferences/RolesList';
+
+export default {
+  accounts: [
+    {
+      path: '',
+      component: AccountsCustomFields,
+      exact: true,
+    },
+    {
+      name: 'dashboard.preferences.accounts.custom_fields',
+      path: 'custom_fields',
+      component: AccountsCustomFields,
+      exact: true,
+    },
+  ],
+  users: [
+    {
+      path: '',
+      component: UsersList,
+      exact: true,
+    },
+    {
+      name: 'dashboard.preferences.users.roles',
+      path: '/roles',
+      component: RolesList,
+      exact: true,
+    },
+  ],
+} 

client/src/services/ApiService.js

@@ -1,24 +1,24 @@
-import axios from 'axios';
+import axios from 'services/axios';
 
 export default {
 
   get(resource, params) {
-    return axios.get(`api/${resource}`, params);
+    return axios.get(`/api/${resource}`, params);
   },
 
   post(resource, params) {
-    return axios.post(`api/${resource}`, params);
+    return axios.post(`/api/${resource}`, params);
   },
 
   update(resource, slug, params) {
-    return axios.put(`api/${resource}/${slug}`, params);
+    return axios.put(`/api/${resource}/${slug}`, params);
   },
 
   put(resource, params) {
-    return axios.put(`api/${resource}`, params);
+    return axios.put(`/api/${resource}`, params);
   },
 
   delete(resource, params) {
-    return axios.delete(`api/${resource}`, params);
+    return axios.delete(`/api/${resource}`, params);
   }
 };