From c1659d191f98aeb6695ebbc949ecf2c67f811ca7 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Wed, 27 May 2020 20:21:05 +0200
Subject: [PATCH] feat: Ability to hide/show financial statement header.

---
 client/src/components/AccountsMultiSelect.js  |  99 ++++----
 client/src/components/App.js                  |   2 +
 client/src/components/DialogsContainer.js     |   4 +-
 client/src/components/FinancialStatement.js   |   5 +
 client/src/components/index.js                |   2 +
 .../BalanceSheet/BalanceSheet.js              |  13 +-
 .../BalanceSheet/BalanceSheetActionsBar.js    |  77 ++++--
 .../BalanceSheet/BalanceSheetHeader.js        |   3 +-
 .../BalanceSheet/withBalanceSheetActions.js   |   1 +
 .../BalanceSheet/withBalanceSheetDetail.js    |   1 +
 .../FinancialStatementHeader.js               |  13 +-
 .../GeneralLedger/GeneralLedger.js            |   2 +-
 .../GeneralLedger/GeneralLedgerActionsBar.js  |  46 +++-
 .../GeneralLedger/GeneralLedgerHeader.js      |  15 +-
 .../GeneralLedger/withGeneralLedger.js        |   1 +
 .../GeneralLedger/withGeneralLedgerActions.js |   1 +
 .../FinancialStatements/Journal/Journal.js    |   2 +-
 .../Journal/JournalActionsBar.js              |  74 ++++--
 .../Journal/JournalHeader.js                  |  19 +-
 .../Journal/withJournal.js                    |   1 +
 .../Journal/withJournalActions.js             |   1 +
 .../ProfitLossSheet/ProfitLossActionsBar.js   |  76 ++++--
 .../ProfitLossSheet/ProfitLossSheetHeader.js  |  58 +++--
 .../ProfitLossSheet/withProfitLoss.js         |   1 +
 .../ProfitLossSheet/withProfitLossActions.js  |   1 +
 .../TrialBalanceActionsBar.js                 |  75 ++++--
 .../TrialBalanceSheet/TrialBalanceSheet.js    |   1 +
 .../TrialBalanceSheetHeader.js                |  16 +-
 .../TrialBalanceSheet/withTrialBalance.js     |   1 +
 .../withTrialBalanceActions.js                |   1 +
 client/src/lang/en/index.js                   |   2 +
 client/src/static/json/icons.js               | 219 ++++++++++++------
 .../financialStatements.reducer.js            |  18 ++
 .../src/style/pages/financial-statements.scss |  12 +
 server/bin/bigcapital.js                      |  65 +-----
 server/bin/license.js                         |  57 +++++
 server/bin/utils.js                           |  67 ++++++
 .../seeds/seed_subscriptions_plans.js         |  22 ++
 .../http/middleware/SubscriptionObserver.js   |   8 +
 .../services/Subscription/UserSubscription.js |  22 ++
 ...091642_create_subscriptions_plans_table.js |  28 +++
 ...091649_create_subscriptions_usage_table.js |  18 ++
 ...812_create_subscriptions_licenses_table.js |  14 ++
 .../src/system/models/SubscriptionLicense.js  |  18 ++
 server/src/system/models/SubscriptionPlan.js  |  10 +
 server/src/system/models/SubscriptionUsage.js |  10 +
 server/src/system/models/SystemUser.js        |  13 +-
 47 files changed, 914 insertions(+), 301 deletions(-)
 create mode 100644 client/src/components/FinancialStatement.js
 create mode 100644 server/bin/license.js
 create mode 100644 server/bin/utils.js
 create mode 100644 server/src/database/seeds/seed_subscriptions_plans.js
 create mode 100644 server/src/http/middleware/SubscriptionObserver.js
 create mode 100644 server/src/services/Subscription/UserSubscription.js
 create mode 100644 server/src/system/migrations/20200527091642_create_subscriptions_plans_table.js
 create mode 100644 server/src/system/migrations/20200527091649_create_subscriptions_usage_table.js
 create mode 100644 server/src/system/migrations/20200527101812_create_subscriptions_licenses_table.js
 create mode 100644 server/src/system/models/SubscriptionLicense.js
 create mode 100644 server/src/system/models/SubscriptionPlan.js
 create mode 100644 server/src/system/models/SubscriptionUsage.js

diff --git a/client/src/components/AccountsMultiSelect.js b/client/src/components/AccountsMultiSelect.js
index b32833f56..d9e24c7e5 100644
--- a/client/src/components/AccountsMultiSelect.js
+++ b/client/src/components/AccountsMultiSelect.js
@@ -1,67 +1,76 @@
-import React, {useMemo, useCallback, useState} from 'react';
-import {omit} from 'lodash';
-import {
-  MenuItem,
-  Button
-} from '@blueprintjs/core';
+import React, { useMemo, useCallback, useState } from 'react';
+import { omit } from 'lodash';
+import { MenuItem, Button } from '@blueprintjs/core';
 import MultiSelect from 'components/MultiSelect';
 import { FormattedMessage as T } from 'react-intl';
 
-export default function AccountsMultiSelect({
-  accounts,
-  onAccountSelected,
-}) {
-  const [selectedAccounts, setSelectedAccounts] = useState({}); 
+export default function AccountsMultiSelect({ accounts, onAccountSelected }) {
+  const [selectedAccounts, setSelectedAccounts] = useState({});
 
-  const isAccountSelect = useCallback((accountId) => {
-    return 'undefined' !== typeof selectedAccounts[accountId];
-  }, [selectedAccounts]);
+  const isAccountSelect = useCallback(
+    (accountId) => {
+      return 'undefined' !== typeof selectedAccounts[accountId];
+    },
+    [selectedAccounts],
+  );
 
   // Account item of select accounts field.
-  const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
-    return (
-      <MenuItem
-        icon={isAccountSelect(item.id) ? "tick" : "blank"}  
-        text={item.name}
-        label={item.code}
-        key={item.id}
-        onClick={handleClick} />
-    );
-  }, [isAccountSelect]);
+  const accountItem = useCallback(
+    (item, { handleClick, modifiers, query }) => {
+      return (
+        <MenuItem
+          icon={isAccountSelect(item.id) ? 'tick' : 'blank'}
+          text={item.name}
+          label={item.code}
+          key={item.id}
+          onClick={handleClick}
+        />
+      );
+    },
+    [isAccountSelect],
+  );
 
-  const countSelectedAccounts = useMemo(() => 
-    Object.values(selectedAccounts).length,
-    [selectedAccounts]);
+  const countSelectedAccounts = useMemo(
+    () => Object.values(selectedAccounts).length,
+    [selectedAccounts],
+  );
 
