feat: Optimize SCSS architecture.

client/src/components/App.js

@@ -5,14 +5,14 @@ import { createBrowserHistory } from 'history';
 import { ReactQueryConfigProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query-devtools';
 
+import 'style/App.scss';
+
 import PrivateRoute from 'components/Guards/PrivateRoute';
 import Authentication from 'components/Authentication';
 import DashboardPrivatePages from 'components/Dashboard/PrivatePages';
 import GlobalErrors from 'containers/GlobalErrors/GlobalErrors';
 import intl from 'services/intl';
 
-import 'style/App.scss';
-
 function App({ locale }) {
   const history = createBrowserHistory();
 

client/src/components/Authentication.js

@@ -8,10 +8,10 @@ import withAuthentication from 'containers/Authentication/withAuthentication';
 import { compose } from 'utils';
 import Icon from 'components/Icon';
 
+import 'style/pages/Authentication/Auth.scss'
+
 function PageFade(props) {
-  return (
+  return <CSSTransition {...props} classNames="authTransition" timeout={500} />;
-    <CSSTransition {...props} classNames="authTransition" timeout={500} />
-  );
 }
 
 function AuthenticationWrapper({ isAuthorized = false, ...rest }) {

client/src/components/Dashboard/BigcapitalLoading.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Icon } from 'components';
+
+import 'style/components/BigcapitalLoading.scss';
+
+/**
+ * Bigcapital logo loading.
+ */
+export default function BigcapitalLoading({ className }) {
+  return (
+    <div className={classNames('bigcapital-loading', className)}>
+      <div class="center">
+        <Icon icon="bigcapital" height={37} width={214} />
+      </div>
+    </div>
+  );
+}

client/src/components/Dashboard/Dashboard.js

@@ -15,6 +15,11 @@ import withSettingsActions from 'containers/Settings/withSettingsActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/Dashboard/Dashboard.scss'
+
+/**
+ * Dashboard page.
+ */
 function Dashboard({
   // #withSettings
   requestFetchOptions,

client/src/components/Dashboard/DashboardLoadingIndicator.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import classNames from 'classnames';
+import { Choose } from 'components';
-import { Choose, Icon } from 'components';
+import BigcapitalLoading from './BigcapitalLoading';
 
+/**
+ * Dashboard loading indicator.
+ */
 export default function DashboardLoadingIndicator({
   isLoading = false,
   className,
@@ -10,11 +13,7 @@ export default function DashboardLoadingIndicator({
   return (  
     <Choose>
       <Choose.When condition={isLoading}>
-        <div className={classNames('bigcapital-loading', className)}>
+        <BigcapitalLoading />        
-          <div class="center">
-            <Icon icon="bigcapital" height={37} width={214} />
-          </div>
-        </div>
       </Choose.When>
 
       <Choose.Otherwise>

client/src/components/Dashboard/PrivatePages.js

@@ -11,13 +11,15 @@ import withSubscriptionsActions from 'containers/Subscriptions/withSubscriptions
 
 import EnsureOrganizationIsReady from 'components/Guards/EnsureOrganizationIsReady';
 import EnsureOrganizationIsNotReady from 'components/Guards/EnsureOrganizationIsNotReady';
+
 import { compose } from 'utils';
 
+import 'style/pages/Dashboard/Dashboard.scss';
+
 /**
  * Dashboard inner private pages.
  */
 function DashboardPrivatePages({
-
   // #withOrganizationActions
   requestAllOrganizations,
 

client/src/components/DataTable.js

@@ -20,6 +20,8 @@ import { If, Pagination, Choose } from 'components';
 
 import { ConditionalWrapper, saveInvoke } from 'utils';
 
+import 'style/components/DataTable/DataTable.scss';
+
 const IndeterminateCheckbox = React.forwardRef(
   ({ indeterminate, ...rest }, ref) => {
     return <Checkbox indeterminate={indeterminate} {...rest} />;

client/src/components/Datatable/DatatableEditable.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import {
+  DataTable,
+  If,
+} from 'components';
+import 'style/components/DataTable/DataTableEditable.scss';
+
+export default function DatatableEditable({
+  totalRow = false,
+  actions,
+  className,
+  ...tableProps
+}) {
+  return (
+    <div
+      className={classNames(CLASSES.DATATABLE_EDITOR, {
+        [`${CLASSES.DATATABLE_EDITOR_HAS_TOTAL_ROW}`]: totalRow,
+      }, className)}
+    >
+      <DataTable {...tableProps} />
+
+      <If condition={actions}>
+        <div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS)}>
+          {actions}
+        </div>
+      </If>
+    </div>
+  );
+}

client/src/components/Dialog/Dialog.js

@@ -3,6 +3,8 @@ import { Dialog } from '@blueprintjs/core';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
+import 'style/components/Dialog/Dialog.scss';
+
 function DialogComponent(props) {
   const { name, children, closeDialog, onClose } = props;
 

client/src/components/DialogsContainer.js

@@ -1,4 +1,4 @@
-import React, { lazy } from 'react';
+import React from 'react';
 
 import AccountFormDialog from 'containers/Dialogs/AccountFormDialog';
 import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
@@ -6,7 +6,6 @@ import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
 import CurrencyFormDialog from 'containers/Dialogs/CurrencyFormDialog';
 import ExchangeRateFormDialog from 'containers/Dialogs/ExchangeRateFormDialog';
 import JournalNumberDialog from 'containers/Dialogs/JournalNumberDialog';
-// import BillNumberDialog from 'containers/Dialogs/BillNumberDialog';
 import PaymentReceiveNumberDialog from 'containers/Dialogs/PaymentReceiveNumberDialog';
 import EstimateNumberDialog from 'containers/Dialogs/EstimateNumberDialog';
 import ReceiptNumberDialog from 'containers/Dialogs/ReceiptNumberDialog';
@@ -18,7 +17,6 @@ export default function DialogsContainer() {
     <div>
       <AccountFormDialog dialogName={'account-form'} />
       <JournalNumberDialog dialogName={'journal-number-form'} />
-      {/* <BillNumberDialog dialogName={'bill-number-form'} /> */}
       <PaymentReceiveNumberDialog dialogName={'payment-receive-number-form'} />
       <EstimateNumberDialog dialogName={'estimate-number-form'} />
       <ReceiptNumberDialog dialogName={'receipt-number-form'} />

client/src/components/EmptyStatus.js

@@ -2,6 +2,11 @@ import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 
+import 'style/components/DataTable/DataTableEmptyStatus.scss';
+
+/**
+ * Datatable empty status.
+ */
 export default function EmptyStatuts({ title, description, action, children }) {
   return (
     <div className={classNames(CLASSES.DATATABLE_EMPTY_STATUS)}>

client/src/components/FieldHint.js

@@ -1,7 +1,12 @@
 import React from 'react';
-import { Tooltip, Position } from '@blueprintjs/core';
+import { Tooltip } from '@blueprintjs/core';
 import Icon from './Icon';
 
+import 'style/components/Hint.scss';
+
+/**
+ * Field hint.
+ */
 export default function FieldHint({
   content,
   position,

client/src/components/FinancialStatement.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'style/containers/FinancialStatements/FinancialSheet.scss';
 
 export default function FinancialStatements({ children }) {
   return <div class="financial-statement">{children}</div>;

client/src/components/PageFormBigNumber.js

@@ -5,6 +5,8 @@ import {
   Money,
 } from 'components';
 
+import 'style/components/BigAmount.scss';
+
 export default function PageFormBigNumber({ label, amount, currencyCode }) {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>

client/src/components/Pagination.js

@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
 import { range } from 'lodash';
 import { Icon } from 'components';
 
+import 'style/components/DataTable/Pagination.scss';
+
 const getState = ({ currentPage, size, total }) => {
   const totalPages = Math.ceil(total / size);
   const visibleItems = 5;

client/src/components/Preferences/PreferencesPage.js

@@ -8,6 +8,11 @@ import PreferencesContentRoute from 'components/Preferences/PreferencesContentRo
 import DashboardErrorBoundary from 'components/Dashboard/DashboardErrorBoundary';
 import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 
+import 'style/pages/Preferences/Page.scss';
+
+/**
+ * Preferences page.
+ */
 export default function PreferencesPage() {
   return (
     <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>

client/src/components/Preferences/PreferencesSidebar.js

@@ -4,6 +4,11 @@ import { useHistory, useLocation } from 'react-router-dom';
 import preferencesMenu from 'config/preferencesMenu';
 import PreferencesSidebarContainer from './PreferencesSidebarContainer';
 
+import 'style/pages/Preferences/Sidebar.scss';
+
+/**
+ * Preferences sidebar.
+ */
 export default function PreferencesSidebar() {
   const history = useHistory();
   const location = useLocation();

client/src/components/Preferences/PreferencesTopbar.js

@@ -10,6 +10,11 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 
 import { compose } from 'utils';
 
+import 'style/pages/Preferences/Topbar.scss';
+
+/**
+ * Preferences topbar.
+ */
 function PreferencesTopbar({ preferencesPageTitle }) {
   return (
     <div

client/src/components/Sidebar/Sidebar.js

@@ -3,6 +3,8 @@ import SidebarContainer from 'components/Sidebar/SidebarContainer';
 import SidebarHead from 'components/Sidebar/SidebarHead';
 import SidebarMenu from 'components/Sidebar/SidebarMenu';
 
+import 'style/containers/Dashboard/Sidebar.scss';
+
 export default function Sidebar() {
   return (
     <SidebarContainer>

client/src/components/index.js

@@ -18,6 +18,7 @@ import CurrenciesSelectList from './CurrenciesSelectList';
 import FieldRequiredHint from './FieldRequiredHint';
 import AppToaster from './AppToaster';
 import DataTable from './DataTable';
+import DataTableEditable from './Datatable/DatatableEditable';
 import AccountsSelectList from './AccountsSelectList';
 import AccountsTypesSelect from './AccountsTypesSelect';
 import LoadingIndicator from './LoadingIndicator';
@@ -90,4 +91,5 @@ export {
   InputPrependText,
   PageFormBigNumber,
   AccountsMultiSelect,
+  DataTableEditable
 };

client/src/config/sidebarMenu.js

@@ -2,9 +2,6 @@
 import { FormattedMessage as T } from 'react-intl';
 
 export default [
-  {
-    spacer: 1,
-  },
   {
     text: <T id={'homepage'} />,
     disabled: false,
@@ -97,7 +94,7 @@ export default [
     divider: true,
   },
   {
-    text: <T id={'financial_accounting'} />,
+    text: <T id={'financial'} />,
     label: true,
   },
   {

client/src/containers/Accounting/MakeJournalEntriesPage.js

@@ -14,6 +14,8 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/ManualJournal/MakeJournal.scss'
+
 function MakeJournalEntriesPage({
   // #withCustomersActions
   requestFetchCustomers,

client/src/containers/Accounting/MakeJournalEntriesTable.js

@@ -1,17 +1,12 @@
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
-import { Button, Tooltip, Position, Intent } from '@blueprintjs/core';
+import { Button } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { omit } from 'lodash';
 import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';
 import DataTable from 'components/DataTable';
-import {
+import { compose, transformUpdatedRows, saveInvoke } from 'utils';
-  compose,
-  formattedAmount,
-  transformUpdatedRows,
-  saveInvoke,
-} from 'utils';
 import {
   AccountsListFieldCell,
   MoneyFieldCell,
@@ -25,6 +20,7 @@ import {
   TotalCreditDebitCellRenderer,
   NoteCellRenderer,
 } from './components';
+import { DataTableEditable } from 'components';
 import withAccounts from 'containers/Accounts/withAccounts';
 import withCustomers from 'containers/Customers/withCustomers';
 
@@ -130,14 +126,8 @@ function MakeJournalEntriesTable({
   };
 
   // Handles update datatable data.
-  const handleUpdateData = useCallback(
+  const handleUpdateData = (rowIndex, columnIdOrObj, value) => {
-    (rowIndex, columnIdOrObj, value) => {
+    const newRows = transformUpdatedRows(rows, rowIndex, columnIdOrObj, value);
-      const newRows = transformUpdatedRows(
-        rows,
-        rowIndex,
-        columnIdOrObj,
-        value,
-      );
     saveInvoke(
       onChange,
       newRows
@@ -146,12 +136,9 @@ function MakeJournalEntriesTable({
           ...omit(row, ['rowType']),
         })),
     );
-    },
+  };
-    [rows, onChange],
+  // Handle remove datatable row.
-  );
+  const handleRemoveRow = (rowIndex) => {
-
-  const handleRemoveRow = useCallback(
-    (rowIndex) => {
     // Can't continue if there is just one row line or less.
     if (rows.length <= 2) {
       return;
@@ -166,9 +153,7 @@ function MakeJournalEntriesTable({
         .map((row) => ({ ...omit(row, ['rowType']) })),
     );
     saveInvoke(onClickRemoveRow, removeIndex);
-    },
+  };
-    [rows, onChange, onClickRemoveRow],
-  );
 
   // Rows class names callback.
   const rowClassNames = useCallback(
@@ -183,17 +168,12 @@ function MakeJournalEntriesTable({
   };
 
   return (
-    <div
+    <DataTableEditable
-      className={classNames(
-        CLASSES.DATATABLE_EDITOR,
-        CLASSES.DATATABLE_EDITOR_HAS_TOTAL_ROW,
-      )}
-    >
-      <DataTable
       columns={columns}
       data={tableRows}
       rowClassNames={rowClassNames}
       sticky={true}
+      totalRow={true}
       payload={{
         accounts: accountsList,
         errors: error,
@@ -206,8 +186,8 @@ function MakeJournalEntriesTable({
           })),
         ],
       }}
-      />
+      actions={
-      <div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS)}>
+        <>
           <Button
             small={true}
             className={'button--secondary button--new-line'}
@@ -223,8 +203,9 @@ function MakeJournalEntriesTable({
           >
             <T id={'clear_all_lines'} />
           </Button>
-      </div>
+        </>
-    </div>
+      }
+    />
   );
 }
 

client/src/containers/Accounting/ManualJournalsList.js

@@ -6,7 +6,6 @@ import AppToaster from 'components/AppToaster';
 import {
   FormattedMessage as T,
   useIntl,
-  FormattedHTMLMessage,
 } from 'react-intl';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
@@ -25,6 +24,8 @@ import withResourceActions from 'containers/Resources/withResourcesActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/ManualJournal/List.scss';
+
 /**
  * Manual journals table.
  */

client/src/containers/Accounts/AccountsChart.js

@@ -25,6 +25,11 @@ import withAccounts from 'containers/Accounts/withAccounts';
 
 import { compose } from 'utils';
 
+import 'style/pages/Accounts/List.scss';
+
+/**
+ * Accounts chart list.
+ */
 function AccountsChart({
   // #withDashboardActions
   changePageTitle,

client/src/containers/Accounts/AccountsDataTable.js

@@ -27,6 +27,7 @@ import withAccounts from 'containers/Accounts/withAccounts';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withCurrentView from 'containers/Views/withCurrentView';
 
+import { accountNameAccessor } from './utils';
 
 function AccountsDataTable({
   // #withDashboardActions
@@ -135,7 +136,7 @@ function AccountsDataTable({
       {
         id: 'name',
         Header: formatMessage({ id: 'account_name' }),
-        accessor: 'name',
+        accessor: accountNameAccessor,
         className: 'account_name',
         width: 220,
       },

client/src/containers/Accounts/utils.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { If } from 'components';
+
+export const accountNameAccessor = (account) => {
+  return (
+    <span>
+      <If condition={account.name}>
+        <span class={'account-name'}>{ account.name }</span>
+      </If>
+      <span class={'account-desc'}>{ account.description }</span>
+    </span>
+  );
+}

client/src/containers/Customers/Customer.js

@@ -11,6 +11,8 @@ import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/Customers/PageForm.scss';
+
 function Customer({
   // // #withDashboardActions
   // changePageTitle,

client/src/containers/Customers/CustomersList.js

@@ -24,6 +24,11 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/Customers/List.scss';
+
+/**
+ * Customers list.
+ */
 function CustomersList({
   // #withDashboardActions
   changePageTitle,

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

@@ -19,6 +19,8 @@ import {
 import { compose, transformToForm } from 'utils';
 import { transformApiErrors, transformAccountToForm } from './utils';
 
+import 'style/pages/Accounts/AccountFormDialog.scss';
+
 const defaultInitialValues = {
   account_type_id: '',
   parent_account_id: '',

client/src/containers/Dialogs/CurrencyFormDialog/CurencyFormDialogContent.js

@@ -11,9 +11,7 @@ import { useFormik } from 'formik';
 import { useQuery, queryCache } from 'react-query';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';
-import classNames from 'classnames';
 import {
-  If,
   ErrorMessage,
   AppToaster,
   FieldRequiredHint,
@@ -26,6 +24,8 @@ import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/Currency/CurrencyFormDialog.scss'
+
 function CurencyFormDialogContent({
   // #withCurrencyDetail
   currency,

client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormDialogContent.js

@@ -6,7 +6,6 @@ import {
   InputGroup,
   Intent,
   Position,
-  MenuItem,
 } from '@blueprintjs/core';
 import { pick } from 'lodash';
 import * as Yup from 'yup';
@@ -18,9 +17,7 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
 import { momentFormatter, tansformDateValue } from 'utils';
 import {
   AppToaster,
-  Dialog,
   ErrorMessage,
-  ListSelect,
   DialogContent,
   FieldRequiredHint,
   CurrencySelectList,
@@ -35,6 +32,11 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/ExchangeRate/ExchangeRateDialog.scss';
+
+/**
+ * Exchange rate form content.
+ */
 function ExchangeRateFormDialogContent({
   // #withDialogActions
   closeDialog,

client/src/containers/Dialogs/InviteUserDialog/InviteUserDialogContent.js

@@ -15,7 +15,11 @@ import UserFormDialogForm from './InviteUserDialogForm';
 
 import { transformApiErrors } from './utils';
 
-//
+import 'style/pages/Users/InviteFormDialog.scss'
+
+/**
+ * Invite user dialog content.
+ */
 function InviteUserDialogContent({
   // #wihtCurrenciesActions
   requestFetchUser,

client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormDialogContent.js

@@ -20,6 +20,8 @@ import {
 } from './itemCategoryForm.schema';
 import { compose, transformToForm } from 'utils';
 
+import 'style/pages/ItemCategory/ItemCategoryDialog.scss'
+
 const defaultInitialValues = {
   name: '',
   description: '',

client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { DialogContent } from 'components';
 import { useQuery, queryCache } from 'react-query';
 
@@ -11,6 +11,8 @@ import withManualJournalsActions from 'containers/Accounting/withManualJournalsA
 
 import { compose, optionsMapToArray } from 'utils';
 
+import 'style/pages/ManualJournal/JournalNumberDialog.scss'
+
 /**
  * Journal number dialog's content.
  */

client/src/containers/Dialogs/JournalNumberDialog/index.js

@@ -29,7 +29,6 @@ function JournalNumberDialog({
   );
 }
 
-
 export default compose(
   withDialogRedux(),
 )(JournalNumberDialog);

client/src/containers/Entries/EditableItemsEntriesTable.js

@@ -5,6 +5,8 @@ import { FormattedMessage as T } from 'react-intl';
 import ItemsEntriesTable from './ItemsEntriesTable';
 import { orderingLinesIndexes, repeatValue } from 'utils';
 
+import 'style/components/DataTable/DataTableEditable.scss';
+
 export default function EditableItemsEntriesTable({
   defaultEntry,
   minLinesNumber = 2,

client/src/containers/Entries/ItemsEntriesTable.js

@@ -3,8 +3,7 @@ import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import { Hint, Icon } from 'components';
+import { Hint, Icon, DataTableEditable } from 'components';
-import DataTable from 'components/DataTable';
 import {
   InputGroupCell,
   MoneyFieldCell,
@@ -17,7 +16,6 @@ import withItems from 'containers/Items/withItems';
 import {
   compose,
   formattedAmount,
-  orderingLinesIndexes,
   saveInvoke,
 } from 'utils';
 
@@ -224,14 +222,8 @@ function ItemsEntriesTable({
   );
 
   return (
-    <div
+    <DataTableEditable
-      className={classNames(
+      className={classNames(CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES)}
-        CLASSES.DATATABLE_EDITOR,
-        CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES,
-        CLASSES.DATATABLE_EDITOR_HAS_TOTAL_ROW,
-      )}
-    >
-      <DataTable
       columns={columns}
       data={rows}
       rowClassNames={rowClassNames}
@@ -242,8 +234,8 @@ function ItemsEntriesTable({
         updateData: handleUpdateData,
         removeRow: handleRemoveRow,
       }}
-      />
+      actions={
-      <div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS)}>
+        <>
           <Button
             small={true}
             className={'button--secondary button--new-line'}
@@ -259,8 +251,9 @@ function ItemsEntriesTable({
           >
             <T id={'clear_all_lines'} />
           </Button>
-      </div>
+        </>
-    </div>
+      }
+    />
   );
 }
 

client/src/containers/Expenses/ExpenseFormEntries.js

@@ -2,12 +2,8 @@ import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { omit } from 'lodash';
-import classNames from 'classnames';
 
-import { CLASSES } from 'common/classes';
+import { DataTableEditable, Icon } from 'components';
-
-import DataTable from 'components/DataTable';
-import Icon from 'components/Icon';
 import { Hint } from 'components';
 import {
   compose,
@@ -228,13 +224,7 @@ function ExpenseTable({
   );
 
   return (
-    <div
+    <DataTableEditable
-      className={classNames(
-        CLASSES.DATATABLE_EDITOR,
-        CLASSES.DATATABLE_EDITOR_HAS_TOTAL_ROW,
-      )}
-    >
-      <DataTable
       columns={columns}
       data={tableRows}
       rowClassNames={rowClassNames}
@@ -245,8 +235,8 @@ function ExpenseTable({
         updateData: handleUpdateData,
         removeRow: handleRemoveRow,
       }}
-      />
+      actions={
-      <div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS)}>
+        <>
           <Button
             small={true}
             className={'button--secondary button--new-line'}
@@ -262,8 +252,10 @@ function ExpenseTable({
           >
             <T id={'clear_all_lines'} />
           </Button>
-      </div>
+        </>
-    </div>
+      }
+      totalRow={true}
+    />
   );
 }
 

client/src/containers/Expenses/Expenses.js

@@ -13,6 +13,11 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/Expense/PageForm.scss';
+
+/**
+ * Expense page form.
+ */
 function Expenses({
   // #withwithAccountsActions
   requestFetchAccounts,

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js

@@ -19,6 +19,8 @@ import withARAgingSummary from './withARAgingSummary';
 import { compose } from 'utils';
 import { transfromFilterFormToQuery } from './common';
 
+import 'style/pages/FinancialStatements/ARAgingSummary.scss';
+
 /**
  * AR aging summary report.
  */

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js

@@ -5,7 +5,7 @@ import FinancialSheet from 'components/FinancialSheet';
 
 import withARAgingSummary from './withARAgingSummary';
 
-import { compose } from 'utils';
+import { compose, getColumnWidth } from 'utils';
 
 /**
  * AR aging summary table sheet.
@@ -37,28 +37,34 @@ function ReceivableAgingSummaryTable({
         accessor: 'name',
         className: 'customer_name',
         sticky: 'left',
-        width: 200,
+        width: 240,
       },
       {
         Header: <T id={'current'} />,
         accessor: 'current',
         className: 'current',
-        width: 120,
+        width: getColumnWidth(receivableAgingRows, `current`, {
+          minWidth: 120,
+        }),
       },
       ...agingColumns.map((agingColumn, index) => ({
         Header: agingColumn,
         accessor: `aging-${index }`,
-        width: 120,
+        width: getColumnWidth(receivableAgingRows, `aging-${index }`, {
+          minWidth: 120,
+        }),
       })),
       {
         Header: (<T id={'total'} />),
         id: 'total',
         accessor: 'total',
         className: 'total',
-        width: 140,
+        width: getColumnWidth(receivableAgingRows, 'total', {
+          minWidth: 120,
+        }),
       },
     ],
-    [agingColumns],
+    [receivableAgingRows, agingColumns],
   );
 
   const rowClassNames = (row) => [`row-type--${row.original.rowType}`];

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

@@ -21,6 +21,8 @@ import withBalanceSheetDetail from './withBalanceSheetDetail';
 
 import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
 
+import 'style/pages/FinancialStatements/BalanceSheet.scss';
+
 function BalanceSheet({
   // #withDashboardActions
   changePageTitle,

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';

client/src/containers/FinancialStatements/FinancialReports.js

@@ -9,6 +9,8 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/FinancialStatements/FinancialSheets.scss';
+
 function FinancialReportsItem({ title, desc, link }) {
   return (
     <div class="financial-reports__item">

client/src/containers/FinancialStatements/FinancialStatementHeader.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { Position, Drawer } from '@blueprintjs/core';
+import 'style/containers/FinancialStatements/DrawerHeader.scss';
 
 export default function FinancialStatementHeader({
   children,

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js

@@ -21,6 +21,8 @@ import { compose } from 'utils';
 import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
 import withGeneralLedger from './withGeneralLedger';
 
+import 'style/pages/FinancialStatements/GeneralLedger.scss';
+
 /**
  * General Ledger (GL) sheet.
  */

client/src/containers/FinancialStatements/Journal/Journal.js

@@ -19,6 +19,8 @@ import withJournal from './withJournal';
 
 import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
 
+import 'style/pages/FinancialStatements/Journal.scss';
+
 function Journal({
   // #withJournalActions
   requestFetchJournalSheet,

client/src/containers/FinancialStatements/Journal/JournalTable.js

@@ -45,7 +45,7 @@ function JournalSheetTable({
         Header: formatMessage({ id: 'transaction_type' }),
         accessor: (r) =>
           rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
-        className: 'transaction_type',
+        className: 'reference_type_formatted',
         width: 145,
       },
       {

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js

@@ -19,6 +19,11 @@ import withSettings from 'containers/Settings/withSettings';
 
 import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
 
+import 'style/pages/FinancialStatements/ProfitLossSheet.scss';
+
+/**
+ * Profit/Loss financial statement sheet.
+ */
 function ProfitLossSheet({
   // #withDashboardActions
   changePageTitle,

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -18,6 +18,8 @@ import withTrialBalanceActions from './withTrialBalanceActions';
 import withSettings from 'containers/Settings/withSettings';
 import withTrialBalance from './withTrialBalance';
 
+import 'style/pages/FinancialStatements/TrialBalanceSheet.scss';
+
 /**
  * Trial balance sheet.
  */

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -7,11 +7,11 @@ import Money from 'components/Money';
 
 import withTrialBalance from './withTrialBalance';
 
-import { compose } from 'utils';
+import { compose, getColumnWidth } from 'utils';
 
 function TrialBalanceSheetTable({
   // #withTrialBalanceDetail
-  trialBalance,
+  trialBalanceTableRows,
   trialBalanceSheetLoading,
 
   // #withTrialBalanceTable
@@ -27,44 +27,57 @@ function TrialBalanceSheetTable({
         Header: formatMessage({ id: 'account_name' }),
         accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
         className: 'name',
-        minWidth: 150,
+        width: 160,
-        maxWidth: 150,
-        width: 150,
       },
       {
         Header: formatMessage({ id: 'credit' }),
         accessor: 'credit',
         Cell: ({ cell }) => {
           const { currency_code, credit } = cell.row.original;
-          return (<Money amount={credit} currency={currency_code} />);
+          return <Money amount={credit} currency={currency_code} />;
         },
         className: 'credit',
-        width: 95,
+        width: getColumnWidth(trialBalanceTableRows, `credit`, {
+          minWidth: 95,
+        }),
       },
       {
         Header: formatMessage({ id: 'debit' }),
         accessor: 'debit',
         Cell: ({ cell }) => {
           const { currency_code, debit } = cell.row.original;
-          return (<Money amount={debit} currency={currency_code} />);
+          return <Money amount={debit} currency={currency_code} />;
         },
-        className: 'debit',
+        width: getColumnWidth(trialBalanceTableRows, `debit`, { minWidth: 95 }),
-        width: 95,
       },
       {
         Header: formatMessage({ id: 'balance' }),
         accessor: 'balance',
         Cell: ({ cell }) => {
           const { currency_code, balance } = cell.row.original;
-          return (<Money amount={balance} currency={currency_code} />);
+          return <Money amount={balance} currency={currency_code} />;
         },
         className: 'balance',
-        width: 95,
+        width: getColumnWidth(trialBalanceTableRows, `balance`, {
+          minWidth: 95,
+        }),
       },
     ],
-    [formatMessage],
+    [trialBalanceTableRows, formatMessage],
   );
 
+  const rowClassNames = (row) => {
+    const { original } = row;
+    const rowTypes = Array.isArray(original.rowTypes) ? original.rowTypes : [];
+
+    return {
+      ...rowTypes.reduce((acc, rowType) => {
+        acc[`row_type--${rowType}`] = rowType;
+        return acc;
+      }, {}),
+    };
+  };
+
   return (
     <FinancialSheet
       companyName={companyName}
@@ -78,24 +91,27 @@ function TrialBalanceSheetTable({
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
-        data={trialBalance.data}
+        data={trialBalanceTableRows}
         expandable={true}
         expandToggleColumn={1}
         expandColumnSpace={1}
         sticky={true}
+        rowClassNames={rowClassNames}
       />
     </FinancialSheet>
   );
 }
 
 export default compose(
-  withTrialBalance(({
+  withTrialBalance(
-    trialBalance,
+    ({
+      trialBalanceTableRows,
       trialBalanceSheetLoading,
-    trialBalanceQuery
+      trialBalanceQuery,
     }) => ({
-    trialBalance,
+      trialBalanceTableRows,
       trialBalanceSheetLoading,
-    trialBalanceQuery
+      trialBalanceQuery,
-  })),
+    }),
+  ),
 )(TrialBalanceSheetTable);

client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js

@@ -2,16 +2,19 @@ import {connect} from 'react-redux';
 import {
   getFinancialSheetFactory,
   getFinancialSheetQueryFactory,
+  getFinancialSheetTableRowsFactory,  
 } from 'store/financialStatement/financialStatements.selectors';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
     const getTrialBalance = getFinancialSheetFactory('trialBalance');
     const getBalanceSheetQuery = getFinancialSheetQueryFactory('trialBalance');
+    const getTrialBalanceRows = getFinancialSheetTableRowsFactory('trialBalance');
 
     const mapped = {
       trialBalance: getTrialBalance(state, props),
       trialBalanceQuery: getBalanceSheetQuery(state, props),
+      trialBalanceTableRows: getTrialBalanceRows(state, props),
       trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
       trialBalanceSheetFilter: state.financialStatements.trialBalance.filter,
       trialBalanceSheetRefresh: state.financialStatements.trialBalance.refresh,

client/src/containers/Items/ItemForm.js

@@ -30,6 +30,8 @@ import {
   transformItemFormData,
 } from './ItemForm.schema';
 
+import 'style/pages/Items/PageForm.scss';
+
 const defaultInitialValues = {
   active: 1,
   name: '',

client/src/containers/Items/ItemsList.js

@@ -24,6 +24,11 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withViewsActions from 'containers/Views/withViewsActions';
 
+import 'style/pages/Items/List.scss';
+
+/**
+ * Items list.
+ */
 function ItemsList({
   // #withDashboardActions
   changePageTitle,

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

@@ -14,6 +14,8 @@ import withAccountsActions from 'containers/Accounts/withAccountsActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/Preferences/Accounting.scss';
+
 // Accountant preferences.
 function AccountantPreferences({
   changePreferencesPageTitle,

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

@@ -17,6 +17,11 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
 
+import 'style/pages/Preferences/GeneralForm.scss';
+
+/**
+ * Preferences - General form.
+ */
 function GeneralPreferences({
   // #withSettings
   organizationSettings,

client/src/containers/Purchases/Bill/BillActionsBar.js

@@ -3,8 +3,6 @@ import Icon from 'components/Icon';
 import {
   Button,
   Classes,
-  Menu,
-  MenuItem,
   Popover,
   NavbarDivider,
   NavbarGroup,
@@ -14,7 +12,7 @@ import {
 } from '@blueprintjs/core';
 
 import classNames from 'classnames';
-import { useRouteMatch, useHistory } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
 import { connect } from 'react-redux';

client/src/containers/Purchases/Bill/Bills.js

@@ -14,17 +14,19 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/Bills/PageForm.scss';
+
 function Bills({
-  //#withwithAccountsActions
+  // #withwithAccountsActions
   requestFetchAccounts,
 
-  //#withVendorActions
+  // #withVendorActions
   requestFetchVendorsTable,
 
-  //#withItemsActions
+  // #withItemsActions
   requestFetchItems,
 
-  //# withBilleActions
+  // #withBilleActions
   requestFetchBill,
 
   // #withSettingsActions

client/src/containers/Purchases/PaymentMades/PaymentMade.js

@@ -16,6 +16,11 @@ import withSettingsActions from 'containers/Settings/withSettingsActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/PaymentMade/PageForm.scss'
+
+/**
+ * Payment made - Page form.
+ */
 function PaymentMade({
   //#withAccountsActions
   requestFetchAccounts,

client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.js

@@ -6,7 +6,7 @@ import { sumBy } from 'lodash';
 import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';
-import { DataTable, Money } from 'components';
+import { DataTableEditable, Money } from 'components';
 import { transformUpdatedRows } from 'utils';
 import {
   MoneyFieldCell,
@@ -140,13 +140,8 @@ export default function PaymentMadeItemsTableEditor({
   );
 
   return (
-    <div
+    <DataTableEditable
-      className={classNames(
+      className={classNames(CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES)}
-        CLASSES.DATATABLE_EDITOR,
-        CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES,
-      )}
-    >
-      <DataTable
       columns={columns}
       data={localData}
       rowClassNames={rowClassNames}
@@ -156,8 +151,7 @@ export default function PaymentMadeItemsTableEditor({
         updateData: handleUpdateData,
       }}
       noResults={noResultsMessage}
-      />
+      actions={
-      <div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS, 'mt1')}>
         <Button
           small={true}
           className={'button--secondary button--clear-lines'}
@@ -165,7 +159,8 @@ export default function PaymentMadeItemsTableEditor({
         >
           <T id={'clear_all_lines'} />
         </Button>
-      </div>
+      }
-    </div>
+      totalRow={true}
+    />
   );
 }

client/src/containers/Sales/Estimate/Estimates.js

@@ -13,6 +13,8 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/SaleEstimate/PageForm.scss';
+
 function Estimates({
   // #withCustomersActions
   requestFetchCustomers,
@@ -85,8 +87,8 @@ function Estimates({
       name={'estimate-form'}
     >
       <EstimateForm
-        onFormSubmit={handleFormSubmit}
         estimateId={id}
+        onFormSubmit={handleFormSubmit}
         onCancelForm={handleCancel}
       />
     </DashboardInsider>

client/src/containers/Sales/Invoice/InvoiceForm.js

@@ -3,7 +3,7 @@ import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
 import { useIntl } from 'react-intl';
-import { pick, sumBy, omit, values } from 'lodash';
+import { pick, sumBy, omit } from 'lodash';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 

client/src/containers/Sales/Invoice/InvoiceFormHeader.js

@@ -8,6 +8,7 @@ import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
 
 import { PageFormBigNumber } from 'components';
 import withSettings from 'containers/Settings/withSettings';
+
 import { compose } from 'redux';
 
 /**

client/src/containers/Sales/Invoice/Invoices.js

@@ -13,6 +13,8 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/SaleInvoice/PageForm.scss';
+
 function Invoices({
   // #withCustomersActions
   requestFetchCustomers,

client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js

@@ -27,6 +27,8 @@ import { AppToaster } from 'components';
 
 import { compose, defaultToTransform } from 'utils';
 
+import 'style/pages/PaymentReceive/PageForm.scss'
+
 /**
  * Payment Receive form.
  */

client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTableEditor.js

@@ -6,7 +6,7 @@ import { sumBy } from 'lodash';
 import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';
-import { DataTable, Money } from 'components';
+import { DataTableEditable, Money } from 'components';
 import { transformUpdatedRows } from 'utils';
 import {
   MoneyFieldCell,
@@ -146,13 +146,8 @@ export default function PaymentReceiveItemsTableEditor({
   );
 
   return (
-    <div
+    <DataTableEditable
-      className={classNames(
+      className={classNames(CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES)}
-        CLASSES.DATATABLE_EDITOR,
-        CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES,
-      )}
-    >
-      <DataTable
       columns={columns}
       data={localData}
       rowClassNames={rowClassNames}
@@ -162,8 +157,7 @@ export default function PaymentReceiveItemsTableEditor({
         updateData: handleUpdateData,
       }}
       noResults={noResultsMessage}
-      />
+      actions={
-      <div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS, 'mt1')}>
         <Button
           small={true}
           className={'button--secondary button--clear-lines'}
@@ -171,7 +165,8 @@ export default function PaymentReceiveItemsTableEditor({
         >
           <T id={'clear_all_lines'} />
         </Button>
-      </div>
+      }
-    </div>
+      totalRow={true}
+    />
   );
 }

client/src/containers/Sales/Receipt/ReceiptForm.js

@@ -29,9 +29,6 @@ import withMediaActions from 'containers/Media/withMediaActions';
 import withSettings from 'containers/Settings/withSettings';
 
 import { AppToaster } from 'components';
-import Dragzone from 'components/Dragzone';
-import useMedia from 'hooks/useMedia';
-
 import {
   compose,
   repeatValue,
@@ -39,6 +36,8 @@ import {
   defaultToTransform,
 } from 'utils';
 
+import 'style/pages/SaleReceipt/PageForm.scss'
+
 const MIN_LINES_NUMBER = 4;
 
 const defaultReceipt = {
@@ -66,18 +65,18 @@ const defaultInitialValues = {
  * Receipt form.
  */
 function ReceiptForm({
-  //#withMedia
+  // #withMedia
   requestSubmitMedia,
   requestDeleteMedia,
 
-  //#withReceiptActions
+  // #withReceiptActions
   requestSubmitReceipt,
   requestEditReceipt,
 
-  //#withReceiptDetail
+  // #withReceiptDetail
   receipt,
 
-  //#withDashboard
+  // #withDashboard
   changePageTitle,
   changePageSubtitle,
 

client/src/containers/Setup/SetupCongratsPage.js

@@ -1,12 +1,16 @@
 import React, { useCallback } from 'react';
 import { Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
 import { useHistory } from "react-router-dom";
 import WorkflowIcon from './WorkflowIcon';
 import withOrganizationActions from 'containers/Organization/withOrganizationActions';
 
+import 'style/pages/Setup/Congrats.scss';
+
 import { compose } from 'utils';
 
+/**
+ * Setup congrats page.
+ */
 function SetupCongratsPage({
   setOrganizationSetupCompleted,
 }) {

client/src/containers/Setup/SetupInitializingForm.js

@@ -3,8 +3,9 @@ import { useQuery } from 'react-query';
 import { withWizard } from 'react-albus'
 import { ProgressBar, Intent } from '@blueprintjs/core';
 
+import 'style/pages/Setup/Initializing.scss';
+
 import withOrganizationActions from 'containers/Organization/withOrganizationActions';
-import withOrganization from 'containers/Organization/withOrganization'
 
 import { compose } from 'utils';
 

client/src/containers/Setup/SetupOrganizationForm.js

@@ -17,6 +17,9 @@ import { TimezonePicker } from '@blueprintjs/timezone';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { DateInput } from '@blueprintjs/datetime';
 import { withWizard } from 'react-albus';
+
+import 'style/pages/Setup/Organization.scss';
+
 import { momentFormatter, tansformDateValue } from 'utils';
 import { ListSelect, ErrorMessage, FieldRequiredHint } from 'components';
 

client/src/containers/Setup/SetupSubscriptionForm.js

@@ -4,11 +4,16 @@ import { useFormik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Button, Intent } from '@blueprintjs/core';
 import { withWizard } from 'react-albus';
-import withSubscriptionsActions from 'containers/Subscriptions/withSubscriptionsActions';
+
+import 'style/pages/Setup/Billing.scss';
+
 import BillingPlans from 'containers/Subscriptions/billingPlans';
 import BillingPeriods from 'containers/Subscriptions/billingPeriods';
 import { BillingPaymentmethod } from 'containers/Subscriptions/billingPaymentmethod';
+
+import withSubscriptionsActions from 'containers/Subscriptions/withSubscriptionsActions';
 import withBillingActions from 'containers/Subscriptions/withBillingActions';
+
 import { compose } from 'utils';
 
 /**

client/src/containers/Setup/WizardSetupPage.js

@@ -2,6 +2,7 @@ import React from 'react';
 import SetupRightSection from './SetupRightSection';
 import SetupLeftSection from './SetupLeftSection';
 
+import 'style/pages/Setup/SetupPage.scss';
 
 export default function WizardSetupPage() {
   return (

client/src/routes/dashboard.js

@@ -11,7 +11,6 @@ export default [
     }),
     breadcrumb: 'Home',
   },
-
   // Accounts.
   {
     path: `/accounts`,
@@ -20,7 +19,6 @@ export default [
     }),
     breadcrumb: 'Accounts Chart',
   },
-
   // Custom views.
   {
     path: `/custom_views/:resource_slug/new`,
@@ -36,8 +34,7 @@ export default [
     }),
     breadcrumb: 'Edit',
   },
-
+  // Accounting.
-  // Accounting
   {
     path: `/make-journal-entry`,
     component: LazyLoader({
@@ -81,7 +78,7 @@ export default [
     breadcrumb: 'New Item',
   },
 
-  // Items
+  // Items.
   {
     path: `/items`,
     component: LazyLoader({
@@ -89,7 +86,7 @@ export default [
     }),
     breadcrumb: 'Items',
   },
-  // Inventory adjustments
+  // Inventory adjustments.
   {
     path: `/inventory-adjustments`,
     component: LazyLoader({
@@ -166,7 +163,7 @@ export default [
     }),
     breadcrumb: 'Exchange Rates',
   },
-  // Expenses
+  // Expenses.
   {
     path: `/expenses/new`,
     component: LazyLoader({

client/src/store/financialStatement/financialStatements.mappers.js

@@ -17,7 +17,7 @@ export const mapBalanceSheetToTableRows = (accounts) => {
           ? [
               {
                 name: `Total ${account.name}`,
-                row_types: rowTypes,
+                row_types: ['total-row', account.section_type],
                 total: { ...account.total },
                 ...(account.total_periods && {
                   total_periods: account.total_periods,
@@ -104,7 +104,7 @@ export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
   return [
     ...rows,
     {
-      name: 'TOTAL',
+      name: 'Total Aged Receivable',
       rowType: 'total',
       current: sheet.total.current.formatted_amount,
       ...mapAging(sheet.total.aging),
@@ -115,11 +115,12 @@ export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
 
 export const mapTrialBalanceSheetToRows = (sheet) => {
   return [
+    ...sheet.accounts,
     {
       name: 'Total',
+      rowTypes: ['total'],
       ...sheet.total,
     },
-    ...sheet.accounts,
   ];
 };
 

client/src/store/financialStatement/financialStatements.reducer.js

@@ -81,7 +81,6 @@ export default createReducer(initialState, {
   ...financialStatementFilterToggle('BALANCE_SHEET', 'balanceSheet'),
 
   [t.TRAIL_BALANCE_STATEMENT_SET]: (state, action) => {
-    debugger;
     const trailBalanceSheet = {
       sheet: action.data.data,
       tableRows: mapTrialBalanceSheetToRows(action.data.data),
@@ -155,11 +154,8 @@ export default createReducer(initialState, {
     const { refresh } = action.payload;
     state.profitLoss.refresh = !!refresh;
   },
-
   ...financialStatementFilterToggle('PROFIT_LOSS', 'profitLoss'),
 
- 
-
   [t.RECEIVABLE_AGING_SUMMARY_SET]: (state, action) => {
     const { customers, total, columns, query } = action.payload;
 

client/src/style/App.scss

@@ -1,129 +1,49 @@
 @import './normalize.scss';
 
-$pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
+@import './Base.scss';
-  0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
-
-@import '@blueprintjs/core/src/common/_variables.scss';
-// @import "@blueprintjs/core/src/common/colors.scss";
-
-$blue1: #0069ff;
-$blue2: #0052ff;
-$blue3: rgb(0, 82, 204);
-$pt-link-color: $blue3;
-$pt-intent-primary: $blue1;
-$menu-item-color-hover: $light-gray4;
-$menu-item-color-active: $light-gray3;
-
-$breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
-
-$sidebar-zindex: 15;
-$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-  Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
-
-$button-box-shadow: 0 0 0 !default;
-$button-box-shadow-active: 0 0 0 !default;
-$button-intent-box-shadow: 0 0 0 !default;
-$button-intent-box-shadow-active: 0 0 0 !default;
-
-$button-background-color-disabled: #E9ECEF !default;
-$button-background-color: #E6EFFB !default;
-$button-background-color-hover: #CFDCEE !default;
 
 // Blueprint framework.
 @import '@blueprintjs/core/src/blueprint.scss';
 @import '@blueprintjs/datetime/src/blueprint-datetime.scss';
 
-// Bootstrap
-// @import '~bootstrap/scss/bootstrap';
-
 @import 'basscss';
 
-@import 'functions';
-
 // Objects
 @import 'objects/form';
 @import 'objects/typography';
 @import 'objects/buttons';
+@import 'objects/Bigcapital';
 
 // Components
-@import 'components/data-table';
+@import 'components/CustomScrollbar';
-@import 'components/dialog';
-@import 'components/custom-scrollbar';
 @import 'components/dragzone';
-@import 'components/pagination';
 @import 'components/resizer';
+@import 'components/CloudSpinner';
+@import 'components/Alert';
+@import 'components/Card';
+@import 'components/Toast';
+@import 'components/PageForm';
+@import 'components/Tooltip';
 
 // Pages
-@import 'pages/dashboard';
-@import 'pages/accounts-chart';
-@import 'pages/authentication';
-@import 'pages/expense-form';
 @import 'pages/financial-statements';
-@import 'pages/make-journal-entries';
-@import 'pages/preferences';
 @import 'pages/view-form';
-@import 'pages/manual-journals';
-@import 'pages/item-category';
-@import 'pages/items';
-@import 'pages/items-categories';
-@import 'pages/invite-form';
-@import 'pages/currency';
-@import 'pages/invite-user';
-@import 'pages/exchange-rate';
-@import 'pages/customer';
-@import 'pages/billing';
-@import 'pages/register-wizard-page';
 @import 'pages/register-organizaton';
-@import 'pages/bills';
-@import 'pages/estimates';
-@import 'pages/invoice-form';
-@import 'pages/receipt-form';
-@import 'pages/payment-made';
-@import 'pages/payment-receive';
 
 // Views
 @import 'views/filter-dropdown';
-@import 'views/sidebar';
+
-// @import 'pages/estimate';
 
 .App {
   min-width: 960px;
 }
 
-.#{$ns}-tooltip {
-  box-shadow: none;
-}
-
-[data-icon='bigcapital'] {
-  path {
-    fill: #004dd0;
-  }
-  .path-1,
-  .path-13 {
-    fill: #2d95fd;
-  }
-}
-
-.bigcapital--alt {
-  svg {
-    path,
-    .path-13,
-    .path-1 {
-      fill: #fff;
-    }
-  }
-}
 // =======
-body.authentication {
+
-  background-color: #fcfdff;
-}
 body.hide-scrollbar .Pane2{
   overflow: hidden;
 }
 
-.bp3-toast {
-  box-shadow: none;
-}
 
 .select-list--fill-popover {
   position: relative;
@@ -149,36 +69,12 @@ body.hide-scrollbar .Pane2{
 .bp3-datepicker-caption .bp3-html-select::after {
   margin-right: 6px;
 }
-
-.hint {
-  margin-left: 6px;
-  position: relative;
-  top: -1px;
-
-  .bp3-icon {
-    color: #a1b2c5;
-  }
-
-  .bp3-popover-target:hover .bp3-icon {
-    color: #90a1b5;
-  }
-  .bp3-icon {
-    vertical-align: middle;
-  }
-}
-
 .bp3-select-popover .bp3-menu {
   max-height: 300px;
   max-width: 400px;
   overflow: auto;
 }
 
-.pt-tooltip {
-  .pt-popover-content {
-    max-width: 100px;
-  }
-}
-
 .bp3-form-group .bp3-label {
   .hint {
     .bp3-popover-wrapper {
@@ -197,407 +93,6 @@ body.hide-scrollbar .Pane2{
 }
 
  
-.bigcapital-loading{
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  display: flex;
-
-  .center{
-    width: auto;
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .text{
-    margin-top: 12px;
-    opacity: 0.85;
-    display: none;
-  }
-}
-
-
-// .page-form
-//    .page-form__header
-//    .page-form__content
-//    .page-form__floating-actions
-.page-form{
-  $self: '.page-form';
-  padding-bottom: 20px;
-  
-  
-  &__floating-actions{
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    background: #fff;
-    padding: 14px 18px;
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
-    box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
-  }
-
-  &--strip{
-
-    #{$self}__header-fields{
-      width: 85%;
-    }
-    #{$self}__body,
-    #{$self}__footer{
-      max-width: 1200px;
-    }
-
-    #{$self}__header{
-      background-color: #fbfbfb;
-      padding: 30px 20px 0;
-      border-bottom: 1px solid #d2dce2;
-  
-      .bp3-form-group.bp3-inline label.bp3-label{
-        font-weight: 500;
-      }
-    }
-
-    #{$self}__body{
-      padding-top: 15px;
-      padding-left: 20px;
-      padding-right: 20px;  
-    }
-
-    #{$self}__footer{
-      margin: 25px 0 0 0;
-      padding-left: 20px;
-      padding-right: 20px;
-    }
-  }
-}
-.datatable-editor{
-
-  .bp3-form-group {
-    margin-bottom: 0;
-  }
-    .table {
-      border: 1px solid #d2dce2;
-      border-left: transparent;
-
-      .th,
-      .td {
-        border-left: 1px solid #e2e2e2;
-
-        &.index {
-          text-align: center;
-
-          span {
-            width: 100%;
-            font-weight: 500;
-          }
-        }
-
-        &:first-child{
-          border-left: 1px solid #d2dce2;
-        }
-      }
-
-      .thead {
-        .tr .th {
-          padding: 10px 10px;
-          background-color: #f0f2f8;
-          font-size: 14px;
-          font-weight: 500;
-          color: #1c1940;
-
-          &.index > div {
-            width: 100%;
-          }
-        }
-      }
-
-      .tbody {
-        .tr .td {
-          padding: 5px;
-          border-bottom: 0;
-          border-top: 1px dashed #AAA;
-          min-height: 42px;
-
-          &.index {
-            background-color: #f0f2f8;
-
-            > span {
-              margin-top: auto;
-              margin-bottom: auto;
-            }
-          }
-        }
-        .tr {
-          .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
-          .form-group--select-list .bp3-button {
-            border-color: #ffffff;
-            color: #222;
-            border-radius: 3px;
-          }
-
-          .bp3-form-group:not(.bp3-intent-danger) .bp3-input{
-            border-radius: 2px;
-            padding-left: 4px;
-            padding-right: 4px;
-            
-            &:focus{
-              box-shadow: 0 0 0 2px #116cd0;
-            }
-          }
-
-          .form-group--select-list .bp3-button{
-            padding-left: 6px;
-            padding-right: 6px;
-
-            &:after{
-              display: none;
-            }
-          }
-
-          .form-group--select-list,
-          .bp3-form-group {
-            &.bp3-intent-danger {
-              .bp3-button:not(.bp3-minimal),
-              .bp3-input {
-                border-color: #F7B6B6;
-              }
-            }
-          }
-
-          &:first-of-type{
-            .td{
-              border-top: 0;
-            }
-          }
-
-          &:last-of-type {
-            .td {
-
-              .bp3-button,
-              .bp3-input-group {
-                display: none;
-              }
-            }
-          }
-
-          .td.actions {
-            .bp3-button {
-              background-color: transparent;
-              color: #e66d6d;
-
-              &:hover {
-                color: #c23030;
-              }
-
-              svg {
-                color: inherit;
-              }
-            }
-          }
-
-          &.row--total {
-            
-            .account.td,
-            .debit.td,
-            .credit.td {
-              > span {
-                padding-top: 2px;
-              }
-            }
-            .debit.td,
-            .credit.td {
-              > span {
-                font-weight: 600;
-                color: #444;
-              }
-            }
-          }
-
-          .td {
-            &.note {
-              .bp3-form-group {
-                width: 100%;
-              }
-            }
-
-          }
-        }
-      }
-      .th {
-        color: #444;
-        font-weight: 600;
-        border-bottom: 1px dotted #666;
-      }
-
-      .td {
-        border-bottom: 1px dotted #999;
-      }
-
-      .actions.td {
-        .bp3-button {
-          background: transparent;
-          margin: 0;
-        }
-      }
-    }
-
-  .table{
-    .tbody{
-      .tr .td.actions .bp3-button{
-        background-color: transparent;
-        color: #e66d6d;
-
-        svg{
-          color: inherit;
-        }
-      } 
-    }
-  }
-
-  &__actions{
-    margin-top: 12px;
-
-    .bp3-button{
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-
-    .button--clear-lines{
-
-      &.bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal){
-        background-color: #fcefef;
-      }
-    }
-  }
-
-
-  &.has-total-row{
-
-    .table .tbody-inner .tr:last-of-type{
-
-      .td{
-        border-top-width: 2px;
-        border-top-color: #E9E9EF;
-        border-top-style: solid;
-        min-height: 40px;
-
-        &:not(.index) {
-          background-color: #FCFCFD;
-        }
-
-        &.index span{
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-.cloud-spinner{
-  position: relative;
-
-  &.is-loading:before{
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    background: rgba(255, 255, 255, 0.8);
-    z-index: 999;
-  }
-
-  .bp3-spinner{
-    position: absolute;
-    z-index: 999999;
-    left: 50%;
-    top: 50%;
-    margin-top: -20px;
-    margin-left: -20px;
-  }
-
-  &:not(.is-loading) .bp3-spinner{
-    display: none;
-  }
-}
-
-
-.big-amount{
-
-  &__label{
-    color: #5d6f90;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 14px;
-  }
-  &__number{
-    margin: 0;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: 400;
-    margin-top: 6px;
-    color: #343463;
-    line-height: 1;
-    font-size: 34px;
-  }
-}
-
-
-.bp3-alert{
-  .bp3-alert-footer{
-    .bp3-button{
-      min-width: 70px;
-    }
-  }
-}
-
-.datatable-empty-status{
-  max-width: 550px;
-  width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  margin-top: 200px;
-
-  &__title{
-    font-size: 20px;
-    color: #2c3a5d;
-    font-weight: 600;
-    margin-left: auto;
-    margin-bottom: 10px;
-    margin-right: auto;
-    margin-top: 0;
-    line-height: 1.4;
-  }
-  &__desc{
-    font-size: 16px;
-    color: #1f3255;
-    opacity: 0.8;
-    line-height: 1.6;
-  }
-  &__actions{
-    margin-top: 26px;
-
-    .bp3-button{
-      min-height: 36px;
-
-      & + .bp3-button{
-        margin-left: 10px;
-      }
-    }
-  }
-}
-
-.dropzone-container{
-  max-width: 250px;
-  margin-left: auto;
-}
-
-.card{
-  background: #fff;
-  border: 1px solid #d2dce2;
-}
-
-
 .form-group--select-list{
   button{
     justify-content: start;

client/src/style/Base.scss

@@ -0,0 +1,3 @@
+
+@import 'variables';
+@import 'functions';

client/src/style/components/Alert.scss

@@ -0,0 +1,7 @@
+.bp3-alert{
+  .bp3-alert-footer{
+    .bp3-button{
+      min-width: 70px;
+    }
+  }
+}

client/src/style/components/BigAmount.scss

@@ -0,0 +1,20 @@
+
+.big-amount{
+
+  &__label{
+    color: #5d6f90;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+  }
+  &__number{
+    margin: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 400;
+    margin-top: 6px;
+    color: #343463;
+    line-height: 1;
+    font-size: 34px;
+  }
+}

client/src/style/components/BigcapitalLoading.scss

@@ -0,0 +1,19 @@
+.bigcapital-loading {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  display: flex;
+
+  .center {
+    width: auto;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .text {
+    margin-top: 12px;
+    opacity: 0.85;
+    display: none;
+  }
+}

client/src/style/components/Card.scss

@@ -0,0 +1,5 @@
+
+.card{
+  background: #fff;
+  border: 1px solid #d2dce2;
+}

client/src/style/components/CloudSpinner.scss

@@ -0,0 +1,28 @@
+
+
+.cloud-spinner{
+  position: relative;
+
+  &.is-loading:before{
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(255, 255, 255, 0.8);
+    z-index: 999;
+  }
+
+  .bp3-spinner{
+    position: absolute;
+    z-index: 999999;
+    left: 50%;
+    top: 50%;
+    margin-top: -20px;
+    margin-left: -20px;
+  }
+  &:not(.is-loading) .bp3-spinner{
+    display: none;
+  }
+}

client/src/style/components/DataTable/DataTable.scss

@@ -1,27 +1,26 @@
+@import 'src/style/Base.scss';
 
-.bigcapital-datatable{
+.bigcapital-datatable {
   display: block;
 
-  .dashboard__page-content &{
+  .dashboard__page-content & {
-
+    .table .thead {
-    .table .thead{
+      .th {
-      .th{
+        border-bottom-color: #d2dde2;
-        border-bottom-color: #D2DDE2;
       }
     }
   }
-
   .table {
     text-align: left;
     border-spacing: 0;
     min-width: 100%;
     display: block;
 
-    .thead{
+    .thead {
       overflow-y: auto;
       overflow-x: hidden;
 
-      .th{
+      .th {
         padding: 0.6rem 0.5rem;
         background: #fafafa;
         font-size: 14px;
@@ -29,7 +28,7 @@
         font-weight: 500;
         border-bottom: 1px solid rgb(224, 224, 224);
       }
-      .sort-icon{
+      .sort-icon {
         width: 0;
         height: 0;
         position: relative;
@@ -37,12 +36,12 @@
         display: inline-block;
         margin-left: 5px;
 
-        &--desc{
+        &--desc {
           border-left: 4px solid transparent;
           border-right: 4px solid transparent;
           border-bottom: 6px solid #666;
         }
-        &--asc{
+        &--asc {
           border-left: 4px solid transparent;
           border-right: 4px solid transparent;
           border-top: 6px solid #666;
@@ -75,7 +74,7 @@
         border-right: 0;
       }
 
-      .bp3-control{
+      .bp3-control {
         margin-bottom: 0;
       }
       .resizer {
@@ -88,94 +87,94 @@
         top: 0;
         transform: translateX(50%);
         z-index: 1;
-        touch-action:none;
+        touch-action: none;
 
         &.isResizing {
           // background: red;
         }
 
-        .inner-resizer{
+        .inner-resizer {
           height: 100%;
           width: 1px;
           border-left: 1px solid #ececec;
           margin: 0 auto;
         }
 
-        &.isResizing .inner-resizer{
+        &.isResizing .inner-resizer {
-          background: #1183DA;
+          background: #1183da;
         }
       }
 
-      .bp3-control.bp3-checkbox .bp3-control-indicator{
+      .bp3-control.bp3-checkbox .bp3-control-indicator {
         border: 2px solid #d7d7d7;
 
         &,
-        &:hover{
+        &:hover {
           height: 16px;
           width: 16px;
         }
       }
 
-      .bp3-control.bp3-checkbox{
+      .bp3-control.bp3-checkbox {
         input:checked ~ .bp3-control-indicator,
-        input:indeterminate ~ .bp3-control-indicator,{
+        input:indeterminate ~ .bp3-control-indicator {
           border-color: #0052ff;
         }
       }
     }
 
-    .tbody{
+    .tbody {
       width: 100%;
       overflow: auto;
 
-      .tbody-inner{
+      .tbody-inner {
-        > .loading{
+        > .loading {
           padding-top: 40px;
         }
       }
 
-      .tr .td{
+      .tr .td {
-        border-bottom: 1px solid #E8E8E8;
+        border-bottom: 1px solid #e8e8e8;
         align-items: center;
         color: #141720;
 
-        .placeholder{
+        .placeholder {
-          color: #A0A0A0;
+          color: #a0a0a0;
         }
 
-        .bp3-form-group{
+        .bp3-form-group {
           width: 100%;
         }
       }
-      .tr:hover .td{
+      .tr:hover .td {
         background: #f3f7fc;
       }
 
-      .tr.is-context-menu-active .td{
+      .tr.is-context-menu-active .td {
-        background: #F3FAFC;
+        background: #f3fafc;
       }
-      .td.actions .#{$ns}-button{
+      .td.actions .#{$ns}-button {
-        background: #E6EFFB;
+        background: #e6effb;
         border: 0;
         box-shadow: none;
         padding: 5px 15px;
         border-radius: 8px;
 
         &:hover,
-        &:focus{
+        &:focus {
-          background-color: #CFDCEE;
+          background-color: #cfdcee;
         }
 
-        svg{
+        svg {
-          color: #425361
+          color: #425361;
         }
 
-        .bp3-icon-more-h-16{
+        .bp3-icon-more-h-16 {
           margin-top: 2px;
         }
       }
-      .tr.no-results{
+      .tr.no-results {
-        .td{
+        .td {
           flex-direction: column;
           padding: 20px;
           color: #666;
@@ -183,14 +182,14 @@
         }
       }
 
-      > .loading{
+      > .loading {
         padding-top: 50px;
       }
     }
 
     .tr .th,
-    .tr .td{
+    .tr .td {
-      .expand-toggle{
+      .expand-toggle {
         cursor: pointer;
         display: inline-block;
         padding: 0 8px 0 0;
@@ -198,7 +197,7 @@
         margin: auto 0;
         margin-left: 4px;
 
-        .arrow-right{
+        .arrow-right {
           width: 0;
           height: 0;
           border-top: 5px solid transparent;
@@ -207,7 +206,7 @@
           display: block;
         }
 
-        .arrow-down{
+        .arrow-down {
           width: 0;
           height: 0;
           border-left: 5px solid transparent;
@@ -219,27 +218,25 @@
     }
   }
 
-  .no-results{    
+  .no-results {
     color: #666;
 
-    .td{
+    .td {
       padding-top: 20px;
       padding-bottom: 20px;
       width: 100%;
     }
   }
 
-  &.has-sticky-header{
+  &.has-sticky-header {
-
+    .thead {
-    .thead{
+      .tr .th {
-      .tr .th{
         position: sticky;
       }
     }
   }
 
   &.has-sticky {
-
     .thead,
     .tfoot {
       position: sticky;
@@ -273,38 +270,10 @@
     }
   }
 
-  &.has-virtualized-rows{
+  &.has-virtualized-rows {
-    .tbody{
+    .tbody {
       overflow-y: scroll;
       overflow-x: hidden;
     }
   }
-
-  &--financial-report{
-  
-    .table {
-      .thead{
-        .tr .th{
-          background: transparent;
-          border-top: 1px solid #666;
-          border-bottom: 1px solid #666;
-  
-          padding: 8px 0.4rem;
-          color: #222;
-        }
-      }
-
-      .tbody{
-        .tr .td{
-          border-bottom: 0;
-        }
-        .tr:not(:first-child) .td{
-          border-top: 1px dotted #CCC;
-        }
-        .tr:last-child .td{
-          border-bottom: 1px dotted #CCC;
-        }
-      }
-    }  
-  }
 }

client/src/style/components/DataTable/DataTableEditable.scss

@@ -0,0 +1,207 @@
+.datatable-editor {
+  .bp3-form-group {
+    margin-bottom: 0;
+  }
+  .table {
+    border: 1px solid #d2dce2;
+    border-left: transparent;
+
+    .th,
+    .td {
+      border-left: 1px solid #e2e2e2;
+
+      &.index {
+        text-align: center;
+
+        span {
+          width: 100%;
+          font-weight: 500;
+        }
+      }
+      &:first-child {
+        border-left: 1px solid #d2dce2;
+      }
+    }
+
+    .thead {
+      .tr .th {
+        padding: 10px 10px;
+        background-color: #f0f2f8;
+        font-size: 14px;
+        font-weight: 500;
+        color: #1c1940;
+
+        &.index > div {
+          width: 100%;
+        }
+      }
+    }
+
+    .tbody {
+      .tr .td {
+        padding: 5px;
+        border-bottom: 0;
+        border-top: 1px dashed #aaa;
+        min-height: 42px;
+
+        &.index {
+          background-color: #f0f2f8;
+
+          > span {
+            margin-top: auto;
+            margin-bottom: auto;
+          }
+        }
+      }
+      .tr {
+        .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
+        .form-group--select-list .bp3-button {
+          border-color: #ffffff;
+          color: #222;
+          border-radius: 3px;
+        }
+        .bp3-form-group:not(.bp3-intent-danger) .bp3-input {
+          border-radius: 2px;
+          padding-left: 4px;
+          padding-right: 4px;
+
+          &:focus {
+            box-shadow: 0 0 0 2px #116cd0;
+          }
+        }
+        .form-group--select-list .bp3-button {
+          padding-left: 6px;
+          padding-right: 6px;
+
+          &:after {
+            display: none;
+          }
+        }
+        .form-group--select-list,
+        .bp3-form-group {
+          &.bp3-intent-danger {
+            .bp3-button:not(.bp3-minimal),
+            .bp3-input {
+              border-color: #f7b6b6;
+            }
+          }
+        }
+
+        &:first-of-type {
+          .td {
+            border-top: 0;
+          }
+        }
+
+        &:last-of-type {
+          .td {
+            .bp3-button,
+            .bp3-input-group {
+              display: none;
+            }
+          }
+        }
+        .td.actions {
+          .bp3-button {
+            background-color: transparent;
+            color: #e66d6d;
+
+            &:hover {
+              color: #c23030;
+            }
+
+            svg {
+              color: inherit;
+            }
+          }
+        }
+        &.row--total {
+          .account.td,
+          .debit.td,
+          .credit.td {
+            > span {
+              padding-top: 2px;
+            }
+          }
+          .debit.td,
+          .credit.td {
+            > span {
+              font-weight: 600;
+              color: #444;
+            }
+          }
+        }
+        .td {
+          &.note {
+            .bp3-form-group {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+    .th {
+      color: #444;
+      font-weight: 600;
+      border-bottom: 1px dotted #666;
+    }
+
+    .td {
+      border-bottom: 1px dotted #999;
+    }
+
+    .actions.td {
+      .bp3-button {
+        background: transparent;
+        margin: 0;
+      }
+    }
+  }
+
+  .table {
+    .tbody {
+      .tr .td.actions .bp3-button {
+        background-color: transparent;
+        color: #e66d6d;
+
+        svg {
+          color: inherit;
+        }
+      }
+    }
+  }
+
+  &__actions {
+    margin-top: 12px;
+
+    .bp3-button {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+
+    .button--clear-lines {
+      &.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+        background-color: #fcefef;
+      }
+    }
+  }
+
+  &.has-total-row {
+    .table .tbody-inner .tr:last-of-type {
+      .td {
+        border-top-width: 2px;
+        border-top-color: #e9e9ef;
+        border-top-style: solid;
+        min-height: 40px;
+
+        &:not(.index) {
+          background-color: #fcfcfd;
+        }
+
+        &.index span {
+          display: none;
+        }
+      }
+    }
+  }
+}

client/src/style/components/DataTable/DataTableEmptyStatus.scss

@@ -0,0 +1,35 @@
+.datatable-empty-status {
+  max-width: 550px;
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  margin-top: 200px;
+
+  &__title {
+    font-size: 20px;
+    color: #2c3a5d;
+    font-weight: 600;
+    margin-left: auto;
+    margin-bottom: 10px;
+    margin-right: auto;
+    margin-top: 0;
+    line-height: 1.4;
+  }
+  &__desc {
+    font-size: 16px;
+    color: #1f3255;
+    opacity: 0.8;
+    line-height: 1.6;
+  }
+  &__actions {
+    margin-top: 26px;
+
+    .bp3-button {
+      min-height: 36px;
+
+      & + .bp3-button {
+        margin-left: 10px;
+      }
+    }
+  }
+}

client/src/style/components/DataTable/Pagination.scss

@@ -95,8 +95,6 @@
         margin-right: 6px;
       }
     } 
-
-    
   }
 
   &__goto-control{

client/src/style/components/Dialog/Dialog.scss

@@ -1,3 +1,4 @@
+@import '../../Base.scss';
 
 // Dialog
 .#{$ns}-dialog{

client/src/style/components/Hint.scss

@@ -0,0 +1,16 @@
+.hint {
+  margin-left: 6px;
+  position: relative;
+  top: -1px;
+
+  .bp3-icon {
+    color: #a1b2c5;
+  }
+
+  .bp3-popover-target:hover .bp3-icon {
+    color: #90a1b5;
+  }
+  .bp3-icon {
+    vertical-align: middle;
+  }
+}

client/src/style/components/PageForm.scss

@@ -0,0 +1,49 @@
+// .page-form
+//   > .page-form__header
+//   > .page-form__content
+//   > .page-form__floating-actions
+.page-form {
+  $self: '.page-form';
+  padding-bottom: 20px;
+
+  &__floating-actions {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+    padding: 14px 18px;
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
+  }
+  &--strip {
+    #{$self}__header-fields {
+      width: 85%;
+    }
+    #{$self}__body,
+    #{$self}__footer {
+      max-width: 1200px;
+    }
+
+    #{$self}__header {
+      background-color: #fbfbfb;
+      padding: 30px 20px 0;
+      border-bottom: 1px solid #d2dce2;
+
+      .bp3-form-group.bp3-inline label.bp3-label {
+        font-weight: 500;
+      }
+    }
+
+    #{$self}__body {
+      padding-top: 15px;
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+
+    #{$self}__footer {
+      margin: 25px 0 0 0;
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+}

client/src/style/components/Toast.scss

@@ -0,0 +1,3 @@
+.bp3-toast {
+  box-shadow: none;
+}

client/src/style/components/Tooltip.scss

@@ -0,0 +1,11 @@
+
+
+.pt-tooltip {
+  .pt-popover-content {
+    max-width: 100px;
+  }
+}
+
+.#{$ns}-tooltip {
+  box-shadow: none;
+}

client/src/style/components/dragzone.scss

@@ -1,30 +1,33 @@
-
+.dropzone {
-.dropzone{
   flex: 1 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 18px;
   border-width: 1px;
-  border-color: #AFAFAF;
+  border-color: #afafaf;
   border-style: dashed;
   color: #999;
   outline: none;
-  transition: border .24s ease-in-out;  
+  transition: border 0.24s ease-in-out;
   font-size: 14px;
 
-  p{
+  p {
     margin: auto;
   }
 }
 
-.dropzone-thumbs{
+.dropzone-container {
+  max-width: 250px;
+  margin-left: auto;
+}
+.dropzone-thumbs {
   display: flex;
   flex-direction: row;
   margin-top: 15px;
 }
 
-.dropzone-thumb{
+.dropzone-thumb {
   position: relative;
   display: inline-block;
   border-radius: 2px;
@@ -34,14 +37,14 @@
   width: 100px;
   padding: 2px;
 
-  img{
+  img {
     display: block;
     height: 100%;
     width: auto;
     max-width: 100%;
   }
 
-  button{
+  button {
     height: 16px;
     width: 16px;
     color: #fff;
@@ -55,19 +58,19 @@
     left: -5px;
     visibility: hidden;
 
-    .bp3-icon{
+    .bp3-icon {
       position: relative;
       top: -3px;
       left: 0px;
     }
   }
 
-  &:hover button{
+  &:hover button {
     visibility: visible;
   }
 }
 
-.dropzone-hint{
+.dropzone-hint {
   font-size: 12px;
   margin-bottom: 6px;
   color: #777;

client/src/style/containers/Dashboard/Sidebar.scss

@@ -1,14 +1,4 @@
-$sidebar-background: #01194e;
+@import 'src/style/Base.scss';
-$sidebar-text-color: #fff;
-$sidebar-width: 100%;
-$sidebar-menu-item-color: rgba(255, 255, 255, 0.9);
-$sidebar-menu-item-color-active: rgb(255, 255, 255);
-$sidebar-popover-submenu-bg: rgb(1, 20, 62);
-$sidebar-menu-label-color: rgba(255, 255, 255, 0.5);
-$sidebar-submenu-item-color: rgba(255, 255, 255, 0.6);
-$sidebar-submenu-item-hover-color: rgba(255, 255, 255, 0.85);
-$sidebar-logo-opacity: 0.55;
-$sidebar-submenu-item-bg-color: #01287d;
 
 .sidebar {
   background: $sidebar-background;
@@ -19,11 +9,11 @@ $sidebar-submenu-item-bg-color: #01287d;
 
   .ScrollbarsCustom-Track {
     &.ScrollbarsCustom-TrackY,
-    &.ScrollbarsCustom-TrackX{
+    &.ScrollbarsCustom-TrackX {
       background: rgba(0, 0, 0, 0);
     }
   }
-  .ScrollbarsCustom-Thumb{
+  .ScrollbarsCustom-Thumb {
     &.ScrollbarsCustom-ThumbX,
     &.ScrollbarsCustom-ThumbY {
       background: rgba(0, 0, 0, 0);
@@ -31,27 +21,29 @@ $sidebar-submenu-item-bg-color: #01287d;
   }
 
   &:hover {
-    .ScrollbarsCustom-Thumb{
+    .ScrollbarsCustom-Thumb {
       &.ScrollbarsCustom-ThumbX,
       &.ScrollbarsCustom-ThumbY {
         background: rgba(255, 255, 255, 0.25);
       }
     }
   }
-  &__head{
+  &__head {
-    padding: 16px 12px;
+    padding: 18px;
 
-    &-logo{
+    &-logo {
       position: relative;
       top: 2px;
 
-      svg{
+      svg {
         opacity: $sidebar-logo-opacity;
       }
     }
+    .sidebar__head-logo{
+      transition: transform 0.05s ease-in-out;
     }
-
+  }
-  &__scroll-wrapper{
+  &__scroll-wrapper {
     height: 100%;
   }
 
@@ -78,7 +70,6 @@ $sidebar-submenu-item-bg-color: #01287d;
       &:active {
         background: #01143e;
       }
-
       > .#{$ns}-icon {
         color: #767b9b;
         margin-right: 16px;
@@ -89,22 +80,24 @@ $sidebar-submenu-item-bg-color: #01287d;
         margin-top: 3px;
         color: rgba(255, 255, 255, 0.25);
       }
-      &-labeler{
+      &-labeler {
         display: block;
         color: $sidebar-menu-label-color;
-        font-size: 12px;
+        font-size: 11px;
-        padding: 6px 18px;
+        padding: 8px 18px;
         margin-top: 4px;
+        text-transform: uppercase;
+        font-weight: 500;
+        letter-spacing: 1px;
       }
 
-      &:hover .bp3-button.menu-item__add-btn{
+      &:hover .bp3-button.menu-item__add-btn {
         display: inline-block;
       }
     }
 
     .#{$ns}-submenu {
       .#{$ns}-collapse {
-
         &-body {
           background-color: rgb(11, 34, 85);
           padding-bottom: 6px;
@@ -120,7 +113,7 @@ $sidebar-submenu-item-bg-color: #01287d;
             background: transparent;
             color: $sidebar-submenu-item-hover-color;
           }
-          &.bp3-active{
+          &.bp3-active {
             font-weight: 500;
           }
         }
@@ -137,26 +130,30 @@ $sidebar-submenu-item-bg-color: #01287d;
       color: $sidebar-menu-item-color;
     }
     .#{$ns}-menu-divider {
-      border-top-color: rgba(255, 255, 255, 0.15);
+      border-top-color: rgba(255, 255, 255, 0.1);
       color: #6b708c;
       margin: 4px 0;
     }
-    .#{$ns}-menu-spacer{
+    .#{$ns}-menu-spacer {
       margin: 4px 0;
       height: 1px;
     }
   }
 
-  &--mini-sidebar{
+  &--mini-sidebar {
     position: fixed;
     white-space: nowrap;
     width: 50px;
 
-    // Hide text of bigcapital logo.
+    .sidebar__head{
       .sidebar__head-logo{
-
+        transform: translate(-6px, 0);
-      .bp3-icon-bigcapital{
+      }
-        path{
+    }
+    // Hide text of bigcapital logo.
+    .sidebar__head-logo {
+      .bp3-icon-bigcapital {
+        path {
           transition: opacity 0.3s ease-in-out;
         }
         path:not(.path-1):not(.path-2) {
@@ -165,35 +162,36 @@ $sidebar-submenu-item-bg-color: #01287d;
       }
     }
 
-    .sidebar__menu{
+    .sidebar__menu {
       transition: opacity 0.3s ease-in-out;
       opacity: 0;
     }
 
-    .sidebar__scroll-wrapper{
+    .sidebar__scroll-wrapper {
       background: $sidebar-background;
       transition: min-width 0.15s ease-in-out;
       min-width: 50px;
 
-      &:hover{
+      &:hover {
         min-width: 190px;
 
-        .sidebar__head-logo{
+        .sidebar__head-logo {  
+          transform: translate(0px, 0);
           
-          .bp3-icon-bigcapital{
+          .bp3-icon-bigcapital {
             path:not(.path-1):not(.path-2) {
               opacity: 1;
             }
           }
         }
-        .sidebar__menu{
+        .sidebar__menu {
           opacity: 1;
         }
       }
     }
   }
 
-  .bp3-button.menu-item__add-btn{
+  .bp3-button.menu-item__add-btn {
     width: auto;
 
     padding: 2px;
@@ -204,28 +202,27 @@ $sidebar-submenu-item-bg-color: #01287d;
     display: none;
     vertical-align: top;
 
-    &:not([class*="bp3-intent-"]):not(.bp3-minimal):not(:disabled){
+    &:not([class*='bp3-intent-']):not(.bp3-minimal):not(:disabled) {
-
+      .bp3-icon {
-      .bp3-icon{
         color: rgba(255, 255, 255, 0.4);
       }
       &,
-      &:hover{
+      &:hover {
         min-height: auto;
         min-width: auto;
         outline: 0;
         background-color: transparent;
       }
 
-      &:hover{
+      &:hover {
         background-color: rgba(255, 255, 255, 0.12);
 
-        .bp3-icon{
+        .bp3-icon {
           color: rgba(255, 255, 255, 0.6);
         }
       }
     }
-    .bp3-icon{
+    .bp3-icon {
       margin: 0;
       display: block;
     }

client/src/style/containers/FinancialStatements/DrawerHeader.scss

@@ -0,0 +1,126 @@
+//
+// Financial sheet - Drawer header.
+// --------------------
+.financial-header-drawer {
+  padding: 25px 26px 25px;
+  position: absolute;
+  top: 101px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+
+  &.is-hidden {
+    visibility: hidden;
+  }
+  .row {
+    .col {
+      max-width: 400px;
+      min-width: 250px;
+    }
+  }
+
+  .bp3-drawer {
+    box-shadow: 0 0 0 transparent;
+    max-height: 550px;
+    height: 100%;
+    padding-bottom: 49px;
+
+    > form {
+      display: flex;
+      flex-direction: column;
+      flex: 1 0 0;
+      height: 100%;
+    }
+    .bp3-drawer-backdrop {
+      background-color: rgba(2, 9, 19, 0.65);
+    }
+  }
+
+  .bp3-form-group {
+    margin-bottom: 22px;
+
+    label.bp3-label {
+      margin-bottom: 6px;
+    }
+  }
+
+  .bp3-button.button--submit-filter {
+    min-height: 34px;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  .radio-group---accounting-basis {
+    .bp3-label {
+      margin-bottom: 12px;
+    }
+  }
+
+  .bp3-tabs {
+    height: 100%;
+
+    &.bp3-vertical > .bp3-tab-panel {
+      flex: 1 0 0;
+      border-top: 24px solid transparent;
+      padding-left: 20px;
+      padding-right: 20px;
+      padding-bottom: 24px;
+      overflow: auto;
+    }
+  }
+
+  .bp3-tabs.bp3-vertical {
+    flex: 1 0 0;
+
+    .bp3-tab-list {
+      width: 220px;
+      border-right: 1px solid #c3cdd5;
+      padding-top: 10px;
+
+      > *:not(:last-child) {
+        margin-right: 0;
+      }
+      .bp3-tab-indicator-wrapper {
+        width: 100%;
+
+        .bp3-tab-indicator {
+          border-left: 3px solid #0350f8;
+          background-color: #edf5ff;
+          border-radius: 0;
+        }
+      }
+
+      .bp3-tab {
+        color: #333;
+        line-height: 45px;
+        border-radius: 0;
+        padding-left: 14px;
+        padding-right: 14px;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .bp3-tab-panel {
+  }
+
+  &__footer {
+    background-color: #ecf0f3;
+    border-top: 1px solid #c3cdd5;
+    padding: 8px;
+    padding-left: 230px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .row {
+    margin-left: -0.85rem;
+    margin-right: -0.85rem;
+
+    .col {
+      padding-left: 0.85rem;
+      padding-right: 0.85rem;
+    }
+  }
+}

client/src/style/containers/FinancialStatements/FinancialSheet.scss

@@ -0,0 +1,113 @@
+// Financial sheet.
+// -----------------------
+.financial-sheet {
+  border: 2px solid #f0f0f0;
+  border-radius: 10px;
+  min-width: 640px;
+  width: auto;
+  padding: 30px 18px;
+  max-width: 100%;
+  margin: 35px auto;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+
+  &__title {
+    margin: 0;
+    font-weight: 400;
+    font-size: 20px;
+    color: #464646;
+    text-align: center;
+  }
+  &__sheet-type {
+    text-align: center;
+    margin: 0;
+    font-size: 16px;
+    font-weight: 400;
+    color: #666;
+    margin-top: 6px;
+  }
+  &__date {
+    text-align: center;
+    color: #666;
+    margin-top: 6px;
+  }
+  &__table {
+    margin-top: 24px;
+
+    .table {
+      .tbody,
+      .thead {
+        .tr .td,
+        .tr .th {
+          background: #fff;
+        }
+      }
+
+      .tr.no-results {
+        .td {
+          flex-direction: column;
+          padding: 20px;
+          color: #666;
+          align-items: center;
+        }
+      }
+    }
+  }
+  &__inner {
+    &.is-loading {
+      display: none;
+    }
+  }
+  &__basis {
+    color: #888;
+    text-align: center;
+    margin-top: auto;
+    padding-top: 18px;
+    font-size: 13px;
+  }
+  .dashboard__loading-indicator {
+    margin: auto;
+    padding: 0;
+  }
+  &--expended {
+    width: auto;
+  }
+
+  &--minimal {
+    border: 0;
+    padding: 0;
+    margin-top: 20px;
+
+    .financial-sheet {
+      &__title {
+        font-size: 18px;
+        color: #333;
+      }
+      &__title + .financial-sheet__date {
+        margin-top: 8px;
+      }
+      &__table {
+        margin-top: 20px;
+      }
+    }
+  }
+  &.is-full-width {
+    width: 100%;
+    margin-top: 25px;
+  }
+}
+
+.financial-statement {
+  &__header {
+  }
+
+  &__body {
+    padding-left: 15px;
+    padding-right: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

client/src/style/functions.scss

@@ -22,7 +22,6 @@ $escaped-characters: (
   @if $index {
     @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
   }
-
   @return $string;
 }
 

client/src/style/objects/Bigcapital.scss

@@ -0,0 +1,19 @@
+[data-icon='bigcapital'] {
+  path {
+    fill: #004dd0;
+  }
+  .path-1,
+  .path-13 {
+    fill: #4f5861;
+  }
+}
+
+.bigcapital--alt {
+  svg {
+    path,
+    .path-13,
+    .path-1 {
+      fill: #fff;
+    }
+  }
+}

client/src/style/objects/buttons.scss

@@ -1,57 +1,51 @@
-
+.form-group--select-list {
-.form-group--select-list{
+  .bp3-popover-target {
-
+    .bp3-icon {
-  .bp3-popover-target{
-
-    .bp3-icon{
       position: absolute;
       top: 0;
       left: 0;
       margin: 7px;
 
-      + .bp3-button-text{
+      + .bp3-button-text {
         padding-left: 20px;
       }
     }
 
-    .bp3-button{
+    .bp3-button {
       padding-left: 10px;
       color: #333;
     }
   }
 }
 
-.form-group--select-list{
+.form-group--select-list {
-
+  .bp3-popover-open {
-  .bp3-popover-open{
+    .bp3-button {
-    .bp3-button{
-      
       border-color: #80bdff;
     }
   }
 }
 
-.bp3-button{
+.bp3-button {
   min-width: 32px;
   min-height: 32px;
   padding-left: 12px;
   padding-right: 12px;
 }
 
-
+.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
-.bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal){
   color: #555555;
   box-shadow: 0 0 0 transparent;
 
-  &.bp3-small{
+  &.bp3-small {
     font-size: 13px;
     min-height: 29px;
   }
-  .form-group--select-list &{
+  .form-group--select-list & {
     border-radius: 2px;
 
     &,
-    &:hover{
+    &:hover {
       box-shadow: 0 0 0 transparent;
       border: 1px solid #ced4da;
 
@@ -60,32 +54,28 @@
       }
     }
   }
-  .form-group--select-list.bp3-intent-danger &{
+  .form-group--select-list.bp3-intent-danger & {
-    
+    & {
-    &{
       border-color: #db3737;
     }
   }
 }
 
-.bp3-button-group.bp3-minimal .bp3-button{
+.bp3-button-group.bp3-minimal .bp3-button {
   background-color: transparent;
 }
 
-.bp3-button{
+.bp3-button {
-
   &.bp3-intent-primary,
   &.bp3-intent-success,
   &.bp3-intent-danger,
-  &.bp3-intent-warning{
+  &.bp3-intent-warning {
-
     &,
-    &:hover{
+    &:hover {
       box-shadow: 0 0 0 transparent;
     }
   }
 }
 
-.button--secondary{
+.button--secondary {
-  
 }