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