-  const onAccountSelect = useCallback((account) => {
-    const selected = {
-      ...(!isAccountSelect(account.id)) ? {
-        ...selectedAccounts,
-        [account.id]: true,
-      } : {
-        ...omit(selectedAccounts, [account.id])
-      }
-    };
-    setSelectedAccounts({ ...selected });
-    onAccountSelected && onAccountSelected(selected);
-  }, [setSelectedAccounts, selectedAccounts, isAccountSelect, onAccountSelected]);
+  const onAccountSelect = useCallback(
+    (account) => {
+      const selected = {
+        ...(!isAccountSelect(account.id)
+          ? {
+              ...selectedAccounts,
+              [account.id]: true,
+            }
+          : {
+              ...omit(selectedAccounts, [account.id]),
+            }),
+      };
+      setSelectedAccounts({ ...selected });
+      onAccountSelected && onAccountSelected(selected);
+    },
+    [setSelectedAccounts, selectedAccounts, isAccountSelect, onAccountSelected],
+  );
 
   return (
     <MultiSelect
       items={accounts}
-      noResults={<MenuItem disabled={true} text='No results.' />}
+      noResults={<MenuItem disabled={true} text="No results." />}
       itemRenderer={accountItem}
       popoverProps={{ minimal: true }}
       filterable={true}
       onItemSelect={onAccountSelect}
     >
       <Button
-        rightIcon='caret-down'
-        text={countSelectedAccounts === 0 ?
-         <T id={'all_accounts'}/>:
-          `(${countSelectedAccounts}) Selected accounts`
+        text={
+          countSelectedAccounts === 0 ? (
+            <T id={'all_accounts'} />
+          ) : (
+            `(${countSelectedAccounts}) Selected accounts`
+          )
         }
       />
     </MultiSelect>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/App.js b/client/src/components/App.js
index e68fd59db..7d6496314 100644
--- a/client/src/components/App.js
+++ b/client/src/components/App.js
@@ -9,6 +9,7 @@ import PrivateRoute from 'components/PrivateRoute';
 import Authentication from 'components/Authentication';
 import Dashboard from 'components/Dashboard/Dashboard';
 import GlobalErrors from 'containers/GlobalErrors/GlobalErrors';
+import AuthenticationDialogs from 'containers/Authentication/AuthenticationDialogs';
 
 import messages from 'lang/en';
 import 'style/App.scss';
@@ -29,6 +30,7 @@ function App({ locale }) {
             <Switch>
               <Route path={'/auth'}>
                 <Authentication />
+                <AuthenticationDialogs />
               </Route>
 
               <Route path={'/'}>
diff --git a/client/src/components/DialogsContainer.js b/client/src/components/DialogsContainer.js
index 217ab07dc..884a735d9 100644
--- a/client/src/components/DialogsContainer.js
+++ b/client/src/components/DialogsContainer.js
@@ -8,13 +8,13 @@ import ExchangeRateDialog from 'containers/Dialogs/ExchangeRateDialog';
 
 export default function DialogsContainer() {
   return (
-    <React.Fragment>
+    <>
       <ExchangeRateDialog />
       <InviteUserDialog />
       <CurrencyDialog />
       <ItemCategoryDialog />
       <AccountFormDialog />
       <UserFormDialog />
-    </React.Fragment>
+    </>
   );
 }
diff --git a/client/src/components/FinancialStatement.js b/client/src/components/FinancialStatement.js
new file mode 100644
index 000000000..fa6c50092
--- /dev/null
+++ b/client/src/components/FinancialStatement.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function FinancialStatements({ children }) {
+  return <div class="financial-statement">{children}</div>;
+}
diff --git a/client/src/components/index.js b/client/src/components/index.js
index 612238cc0..0a1bce130 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -4,12 +4,14 @@ import Icon from './Icon';
 // import Choose from './Utils/Choose';
 // import For from './Utils/For';
 import ListSelect from './ListSelect';
+import FinancialStatement from './FinancialStatement';
 
 export {
   If,
   Money,
   Icon,
   ListSelect,
+  FinancialStatement,
   // Choose,
   // For,
 };
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
index 815a9553e..d99f033e6 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
@@ -3,6 +3,7 @@ import React, { useEffect, useCallback, useState } from 'react';
 import { compose } from 'utils';
 import { useQuery } from 'react-query';
 import moment from 'moment';
+import { useIntl } from 'react-intl';
 
 import BalanceSheetHeader from './BalanceSheetHeader';
 import BalanceSheetTable from './BalanceSheetTable';
@@ -10,13 +11,14 @@ import BalanceSheetTable from './BalanceSheetTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import BalanceSheetActionsBar from './BalanceSheetActionsBar';
+import { FinancialStatement } from 'components';
 
 import withDashboard from 'containers/Dashboard/withDashboard';
 import withSettings from 'containers/Settings/withSettings';
 import withBalanceSheetActions from './withBalanceSheetActions';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
 
-import { useIntl } from 'react-intl';
+
 
 function BalanceSheet({
   // #withDashboard
@@ -27,6 +29,7 @@ function BalanceSheet({
 
   // #withBalanceSheetDetail
   balanceSheetLoading,
+  balanceSheetFilter,
 
   // #withPreferences
   organizationSettings,
@@ -75,10 +78,11 @@ function BalanceSheet({
       <BalanceSheetActionsBar />
 
       <DashboardPageContent>
-        <div class="financial-statement">
+        <FinancialStatement>
           <BalanceSheetHeader
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
+            show={balanceSheetFilter}
           />
 
           <div class="financial-statement__body">
@@ -89,7 +93,7 @@ function BalanceSheet({
               onFetchData={handleFetchData}
             />
           </div>
-        </div>
+        </FinancialStatement>
       </DashboardPageContent>
     </DashboardInsider>
   );
@@ -98,8 +102,9 @@ function BalanceSheet({
 export default compose(
   withDashboard,
   withBalanceSheetActions,
-  withBalanceSheetDetail(({ balanceSheetLoading }) => ({
+  withBalanceSheetDetail(({ balanceSheetLoading, balanceSheetFilter }) => ({
     balanceSheetLoading,
+    balanceSheetFilter,
   })),
   withSettings,
 )(BalanceSheet);
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
index 07c5fbd94..99e2b4c59 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   NavbarGroup,
   Button,
@@ -9,54 +9,89 @@ import {
   Position,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
-
-import Icon from 'components/Icon';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
-import FilterDropdown from 'components/FilterDropdown';
 import classNames from 'classnames';
 
+import Icon from 'components/Icon';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import FilterDropdown from 'components/FilterDropdown';
+import { If } from 'components';
+
+import { compose } from 'utils';
+import withBalanceSheetDetail from './withBalanceSheetDetail';
+import withBalanceSheetActions from './withBalanceSheetActions';
 
 
-export default function JournalActionsBar() {
+function BalanceSheetActionsBar({
+  balanceSheetFilter,
+  toggleBalanceSheetFilter,
+}) {
   const filterDropdown = FilterDropdown({
     fields: [],
-    onFilterChange: (filterConditions) => {
-          
-    },
+    onFilterChange: (filterConditions) => {},
   });
 
+  const handleFilterToggleClick = () => {
+    toggleBalanceSheetFilter();
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
-          icon={<Icon icon='cog' />}
-          text={<T id={'customize_report'}/>}
+          icon={<Icon icon="cog" />}
+          text={<T id={'customize_report'} />}
         />
         <NavbarDivider />
 
+        <If condition={balanceSheetFilter}>
+          <Button
+            className={Classes.MINIMAL}
+            text={<T id={'hide_filter'} />}
+            onClick={handleFilterToggleClick}
+            icon={<Icon icon="arrow-to-top" />}
+          />
+        </If>
+
+        <If condition={!balanceSheetFilter}>
+          <Button
+            className={Classes.MINIMAL}
+            text={<T id={'show_filter'} />}
+            onClick={handleFilterToggleClick}
+            icon={<Icon icon="arrow-to-bottom" />}
+          />
+        </If>
+
+        <NavbarDivider />
+
         <Popover
           content={filterDropdown}
           interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}>
-
+          position={Position.BOTTOM_LEFT}
+        >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'}/>}
-            icon={ <Icon icon="filter" /> } />
+            text={<T id={'filter'} />}
+            icon={<Icon icon="filter" />}
+          />
         </Popover>
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
-          text={<T id={'print'}/>}
+          icon={<Icon icon="file-export" />}
+          text={<T id={'print'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
-          text={<T id={'export'}/>}
+          icon={<Icon icon="file-export" />}
+          text={<T id={'export'} />}
         />
       </NavbarGroup>
     </DashboardActionsBar>
-  )
-}
\ No newline at end of file
+  );
+}
+
+export default compose(
+  withBalanceSheetDetail(({ balanceSheetFilter }) => ({ balanceSheetFilter })),
+  withBalanceSheetActions,
+)(BalanceSheetActionsBar);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
index 324e816da..6c0586d12 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
@@ -21,6 +21,7 @@ import RadiosAccountingBasis from '../RadiosAccountingBasis';
 export default function BalanceSheetHeader({
   onSubmitFilter,
   pageFilter,
+  show
 }) {
   const { formatMessage } = useIntl();
 
@@ -70,7 +71,7 @@ export default function BalanceSheetHeader({
   }, [formik]);
 
   return (
-    <FinancialStatementHeader>
+    <FinancialStatementHeader show={show}>
       <FinancialStatementDateRange formik={formik} />
 
       <Row>
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js
index 0e0f83ecc..465487ceb 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js
@@ -5,6 +5,7 @@ import {
 
 const mapDispatchToProps = (dispatch) => ({
   fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),  
+  toggleBalanceSheetFilter: () => dispatch({ type: 'BALANCE_SHEET_FILTER_TOGGLE' }),
 });
 
 export default connect(null, mapDispatchToProps);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js
index 8482f09b4..630981e5e 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js
@@ -16,6 +16,7 @@ export default (mapState) => {
       balanceSheetColumns: getFinancialSheetColumns(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
       balanceSheetQuery: getFinancialSheetQuery(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
       balanceSheetLoading: state.financialStatements.balanceSheet.loading,
+      balanceSheetFilter: state.financialStatements.balanceSheet.filter,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
diff --git a/client/src/containers/FinancialStatements/FinancialStatementHeader.js b/client/src/containers/FinancialStatements/FinancialStatementHeader.js
index 97646b594..8bbb15ffb 100644
--- a/client/src/containers/FinancialStatements/FinancialStatementHeader.js
+++ b/client/src/containers/FinancialStatements/FinancialStatementHeader.js
@@ -1,9 +1,14 @@
 import React from 'react';
+import classNames from 'classnames';
 
-export default function FinancialStatementHeader({ children }) {
+export default function FinancialStatementHeader({ show, children }) {
   return (
-    <div class="financial-statement__header">
-      { children }
+    <div
+      className={classNames('financial-statement__header', {
+        'is-hidden': !show,
+      })}
+    >
+      {children}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
index a772c3d3d..9e7e89f4c 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
@@ -80,7 +80,7 @@ function GeneralLedger({
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit} />
 
-          <div class="financial-statement__table">
+          <div class="financial-statement__body">
             <GeneralLedgerTable
               companyName={organizationSettings.name}
               generalLedgerQuery={filter}
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
index 5d20cd585..f7077c06a 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
@@ -11,13 +11,25 @@ import {
 import { FormattedMessage as T } from 'react-intl';
 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
+import { If } from 'components';
 import classNames from 'classnames';
 import FilterDropdown from 'components/FilterDropdown';
 
+import withGeneralLedger from './withGeneralLedger';
+import withGeneralLedgerActions from './withGeneralLedgerActions';
+
+import { compose } from 'utils';
+
 /**
  * General ledger actions bar.
  */
-export default function GeneralLedgerActionsBar() {
+function GeneralLedgerActionsBar({
+  // #withGeneralLedger
+  generalLedgerSheetFilter,
+
+  // #withGeneralLedgerActions
+  toggleGeneralLedgerSheetFilter,
+}) {
   const filterDropdown = FilterDropdown({
     fields: [],
     onFilterChange: (filterConditions) => {
@@ -25,6 +37,10 @@ export default function GeneralLedgerActionsBar() {
     },
   });
 
+  const handleFilterClick = () => {
+    toggleGeneralLedgerSheetFilter();
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -33,6 +49,27 @@ export default function GeneralLedgerActionsBar() {
           icon={<Icon icon='cog' />}
           text={<T id={'customize_report'}/>}
         />
+
+        <NavbarDivider />
+
+        <If condition={generalLedgerSheetFilter}>
+          <Button
+            className={Classes.MINIMAL}
+            text={<T id={'hide_filter'} />}
+            icon={<Icon icon="arrow-to-top" />}
+            onClick={handleFilterClick}
+          />
+        </If>
+
+        <If condition={!generalLedgerSheetFilter}>
+          <Button
+            className={Classes.MINIMAL}
+            text={<T id={'show_filter'} />}
+            icon={<Icon icon="arrow-to-bottom" />}
+            onClick={handleFilterClick}
+          />
+        </If>
+
         <NavbarDivider />
 
         <Popover
@@ -59,4 +96,9 @@ export default function GeneralLedgerActionsBar() {
       </NavbarGroup>
     </DashboardActionsBar>
   );
-}
\ No newline at end of file
+}
+
+export default compose(
+  withGeneralLedger(({ generalLedgerSheetFilter }) => ({ generalLedgerSheetFilter })),
+  withGeneralLedgerActions,
+)(GeneralLedgerActionsBar);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
index 47f2ee0fa..b6ca1cdc1 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
@@ -18,13 +18,19 @@ import FinancialStatementDateRange from 'containers/FinancialStatements/Financia
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
 import {compose} from 'utils';
 
+import withGeneralLedger from './withGeneralLedger';
+
 
 function GeneralLedgerHeader({
   onSubmitFilter,
   pageFilter,
-  accounts,
-}) {
 
+  // #withAccounts
+  accounts,
+
+  // #withGeneralLedger
+  generalLedgerSheetFilter,
+}) {
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -56,7 +62,7 @@ function GeneralLedgerHeader({
   }, [formik]);
   
   return (
-    <FinancialStatementHeader>
+    <FinancialStatementHeader show={generalLedgerSheetFilter}>
       <FinancialStatementDateRange formik={formik} />
 
       <Row>
@@ -91,5 +97,6 @@ function GeneralLedgerHeader({
 }
 
 export default compose(
-  AccountsConnect
+  AccountsConnect,
+  withGeneralLedger(({ generalLedgerSheetFilter }) => ({ generalLedgerSheetFilter })),
 )(GeneralLedgerHeader);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js
index 77c1c924f..0844c9e1a 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js
@@ -24,6 +24,7 @@ export default (mapState) => {
         generalLedgerIndex,
       ),
       generalLedgerSheetLoading: state.financialStatements.generalLedger.loading,
+      generalLedgerSheetFilter: state.financialStatements.generalLedger.filter,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js
index e6fa03e62..89fac1c1b 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js
@@ -5,6 +5,7 @@ import {
 
 const mapDispatchToProps = (dispatch) => ({
   fetchGeneralLedger: (query = {}) => dispatch(fetchGeneralLedger({ query })),
+  toggleGeneralLedgerSheetFilter: () => dispatch({ type: 'GENERAL_LEDGER_FILTER_TOGGLE' }),
 });
 
 export default connect(null, mapDispatchToProps);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/Journal/Journal.js b/client/src/containers/FinancialStatements/Journal/Journal.js
index 83efaffe0..2cb9578b3 100644
--- a/client/src/containers/FinancialStatements/Journal/Journal.js
+++ b/client/src/containers/FinancialStatements/Journal/Journal.js
@@ -79,7 +79,7 @@ function Journal({
             onSubmitFilter={handleFilterSubmit}
           />
 
-          <div class="financial-statement__table">
+          <div class="financial-statement__body">
             <JournalTable
               companyName={organizationSettings.name}
               journalQuery={filter}
diff --git a/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js b/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
index d15994149..c66283bf3 100644
--- a/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
@@ -10,50 +10,90 @@ import {
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import Icon from 'components/Icon';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import FilterDropdown from 'components/FilterDropdown';
 import classNames from 'classnames';
 
-export default function JournalActionsBar() {
+import { If } from 'components';
+
+import withJournalActions from './withJournalActions';
+import withJournal from './withJournal';
+
+import { compose } from 'utils';
+
+function JournalActionsBar({
+  // #withJournal
+  journalSheetFilter,
+
+  // #withJournalActions
+  toggleJournalSheetFilter,
+}) {
   const filterDropdown = FilterDropdown({
     fields: [],
-    onFilterChange: (filterConditions) => {
-          
-    },
+    onFilterChange: (filterConditions) => {},
   });
 
+  const handleFilterToggleClick = () => {
+    toggleJournalSheetFilter();
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
-          icon={<Icon icon='cog' />}
-          text={<T id={'customize_report'}/>}
+          icon={<Icon icon="cog" />}
+          text={<T id={'customize_report'} />}
         />
         <NavbarDivider />
 
+        <If condition={journalSheetFilter}>
+          <Button
+            className={Classes.MINIMAL}
+            text={<T id={'hide_filter'} />}
+            icon={<Icon icon="arrow-to-top" />}
+            onClick={handleFilterToggleClick}
+          />
+        </If>
+
+        <If condition={!journalSheetFilter}>
+          <Button
+            className={Classes.MINIMAL}
+            text={<T id={'show_filter'} />}
+            icon={<Icon icon="arrow-to-bottom" />}
+            onClick={handleFilterToggleClick}
+          />
+        </If>
+        <NavbarDivider />
+
         <Popover
           content={filterDropdown}
           interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}>
-
+          position={Position.BOTTOM_LEFT}
+        >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'}/>}
-            icon={ <Icon icon="filter" /> } />
+            text={<T id={'filter'} />}
+            icon={<Icon icon="filter" />}
+          />
         </Popover>
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
-          text={<T id={'print'}/>}
+          icon={<Icon icon="file-export" />}
+          text={<T id={'print'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
-          text={<T id={'export'}/>}
+          icon={<Icon icon="file-export" />}
+          text={<T id={'export'} />}
         />
       </NavbarGroup>
     </DashboardActionsBar>
-  )
-}
\ No newline at end of file
+  );
+}
+
+export default compose(
+  withJournal(({ journalSheetFilter }) => ({ journalSheetFilter })),
+  withJournalActions,
+)(JournalActionsBar);
diff --git a/client/src/containers/FinancialStatements/Journal/JournalHeader.js b/client/src/containers/FinancialStatements/Journal/JournalHeader.js
index 9a027b777..c6558e077 100644
--- a/client/src/containers/FinancialStatements/Journal/JournalHeader.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalHeader.js
@@ -11,12 +11,19 @@ import * as Yup from 'yup';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 
+import withJournal from './withJournal';
+import { compose } from 'utils';
 
-export default function JournalHeader({
+/**
+ * Journal sheet header. 
+ */
+function JournalHeader({
   pageFilter,
   onSubmitFilter,
+
+  // #withJournal
+  journalSheetFilter,
 }) {
- 
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -39,7 +46,7 @@ export default function JournalHeader({
   }, [formik]);
 
   return (
-    <FinancialStatementHeader>
+    <FinancialStatementHeader show={journalSheetFilter}>
       <FinancialStatementDateRange formik={formik} />
 
       <Row>
@@ -55,4 +62,8 @@ export default function JournalHeader({
 
     </FinancialStatementHeader>
   );
-}
\ No newline at end of file
+}
+
+export default compose(
+  withJournal(({ journalSheetFilter }) => ({ journalSheetFilter })),
+)(JournalHeader);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/Journal/withJournal.js b/client/src/containers/FinancialStatements/Journal/withJournal.js
index a28a8e494..d0c3ef4ea 100644
--- a/client/src/containers/FinancialStatements/Journal/withJournal.js
+++ b/client/src/containers/FinancialStatements/Journal/withJournal.js
@@ -24,6 +24,7 @@ export default (mapState) => {
         journalIndex,
       ),
       journalSheetLoading: state.financialStatements.journal.loading,
+      journalSheetFilter: state.financialStatements.journal.filter,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
diff --git a/client/src/containers/FinancialStatements/Journal/withJournalActions.js b/client/src/containers/FinancialStatements/Journal/withJournalActions.js
index 25ff58670..d80f6da3c 100644
--- a/client/src/containers/FinancialStatements/Journal/withJournalActions.js
+++ b/client/src/containers/FinancialStatements/Journal/withJournalActions.js
@@ -5,6 +5,7 @@ import {
 
 export const mapDispatchToProps = (dispatch) => ({
   requestFetchJournalSheet: (query) => dispatch(fetchJournalSheet({ query })),
+  toggleJournalSheetFilter: () => dispatch({ type: 'JOURNAL_FILTER_TOGGLE' }),
 });
 
 export default connect(null, mapDispatchToProps);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
index 965195797..86c0fd82c 100644
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
@@ -1,45 +1,75 @@
 import React from 'react';
-import {
-  NavbarGroup,
-  Button,
-  Classes,
-  NavbarDivider,
-} from '@blueprintjs/core';
+import { NavbarGroup, Button, Classes, NavbarDivider } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
-import Icon from 'components/Icon';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
 import classNames from 'classnames';
-// import FilterDropdown from 'components/FilterDropdown';
 
-export default function ProfitLossActionsBar() {
-  // const filterDropdown = FilterDropdown({
-  //   fields: [],
-  //   onFilterChange: (filterConditions) => {
-      
-  //   },
-  // });
+import Icon from 'components/Icon';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import { If } from 'components';
+import withProfitLossActions from './withProfitLossActions';
+import withProfitLoss from './withProfitLoss';
+
+import { compose } from 'utils';
+
+
+function ProfitLossActionsBar({
+  // #withProfitLoss
+  profitLossSheetFilter,
+
+  // #withProfitLossActions
+  toggleProfitLossSheetFilter,
+}) {
+  const handleFilterClick = () => {
+    toggleProfitLossSheetFilter();
+  };
 
   return (
     <DashboardActionsBar>
       <NavbarGroup>
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
-          icon={<Icon icon='cog' />}
-          text={<T id={'customize_report'}/>}
+          icon={<Icon icon="cog" />}
+          text={<T id={'customize_report'} />}
         />
         <NavbarDivider />
 
+        <If condition={profitLossSheetFilter}>
+          <Button
+            className={Classes.MINIMAL}
+            text={<T id={'hide_filter'} />}
+            icon={<Icon icon="arrow-to-top" />}
+            onClick={handleFilterClick}
+          />
+        </If>
+
+        <If condition={!profitLossSheetFilter}>
+          <Button
+            className={Classes.MINIMAL}
+            text={<T id={'show_filter'} />}
+            icon={<Icon icon="arrow-to-bottom" />}
+            onClick={handleFilterClick}
+          />
+        </If>
+
+        <NavbarDivider />
+
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
-          text={<T id={'print'}/>}
+          icon={<Icon icon="file-export" />}
+          text={<T id={'print'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
-          text={<T id={'export'}/>}
+          icon={<Icon icon="file-export" />}
+          text={<T id={'export'} />}
         />
       </NavbarGroup>
     </DashboardActionsBar>
   );
-}
\ No newline at end of file
+}
+
+export default compose(
+  withProfitLoss(({ profitLossSheetFilter }) => ({ profitLossSheetFilter })),
+  withProfitLossActions,
+)(ProfitLossActionsBar);
diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
index ecc26e04d..e38f9dade 100644
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
@@ -1,8 +1,6 @@
 import React, { useCallback } from 'react';
 import { Row, Col } from 'react-grid-system';
-import {
-  Button,
-} from '@blueprintjs/core';
+import { Button } from '@blueprintjs/core';
 import moment from 'moment';
 import { useFormik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
@@ -12,10 +10,17 @@ import FinancialStatementHeader from 'containers/FinancialStatements/FinancialSt
 import SelectsListColumnsBy from '../SelectDisplayColumnsBy';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
 
+import withProfitLoss from './withProfitLoss';
 
-export default function JournalHeader({
+import { compose } from 'utils';
+
+
+function ProfitLossHeader({
   pageFilter,
   onSubmitFilter,
+
+  // #withProfitLoss
+  profitLossSheetFilter,
 }) {
   const { formatMessage } = useIntl();
   const formik = useFormik({
@@ -23,11 +28,16 @@ export default function JournalHeader({
     initialValues: {
       ...pageFilter,
       from_date: moment(pageFilter.from_date).toDate(),
-      to_date: moment(pageFilter.to_date).toDate()
+      to_date: moment(pageFilter.to_date).toDate(),
     },
     validationSchema: Yup.object().shape({
-      from_date: Yup.date().required().label(formatMessage({id:'from_date'})),
-      to_date: Yup.date().min(Yup.ref('from_date')).required().label(formatMessage({id:'to_date'})),
+      from_date: Yup.date()
+        .required()
+        .label(formatMessage({ id: 'from_date' })),
+      to_date: Yup.date()
+        .min(Yup.ref('from_date'))
+        .required()
+        .label(formatMessage({ id: 'to_date' })),
     }),
     onSubmit: (values, actions) => {
       onSubmitFilter(values);
@@ -36,21 +46,27 @@ export default function JournalHeader({
   });
 
   // Handle item select of `display columns by` field.
-  const handleItemSelectDisplayColumns = useCallback((item) => {
-    formik.setFieldValue('display_columns_type', item.type);
-    formik.setFieldValue('display_columns_by', item.by);
-  }, [formik]);
+  const handleItemSelectDisplayColumns = useCallback(
+    (item) => {
+      formik.setFieldValue('display_columns_type', item.type);
+      formik.setFieldValue('display_columns_by', item.by);
+    },
+    [formik],
+  );
 
   const handleSubmitClick = useCallback(() => {
     formik.submitForm();
   }, [formik]);
 
-  const handleAccountingBasisChange = useCallback((value) => {
-    formik.setFieldValue('basis', value);
-  }, [formik]);
+  const handleAccountingBasisChange = useCallback(
+    (value) => {
+      formik.setFieldValue('basis', value);
+    },
+    [formik],
+  );
 
   return (
-    <FinancialStatementHeader>
+    <FinancialStatementHeader show={profitLossSheetFilter}>
       <FinancialStatementDateRange formik={formik} />
 
       <Row>
@@ -61,18 +77,24 @@ export default function JournalHeader({
         <Col sm={3}>
           <RadiosAccountingBasis
             selectedValue={formik.values.basis}
-            onChange={handleAccountingBasisChange} />
+            onChange={handleAccountingBasisChange}
+          />
         </Col>
 
         <Col sm={3}>
           <Button
             type="submit"
             onClick={handleSubmitClick}
-            className={'button--submit-filter mt2'}>
+            className={'button--submit-filter mt2'}
+          >
             <T id={'run_report'} />
           </Button>
         </Col>
       </Row>
     </FinancialStatementHeader>
   );
-}
\ No newline at end of file
+}
+
+export default compose(
+  withProfitLoss(({ profitLossSheetFilter }) => ({ profitLossSheetFilter })),
+)(ProfitLossHeader);
diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js b/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js
index 8fe8aff53..9aee1d7f6 100644
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js
@@ -19,6 +19,7 @@ export default (mapState) => {
       profitLossTableRows: getFinancialSheetTableRows(state.financialStatements.profitLoss.sheets, profitLossIndex),
 
       profitLossSheetLoading: state.financialStatements.profitLoss.loading,
+      profitLossSheetFilter: state.financialStatements.profitLoss.filter,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js b/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js
index 962eb971d..ec08bf6c0 100644
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js
@@ -5,6 +5,7 @@ import {
 
 export const mapDispatchToProps = (dispatch) => ({
   fetchProfitLossSheet: (query = {}) => dispatch(fetchProfitLossSheet({ query })),
+  toggleProfitLossSheetFilter: () => dispatch({ type: 'PROFIT_LOSS_FILTER_TOGGLE' }),
 });
 
 export default connect(null, mapDispatchToProps);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
index 6e88ac1ed..7e546fa0d 100644
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
@@ -1,46 +1,77 @@
 import React from 'react';
-import {
-  NavbarGroup,
-  Button,
-  Classes,
-  NavbarDivider,
-} from '@blueprintjs/core';
+import { NavbarGroup, Button, Classes, NavbarDivider } from '@blueprintjs/core';
 import Icon from 'components/Icon';
 import { FormattedMessage as T } from 'react-intl';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import classNames from 'classnames';
 // import FilterDropdown from 'components/FilterDropdown';
 
-export default function GeneralLedgerActionsBar() {
-  
-  // const filterDropdown = FilterDropdown({
-  //   fields: [],
-  //   onFilterChange: (filterConditions) => {
-      
-  //   },
-  // });
+import { If } from 'components';
+
+import withTrialBalance from './withTrialBalance';
+import withTrialBalanceActions from './withTrialBalanceActions';
+import { compose } from 'utils';
+
+
+function TrialBalanceActionsBar({
+
+  // #withTrialBalance
+  trialBalanceSheetFilter,
+
+  // #withTrialBalanceActions
+  toggleTrialBalanceFilter,
+}) {
+
+  const handleFilterToggleClick = () => {
+    toggleTrialBalanceFilter();
+  };
 
   return (
     <DashboardActionsBar>
       <NavbarGroup>
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
-          icon={<Icon icon='cog' />}
-          text={<T id={'customize_report'}/>}
+          icon={<Icon icon="cog" />}
+          text={<T id={'customize_report'} />}
         />
         <NavbarDivider />
 
+        <If condition={trialBalanceSheetFilter}>
+          <Button
+            className={Classes.MINIMAL}
+            text={<T id={'hide_filter'} />}
+            icon={<Icon icon="arrow-to-top" />}
+            onClick={handleFilterToggleClick}
+          />
+        </If>
+
+        <If condition={!trialBalanceSheetFilter}>
+          <Button
+            className={Classes.MINIMAL}
+            text={<T id={'show_filter'} />}
+            icon={<Icon icon="arrow-to-bottom" />}
+            onClick={handleFilterToggleClick}
+          />
+        </If>
+
+        <NavbarDivider />
+
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
-          text={<T id={'print'}/>}
+          icon={<Icon icon="file-export" />}
+          text={<T id={'print'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
-          text={<T id={'export'}/>}
+          icon={<Icon icon="file-export" />}
+          text={<T id={'export'} />}
         />
       </NavbarGroup>
     </DashboardActionsBar>
   );
-}
\ No newline at end of file
+}
+
+export default compose(
+  withTrialBalance(({ trialBalanceSheetFilter }) => ({ trialBalanceSheetFilter })),
+  withTrialBalanceActions
+)(TrialBalanceActionsBar);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
index 72d7fede4..21aa8cc39 100644
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
@@ -16,6 +16,7 @@ import withTrialBalanceActions from './withTrialBalanceActions';
 import withTrialBalance from './withTrialBalance';
 import withSettings from 'containers/Settings/withSettings';
 
+
 function TrialBalanceSheet({
   // #withDashboard
   changePageTitle,
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
index 1961fa9d6..3f80964fc 100644
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
@@ -8,11 +8,17 @@ import { Button } from "@blueprintjs/core";
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import withTrialBalance from './withTrialBalance';
+
+import { compose } from 'utils';
 
 
-export default function TrialBalanceSheetHeader({
+function TrialBalanceSheetHeader({
   pageFilter,
   onSubmitFilter,
+
+  // #withTrialBalance
+  trialBalanceSheetFilter,
 }) {
   const { formatMessage } = useIntl();
   const formik = useFormik({
@@ -37,7 +43,7 @@ export default function TrialBalanceSheetHeader({
   }, [formik]);
 
   return (
-    <FinancialStatementHeader>
+    <FinancialStatementHeader show={trialBalanceSheetFilter}>
       <FinancialStatementDateRange formik={formik} />
 
       <Row>
@@ -53,4 +59,8 @@ export default function TrialBalanceSheetHeader({
       </Row>
     </FinancialStatementHeader>
   );
-}
\ No newline at end of file
+}
+
+export default compose(
+  withTrialBalance(({ trialBalanceSheetFilter }) => ({ trialBalanceSheetFilter })),
+)(TrialBalanceSheetHeader);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js
index df3727a28..7efb1e9c6 100644
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js
@@ -18,6 +18,7 @@ export default (mapState) => {
         trialBalanceIndex
       ),
       trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
+      trialBalanceSheetFilter: state.financialStatements.trialBalance.filter,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalanceActions.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalanceActions.js
index 1dd07cf6f..c5d5b6b15 100644
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalanceActions.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalanceActions.js
@@ -5,6 +5,7 @@ import {
 
 export const mapDispatchToProps = (dispatch) => ({
   fetchTrialBalanceSheet: (query = {}) => dispatch(fetchTrialBalanceSheet({ query })),
+  toggleTrialBalanceFilter: () => dispatch({ type: 'TRIAL_BALANCE_FILTER_TOGGLE' }),
 });
 
 export default connect(null, mapDispatchToProps);
\ No newline at end of file
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index 50f8aaf9f..ec3e9ca7a 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -373,4 +373,6 @@ export default {
   welcome_organization_account_has_been_created: '👋 Welcome, You organization account has been created, Sign in now!',
   the_phone_number_already_used_in_another_account: 'he phone number is already used in another account',
   the_email_already_used_in_another_account: 'The email is already used in another account',
+  hide_filter: 'Hide filter',
+  show_filter: 'Show filter',
 };
diff --git a/client/src/static/json/icons.js b/client/src/static/json/icons.js
index acd60b1a1..e21c2109c 100644
--- a/client/src/static/json/icons.js
+++ b/client/src/static/json/icons.js
@@ -1,113 +1,167 @@
 export default {
   'balance-scale': {
-    path: ['M256 336h-.02c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0C-2.06 328.75.02 320.33.02 336H0c0 44.18 57.31 80 128 80s128-35.82 128-80zM128 176l72 144H56l72-144zm511.98 160c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0-87.12 174.26-85.04 165.84-85.04 181.51H384c0 44.18 57.31 80 128 80s128-35.82 128-80h-.02zM440 320l72-144 72 144H440zm88 128H352V153.25c23.51-10.29 41.16-31.48 46.39-57.25H528c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H383.64C369.04 12.68 346.09 0 320 0s-49.04 12.68-63.64 32H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h129.61c5.23 25.76 22.87 46.96 46.39 57.25V448H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z'],
+    path: [
+      'M256 336h-.02c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0C-2.06 328.75.02 320.33.02 336H0c0 44.18 57.31 80 128 80s128-35.82 128-80zM128 176l72 144H56l72-144zm511.98 160c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0-87.12 174.26-85.04 165.84-85.04 181.51H384c0 44.18 57.31 80 128 80s128-35.82 128-80h-.02zM440 320l72-144 72 144H440zm88 128H352V153.25c23.51-10.29 41.16-31.48 46.39-57.25H528c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H383.64C369.04 12.68 346.09 0 320 0s-49.04 12.68-63.64 32H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h129.61c5.23 25.76 22.87 46.96 46.39 57.25V448H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z',
+    ],
     viewBox: '0 0 640 512',
   },
-  "homepage": {
-    path: ['M4,7.5H7.5V4H4V7.5ZM9.25,18h3.5V14.5H9.25V18ZM4,18H7.5V14.5H4V18Zm0-5.25H7.5V9.25H4v3.5Zm5.25,0h3.5V9.25H9.25v3.5ZM14.5,4V7.5H18V4ZM9.25,7.5h3.5V4H9.25V7.5Zm5.25,5.25H18V9.25H14.5v3.5Zm0,5.25H18V14.5H14.5V18Z'],
-    viewBox: '0 0 20 20'
+  homepage: {
+    path: [
+      'M4,7.5H7.5V4H4V7.5ZM9.25,18h3.5V14.5H9.25V18ZM4,18H7.5V14.5H4V18Zm0-5.25H7.5V9.25H4v3.5Zm5.25,0h3.5V9.25H9.25v3.5ZM14.5,4V7.5H18V4ZM9.25,7.5h3.5V4H9.25V7.5Zm5.25,5.25H18V9.25H14.5v3.5Zm0,5.25H18V14.5H14.5V18Z',
+    ],
+    viewBox: '0 0 20 20',
   },
-  "university": {
-    path: ['M472 440h-8v-56c0-13.255-10.745-24-24-24h-16V208h-48v152h-48V208h-48v152h-48V208h-48v152h-48V208H88v152H72c-13.255 0-24 10.745-24 24v56h-8c-13.255 0-24 10.745-24 24v16a8 8 0 0 0 8 8h464a8 8 0 0 0 8-8v-16c0-13.255-10.745-24-24-24zm-56 0H96v-32h320v32zm72.267-322.942L271.179 26.463a48.004 48.004 0 0 0-30.358 0L23.733 117.058A11.999 11.999 0 0 0 16 128.274V156c0 6.627 5.373 12 12 12h20v12c0 6.627 5.373 12 12 12h392c6.627 0 12-5.373 12-12v-12h20c6.627 0 12-5.373 12-12v-27.726c0-4.982-3.077-9.445-7.733-11.216zM64 144l192-72 192 72H64z'],
-    viewBox: '0 0 512 512'
+  university: {
+    path: [
+      'M472 440h-8v-56c0-13.255-10.745-24-24-24h-16V208h-48v152h-48V208h-48v152h-48V208h-48v152h-48V208H88v152H72c-13.255 0-24 10.745-24 24v56h-8c-13.255 0-24 10.745-24 24v16a8 8 0 0 0 8 8h464a8 8 0 0 0 8-8v-16c0-13.255-10.745-24-24-24zm-56 0H96v-32h320v32zm72.267-322.942L271.179 26.463a48.004 48.004 0 0 0-30.358 0L23.733 117.058A11.999 11.999 0 0 0 16 128.274V156c0 6.627 5.373 12 12 12h20v12c0 6.627 5.373 12 12 12h392c6.627 0 12-5.373 12-12v-12h20c6.627 0 12-5.373 12-12v-27.726c0-4.982-3.077-9.445-7.733-11.216zM64 144l192-72 192 72H64z',
+    ],
+    viewBox: '0 0 512 512',
   },
-  "shopping-cart": {
-    path: ['M551.991 64H144.28l-8.726-44.608C133.35 8.128 123.478 0 112 0H12C5.373 0 0 5.373 0 12v24c0 6.627 5.373 12 12 12h80.24l69.594 355.701C150.796 415.201 144 430.802 144 448c0 35.346 28.654 64 64 64s64-28.654 64-64a63.681 63.681 0 0 0-8.583-32h145.167a63.681 63.681 0 0 0-8.583 32c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-18.136-7.556-34.496-19.676-46.142l1.035-4.757c3.254-14.96-8.142-29.101-23.452-29.101H203.76l-9.39-48h312.405c11.29 0 21.054-7.869 23.452-18.902l45.216-208C578.695 78.139 567.299 64 551.991 64zM208 472c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm256 0c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm23.438-200H184.98l-31.31-160h368.548l-34.78 160z'],
+  'shopping-cart': {
+    path: [
+      'M551.991 64H144.28l-8.726-44.608C133.35 8.128 123.478 0 112 0H12C5.373 0 0 5.373 0 12v24c0 6.627 5.373 12 12 12h80.24l69.594 355.701C150.796 415.201 144 430.802 144 448c0 35.346 28.654 64 64 64s64-28.654 64-64a63.681 63.681 0 0 0-8.583-32h145.167a63.681 63.681 0 0 0-8.583 32c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-18.136-7.556-34.496-19.676-46.142l1.035-4.757c3.254-14.96-8.142-29.101-23.452-29.101H203.76l-9.39-48h312.405c11.29 0 21.054-7.869 23.452-18.902l45.216-208C578.695 78.139 567.299 64 551.991 64zM208 472c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm256 0c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm23.438-200H184.98l-31.31-160h368.548l-34.78 160z',
+    ],
     viewBox: '0 0 576 512',
   },
-  "analytics": {
-    path: ['M510.62 92.63C516.03 94.74 521.85 96 528 96c26.51 0 48-21.49 48-48S554.51 0 528 0s-48 21.49-48 48c0 2.43.37 4.76.71 7.09l-95.34 76.27c-5.4-2.11-11.23-3.37-17.38-3.37s-11.97 1.26-17.38 3.37L255.29 55.1c.35-2.33.71-4.67.71-7.1 0-26.51-21.49-48-48-48s-48 21.49-48 48c0 4.27.74 8.34 1.78 12.28l-101.5 101.5C56.34 160.74 52.27 160 48 160c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-4.27-.74-8.34-1.78-12.28l101.5-101.5C199.66 95.26 203.73 96 208 96c6.15 0 11.97-1.26 17.38-3.37l95.34 76.27c-.35 2.33-.71 4.67-.71 7.1 0 26.51 21.49 48 48 48s48-21.49 48-48c0-2.43-.37-4.76-.71-7.09l95.32-76.28zM400 320h-64c-8.84 0-16 7.16-16 16v160c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V336c0-8.84-7.16-16-16-16zm160-128h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm-320 0h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zM80 352H16c-8.84 0-16 7.16-16 16v128c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V368c0-8.84-7.16-16-16-16z'],
+  analytics: {
+    path: [
+      'M510.62 92.63C516.03 94.74 521.85 96 528 96c26.51 0 48-21.49 48-48S554.51 0 528 0s-48 21.49-48 48c0 2.43.37 4.76.71 7.09l-95.34 76.27c-5.4-2.11-11.23-3.37-17.38-3.37s-11.97 1.26-17.38 3.37L255.29 55.1c.35-2.33.71-4.67.71-7.1 0-26.51-21.49-48-48-48s-48 21.49-48 48c0 4.27.74 8.34 1.78 12.28l-101.5 101.5C56.34 160.74 52.27 160 48 160c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-4.27-.74-8.34-1.78-12.28l101.5-101.5C199.66 95.26 203.73 96 208 96c6.15 0 11.97-1.26 17.38-3.37l95.34 76.27c-.35 2.33-.71 4.67-.71 7.1 0 26.51 21.49 48 48 48s48-21.49 48-48c0-2.43-.37-4.76-.71-7.09l95.32-76.28zM400 320h-64c-8.84 0-16 7.16-16 16v160c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V336c0-8.84-7.16-16-16-16zm160-128h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm-320 0h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zM80 352H16c-8.84 0-16 7.16-16 16v128c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V368c0-8.84-7.16-16-16-16z',
+    ],
     viewBox: '0 0 576 512',
   },
-  "plus": {
-    path: ['M368 224H224V80c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v144H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h144v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V288h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z'],
-    viewBox: '0 0 384 512'
+  plus: {
+    path: [
+      'M368 224H224V80c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v144H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h144v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V288h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z',
+    ],
+    viewBox: '0 0 384 512',
   },
-  "file-import": {
-    path: ['M497.83 97.98L413.94 14.1c-9-9-21.2-14.1-33.89-14.1H175.99C149.5.1 128 21.6 128 48.09v215.98H12c-6.63 0-12 5.37-12 12v24c0 6.63 5.37 12 12 12h276v48.88c0 10.71 12.97 16.05 20.52 8.45l71.77-72.31c4.95-4.99 4.95-13.04 0-18.03l-71.77-72.31c-7.55-7.6-20.52-2.26-20.52 8.45v48.88H175.99V48.09h159.97v103.98c0 13.3 10.7 23.99 24 23.99H464v287.95H175.99V360.07H128v103.94c0 26.49 21.5 47.99 47.99 47.99h287.94c26.5 0 48.07-21.5 48.07-47.99V131.97c0-12.69-5.17-24.99-14.17-33.99zm-113.88 30.09V51.99l76.09 76.08h-76.09z'],
-    viewBox: '0 0 512 512'
+  'file-import': {
+    path: [
+      'M497.83 97.98L413.94 14.1c-9-9-21.2-14.1-33.89-14.1H175.99C149.5.1 128 21.6 128 48.09v215.98H12c-6.63 0-12 5.37-12 12v24c0 6.63 5.37 12 12 12h276v48.88c0 10.71 12.97 16.05 20.52 8.45l71.77-72.31c4.95-4.99 4.95-13.04 0-18.03l-71.77-72.31c-7.55-7.6-20.52-2.26-20.52 8.45v48.88H175.99V48.09h159.97v103.98c0 13.3 10.7 23.99 24 23.99H464v287.95H175.99V360.07H128v103.94c0 26.49 21.5 47.99 47.99 47.99h287.94c26.5 0 48.07-21.5 48.07-47.99V131.97c0-12.69-5.17-24.99-14.17-33.99zm-113.88 30.09V51.99l76.09 76.08h-76.09z',
+    ],
+    viewBox: '0 0 512 512',
   },
-  "file-export": {
-    path: ['M572.29 279.06l-71.77-72.31c-7.55-7.6-20.52-2.26-20.52 8.45v48.88h-96v-132.1c0-12.7-5.17-25-14.17-33.99L285.94 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h287.94c26.5 0 48.07-21.5 48.07-47.99V360.07h-48v103.94H47.99V48.09h159.97v103.98c0 13.3 10.7 23.99 24 23.99H336v88.01H172c-6.63 0-12 5.37-12 12v24c0 6.63 5.37 12 12 12h308v48.88c0 10.71 12.97 16.05 20.52 8.45l71.77-72.31c4.95-4.99 4.95-13.04 0-18.03zM255.95 128.07V51.99l76.09 76.08h-76.09z'],
+  'file-export': {
+    path: [
+      'M572.29 279.06l-71.77-72.31c-7.55-7.6-20.52-2.26-20.52 8.45v48.88h-96v-132.1c0-12.7-5.17-25-14.17-33.99L285.94 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h287.94c26.5 0 48.07-21.5 48.07-47.99V360.07h-48v103.94H47.99V48.09h159.97v103.98c0 13.3 10.7 23.99 24 23.99H336v88.01H172c-6.63 0-12 5.37-12 12v24c0 6.63 5.37 12 12 12h308v48.88c0 10.71 12.97 16.05 20.52 8.45l71.77-72.31c4.95-4.99 4.95-13.04 0-18.03zM255.95 128.07V51.99l76.09 76.08h-76.09z',
+    ],
     viewBox: '0 0 576 512',
   },
-  "table": {
-    path: ['M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM232 432H54a6 6 0 0 1-6-6V296h184v136zm0-184H48V112h184v136zm226 184H280V296h184v130a6 6 0 0 1-6 6zm6-184H280V112h184v136z'],
+  table: {
+    path: [
+      'M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM232 432H54a6 6 0 0 1-6-6V296h184v136zm0-184H48V112h184v136zm226 184H280V296h184v130a6 6 0 0 1-6 6zm6-184H280V112h184v136z',
+    ],
     viewBox: '0 0 512 512',
   },
-  "arrow-up": {
-    path: ['M6.101 261.899L25.9 281.698c4.686 4.686 12.284 4.686 16.971 0L198 126.568V468c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12V126.568l155.13 155.13c4.686 4.686 12.284 4.686 16.971 0l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L232.485 35.515c-4.686-4.686-12.284-4.686-16.971 0L6.101 244.929c-4.687 4.686-4.687 12.284 0 16.97z'],
-    viewBox: '0 0 448 512'
+  'arrow-up': {
+    path: [
+      'M6.101 261.899L25.9 281.698c4.686 4.686 12.284 4.686 16.971 0L198 126.568V468c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12V126.568l155.13 155.13c4.686 4.686 12.284 4.686 16.971 0l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L232.485 35.515c-4.686-4.686-12.284-4.686-16.971 0L6.101 244.929c-4.687 4.686-4.687 12.284 0 16.97z',
+    ],
+    viewBox: '0 0 448 512',
   },
-  "arrow-down": {
-    path: ['M441.9 250.1l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L250 385.4V44c0-6.6-5.4-12-12-12h-28c-6.6 0-12 5.4-12 12v341.4L42.9 230.3c-4.7-4.7-12.3-4.7-17 0L6.1 250.1c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'],
-    viewBox: '0 0 448 512' 
+  'arrow-down': {
+    path: [
+      'M441.9 250.1l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L250 385.4V44c0-6.6-5.4-12-12-12h-28c-6.6 0-12 5.4-12 12v341.4L42.9 230.3c-4.7-4.7-12.3-4.7-17 0L6.1 250.1c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z',
+    ],
+    viewBox: '0 0 448 512',
   },
-  "ellipsis-h": {
-    path: ['M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z'],
+  'ellipsis-h': {
+    path: [
+      'M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z',
+    ],
     viewBox: '0 0 512 512',
   },
-  "mines": {
-    path: ['M140 284c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h232c6.6 0 12 5.4 12 12v32c0 6.6-5.4 12-12 12H140zm364-28c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-48 0c0-110.5-89.5-200-200-200S56 145.5 56 256s89.5 200 200 200 200-89.5 200-200z'],
+  mines: {
+    path: [
+      'M140 284c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h232c6.6 0 12 5.4 12 12v32c0 6.6-5.4 12-12 12H140zm364-28c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-48 0c0-110.5-89.5-200-200-200S56 145.5 56 256s89.5 200 200 200 200-89.5 200-200z',
+    ],
     viewBox: '0 0 512 512',
   },
-  "arrow-circle-left": {
-    path: ['M504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zM256 472c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm-12.5-92.5l-115.1-115c-4.7-4.7-4.7-12.3 0-17l115.1-115c4.7-4.7 12.3-4.7 17 0l6.9 6.9c4.7 4.7 4.7 12.5-.2 17.1L181.7 239H372c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H181.7l85.6 82.5c4.8 4.7 4.9 12.4.2 17.1l-6.9 6.9c-4.8 4.7-12.4 4.7-17.1 0z'],
+  'arrow-circle-left': {
+    path: [
+      'M504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zM256 472c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm-12.5-92.5l-115.1-115c-4.7-4.7-4.7-12.3 0-17l115.1-115c4.7-4.7 12.3-4.7 17 0l6.9 6.9c4.7 4.7 4.7 12.5-.2 17.1L181.7 239H372c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H181.7l85.6 82.5c4.8 4.7 4.9 12.4.2 17.1l-6.9 6.9c-4.8 4.7-12.4 4.7-17.1 0z',
+    ],
     viewBox: '0 0 512 512',
   },
-  "arrow-circle-right": {
-    path: ['M8 256c0 137 111 248 248 248s248-111 248-248S393 8 256 8 8 119 8 256zM256 40c118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216zm12.5 92.5l115.1 115c4.7 4.7 4.7 12.3 0 17l-115.1 115c-4.7 4.7-12.3 4.7-17 0l-6.9-6.9c-4.7-4.7-4.7-12.5.2-17.1l85.6-82.5H140c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h190.3l-85.6-82.5c-4.8-4.7-4.9-12.4-.2-17.1l6.9-6.9c4.8-4.7 12.4-4.7 17.1 0z'],
+  'arrow-circle-right': {
+    path: [
+      'M8 256c0 137 111 248 248 248s248-111 248-248S393 8 256 8 8 119 8 256zM256 40c118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216zm12.5 92.5l115.1 115c4.7 4.7 4.7 12.3 0 17l-115.1 115c-4.7 4.7-12.3 4.7-17 0l-6.9-6.9c-4.7-4.7-4.7-12.5.2-17.1l85.6-82.5H140c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h190.3l-85.6-82.5c-4.8-4.7-4.9-12.4-.2-17.1l6.9-6.9c4.8-4.7 12.4-4.7 17.1 0z',
+    ],
     viewBox: '0 0 512 512',
   },
-  "times": {
-    path: ['M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z'],
+  times: {
+    path: [
+      'M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z',
+    ],
     viewBox: '0 0 320 512',
   },
-  "filter": {
-    path: ['M91,32.1H8c-2.5,0-4.6-2.1-4.6-4.6s2.1-4.6,4.6-4.6H91c2.5,0,4.6,2.1,4.6,4.6S93.5,32.1,91,32.1z M21.9,45.9  h55.3c2.5,0,4.6,2.1,4.6,4.6c0,2.5-2.1,4.6-4.6,4.6H21.9c-2.5,0-4.6-2.1-4.6-4.6C17.2,48,19.3,45.9,21.9,45.9z M35.7,68.9h27.6  c2.5,0,4.6,2.1,4.6,4.6s-2.1,4.6-4.6,4.6H35.7c-2.5,0-4.6-2.1-4.6-4.6S33.1,68.9,35.7,68.9z'],
+  filter: {
+    path: [
+      'M91,32.1H8c-2.5,0-4.6-2.1-4.6-4.6s2.1-4.6,4.6-4.6H91c2.5,0,4.6,2.1,4.6,4.6S93.5,32.1,91,32.1z M21.9,45.9  h55.3c2.5,0,4.6,2.1,4.6,4.6c0,2.5-2.1,4.6-4.6,4.6H21.9c-2.5,0-4.6-2.1-4.6-4.6C17.2,48,19.3,45.9,21.9,45.9z M35.7,68.9h27.6  c2.5,0,4.6,2.1,4.6,4.6s-2.1,4.6-4.6,4.6H35.7c-2.5,0-4.6-2.1-4.6-4.6S33.1,68.9,35.7,68.9z',
+    ],
     viewBox: '0 0 91 91',
   },
-  "receipt": {
-    path: ['M344 288H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zM400.8 5.7L357.3 37 318.7 9.2c-16.8-12.1-39.2-12.1-56.1 0L224 37 185.4 9.2a47.888 47.888 0 0 0-56.1 0L90.7 37 47.2 5.7C27.4-8.5 0 5.6 0 29.9v452.3c0 23.8 27.1 38.6 47.2 24.2L90.7 475l38.6 27.8c16.8 12.1 39.2 12.1 56.1 0L224 475l38.6 27.8c16.8 12.1 39.3 12.1 56.1 0l38.6-27.8 43.5 31.3c19.8 14.2 47.2.1 47.2-24.1V29.9C448 6 420.9-8.7 400.8 5.7zm-.8 440.8l-42.7-30.7-66.7 48-66.7-48-66.7 48-66.7-48L48 446.5v-381l42.7 30.7 66.7-48 66.7 48 66.7-48 66.7 48L400 65.5v381zM344 176H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zz'],
+  receipt: {
+    path: [
+      'M344 288H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zM400.8 5.7L357.3 37 318.7 9.2c-16.8-12.1-39.2-12.1-56.1 0L224 37 185.4 9.2a47.888 47.888 0 0 0-56.1 0L90.7 37 47.2 5.7C27.4-8.5 0 5.6 0 29.9v452.3c0 23.8 27.1 38.6 47.2 24.2L90.7 475l38.6 27.8c16.8 12.1 39.2 12.1 56.1 0L224 475l38.6 27.8c16.8 12.1 39.3 12.1 56.1 0l38.6-27.8 43.5 31.3c19.8 14.2 47.2.1 47.2-24.1V29.9C448 6 420.9-8.7 400.8 5.7zm-.8 440.8l-42.7-30.7-66.7 48-66.7-48-66.7 48-66.7-48L48 446.5v-381l42.7 30.7 66.7-48 66.7 48 66.7-48 66.7 48L400 65.5v381zM344 176H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zz',
+    ],
     viewBox: '0 0 448 512',
   },
-  "trash": {
-    path: ['M432 80h-82.4l-34-56.7A48 48 0 0 0 274.4 0H173.6a48 48 0 0 0-41.2 23.3L98.4 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16l21.2 339a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM173.6 48h100.8l19.2 32H154.4zm173.3 416H101.11l-21-336h287.8z'],
+  trash: {
+    path: [
+      'M432 80h-82.4l-34-56.7A48 48 0 0 0 274.4 0H173.6a48 48 0 0 0-41.2 23.3L98.4 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16l21.2 339a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM173.6 48h100.8l19.2 32H154.4zm173.3 416H101.11l-21-336h287.8z',
+    ],
     viewBox: '0 0 448 512',
   },
-  "archive": {
-    path: ['M464 32H48C21.5 32 0 53.5 0 80v80c0 8.8 7.2 16 16 16h16v272c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V176h16c8.8 0 16-7.2 16-16V80c0-26.5-21.5-48-48-48zm-32 400H80V176h352v256zm32-304H48V80h416v48zM204 272h104c6.6 0 12-5.4 12-12v-24c0-6.6-5.4-12-12-12H204c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12'],
+  archive: {
+    path: [
+      'M464 32H48C21.5 32 0 53.5 0 80v80c0 8.8 7.2 16 16 16h16v272c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V176h16c8.8 0 16-7.2 16-16V80c0-26.5-21.5-48-48-48zm-32 400H80V176h352v256zm32-304H48V80h416v48zM204 272h104c6.6 0 12-5.4 12-12v-24c0-6.6-5.4-12-12-12H204c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12',
+    ],
     viewBox: '0 0 512 512',
   },
-  "pen": {
-    path: ['M493.26 56.26l-37.51-37.51C443.25 6.25 426.87 0 410.49 0s-32.76 6.25-45.25 18.74l-74.49 74.49L256 127.98 12.85 371.12.15 485.34C-1.45 499.72 9.88 512 23.95 512c.89 0 1.79-.05 2.69-.15l114.14-12.61L384.02 256l34.74-34.74 74.49-74.49c25-25 25-65.52.01-90.51zM118.75 453.39l-67.58 7.46 7.53-67.69 231.24-231.24 31.02-31.02 60.14 60.14-31.02 31.02-231.33 231.33zm340.56-340.57l-44.28 44.28-60.13-60.14 44.28-44.28c4.08-4.08 8.84-4.69 11.31-4.69s7.24.61 11.31 4.69l37.51 37.51c6.24 6.25 6.24 16.4 0 22.63z'],
+  pen: {
+    path: [
+      'M493.26 56.26l-37.51-37.51C443.25 6.25 426.87 0 410.49 0s-32.76 6.25-45.25 18.74l-74.49 74.49L256 127.98 12.85 371.12.15 485.34C-1.45 499.72 9.88 512 23.95 512c.89 0 1.79-.05 2.69-.15l114.14-12.61L384.02 256l34.74-34.74 74.49-74.49c25-25 25-65.52.01-90.51zM118.75 453.39l-67.58 7.46 7.53-67.69 231.24-231.24 31.02-31.02 60.14 60.14-31.02 31.02-231.33 231.33zm340.56-340.57l-44.28 44.28-60.13-60.14 44.28-44.28c4.08-4.08 8.84-4.69 11.31-4.69s7.24.61 11.31 4.69l37.51 37.51c6.24 6.25 6.24 16.4 0 22.63z',
+    ],
     viewBox: '0 0 512 512',
   },
-  "sort-up": {
-    path: ['M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z'],
-    viewBox: '0 0 320 512'
+  'sort-up': {
+    path: [
+      'M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z',
+    ],
+    viewBox: '0 0 320 512',
   },
-  "sort-down": {
-    path: ['M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z'],
-    viewBox: '0 0 320 512'
+  'sort-down': {
+    path: [
+      'M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z',
+    ],
+    viewBox: '0 0 320 512',
   },
-  "info-circle": {
-    path: ['M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'],
-    viewBox: '0 0 512 512'
-  },
-  "cog": {
-    path: ['M452.515 237l31.843-18.382c9.426-5.441 13.996-16.542 11.177-27.054-11.404-42.531-33.842-80.547-64.058-110.797-7.68-7.688-19.575-9.246-28.985-3.811l-31.785 18.358a196.276 196.276 0 0 0-32.899-19.02V39.541a24.016 24.016 0 0 0-17.842-23.206c-41.761-11.107-86.117-11.121-127.93-.001-10.519 2.798-17.844 12.321-17.844 23.206v36.753a196.276 196.276 0 0 0-32.899 19.02l-31.785-18.358c-9.41-5.435-21.305-3.877-28.985 3.811-30.216 30.25-52.654 68.265-64.058 110.797-2.819 10.512 1.751 21.613 11.177 27.054L59.485 237a197.715 197.715 0 0 0 0 37.999l-31.843 18.382c-9.426 5.441-13.996 16.542-11.177 27.054 11.404 42.531 33.842 80.547 64.058 110.797 7.68 7.688 19.575 9.246 28.985 3.811l31.785-18.358a196.202 196.202 0 0 0 32.899 19.019v36.753a24.016 24.016 0 0 0 17.842 23.206c41.761 11.107 86.117 11.122 127.93.001 10.519-2.798 17.844-12.321 17.844-23.206v-36.753a196.34 196.34 0 0 0 32.899-19.019l31.785 18.358c9.41 5.435 21.305 3.877 28.985-3.811 30.216-30.25 52.654-68.266 64.058-110.797 2.819-10.512-1.751-21.613-11.177-27.054L452.515 275c1.22-12.65 1.22-25.35 0-38zm-52.679 63.019l43.819 25.289a200.138 200.138 0 0 1-33.849 58.528l-43.829-25.309c-31.984 27.397-36.659 30.077-76.168 44.029v50.599a200.917 200.917 0 0 1-67.618 0v-50.599c-39.504-13.95-44.196-16.642-76.168-44.029l-43.829 25.309a200.15 200.15 0 0 1-33.849-58.528l43.819-25.289c-7.63-41.299-7.634-46.719 0-88.038l-43.819-25.289c7.85-21.229 19.31-41.049 33.849-58.529l43.829 25.309c31.984-27.397 36.66-30.078 76.168-44.029V58.845a200.917 200.917 0 0 1 67.618 0v50.599c39.504 13.95 44.196 16.642 76.168 44.029l43.829-25.309a200.143 200.143 0 0 1 33.849 58.529l-43.819 25.289c7.631 41.3 7.634 46.718 0 88.037zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 144c-26.468 0-48-21.532-48-48 0-26.467 21.532-48 48-48s48 21.533 48 48c0 26.468-21.532 48-48 48'],
+  'info-circle': {
+    path: [
+      'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z',
+    ],
     viewBox: '0 0 512 512',
   },
-  "times-circle": {
-    path: ['M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z'],
+  cog: {
+    path: [
+      'M452.515 237l31.843-18.382c9.426-5.441 13.996-16.542 11.177-27.054-11.404-42.531-33.842-80.547-64.058-110.797-7.68-7.688-19.575-9.246-28.985-3.811l-31.785 18.358a196.276 196.276 0 0 0-32.899-19.02V39.541a24.016 24.016 0 0 0-17.842-23.206c-41.761-11.107-86.117-11.121-127.93-.001-10.519 2.798-17.844 12.321-17.844 23.206v36.753a196.276 196.276 0 0 0-32.899 19.02l-31.785-18.358c-9.41-5.435-21.305-3.877-28.985 3.811-30.216 30.25-52.654 68.265-64.058 110.797-2.819 10.512 1.751 21.613 11.177 27.054L59.485 237a197.715 197.715 0 0 0 0 37.999l-31.843 18.382c-9.426 5.441-13.996 16.542-11.177 27.054 11.404 42.531 33.842 80.547 64.058 110.797 7.68 7.688 19.575 9.246 28.985 3.811l31.785-18.358a196.202 196.202 0 0 0 32.899 19.019v36.753a24.016 24.016 0 0 0 17.842 23.206c41.761 11.107 86.117 11.122 127.93.001 10.519-2.798 17.844-12.321 17.844-23.206v-36.753a196.34 196.34 0 0 0 32.899-19.019l31.785 18.358c9.41 5.435 21.305 3.877 28.985-3.811 30.216-30.25 52.654-68.266 64.058-110.797 2.819-10.512-1.751-21.613-11.177-27.054L452.515 275c1.22-12.65 1.22-25.35 0-38zm-52.679 63.019l43.819 25.289a200.138 200.138 0 0 1-33.849 58.528l-43.829-25.309c-31.984 27.397-36.659 30.077-76.168 44.029v50.599a200.917 200.917 0 0 1-67.618 0v-50.599c-39.504-13.95-44.196-16.642-76.168-44.029l-43.829 25.309a200.15 200.15 0 0 1-33.849-58.528l43.819-25.289c-7.63-41.299-7.634-46.719 0-88.038l-43.819-25.289c7.85-21.229 19.31-41.049 33.849-58.529l43.829 25.309c31.984-27.397 36.66-30.078 76.168-44.029V58.845a200.917 200.917 0 0 1 67.618 0v50.599c39.504 13.95 44.196 16.642 76.168 44.029l43.829-25.309a200.143 200.143 0 0 1 33.849 58.529l-43.819 25.289c7.631 41.3 7.634 46.718 0 88.037zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 144c-26.468 0-48-21.532-48-48 0-26.467 21.532-48 48-48s48 21.533 48 48c0 26.468-21.532 48-48 48',
+    ],
     viewBox: '0 0 512 512',
   },
-  "file-alt": {
-    path: ['M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H256V32.5c2.8.7 5.3 2.1 7.4 4.2l83.9 83.9zM336 480H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16zm-48-244v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12z'],
-    viewBox: '0 0 384 512'
+  'times-circle': {
+    path: [
+      'M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z',
+    ],
+    viewBox: '0 0 512 512',
   },
-  'bigcapital': {
+  'file-alt': {
+    path: [
+      'M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H256V32.5c2.8.7 5.3 2.1 7.4 4.2l83.9 83.9zM336 480H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16zm-48-244v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12z',
+    ],
+    viewBox: '0 0 384 512',
+  },
+  bigcapital: {
     path: [
       'M56,3.16,61.33,8.5,31.94,37.9l-5.35-5.35Z',
       'M29.53,6.94l5.35,5.34L5.49,41.67.14,36.33l15.8-15.8Z',
@@ -125,17 +179,34 @@ export default {
     ],
     viewBox: '0 0 309.09 42.89',
   },
-  'eye': {
-    path: ['M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z'],
+  eye: {
+    path: [
+      'M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z',
+    ],
     viewBox: '0 0 576 512',
   },
   'eye-slash': {
-    path: ['M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z'],
+    path: [
+      'M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z',
+    ],
     viewBox: '0 0 640 512',
   },
-  'multi-select':{
-   path:['M12,3.98H4c-0.55,0-1,0.45-1,1v1h8v5h1c0.55,0,1-0.45,1-1v-5C13,4.43,12.55,3.98,12,3.98z M15,0.98H7c-0.55,0-1,0.45-1,1v1h8v5h1c0.55,0,1-0.45,1-1v-5C16,1.43,15.55,0.98,15,0.98z M9,6.98H1c-0.55,0-1,0.45-1,1v5c0,0.55,0.45,1,1,1h8c0.55,0,1-0.45,1-1v-5C10,7.43,9.55,6.98,9,6.98z M8,11.98H2v-3h6V11.98z'],
-   viewBox: '0 0 16 16',
-
-  }
-}
\ No newline at end of file
+  'multi-select': {
+    path: [
+      'M12,3.98H4c-0.55,0-1,0.45-1,1v1h8v5h1c0.55,0,1-0.45,1-1v-5C13,4.43,12.55,3.98,12,3.98z M15,0.98H7c-0.55,0-1,0.45-1,1v1h8v5h1c0.55,0,1-0.45,1-1v-5C16,1.43,15.55,0.98,15,0.98z M9,6.98H1c-0.55,0-1,0.45-1,1v5c0,0.55,0.45,1,1,1h8c0.55,0,1-0.45,1-1v-5C10,7.43,9.55,6.98,9,6.98z M8,11.98H2v-3h6V11.98z',
+    ],
+    viewBox: '0 0 16 16',
+  },
+  'arrow-to-top': {
+    path: [
+      'M35.5 279.9l148-148.4c4.7-4.7 12.3-4.7 17 0l148 148.4c4.7 4.7 4.7 12.3 0 17l-19.6 19.6c-4.8 4.8-12.5 4.7-17.1-.2L218 219.2V468c0 6.6-5.4 12-12 12h-28c-6.6 0-12-5.4-12-12V219.2l-93.7 97.1c-4.7 4.8-12.4 4.9-17.1.2l-19.6-19.6c-4.8-4.7-4.8-12.3-.1-17zM12 84h360c6.6 0 12-5.4 12-12V44c0-6.6-5.4-12-12-12H12C5.4 32 0 37.4 0 44v28c0 6.6 5.4 12 12 12z',
+    ],
+    viewBox: '0 0 384 512',
+  },
+  'arrow-to-bottom': {
+    path: [
+      'M348.5 232.1l-148 148.4c-4.7 4.7-12.3 4.7-17 0l-148-148.4c-4.7-4.7-4.7-12.3 0-17l19.6-19.6c4.8-4.8 12.5-4.7 17.1.2l93.7 97.1V44c0-6.6 5.4-12 12-12h28c6.6 0 12 5.4 12 12v248.8l93.7-97.1c4.7-4.8 12.4-4.9 17.1-.2l19.6 19.6c4.9 4.7 4.9 12.3.2 17zM372 428H12c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h360c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12z',
+    ],
+    viewBox: '0 0 384 512',
+  },
+};
diff --git a/client/src/store/financialStatement/financialStatements.reducer.js b/client/src/store/financialStatement/financialStatements.reducer.js
index 9ea91e6d4..d6a910836 100644
--- a/client/src/store/financialStatement/financialStatements.reducer.js
+++ b/client/src/store/financialStatement/financialStatements.reducer.js
@@ -11,24 +11,29 @@ const initialState = {
   balanceSheet: {
     sheets: [],
     loading: false,
+    filter: true,
   },
   trialBalance: {
     sheets: [],
     loading: false,
+    filter: true,
   },
   generalLedger: {
     sheets: [],
     loading: false,
+    filter: true,
   },
   journal: {
     sheets: [],
     loading: false,
     tableRows: [],
+    filter: true,
   },
   profitLoss: {
     sheets: [],
     loading: false,
     tableRows: [],
+    filter: true,
   }
 };
 
@@ -110,6 +115,14 @@ const mapProfitLossToTableRows = (profitLoss) => {
   ]
 };
 
+const financialStatementFilterToggle = (financialName, statePath) => {
+  return {
+    [`${financialName}_FILTER_TOGGLE`]: (state, action) => {
+      state[statePath].filter = !state[statePath].filter;
+    },
+  }
+};
+
 export default createReducer(initialState, {
   [t.BALANCE_SHEET_STATEMENT_SET]: (state, action) => {
     const index  = getFinancialSheetIndexByQuery(state.balanceSheet.sheets, action.query);
@@ -129,6 +142,7 @@ export default createReducer(initialState, {
   [t.BALANCE_SHEET_LOADING]: (state, action) => {
     state.balanceSheet.loading = !!action.loading;
   },
+  ...financialStatementFilterToggle('BALANCE_SHEET', 'balanceSheet'),
 
   [t.TRAIL_BALANCE_STATEMENT_SET]: (state, action) => {
     const index = getFinancialSheetIndexByQuery(state.trialBalance.sheets, action.query);
@@ -146,6 +160,7 @@ export default createReducer(initialState, {
   [t.TRIAL_BALANCE_SHEET_LOADING]: (state, action) => {
     state.trialBalance.loading = !!action.loading;
   },
+  ...financialStatementFilterToggle('TRIAL_BALANCE', 'trialBalance'),
 
   [t.JOURNAL_SHEET_SET]: (state, action) => {
     const index = getFinancialSheetIndexByQuery(state.journal.sheets, action.query);
@@ -165,6 +180,7 @@ export default createReducer(initialState, {
   [t.JOURNAL_SHEET_LOADING]: (state, action) => {
     state.journal.loading = !!action.loading;
   },
+  ...financialStatementFilterToggle('JOURNAL', 'journal'),
 
   [t.GENERAL_LEDGER_STATEMENT_SET]: (state, action) => {
     const index = getFinancialSheetIndexByQuery(state.generalLedger.sheets, action.query);
@@ -184,6 +200,7 @@ export default createReducer(initialState, {
   [t.GENERAL_LEDGER_SHEET_LOADING]: (state, action) => {
     state.generalLedger.loading = !!action.loading;
   },
+  ...financialStatementFilterToggle('GENERAL_LEDGER', 'generalLedger'),
 
   [t.PROFIT_LOSS_SHEET_SET]: (state, action) => {
     const index = getFinancialSheetIndexByQuery(state.profitLoss.sheets, action.query);
@@ -204,4 +221,5 @@ export default createReducer(initialState, {
   [t.PROFIT_LOSS_SHEET_LOADING]: (state, action) => {
     state.profitLoss.loading = !!action.loading;
   },
+  ...financialStatementFilterToggle('PROFIT_LOSS', 'profitLoss'),
 });
\ No newline at end of file
diff --git a/client/src/style/pages/financial-statements.scss b/client/src/style/pages/financial-statements.scss
index ccc29f8d4..708c10ee6 100644
--- a/client/src/style/pages/financial-statements.scss
+++ b/client/src/style/pages/financial-statements.scss
@@ -7,6 +7,10 @@
     padding: 25px 26px 25px;
     background: #FDFDFD;
 
+    &.is-hidden{
+      display: none;
+    }
+
     .bp3-form-group,
     .radio-group---accounting-basis{
       
@@ -36,6 +40,14 @@
     align-items: center;
   }
 
+
+  &__header.is-hidden + .financial-statement__body{
+    border-top: 20px solid #FDFDFD;
+
+    .financial-sheet{
+      margin-top: 40px;
+    }
+  }
 }
 
 .financial-sheet{
diff --git a/server/bin/bigcapital.js b/server/bin/bigcapital.js
index 0109aba7f..1df2de83e 100644
--- a/server/bin/bigcapital.js
+++ b/server/bin/bigcapital.js
@@ -1,10 +1,16 @@
 const commander = require('commander');
-const { knexSnakeCaseMappers } = require('objection');
-const Knex = require('knex');
 const color = require('colorette');
 const argv = require('getopts')(process.argv.slice(2));
-const systemConfig = require('../config/systemKnexfile');
 const config = require('../config/config');
+const { 
+  initSystemKnex,
+  getAllSystemTenants,
+  initTenantKnex,
+  exit,
+  success,
+  log,
+} = require('./utils');
+const lincenseCommander = require('./license');
 
 // - bigcapital system:migrate:latest
 // - bigcapital system:migrate:rollback
@@ -16,57 +22,8 @@ const config = require('../config/config');
 // - bigcapital system:migrate:make 
 // - bigcapital tenants:list
 
-function initSystemKnex() {
-  return Knex({
-    ...systemConfig['production'],
-    ...knexSnakeCaseMappers({ upperCase: true }),
-  });
-}
-
-function getAllSystemTenants(knex) {
-  return knex('tenants');
-}
-
-function initTenantKnex(organizationId) {
-  return Knex({
-    client: config.tenant.db_client,
-    connection: {
-      host: config.tenant.db_host,
-      user: config.tenant.db_user,
-      password: config.tenant.db_password,
-      database: `${config.tenant.db_name_prefix}${organizationId}`,
-      charset: config.tenant.charset,
-    },
-    migrations: {
-      directory: config.tenant.migrations_dir,
-    },
-    seeds: {
-      directory: config.tenant.seeds_dir,
-    },
-    pool: { min: 0, max: 5 },
-    ...knexSnakeCaseMappers({ upperCase: true }),
-  })
-}
-
-function exit(text) {
-  if (text instanceof Error) {
-    console.error(
-      color.red(`${text.detail ? `${text.detail}\n` : ''}${text.stack}`)
-    );
-  } else {
-    console.error(color.red(text));
-  }
-  process.exit(1);
-}
-
-function success(text) {
-  console.log(text);
-  process.exit(0);
-}
-
-function log(text) {
-  console.log(text);
-}
+// - bigcapital license:generate
+// - bigcapital licenses:list
 
 commander
   .command('system:migrate:rollback') 
diff --git a/server/bin/license.js b/server/bin/license.js
new file mode 100644
index 000000000..7a374dae8
--- /dev/null
+++ b/server/bin/license.js
@@ -0,0 +1,57 @@
+const commander = require('commander');
+const color = require('colorette');
+const argv = require('getopts')(process.argv.slice(2));
+const cryptoRandomString = require('crypto-random-string');
+const { 
+  initSystemKnex,
+  getAllSystemTenants,
+  initTenantKnex,
+  exit,
+  success,
+  log,
+} = require('./utils');
+
+// License generate key.
+commander
+  .command('license:generate <license_period>')
+  .description('Generates a new license key.')
+  .action(async (interval) => {
+    try {  
+      const sysDb = initSystemKnex();
+      let repeat = true;
+
+      while(repeat) {
+        key = cryptoRandomString(16).toUpperCase();
+        const license = await sysDb('subscription_licenses').where('key', key);
+
+        if (license.length === 0) {
+          repeat = false;
+        }
+      }
+      const licenseIds = await sysDb('subscription_licenses').insert({
+        key,
+        license_period: interval ? parseInt(interval, 10) : 1,
+        license_interval: 'month',
+      });
+      const license = await sysDb('subscription_licenses').where('id', licenseIds[0]).first();
+      success(`ID: ${license.id} | License: ${license.key} | Interval: ${license.licenseInterval} | Period: ${license.licensePeriod}`);
+    } catch(error) {
+      exit(error);
+    }
+  });
+
+// Retrieve licenses list.
+commander
+  .command('licenses:list')
+  .description('Retrieve a list of subscription licenses.')
+  .action(async () => {
+    const sysDb = initSystemKnex();
+    const licenses = await sysDb('subscription_licenses');
+
+    licenses.forEach((license) => {
+      log(`ID: ${license.id} | Key: ${license.key} | Interval: ${license.licenseInterval} | Period: ${license.licensePeriod}`);
+    });
+    exit();
+  });
+
+commander.parse(process.argv);
\ No newline at end of file
diff --git a/server/bin/utils.js b/server/bin/utils.js
new file mode 100644
index 000000000..a00578baf
--- /dev/null
+++ b/server/bin/utils.js
@@ -0,0 +1,67 @@
+const Knex = require('knex');
+const { knexSnakeCaseMappers } = require('objection');
+const color = require('colorette');
+const config = require('../config/config');
+const systemConfig = require('../config/systemKnexfile');
+
+
+function initSystemKnex() {
+  return Knex({
+    ...systemConfig['production'],
+    ...knexSnakeCaseMappers({ upperCase: true }),
+  });
+}
+
+function getAllSystemTenants(knex) {
+  return knex('tenants');
+}
+
+function initTenantKnex(organizationId) {
+  return Knex({
+    client: config.tenant.db_client,
+    connection: {
+      host: config.tenant.db_host,
+      user: config.tenant.db_user,
+      password: config.tenant.db_password,
+      database: `${config.tenant.db_name_prefix}${organizationId}`,
+      charset: config.tenant.charset,
+    },
+    migrations: {
+      directory: config.tenant.migrations_dir,
+    },
+    seeds: {
+      directory: config.tenant.seeds_dir,
+    },
+    pool: { min: 0, max: 5 },
+    ...knexSnakeCaseMappers({ upperCase: true }),
+  })
+}
+
+function exit(text) {
+  if (text instanceof Error) {
+    console.error(
+      color.red(`${text.detail ? `${text.detail}\n` : ''}${text.stack}`)
+    );
+  } else {
+    console.error(color.red(text));
+  }
+  process.exit(1);
+}
+
+function success(text) {
+  console.log(text);
+  process.exit(0);
+}
+
+function log(text) {
+  console.log(text);
+}
+
+module.exports = {
+  initTenantKnex,
+  initSystemKnex,
+  getAllSystemTenants,
+  exit,
+  success,
+  log,
+}
\ No newline at end of file
diff --git a/server/src/database/seeds/seed_subscriptions_plans.js b/server/src/database/seeds/seed_subscriptions_plans.js
new file mode 100644
index 000000000..66963ea8d
--- /dev/null
+++ b/server/src/database/seeds/seed_subscriptions_plans.js
@@ -0,0 +1,22 @@
+
+exports.seed = (knex) => {
+  // Deletes ALL existing entries
+  return knex('subscriptions_plans').del()
+    .then(() => {
+      // Inserts seed entries
+      return knex('subscriptions_plans').insert([
+        {
+          id: 1,
+          name: 'basic',
+          price: 80,
+          signup_fee: 0,
+          currency: 'LYD',
+          trial_period: 0,
+          trial_interval: '',
+
+          invoice_period: 1,
+          invoice_interval: 'month',
+        }
+      ]);
+    });
+};
diff --git a/server/src/http/middleware/SubscriptionObserver.js b/server/src/http/middleware/SubscriptionObserver.js
new file mode 100644
index 000000000..10bcb5ef9
--- /dev/null
+++ b/server/src/http/middleware/SubscriptionObserver.js
@@ -0,0 +1,8 @@
+
+
+
+const subscriptionObserver = (req, res, next) => {
+
+};
+
+export default subscriptionObserver;
diff --git a/server/src/services/Subscription/UserSubscription.js b/server/src/services/Subscription/UserSubscription.js
new file mode 100644
index 000000000..e9f2d993f
--- /dev/null
+++ b/server/src/services/Subscription/UserSubscription.js
@@ -0,0 +1,22 @@
+
+
+export default (Model) => {
+  return class UserSubscription extends Model{
+
+    onTrial() {
+      
+    }
+  
+    getSubscription() {
+  
+    }
+  
+    newSubscription() {
+      
+    } 
+  
+    isSubcribedTo(plan) {
+  
+    }
+  }
+};
\ No newline at end of file
diff --git a/server/src/system/migrations/20200527091642_create_subscriptions_plans_table.js b/server/src/system/migrations/20200527091642_create_subscriptions_plans_table.js
new file mode 100644
index 000000000..1da2aa9cb
--- /dev/null
+++ b/server/src/system/migrations/20200527091642_create_subscriptions_plans_table.js
@@ -0,0 +1,28 @@
+
+exports.up = function(knex) {
+  return knex.schema.createTable('subscriptions_plans', table => {
+    table.increments();
+
+    table.string('name');
+    table.string('description');
+    table.decimal('price');
+    table.decimal('signup_fee');
+    table.string('currency', 3);
+
+    table.integer('trial_period');
+    table.string('trial_interval');
+    
+    table.integer('invoice_period');
+    table.string('invoice_interval');
+
+    table.timestamps();
+  }).then(() => {
+    return knex.seed.run({
+      specific: 'seed_subscriptions_plans.js'
+    })
+  });
+};
+
+exports.down = function(knex) {
+  return knex.schema.dropTableIfExists('subscriptions_plans')
+};
diff --git a/server/src/system/migrations/20200527091649_create_subscriptions_usage_table.js b/server/src/system/migrations/20200527091649_create_subscriptions_usage_table.js
new file mode 100644
index 000000000..5ab810315
--- /dev/null
+++ b/server/src/system/migrations/20200527091649_create_subscriptions_usage_table.js
@@ -0,0 +1,18 @@
+exports.up = function(knex) {
+  return knex.schema.createTable('subscriptions_usage', table => {
+    table.increments();
+    table.integer('user_id');
+    table.integer('plan_id');
+
+    table.dateTime('trial_ends_at');
+
+    table.dateTime('subscription_starts_at');
+    table.dateTime('subscription_ends_at');
+
+    table.timestamps();
+  });  
+};
+
+exports.down = function(knex) {
+  return knex.schema.dropTableIfExists('subscriptions_usage');
+};
diff --git a/server/src/system/migrations/20200527101812_create_subscriptions_licenses_table.js b/server/src/system/migrations/20200527101812_create_subscriptions_licenses_table.js
new file mode 100644
index 000000000..3bad5f9a1
--- /dev/null
+++ b/server/src/system/migrations/20200527101812_create_subscriptions_licenses_table.js
@@ -0,0 +1,14 @@
+
+exports.up = function(knex) {
+  return knex.schema.createTable('subscription_licenses', table => {
+    table.increments();
+    table.string('key');
+    table.integer('license_period');
+    table.string('license_interval');
+    table.boolean('used').defaultTo(false);
+  });
+};
+
+exports.down = function(knex) {
+  return knex.schema.dropTableIfExists('subscription_licenses');
+};
diff --git a/server/src/system/models/SubscriptionLicense.js b/server/src/system/models/SubscriptionLicense.js
new file mode 100644
index 000000000..c07eaed75
--- /dev/null
+++ b/server/src/system/models/SubscriptionLicense.js
@@ -0,0 +1,18 @@
+import { Model, mixin } from 'objection';
+import SystemModel from '@/system/models/SystemModel';
+import DateSession from '@/models/DateSession';
+import UserSubscription from '@/services/Subscription/UserSubscription';
+
+
+export default class SubscriptionLicense extends mixin(SystemModel, [DateSession, UserSubscription]) {
+  /**
+   * Table name.
+   */
+  static get tableName() {
+    return 'subscription_licences';
+  }
+
+  markAsUsed() {
+        
+  }
+}
diff --git a/server/src/system/models/SubscriptionPlan.js b/server/src/system/models/SubscriptionPlan.js
new file mode 100644
index 000000000..d05cd4516
--- /dev/null
+++ b/server/src/system/models/SubscriptionPlan.js
@@ -0,0 +1,10 @@
+import SystemModel from '@/system/models/SystemModel';
+
+export default class SubscriptionPlan extends SystemModel {
+  /**
+   * Table name
+   */
+  static get tableName() {
+    return 'subscriptions_plans';
+  }
+}
diff --git a/server/src/system/models/SubscriptionUsage.js b/server/src/system/models/SubscriptionUsage.js
new file mode 100644
index 000000000..c612b84dd
--- /dev/null
+++ b/server/src/system/models/SubscriptionUsage.js
@@ -0,0 +1,10 @@
+import SystemModel from '@/system/models/SystemModel';
+
+export default class SubscriptionUsage extends SystemModel {
+  /**
+   * Table name
+   */
+  static get tableName() {
+    return 'subscriptions_usage';
+  }
+}
diff --git a/server/src/system/models/SystemUser.js b/server/src/system/models/SystemUser.js
index 57b494e84..b2b393418 100644
--- a/server/src/system/models/SystemUser.js
+++ b/server/src/system/models/SystemUser.js
@@ -2,9 +2,10 @@ import { Model, mixin } from 'objection';
 import bcrypt from 'bcryptjs';
 import SystemModel from '@/system/models/SystemModel';
 import DateSession from '@/models/DateSession';
+import UserSubscription from '@/services/Subscription/UserSubscription';
 
 
-export default class SystemUser extends mixin(SystemModel, [DateSession]) {
+export default class SystemUser extends mixin(SystemModel, [DateSession, UserSubscription]) {
   /**
    * Table name.
    */
@@ -17,6 +18,7 @@ export default class SystemUser extends mixin(SystemModel, [DateSession]) {
    */
   static get relationMappings() {
     const Tenant = require('@/system/models/Tenant');
+    const SubscriptionUsage = require('@/system/models/SubscriptionUsage');
 
     return {
       tenant: {
@@ -27,6 +29,15 @@ export default class SystemUser extends mixin(SystemModel, [DateSession]) {
           to: 'tenants.id',
         },
       },
+
+      subscriptionUsage: {
+        relation: Model.BelongsToOneRelation,
+        modelClass: SubscriptionUsage.default,
+        join: {
+          from: 'users.id',
+          to: 'subscriptions_usage.user_id',
+        }
+      },
     };
   }