feat: Ability to hide/show financial statement header.

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

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={'/'}>

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>
+    </>
   );
 }

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>;
+}

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,
 };

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

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>
-  )
-}
+  );
+}
+
+export default compose(
+  withBalanceSheetDetail(({ balanceSheetFilter }) => ({ balanceSheetFilter })),
+  withBalanceSheetActions,
+)(BalanceSheetActionsBar);

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>

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

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

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

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}

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>
   );
-}
+}
+
+export default compose(
+  withGeneralLedger(({ generalLedgerSheetFilter }) => ({ generalLedgerSheetFilter })),
+  withGeneralLedgerActions,
+)(GeneralLedgerActionsBar);

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

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

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

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}

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>
-  )
-}
+  );
+}
+
+export default compose(
+  withJournal(({ journalSheetFilter }) => ({ journalSheetFilter })),
+  withJournalActions,
+)(JournalActionsBar);

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>
   );
-}
+}
+
+export default compose(
+  withJournal(({ journalSheetFilter }) => ({ journalSheetFilter })),
+)(JournalHeader);

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

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

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>
   );
-}
+}
+
+export default compose(
+  withProfitLoss(({ profitLossSheetFilter }) => ({ profitLossSheetFilter })),
+  withProfitLossActions,
+)(ProfitLossActionsBar);

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>
   );
-}
+}
+
+export default compose(
+  withProfitLoss(({ profitLossSheetFilter }) => ({ profitLossSheetFilter })),
+)(ProfitLossHeader);

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

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

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>
   );
-}
+}
+
+export default compose(
+  withTrialBalance(({ trialBalanceSheetFilter }) => ({ trialBalanceSheetFilter })),
+  withTrialBalanceActions
+)(TrialBalanceActionsBar);

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,

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>
   );
-}
+}
+
+export default compose(
+  withTrialBalance(({ trialBalanceSheetFilter }) => ({ trialBalanceSheetFilter })),
+)(TrialBalanceSheetHeader);

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

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

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',
 };

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',
-
-  }
-}
+  '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',
+  },
+};

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'),
 });

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{