feat(FinancialReports): add loading progress bar.

fix(preformance): Optimize preformance of virtualized list.
fix(preformance): Optimize financial reports preformance.

client/src/components/App.js

@@ -19,7 +19,7 @@ function App({ locale }) {
   const queryConfig = {
     defaultOptions: {
       queries: {
-        refetchOnWindowFocus: false,
+        refetchOnWindowFocus: true,
         staleTime: 30000,
       },
     },

client/src/components/Dashboard/Dashboard.js

@@ -4,8 +4,6 @@ import { useQuery } from 'react-query';
 
 import 'style/pages/Dashboard/Dashboard.scss';
 
-import DashboardLoadingIndicator from './DashboardLoadingIndicator';
-
 import Sidebar from 'components/Sidebar/Sidebar';
 import DashboardContent from 'components/Dashboard/DashboardContent';
 import DialogsContainer from 'components/DialogsContainer';
@@ -13,22 +11,15 @@ import PreferencesPage from 'components/Preferences/PreferencesPage';
 import Search from 'containers/GeneralSearch/Search';
 import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
 import GlobalHotkeys from './GlobalHotkeys';
-import withSettingsActions from 'containers/Settings/withSettingsActions';
+import DashboardProvider from './DashboardProvider';
 import DrawersContainer from 'components/DrawersContainer';
 
-import { compose } from 'utils';
-
 /**
  * Dashboard page.
  */
-function Dashboard({
+export default function Dashboard() {
-  // #withSettings
-  requestFetchOptions,
-}) {
-  const fetchOptions = useQuery(['options'], () => requestFetchOptions());
-
   return (
-    <DashboardLoadingIndicator isLoading={fetchOptions.isFetching}>
+    <DashboardProvider>
       <Switch>
         <Route path="/preferences">
           <DashboardSplitPane>
@@ -49,8 +40,6 @@ function Dashboard({
       <DialogsContainer />
       <GlobalHotkeys />
       <DrawersContainer />
-    </DashboardLoadingIndicator>
+    </DashboardProvider>
   );
 }
-
-export default compose(withSettingsActions)(Dashboard);

client/src/components/Dashboard/DashboardProvider.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import DashboardLoadingIndicator from './DashboardLoadingIndicator';
+import { useSettings } from 'hooks/query';
+
+/**
+ * Dashboard provider.
+ */
+export default function DashboardProvider({ children }) {
+  const { isLoading } = useSettings();
+
+  return (
+    <DashboardLoadingIndicator isLoading={isLoading}>
+      { children }
+    </DashboardLoadingIndicator>
+  )
+}

client/src/components/Dashboard/PrivatePages.js

@@ -1,46 +1,21 @@
 import React from 'react';
 import { Switch, Route } from 'react-router';
-import { useQuery } from 'react-query';
 
 import Dashboard from 'components/Dashboard/Dashboard';
 import SetupWizardPage from 'containers/Setup/WizardSetupPage';
-import DashboardLoadingIndicator from 'components/Dashboard/DashboardLoadingIndicator';
-
-import withOrganizationActions from 'containers/Organization/withOrganizationActions';
-import withSubscriptionsActions from 'containers/Subscriptions/withSubscriptionsActions';
 
 import EnsureOrganizationIsReady from 'components/Guards/EnsureOrganizationIsReady';
 import EnsureOrganizationIsNotReady from 'components/Guards/EnsureOrganizationIsNotReady';
-
+import { PrivatePagesProvider } from './PrivatePagesProvider';
-import { compose } from 'utils';
 
 import 'style/pages/Dashboard/Dashboard.scss';
 
 /**
  * Dashboard inner private pages.
  */
-function DashboardPrivatePages({
+export default function DashboardPrivatePages() {
-  // #withOrganizationActions
-  requestAllOrganizations,
-
-  // #withSubscriptionsActions
-  requestFetchSubscriptions,
-}) {
-  // Fetches all user's organizatins.
-  const fetchOrganizations = useQuery(
-    ['organizations'], () => requestAllOrganizations(),
-  );
-
-  // Fetches organization subscriptions.
-  const fetchSuscriptions = useQuery(
-    ['susbcriptions'], () => requestFetchSubscriptions(),
-  )
-
   return (
-    <DashboardLoadingIndicator isLoading={
+    <PrivatePagesProvider>
-      fetchOrganizations.isFetching ||
-      fetchSuscriptions.isFetching
-    }>
       <Switch>
         <Route path={'/setup'}>
           <EnsureOrganizationIsNotReady>
@@ -54,11 +29,6 @@ function DashboardPrivatePages({
           </EnsureOrganizationIsReady>
         </Route>
       </Switch>
-    </DashboardLoadingIndicator>
+    </PrivatePagesProvider>
   );
 }
-
-export default compose(
-  withOrganizationActions,
-  withSubscriptionsActions,
-)(DashboardPrivatePages);

client/src/components/Dashboard/PrivatePagesProvider.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import DashboardLoadingIndicator from 'components/Dashboard/DashboardLoadingIndicator';
+import { useCurrentOrganization } from '../../hooks/query/organization';
+
+/**
+ * Private pages provider.
+ */
+export function PrivatePagesProvider({ children }) {
+  // Fetches the current user's organization.
+  const { isLoading } = useCurrentOrganization();
+
+  return (
+    <DashboardLoadingIndicator isLoading={isLoading}>
+      {children}
+    </DashboardLoadingIndicator>
+  )
+}

client/src/components/Datatable/TableCell.js

@@ -62,7 +62,7 @@ export default function TableCell({
           'cell-inner',
         )}
         style={{
-          'padding-left':
+          paddingLeft:
             isExpandColumn && expandable
               ? `${depth * expandColumnSpace}rem`
               : '',

client/src/components/Datatable/TableHeader.js

@@ -66,7 +66,7 @@ function TableHeaderGroup({ headerGroup }) {
   return (
     <div {...headerGroup.getHeaderGroupProps()} className="tr">
       {headerGroup.headers.map((column, index) => (
-        <TableHeaderCell column={column} index={index} />
+        <TableHeaderCell key={index} column={column} index={index} />
       ))}
     </div>
   );
@@ -87,8 +87,8 @@ export default function TableHeader() {
   return (
     <ScrollSyncPane>
       <div className="thead">
-        {headerGroups.map((headerGroup) => (
+        {headerGroups.map((headerGroup, index) => (
-          <TableHeaderGroup headerGroup={headerGroup} />
+          <TableHeaderGroup key={index} headerGroup={headerGroup} />
         ))}
         <If condition={progressBarLoading}>
           <MaterialProgressBar />

client/src/components/Datatable/TableRow.js

@@ -1,23 +1,18 @@
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
+import { ContextMenu } from 'components';
 import classNames from 'classnames';
 import useContextMenu from 'react-use-context-menu';
 
 import TableContext from './TableContext';
-import { saveInvoke } from 'utils';
+import { saveInvoke, ConditionalWrapper } from 'utils';
-import { ContextMenu } from 'components';
-
 
 /**
- * Table row.
+ * Table row context wrapper.
  */
-export default function TableRow({ row, className, style }) {
+function TableRowContextMenu({ children, row }) {
+  // Table context.
   const {
-    props: {
+    props: { ContextMenu: ContextMenuContent },
-      TableCellRenderer,
-      rowContextMenu,
-      rowClassNames,
-      ContextMenu: ContextMenuContent,
-    },
     table,
   } = useContext(TableContext);
 
@@ -32,33 +27,64 @@ export default function TableRow({ row, className, style }) {
     collect: () => 'Title',
   });
 
+  const handleClose = useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
+
   return (
-    <div
+    <div class="tr-context" {...bindTrigger}>
-      {...row.getRowProps({
+      {children}
-        className: classNames(
-          'tr',
-          {
-            'is-expanded': row.isExpanded && row.canExpand,
-          },
-          saveInvoke(rowClassNames, row),
-          className,
-        ),
-        style,
-      })}
-      {...bindTrigger}
-    >
-      {row.cells.map((cell, index) => (
-        <TableCellRenderer cell={cell} row={row} index={index + 1} />
-      ))}
 
       <ContextMenu
         bindMenu={bindMenu}
         isOpen={isVisible}
         coords={coords}
-        onClosed={() => setVisible(false)}
+        onClosed={handleClose}
       >
         <ContextMenuContent {...table} row={row} />
       </ContextMenu>
     </div>
   );
 }
+
+/**
+ * Table row.
+ */
+export default function TableRow({ row, className, style }) {
+  const {
+    props: {
+      TableCellRenderer,
+      rowClassNames,
+      ContextMenu: ContextMenuContent,
+    },
+  } = useContext(TableContext);
+
+  return (
+    <div
+      {...row.getRowProps({
+        className: classNames(
+          'tr',
+          { 'is-expanded': row.isExpanded && row.canExpand },
+          saveInvoke(rowClassNames, row),
+          className,
+        ),
+        style,
+      })}
+    >
+      <ConditionalWrapper
+        condition={ContextMenuContent}
+        wrapper={TableRowContextMenu}
+        row={row}
+      >
+        {row.cells.map((cell, index) => (
+          <TableCellRenderer
+            key={index}
+            cell={cell}
+            row={row}
+            index={index + 1}
+          />
+        ))}
+      </ConditionalWrapper>
+    </div>
+  );
+}

client/src/components/Datatable/TableRows.js

@@ -10,8 +10,8 @@ export default function TableRows() {
     props: { TableRowRenderer, TableCellRenderer },
   } = useContext(TableContext);
 
-  return page.map((row) => {
+  return page.map((row, index) => {
     prepareRow(row);
-    return <TableRowRenderer row={row} TableCellRenderer={TableCellRenderer} />;
+    return <TableRowRenderer key={index} row={row} TableCellRenderer={TableCellRenderer} />;
   });
 }

client/src/components/Datatable/TableVirtualizedRows.js

@@ -3,11 +3,13 @@ import { WindowScroller, AutoSizer, List } from 'react-virtualized';
 import { CLASSES } from 'common/classes';
 import TableContext from './TableContext';
 
+/**
+ * Table virtualized list row.
+ */
 function TableVirtualizedListRow({
   index,
   isScrolling,
   isVisible,
-  key,
   style,
 }) {
   const {
@@ -18,7 +20,7 @@ function TableVirtualizedListRow({
   const row = page[index];
   prepareRow(row);
 
-  return <TableRowRenderer row={row} style={style} />;
+  return (<TableRowRenderer row={row} style={style} />);
 }
 
 /**
@@ -27,39 +29,38 @@ function TableVirtualizedListRow({
 export default function TableVirtualizedListRows() {
   const {
     table: { page },
-    props: { vListrowHeight, vListOverscanRowCount }
+    props: { vListrowHeight, vListOverscanRowCount },
   } = useContext(TableContext);
 
   // Dashboard content pane.
-  const dashboardContentPane = document.querySelector(
+  const dashboardContentPane = React.useMemo(()=> document.querySelector(
     `.${CLASSES.DASHBOARD_CONTENT_PANE}`,
-  );
+  ), []);
+
+  const rowRenderer = React.useCallback(({ key, ...args }) => (
+    <TableVirtualizedListRow {...args} key={key} />
+  ), []);
+
   return (
     <WindowScroller scrollElement={dashboardContentPane}>
-      {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (
+      {({ height, isScrolling, onChildScroll, scrollTop }) => (
-        <div className={'WindowScrollerWrapper'}>
+        <AutoSizer disableHeight>
-          <AutoSizer disableHeight>
+          {({ width }) => (
-            {({ width }) => (
+            <List
-              <div ref={registerChild}>
+              autoHeight={true}
-                <List
+              className={'List'}
-                  autoHeight={true}
+              height={height}
-                  className={'List'}
+              isScrolling={isScrolling}
-                  height={height}
+              onScroll={onChildScroll}
-                  isScrolling={isScrolling}
+              overscanRowCount={vListOverscanRowCount}
-                  onScroll={onChildScroll}
+              rowCount={page.length}
-                  overscanRowCount={vListOverscanRowCount}
+              rowHeight={vListrowHeight}
-                  rowCount={page.length}
+              rowRenderer={rowRenderer}
-                  rowHeight={vListrowHeight}
+              scrollTop={scrollTop}
-                  rowRenderer={({ ...args }) => {
+              width={width}
-                    return <TableVirtualizedListRow {...args} />;
+            />
-                  }}
+          )}
-                  scrollTop={scrollTop}
+        </AutoSizer>
-                  width={width}
-                />
-              </div>
-            )}
-          </AutoSizer>
-        </div>
       )}
     </WindowScroller>
   );

client/src/components/FinancialSheet.js

@@ -7,7 +7,6 @@ import 'style/pages/FinancialStatements/FinancialSheet.scss';
 
 import { If, LoadingIndicator, MODIFIER } from 'components';
 
-
 export default function FinancialSheet({
   companyName,
   sheetType,
@@ -57,49 +56,47 @@ export default function FinancialSheet({
         'is-full-width': fullWidth,
       })}
     >
-      <LoadingIndicator loading={loading} spinnerSize={34} />
+      {loading ? (
-
+        <LoadingIndicator loading={loading} spinnerSize={34} />
-      <div
+      ) : (
-        className={classnames('financial-sheet__inner', {
+        <div className={classnames('financial-sheet__inner')}>
-          'is-loading': loading,
+          <If condition={!!companyName}>
-        })}
+            <h1 class="financial-sheet__title">{companyName}</h1>
-      >
-        <If condition={!!companyName}>
-          <h1 class="financial-sheet__title">{companyName}</h1>
-        </If>
-
-        <If condition={!!sheetType}>
-          <h6 class="financial-sheet__sheet-type">{sheetType}</h6>
-        </If>
-
-        <div class="financial-sheet__date">
-          <If condition={asDate}>
-            <T id={'as'} /> {formattedAsDate}
           </If>
 
-          <If condition={fromDate && toDate}>
+          <If condition={!!sheetType}>
-            <T id={'from'} /> {formattedFromDate} | <T id={'to'} />{' '}
+            <h6 class="financial-sheet__sheet-type">{sheetType}</h6>
-            {formattedToDate}
           </If>
+
+          <div class="financial-sheet__date">
+            <If condition={asDate}>
+              <T id={'as'} /> {formattedAsDate}
+            </If>
+
+            <If condition={fromDate && toDate}>
+              <T id={'from'} /> {formattedFromDate} | <T id={'to'} />{' '}
+              {formattedToDate}
+            </If>
+          </div>
+
+          <div class="financial-sheet__table">{children}</div>
+          <div class="financial-sheet__accounting-basis">{accountingBasis}</div>
+
+          <div class="financial-sheet__footer">
+            <If condition={basisLabel}>
+              <span class="financial-sheet__basis">
+                <T id={'accounting_basis'} /> {basisLabel}
+              </span>
+            </If>
+
+            <If condition={currentDate}>
+              <span class="financial-sheet__current-date">
+                {moment().format('YYYY MMM DD  HH:MM')}
+              </span>
+            </If>
+          </div>
         </div>
-
+      )}
-        <div class="financial-sheet__table">{children}</div>
-        <div class="financial-sheet__accounting-basis">{accountingBasis}</div>
-
-        <div class="financial-sheet__footer">
-          <If condition={basisLabel}>
-            <span class="financial-sheet__basis">
-              <T id={'accounting_basis'} /> {basisLabel}
-            </span>
-          </If>
-
-          <If condition={currentDate}>
-            <span class="financial-sheet__current-date">
-              {moment().format('YYYY MMM DD  HH:MM')}
-            </span>
-          </If>
-        </div>
-      </div>
     </div>
   );
 }

client/src/components/Guards/EnsureOrganizationIsNotReady.js

@@ -5,6 +5,9 @@ import { compose } from 'utils';
 import withAuthentication from 'containers/Authentication/withAuthentication';
 import withOrganization from 'containers/Organization/withOrganization';
 
+/**
+ * Ensures organization is not ready.
+ */
 function EnsureOrganizationIsNotReady({
   children,
 

client/src/components/Guards/PrivateRoute.js

@@ -11,11 +11,7 @@ export default function PrivateRoute({ component: Component, ...rest }) {
       {isAuthenticated ? (
         <Component />
       ) : (
-        <Redirect
+        <Redirect to={{ pathname: '/auth/login' }} />
-          to={{
-            pathname: '/auth/login',
-          }}
-        />
       )}
     </BodyClassName>
   );

client/src/components/Utils/If.js

@@ -5,7 +5,7 @@ const If = props => props.condition
   ? (props.render ? props.render() : props.children) : null;
 
 If.propTypes = {
-	condition: PropTypes.bool.isRequired,
+	// condition: PropTypes.bool.isRequired,
 	children: PropTypes.node,
 	render: PropTypes.func
 };

client/src/components/index.js

@@ -53,6 +53,7 @@ import Drawer from './Drawer/Drawer';
 import DrawerSuspense from './Drawer/DrawerSuspense';
 import Postbox from './Postbox';
 import AccountsSuggestField from './AccountsSuggestField';
+import MaterialProgressBar from './MaterialProgressBar';
 
 const Hint = FieldHint;
 
@@ -112,5 +113,6 @@ export {
   Drawer,
   DrawerSuspense,
   Postbox,
-  AccountsSuggestField
+  AccountsSuggestField,
+  MaterialProgressBar
 };

client/src/containers/Accounts/AccountsDataTable.js

@@ -99,7 +99,7 @@ function AccountsDataTable({
 
       // #TableVirtualizedListRows props.
       vListrowHeight={42}
-      vListOverscanRowCount={10}
+      vListOverscanRowCount={0}
 
       payload={{
         onEdit: handleEditAccount,

client/src/containers/Accounts/components.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import {
   Position,
   Classes,
@@ -75,7 +75,7 @@ export function ActionsMenu({
 /**
  * Actions cell.
  */
-export const ActionsCell = (props) => {
+export function ActionsCell(props) {
   return (
     <Popover
       position={Position.RIGHT_BOTTOM}
@@ -84,7 +84,7 @@ export const ActionsCell = (props) => {
       <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
     </Popover>
   );
-};
+}
 
 /**
  * Normal cell.

client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js

@@ -10,6 +10,7 @@ import APAgingSummaryActionsBar from './APAgingSummaryActionsBar';
 import APAgingSummaryTable from './APAgingSummaryTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { APAgingSummaryProvider } from './APAgingSummaryProvider';
+import { APAgingSummarySheetLoadingBar } from './components';
 
 import withSettings from 'containers/Settings/withSettings';
 import withAPAgingSummaryActions from './withAPAgingSummaryActions'
@@ -59,6 +60,8 @@ function APAgingSummary({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
+      <APAgingSummarySheetLoadingBar />
+
       <DashboardPageContent>
         <FinancialStatement>
           <APAgingSummaryHeader

client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.js

@@ -1,6 +1,6 @@
 import React, { useMemo, createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
-import { useAPAgingSummaryReport,useARAgingSummaryReport , useVendors } from 'hooks/query';
+import { useAPAgingSummaryReport, useVendors } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const APAgingSummaryContext = createContext();
@@ -17,7 +17,7 @@ function APAgingSummaryProvider({ filter, ...props }) {
     isLoading: isAPAgingLoading,
     isFetching: isAPAgingFetching,
     refetch,
-  } = useAPAgingSummaryReport(query);
+  } = useAPAgingSummaryReport(query, { keepPreviousData: true });
 
   // Retrieve the vendors list.
   const {
@@ -36,14 +36,12 @@ function APAgingSummaryProvider({ filter, ...props }) {
   };
 
   return (
-    <DashboardInsider name={'AP-Aging-Summary'}>
+    <FinancialReportPage name={'AP-Aging-Summary'}>
       <APAgingSummaryContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 
-
 const useAPAgingSummaryContext = () => useContext(APAgingSummaryContext);
 
-
 export { APAgingSummaryProvider, useAPAgingSummaryContext };

client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js

@@ -18,7 +18,7 @@ export default function APAgingSummaryTable({
   // AP aging summary report content.
   const {
     APAgingSummary: { tableRows },
-    isAPAgingFetching,
+    isAPAgingLoading,
   } = useAPAgingSummaryContext();
 
   // AP aging summary columns.
@@ -32,7 +32,7 @@ export default function APAgingSummaryTable({
       name={'payable-aging-summary'}
       sheetType={formatMessage({ id: 'payable_aging_summary' })}
       asDate={new Date()}
-      loading={isAPAgingFetching}
+      loading={isAPAgingLoading}
     >
       <DataTable
         className={'bigcapital-datatable--financial-report'}

client/src/containers/FinancialStatements/APAgingSummary/components.js

@@ -2,6 +2,8 @@ import React, { useMemo } from 'react';
 import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
 import { getColumnWidth } from 'utils';
 import { FormattedMessage as T } from 'react-intl';
+import { If } from 'components';
+import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
  * Retrieve AP aging summary columns.
@@ -54,3 +56,18 @@ export const useAPAgingSummaryColumns = () => {
     [tableRows, agingColumns],
   );
 };
+
+/**
+ * A/P aging summary sheet loading bar.
+ */
+ export function APAgingSummarySheetLoadingBar() {
+  const {
+    isAPAgingFetching
+  } = useAPAgingSummaryContext();
+
+  return (
+    <If condition={isAPAgingFetching}>
+      <FinancialLoadingBar />
+    </If>
+  )
+}

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

@@ -10,6 +10,7 @@ import ARAgingSummaryActionsBar from './ARAgingSummaryActionsBar';
 import ARAgingSummaryTable from './ARAgingSummaryTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { ARAgingSummaryProvider } from './ARAgingSummaryProvider';
+import { ARAgingSummarySheetLoadingBar } from './components';
 
 import withARAgingSummaryActions from './withARAgingSummaryActions'
 import withSettings from 'containers/Settings/withSettings';
@@ -57,6 +58,8 @@ function ReceivableAgingSummarySheet({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
+      <ARAgingSummarySheetLoadingBar />
+
       <DashboardPageContent>
         <FinancialStatement>
           <ARAgingSummaryHeader

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

@@ -1,5 +1,5 @@
 import React, { useMemo, createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useARAgingSummaryReport, useCustomers } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
@@ -12,12 +12,13 @@ function ARAgingSummaryProvider({ filter, ...props }) {
   // Transformes the filter from to the Url query.
   const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
 
+  // A/R aging summary sheet context.
   const {
     data: ARAgingSummary,
     isLoading: isARAgingLoading,
     isFetching: isARAgingFetching,
     refetch,
-  } = useARAgingSummaryReport(query);
+  } = useARAgingSummaryReport(query, { keepPreviousData: true });
 
   // Retrieve the customers list.
   const {
@@ -36,9 +37,9 @@ function ARAgingSummaryProvider({ filter, ...props }) {
   };
 
   return (
-    <DashboardInsider name={'AR-Aging-Summary'}>
+    <FinancialReportPage name={'AR-Aging-Summary'}>
       <ARAgingSummaryContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 

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

@@ -16,7 +16,7 @@ export default function ReceivableAgingSummaryTable({
   const { formatMessage } = useIntl();
 
   // AR aging summary report context.
-  const { ARAgingSummary, isARAgingFetching } = useARAgingSummaryContext();
+  const { ARAgingSummary, isARAgingLoading } = useARAgingSummaryContext();
 
   // AR aging summary columns.
   const columns = useARAgingSummaryColumns();
@@ -33,7 +33,7 @@ export default function ReceivableAgingSummaryTable({
       name={'receivable-aging-summary'}
       sheetType={formatMessage({ id: 'receivable_aging_summary' })}
       asDate={new Date()}
-      loading={isARAgingFetching}
+      loading={isARAgingLoading}
     >
       <DataTable
         className="bigcapital-datatable--financial-report"

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

@@ -2,6 +2,8 @@ import React from 'react';
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import { getColumnWidth } from 'utils';
 import { FormattedMessage as T } from 'react-intl';
+import { If } from 'components';
+import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
  * Retrieve AR aging summary columns.
@@ -56,3 +58,18 @@ export const useARAgingSummaryColumns = () => {
     [tableRows, agingColumns],
   );
 };
+
+/**
+ * A/R aging summary sheet loading bar.
+ */
+ export function ARAgingSummarySheetLoadingBar() {
+  const {
+    isARAgingFetching,
+  } = useARAgingSummaryContext();
+
+  return (
+    <If condition={isARAgingFetching}>
+      <FinancialLoadingBar />
+    </If>
+  )
+}

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

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
-
 import 'style/pages/FinancialStatements/BalanceSheet.scss';
 
 import BalanceSheetHeader from './BalanceSheetHeader';
 import BalanceSheetTable from './BalanceSheetTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import BalanceSheetActionsBar from './BalanceSheetActionsBar';
-import { BalanceSheetAlerts } from './components';
+import { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components';
 import { FinancialStatement } from 'components';
 
 import withBalanceSheetActions from './withBalanceSheetActions';
@@ -63,6 +62,7 @@ function BalanceSheet({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
+      <BalanceSheetLoadingBar />
       <BalanceSheetAlerts />
 
       <DashboardPageContent>

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

@@ -12,20 +12,24 @@ function BalanceSheetProvider({ filter, ...props }) {
   ]);
 
   // Fetches the balance sheet report.
-  const { data: balanceSheet, isFetching, refetch } = useBalanceSheet(query);
+  const {
+    data: balanceSheet,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useBalanceSheet(query, { keepPreviousData: true });
 
   const provider = {
     balanceSheet,
-    isLoading: isFetching,
+    isFetching,
+    isLoading,
     refetchBalanceSheet: refetch,
 
     query,
     filter,
   };
   return (
-    <FinancialReportPage
+    <FinancialReportPage name={'balance-sheet'}>
-      name={'balance-sheet'}
-    >
       <BalanceSheetContext.Provider value={provider} {...props} />
     </FinancialReportPage>
   );

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from '@blueprintjs/core';
 import { Icon, If } from 'components';
 import { useBalanceSheetContext } from './BalanceSheetProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
  * Balance sheet alerts.
@@ -13,7 +14,7 @@ export function BalanceSheetAlerts() {
     balanceSheet,
   } = useBalanceSheetContext();
 
-  // Handle recalculate the report button.
+  // Handle refetch the report sheet.
   const handleRecalcReport = () => {
     refetchBalanceSheet();
   };
@@ -34,3 +35,18 @@ export function BalanceSheetAlerts() {
     </If>
   );
 }
+
+/**
+ * Balance sheet loading bar.
+ */
+export function BalanceSheetLoadingBar() {
+  const {
+    isFetching
+  } = useBalanceSheetContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  )
+}

client/src/containers/FinancialStatements/FinancialLoadingBar.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { MaterialProgressBar } from 'components';
+
+/**
+ * Financnail progress bar.
+ */
+export default function FinancialLoadingBar() {
+  return (
+    <div className={'financial-progressbar'}>
+      <MaterialProgressBar />
+    </div>
+  )
+}

client/src/containers/FinancialStatements/FinancialReports.js

@@ -1,13 +1,9 @@
-import React, { useEffect } from 'react';
+import React from 'react';
-import { useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { For } from 'components';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import financialReportMenus from 'config/financialReportsMenu';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
-import { compose } from 'utils';
 
 import 'style/pages/FinancialStatements/FinancialSheets.scss';
 
@@ -34,6 +30,9 @@ function FinancialReportsSection({ sectionTitle, reports }) {
   );
 }
 
+/**
+ * Financial reports.
+ */
 export default function FinancialReports() {
   return (
     <DashboardInsider name={'financial-reports'}>

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

@@ -9,6 +9,10 @@ import GeneralLedgerHeader from './GeneralLedgerHeader';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
 import { GeneralLedgerProvider } from './GeneralLedgerProvider';
+import {
+  GeneralLedgerSheetAlerts,
+  GeneralLedgerSheetLoadingBar,
+} from './components';
 
 import withGeneralLedgerActions from './withGeneralLedgerActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -64,6 +68,8 @@ function GeneralLedger({
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
           />
+          <GeneralLedgerSheetLoadingBar />
+          <GeneralLedgerSheetAlerts />
 
           <div class="financial-statement__body">
             <GeneralLedgerTable

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

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useGeneralLedgerSheet, useAccounts } from 'hooks/query';
 
 const GeneralLedgerContext = createContext();
@@ -8,7 +8,14 @@ const GeneralLedgerContext = createContext();
  * General ledger provider.
  */
 function GeneralLedgerProvider({ query, ...props }) {
-  const { data: generalLedger, isFetching, refetch } = useGeneralLedgerSheet(query);
+  const {
+    data: generalLedger,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useGeneralLedgerSheet(query, {
+    keepPreviousData: true,
+  });
 
   // Accounts list.
   const { data: accounts, isFetching: isAccountsLoading } = useAccounts();
@@ -17,13 +24,14 @@ function GeneralLedgerProvider({ query, ...props }) {
     generalLedger,
     accounts,
     sheetRefresh: refetch,
-    isSheetLoading: isFetching,
+    isFetching,
+    isLoading,
     isAccountsLoading,
   };
   return (
-    <DashboardInsider name={'general-ledger-sheet'}>
+    <FinancialReportPage name={'general-ledger-sheet'}>
       <GeneralLedgerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 

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

@@ -5,6 +5,8 @@ import { useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
+import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
+import TableFastCell from 'components/Datatable/TableFastCell';
 
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
 import { useGeneralLedgerTableColumns } from './components';
@@ -12,25 +14,22 @@ import { useGeneralLedgerTableColumns } from './components';
 /**
  * General ledger table.
  */
-export default function GeneralLedgerTable({
+export default function GeneralLedgerTable({ companyName }) {
-  companyName,
-}) {
   const { formatMessage } = useIntl();
 
   // General ledger context.
   const {
     generalLedger: { tableRows, query },
-    isSheetLoading
+    isLoading,
   } = useGeneralLedgerContext();
 
   // General ledger table columns.
   const columns = useGeneralLedgerTableColumns();
 
   // Default expanded rows of general ledger table.
-  const expandedRows = useMemo(
+  const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 1), [
-    () => defaultExpanderReducer(tableRows, 1),
+    tableRows,
-    [tableRows],
+  ]);
-  );
 
   const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
 
@@ -41,11 +40,11 @@ export default function GeneralLedgerTable({
       fromDate={query.from_date}
       toDate={query.to_date}
       name="general-ledger"
-      loading={isSheetLoading}
+      loading={isLoading}
       fullWidth={true}
     >
       <DataTable
-      className="bigcapital-datatable--financial-report"
+        className="bigcapital-datatable--financial-report"
         noResults={formatMessage({
           id: 'this_report_does_not_contain_any_data_between_date_period',
         })}
@@ -59,6 +58,11 @@ export default function GeneralLedgerTable({
         expandable={true}
         expandToggleColumn={1}
         sticky={true}
+        TableRowsRenderer={TableVirtualizedListRows}
+        // #TableVirtualizedListRows props.
+        vListrowHeight={28}
+        vListOverscanRowCount={0}
+        TableCellRenderer={TableFastCell}
       />
     </FinancialSheet>
   );

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

@@ -1,7 +1,10 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { Button } from '@blueprintjs/core';
+import { Icon, If } from 'components';
 import { getForceWidth, getColumnWidth } from 'utils';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
  * Retrieve the general ledger table columns.
@@ -46,6 +49,7 @@ export function useGeneralLedgerTableColumns() {
         accessor: 'reference_type_formatted',
         className: 'transaction_type',
         width: 125,
+        textOverview: true,
       },
       {
         Header: formatMessage({ id: 'transaction_number' }),
@@ -99,3 +103,51 @@ export function useGeneralLedgerTableColumns() {
     [formatMessage, tableRows],
   );
 }
+
+
+/**
+ * General ledger sheet alerts.
+ */
+ export function GeneralLedgerSheetAlerts() {
+  const {
+    generalLedger,
+    isLoading,
+    sheetRefresh
+  } = useGeneralLedgerContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    sheetRefresh();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) { return null; }
+
+  return (
+    <If condition={generalLedger.meta.is_cost_compute_running}>
+      <div class="alert-compute-running">
+        <Icon icon="info-block" iconSize={12} /> Just a moment! We're
+        calculating your cost transactions and this doesn't take much time.
+        Please check after sometime.{' '}
+
+        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+          Refresh
+        </Button>
+      </div>
+    </If>
+  );
+}
+
+/**
+ * General ledger sheet loading bar.
+ */
+export function GeneralLedgerSheetLoadingBar() {
+  const {
+    isFetching,
+  } = useGeneralLedgerContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  )
+}

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

@@ -1,20 +1,21 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import moment from 'moment';
-import { useIntl } from 'react-intl';
 
-import { compose } from 'utils';
+import 'style/pages/FinancialStatements/Journal.scss';
+
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
 import JournalTable from './JournalTable';
-
 import JournalHeader from './JournalHeader';
 import JournalActionsBar from './JournalActionsBar';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { JournalSheetProvider } from './JournalProvider';
+import { JournalSheetLoadingBar, JournalSheetAlerts } from './components';
 
 import withSettings from 'containers/Settings/withSettings';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withJournalActions from './withJournalActions';
 
-import 'style/pages/FinancialStatements/Journal.scss';
+import { compose } from 'utils';
 
 /**
  * Journal sheet.
@@ -60,6 +61,9 @@ function Journal({
             onSubmitFilter={handleFilterSubmit}
             pageFilter={filter}
           />
+          <JournalSheetLoadingBar />
+          <JournalSheetAlerts />
+
           <div class="financial-statement__body">
             <JournalTable
               companyName={organizationName}

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

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useJournalSheet } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
@@ -9,20 +9,27 @@ const JournalSheetContext = createContext();
  * Journal sheet provider.
  */
 function JournalSheetProvider({ query, ...props }) {
-  const { data: journalSheet, isFetching, refetch } = useJournalSheet({
+  const {
-    ...transformFilterFormToQuery(query)
+    data: journalSheet,
-  });
+    isFetching,
+    isLoading,
+    refetch,
+  } = useJournalSheet(
+    { ...transformFilterFormToQuery(query) },
+    { keepPreviousData: true },
+  );
 
   const provider = {
     journalSheet,
-    isLoading: isFetching,
+    isLoading,
-    refetchSheet: refetch
+    isFetching,
+    refetchSheet: refetch,
   };
 
   return (
-    <DashboardInsider name={'balance-sheet'}>
+    <FinancialReportPage name={'journal-sheet'}>
       <JournalSheetContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 

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

@@ -4,7 +4,8 @@ import { useIntl } from 'react-intl';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import { useJournalSheetContext } from './JournalProvider';
-
+import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
+import TableFastCell from 'components/Datatable/TableFastCell';
 import { defaultExpanderReducer } from 'utils';
 import { useJournalTableColumns } from './components';
 
@@ -41,6 +42,8 @@ export default function JournalSheetTable({
     };
   }, []);
 
+
+  
   return (
     <FinancialSheet
       companyName={companyName}
@@ -62,6 +65,13 @@ export default function JournalSheetTable({
         })}
         expanded={expandedRows}
         sticky={true}
+        TableRowsRenderer={TableVirtualizedListRows}
+        // #TableVirtualizedListRows props.
+        vListrowHeight={28}
+        vListOverscanRowCount={2}
+
+        TableCellRenderer={TableFastCell}
+        id={'journal'}
       />
     </FinancialSheet>
   );

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

@@ -1,6 +1,10 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import moment from 'moment';
+import { Button } from '@blueprintjs/core';
+import { Icon, If } from 'components';
+import { useJournalSheetContext } from './JournalProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
  * Retrieve the journal table columns.
@@ -60,3 +64,50 @@ export const useJournalTableColumns = () => {
     [formatMessage],
   );
 };
+
+/**
+ * Journal sheet loading bar.
+ */
+export function JournalSheetLoadingBar() {
+  const {
+    isFetching
+  } = useJournalSheetContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  )
+}
+
+/**
+ * Journal sheet alerts.
+ */
+ export function JournalSheetAlerts() {
+  const {
+    isLoading,
+    refetchSheet,
+    journalSheet,
+  } = useJournalSheetContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    refetchSheet();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) { return null; }
+
+  return (
+    <If condition={journalSheet.meta.is_cost_compute_running}>
+      <div class="alert-compute-running">
+        <Icon icon="info-block" iconSize={12} /> Just a moment! We're
+        calculating your cost transactions and this doesn't take much time.
+        Please check after sometime.{' '}
+
+        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+          Refresh
+        </Button>
+      </div>
+    </If>
+  );
+}

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

@@ -1,25 +1,31 @@
 import React, { createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useProfitLossSheet } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const ProfitLossSheetContext = createContext();
 
 function ProfitLossSheetProvider({ query, ...props }) {
-  const { data: profitLossSheet, isFetching, refetch } = useProfitLossSheet({
+  const {
+    data: profitLossSheet,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useProfitLossSheet({
     ...transformFilterFormToQuery(query),
   });
 
   const provider = {
     profitLossSheet,
-    isLoading: isFetching,
+    isLoading,
+    isFetching,
     sheetRefetch: refetch,
   };
 
   return (
-    <DashboardInsider>
+    <FinancialReportPage name={'profit-loss-sheet'}>
       <ProfitLossSheetContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 

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

@@ -14,6 +14,10 @@ import withSettings from 'containers/Settings/withSettings';
 
 import 'style/pages/FinancialStatements/ProfitLossSheet.scss';
 import { ProfitLossSheetProvider } from './ProfitLossProvider';
+import {
+  ProfitLossSheetLoadingBar,
+  ProfitLossSheetAlerts
+} from './components';
 
 /**
  * Profit/Loss financial statement sheet.
@@ -23,7 +27,7 @@ function ProfitLossSheet({
   organizationName,
 
   // #withProfitLossActions
-  toggleProfitLossFilterDrawer: toggleDisplayFilterDrawer
+  toggleProfitLossFilterDrawer: toggleDisplayFilterDrawer,
 }) {
   const [filter, setFilter] = useState({
     basis: 'cash',
@@ -52,9 +56,12 @@ function ProfitLossSheet({
   };
 
   // Hide the filter drawer once the page unmount.
-  React.useEffect(() => () => {
+  React.useEffect(
-    toggleDisplayFilterDrawer(false);
+    () => () => {
-  }, [toggleDisplayFilterDrawer])
+      toggleDisplayFilterDrawer(false);
+    },
+    [toggleDisplayFilterDrawer],
+  );
 
   return (
     <ProfitLossSheetProvider query={filter}>
@@ -62,6 +69,8 @@ function ProfitLossSheet({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
+      <ProfitLossSheetLoadingBar />
+      <ProfitLossSheetAlerts />
 
       <DashboardPageContent>
         <div class="financial-statement">
@@ -71,9 +80,7 @@ function ProfitLossSheet({
           />
 
           <div class="financial-statement__body">
-            <ProfitLossSheetTable
+            <ProfitLossSheetTable companyName={organizationName} />
-              companyName={organizationName}
-            />
           </div>
         </div>
       </DashboardPageContent>

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Button } from '@blueprintjs/core';
+import { Icon, If } from 'components';
+import { useProfitLossSheetContext } from './ProfitLossProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+/**
+ * Profit/loss sheet loading bar.
+ */
+export function ProfitLossSheetLoadingBar() {
+  const { isFetching } = useProfitLossSheetContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}
+
+/**
+ * Balance sheet alerts.
+ */
+export function ProfitLossSheetAlerts() {
+  const {
+    isLoading,
+    sheetRefetch,
+    profitLossSheet,
+  } = useProfitLossSheetContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    sheetRefetch();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <If condition={profitLossSheet.meta.is_cost_compute_running}>
+      <div class="alert-compute-running">
+        <Icon icon="info-block" iconSize={12} /> Just a moment! We're
+        calculating your cost transactions and this doesn't take much time.
+        Please check after sometime.{' '}
+        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+          Refresh
+        </Button>
+      </div>
+    </If>
+  );
+}

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

@@ -1,27 +1,36 @@
 import React, { createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useTrialBalanceSheet } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const TrialBalanceSheetContext = createContext();
 
 function TrialBalanceSheetProvider({ query, ...props }) {
-  const { data: trialBalanceSheet, isFetching, refetch } = useTrialBalanceSheet(
+  const {
+    data: trialBalanceSheet,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useTrialBalanceSheet(
     {
       ...transformFilterFormToQuery(query),
     },
+    {
+      keepPreviousData: true,
+    },
   );
 
   const provider = {
     trialBalanceSheet,
-    isLoading: isFetching,
+    isLoading,
+    isFetching,
     refetchSheet: refetch,
   };
 
   return (
-    <DashboardInsider name={'trial-balance-sheet'}>
+    <FinancialReportPage name={'trial-balance-sheet'}>
       <TrialBalanceSheetContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 

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

@@ -9,6 +9,11 @@ import TrialBalanceSheetHeader from './TrialBalanceSheetHeader';
 import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import {
+  TrialBalanceSheetAlerts,
+  TrialBalanceSheetLoadingBar,
+} from './components';
+
 import withTrialBalanceActions from './withTrialBalanceActions';
 import withSettings from 'containers/Settings/withSettings';
 
@@ -22,7 +27,7 @@ function TrialBalanceSheet({
   organizationName,
 
   // #withTrialBalanceSheetActions
-  toggleTrialBalanceFilterDrawer: toggleFilterDrawer
+  toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 }) {
   const [filter, setFilter] = useState({
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
@@ -53,9 +58,12 @@ function TrialBalanceSheet({
   };
 
   // Hide the filter drawer once the page unmount.
-  useEffect(() => () => {
+  useEffect(
-    toggleFilterDrawer(false)
+    () => () => {
-  }, [toggleFilterDrawer]);
+      toggleFilterDrawer(false);
+    },
+    [toggleFilterDrawer],
+  );
 
   return (
     <TrialBalanceSheetProvider query={filter}>
@@ -63,6 +71,9 @@ function TrialBalanceSheet({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
+      <TrialBalanceSheetLoadingBar />
+      <TrialBalanceSheetAlerts />
+
       <DashboardPageContent>
         <div class="financial-statement">
           <TrialBalanceSheetHeader

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { Button } from '@blueprintjs/core';
 import { getColumnWidth } from 'utils';
+import { If, Icon } from 'components';
 import { CellTextSpan } from 'components/Datatable/Cells';
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
-
+import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
  * Retrieve trial balance sheet table columns.
@@ -53,3 +55,50 @@ export const useTrialBalanceTableColumns = () => {
     [tableRows, formatMessage],
   );
 };
+
+/**
+ * Trial balance sheet progress loading bar.
+ */
+export function TrialBalanceSheetLoadingBar() {
+  const {
+    isFetching
+  } = useTrialBalanceSheetContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  )
+}
+
+/**
+ * Trial balance sheet alerts.
+ */
+export function TrialBalanceSheetAlerts() {
+  const {
+    trialBalanceSheet: { meta },
+    isLoading,
+    refetchSheet
+  } = useTrialBalanceSheetContext();
+
+  // Handle refetch the sheet.
+  const handleRecalcReport = () => {
+    refetchSheet();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) { return null; }
+
+  return (
+    <If condition={meta.is_cost_compute_running}>
+      <div class="alert-compute-running">
+        <Icon icon="info-block" iconSize={12} /> Just a moment! We're
+        calculating your cost transactions and this doesn't take much time.
+        Please check after sometime.{' '}
+
+        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+          Refresh
+        </Button>
+      </div>
+    </If>
+  )
+}

client/src/containers/Items/ItemsListProvider.js

@@ -17,12 +17,12 @@ function ItemsListProvider({
   ...props
 }) {
   // Fetch accounts resource views and fields.
-  const { data: itemsViews, isFetching: isViewsLoading } = useResourceViews(
+  const { data: itemsViews, isLoading: isViewsLoading } = useResourceViews(
     'items',
   );
 
   // Fetch the accounts resource fields.
-  const { data: itemsFields, isFetching: isFieldsLoading } = useResourceFields(
+  const { data: itemsFields, isLoading: isFieldsLoading } = useResourceFields(
     'items',
   );
 

client/src/containers/Purchases/Bills/BillsLanding/BillsListProvider.js

@@ -10,14 +10,14 @@ const BillsListContext = createContext();
  */
 function BillsListProvider({ query, ...props }) {
   // Fetch accounts resource views and fields.
-  const { data: billsViews, isFetching: isViewsLoading } = useResourceViews(
+  const { data: billsViews, isLoading: isViewsLoading } = useResourceViews(
     'bills',
   );
 
   // Fetch the accounts resource fields.
   const {
     data: billsFields,
-    isFetching: isFieldsLoading,
+    isLoading: isFieldsLoading,
   } = useResourceFields('bills');
 
   // Fetch accounts list according to the given custom view id.

client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormProvider.js

@@ -21,7 +21,7 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
   const [paymentVendorId, setPaymentVendorId] = React.useState(null);
 
   // Handle fetch accounts data.
-  const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
 
   // Handle fetch Items data table or list.
   const {
@@ -33,7 +33,7 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
   // Handle fetch venders data table or list.
   const {
     data: { vendors },
-    isFetching: isVendorsFetching,
+    isLoading: isVendorsLoading,
   } = useVendors({ page_size: 10000 });
 
   // Handle fetch specific payment made details.
@@ -66,10 +66,10 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
     paymentVendorId,
 
     isNewMode,
-    isAccountsFetching,
+    isAccountsLoading,
     isItemsFetching,
     isItemsLoading,
-    isVendorsFetching,
+    isVendorsLoading,
     isPaymentFetching,
     isPaymentLoading,
 
@@ -83,9 +83,9 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
   return (
     <DashboardInsider
       loading={
-        isVendorsFetching ||
+        isVendorsLoading ||
         isItemsFetching ||
-        isAccountsFetching ||
+        isAccountsLoading ||
         isPaymentFetching ||
         isPaymentLoading
       }

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js

@@ -10,14 +10,14 @@ const EstimatesListContext = createContext();
  */
 function EstimatesListProvider({ query, ...props }) {
   // Fetches estimates resource views and fields.
-  const { data: estimatesViews, isFetching: isViewsLoading } = useResourceViews(
+  const { data: estimatesViews, isLoading: isViewsLoading } = useResourceViews(
     'sale_estimates',
   );
 
   // Fetches the estimates resource fields.
   const {
     data: estimatesFields,
-    isFetching: isFieldsLoading,
+    isLoading: isFieldsLoading,
   } = useResourceFields('sale_estimates');
 
   // Fetch estimates list according to the given custom view id.

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js

@@ -10,14 +10,14 @@ const InvoicesListContext = createContext();
  */
 function InvoicesListProvider({ query, ...props }) {
   // Fetch accounts resource views and fields.
-  const { data: invoicesViews, isFetching: isViewsLoading } = useResourceViews(
+  const { data: invoicesViews, isLoading: isViewsLoading } = useResourceViews(
     'sale_invoices',
   );
 
   // Fetch the accounts resource fields.
   const {
     data: invoicesFields,
-    isFetching: isFieldsLoading,
+    isLoading: isFieldsLoading,
   } = useResourceFields('sale_invoices');
 
   // Fetch accounts list according to the given custom view id.

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.js

@@ -31,7 +31,7 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
     enabled: !!paymentReceiveId,
   });
   // Handle fetch accounts data.
-  const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
 
   // Fetch payment made settings.
   const fetchSettings = useSettingsPaymentReceives();
@@ -39,7 +39,7 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
   // Fetches customers list.
   const {
     data: { customers },
-    isFetching: isCustomersFetching,
+    isLoading: isCustomersLoading,
   } = useCustomers({ page_size: 10000 });
 
   // Detarmines whether the new mode.
@@ -58,9 +58,9 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
     customers,
 
     isPaymentLoading,
+    isAccountsLoading,
     isPaymentFetching,
-    isAccountsFetching,
+    isCustomersLoading,
-    isCustomersFetching,
     isNewMode,
 
     submitPayload,
@@ -72,7 +72,7 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
 
   return (
     <DashboardInsider
-      loading={isPaymentLoading || isAccountsFetching || isCustomersFetching}
+      loading={isPaymentLoading || isAccountsLoading || isCustomersLoading}
       name={'payment-receive-form'}
     >
       <PaymentReceiveFormContext.Provider value={provider} {...props} />

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js

@@ -1,6 +1,6 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useResourceFields, useReceipts } from 'hooks/query';
+import { useResourceViews, useReceipts } from 'hooks/query';
 import { isTableEmptyStatus } from 'utils';
 
 const ReceiptsListContext = createContext();
@@ -8,7 +8,7 @@ const ReceiptsListContext = createContext();
 // Receipts list provider.
 function ReceiptsListProvider({ query, ...props }) {
   // Fetch receipts resource views and fields.
-  const { data: receiptsViews, isFetching: isViewsLoading } = useResourceViews(
+  const { data: receiptsViews, isLoading: isViewsLoading } = useResourceViews(
     'sale_receipt',
   );
 

client/src/hooks/query/items.js

@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from 'react-query';
 import { transformPagination, transformResponse } from 'utils';
 import { useQueryTenant } from '../useQueryTenant';
 import useApiRequest from '../useRequest';

client/src/hooks/query/organization.js

@@ -1,9 +1,13 @@
-import t from 'store/types';
+import { useMutation } from 'react-query';
+import t from './types';
 import useApiRequest from '../useRequest';
 import { useQueryTenant } from '../useQueryTenant';
+import { useEffect } from 'react';
+import { useSetOrganizations, useSetSubscriptions } from '../state';
+import { omit } from 'lodash';
 
 /**
- * Retrieve the contact duplicate.
+ * Retrieve organizations of the authenticated user.
  */
 export function useOrganizations(props) {
   const apiRequest = useApiRequest();
@@ -23,3 +27,74 @@ export function useOrganizations(props) {
     },
   );
 }
+
+/**
+ * Retrieve the current organization metadata.
+ */
+export function useCurrentOrganization(props) {
+  const apiRequest = useApiRequest();
+  const setOrganizations = useSetOrganizations();
+  const setSubscriptions = useSetSubscriptions();
+
+  const query = useQueryTenant(
+    [t.ORGANIZATION_CURRENT],
+    () => apiRequest.get(`organization/current`),
+    {
+      select: (res) => res.data.organization,
+      initialDataUpdatedAt: 0,
+      initialData: {
+        data: {
+          organization: {},
+        },
+      },
+      ...props,
+    },
+  );
+
+  useEffect(() => {
+    if (query.isSuccess) {
+      const organization = omit(query.data, ['subscriptions']);
+
+      // Sets organizations.
+      setOrganizations([organization]);
+
+      // Sets subscriptions.
+      setSubscriptions(query.data.subscriptions);
+    }
+  }, [query.data, query.isSuccess, setOrganizations, setSubscriptions]);
+
+  return query;
+}
+
+/**
+ * Builds the current tenant.
+ */
+export function useBuildTenant(props) {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('organization/build'),
+    {
+      onSuccess: (res, values) => {
+        
+      },
+      ...props,
+    },
+  );
+};
+
+/**
+ * Seeds the current tenant
+ */
+export function useSeedTenant() {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (values) => apiRequest.post('organization/seed'),
+    {
+      onSuccess: (res) => {
+        
+      },
+    }
+  )
+};

client/src/hooks/query/settings.js

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useQueryTenant } from '../useQueryTenant';
-import { useDispatch } from 'react-redux';
 import useApiRequest from '../useRequest';
-import t from 'store/types';
+import { useSetSettings } from 'hooks/state';
+import t from './types';
 
 /**
  * Saves the settings.
@@ -21,8 +21,8 @@ export function useSaveSettings(props) {
 }
 
 function useSettingsQuery(key, query, props) {
-  const dispatch = useDispatch();
   const apiRequest = useApiRequest();
+  const setSettings = useSetSettings();
 
   const state = useQueryTenant(
     key,
@@ -40,10 +40,10 @@ function useSettingsQuery(key, query, props) {
   );
 
   useEffect(() => {
-    if (typeof state.data !== 'undefined') {
+    if (state.isSuccess) {
-      dispatch({ type: t.SETTING_SET, options: state.data });
+      setSettings(state.data);
     }
-  }, [state.data, dispatch]);
+  }, [state.data, state.isSuccess, setSettings]);
 
   return state.data;
 }

client/src/hooks/query/types.js

@@ -90,7 +90,8 @@ const SETTING = {
 };
 
 const ORGANIZATIONS = {
-  ORGANIZATIONS: 'ORGANIZATIONS'
+  ORGANIZATIONS: 'ORGANIZATIONS',
+  ORGANIZATION_CURRENT: 'ORGANIZATION_CURRENT'
 };
 
 export default {

client/src/hooks/state/authentication.js

@@ -2,13 +2,22 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useCallback } from 'react';
 import { isAuthenticated } from 'store/authentication/authentication.reducer';
 import { setLogin, setLogout } from 'store/authentication/authentication.actions';
+import { useQueryClient } from 'react-query';
 
 export const useAuthActions = () => {
   const dispatch = useDispatch();
+  const queryClient = useQueryClient();
 
   return {
     setLogin: useCallback((login) => dispatch(setLogin(login)), [dispatch]),
-    setLogout: useCallback(() => dispatch(setLogout()), [dispatch]),
+    setLogout: useCallback(() => {
+
+      // Logout action.
+      dispatch(setLogout());
+
+      // Remove all cached queries.
+      queryClient.removeQueries();
+    }, [dispatch, queryClient]),
   };
 };
 

client/src/hooks/state/index.js

@@ -1,3 +1,6 @@
 export * from './dashboard';
 export * from './authentication';
 export * from './globalErrors';
+export * from './subscriptions';
+export * from './organizations';
+export * from './settings';

client/src/hooks/state/organizations.js

@@ -0,0 +1,11 @@
+import { useCallback } from "react";
+import { useDispatch } from "react-redux";
+import { setOrganizations } from 'store/organizations/organizations.actions';
+
+export const useSetOrganizations = () => {
+  const dispatch = useDispatch();
+
+  return useCallback((organizations) => {
+    dispatch(setOrganizations(organizations))    
+  }, [dispatch]);
+};

client/src/hooks/state/settings.js

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { useDispatch } from "react-redux";
+import { setSettings } from 'store/settings/settings.actions';
+
+
+export const useSetSettings = () => {
+  const dispatch =  useDispatch();
+
+  return useCallback((settings) => {
+    dispatch(setSettings(settings));
+  }, [dispatch]);
+};

client/src/hooks/state/subscriptions.js

@@ -0,0 +1,14 @@
+import { useCallback } from "react"
+import { useDispatch } from "react-redux";
+import { setSubscriptions } from 'store/subscription/subscription.actions';
+
+/**
+ * Sets subscriptions.
+ */
+export const useSetSubscriptions = () => {
+  const dispatch = useDispatch();
+
+  return useCallback((subscriptions) => {
+    dispatch(setSubscriptions(subscriptions));
+  }, [dispatch]);
+}

client/src/hooks/useRequest.js

@@ -18,10 +18,11 @@ export default function useApiRequest() {
   const organizationId = useAuthOrganizationId();
 
   const http = React.useMemo(() => {
-    axios.create();
+    // Axios instance.
+    const instance = axios.create();
 
     // Request interceptors.
-    axios.interceptors.request.use(
+    instance.interceptors.request.use(
       (request) => {
         const locale = 'en';
 
@@ -40,9 +41,8 @@ export default function useApiRequest() {
         return Promise.reject(error);
       },
     );
-
     // Response interceptors.
-    axios.interceptors.response.use(
+    instance.interceptors.response.use(
       (response) => response,
       (error) => {
         const { status } = error.response;
@@ -57,8 +57,7 @@ export default function useApiRequest() {
         return Promise.reject(error);
       },
     );
-
+    return instance;
-    return axios;
   }, [token, organizationId, setGlobalErrors, setLogout]);
 
   return {

client/src/store/authentication/authentication.reducer.js

@@ -29,6 +29,8 @@ export default createReducer(initialState, {
     state.token = '';
     state.user = {};
     state.organization = '';
+    state.organizationId = null;
+    state.tenant = {};
   },
 
   [t.LOGIN_CLEAR_ERRORS]: (state) => {

client/src/store/organizations/organizations.actions.js

@@ -1,6 +1,15 @@
 import ApiService from 'services/ApiService';
 import t from 'store/types';
 
+export const setOrganizations = (organizations) => {
+  return {
+    type: t.ORGANIZATIONS_LIST_SET,
+    payload: {
+      organizations,
+    },
+  };
+}
+
 export const fetchOrganizations = () => (dispatch) => new Promise((resolve, reject) => {
   ApiService.get('organization/all').then((response) => {
     dispatch({

client/src/store/settings/settings.actions.js

@@ -29,3 +29,11 @@ export const FetchOptions = ({ form }) => {
         });
     });
 };
+
+
+export const setSettings = (settings) => {
+  return {
+    type: t.SETTING_SET,
+    options: settings,
+  };
+}

client/src/store/subscription/subscription.actions.js

@@ -12,3 +12,13 @@ export const fetchSubscriptions = () => (dispatch) => new Promise((resolve, reje
     resolve(response);
   }).catch((error) => { reject(error); })
 });
+
+
+export const setSubscriptions = (subscriptions) => {
+  return {
+    type: t.SET_PLAN_SUBSCRIPTIONS_LIST,
+    payload: {
+      subscriptions,
+    },
+  }
+};

client/src/style/App.scss

@@ -100,3 +100,80 @@ body.hide-scrollbar .Pane2{
   background-color: rgba(0,10,30, .7);
 }
 
+
+.ReactVirtualized__Collection {
+}
+
+.ReactVirtualized__Collection__innerScrollContainer {
+}
+
+/* Grid default theme */
+
+.ReactVirtualized__Grid {
+}
+
+.ReactVirtualized__Grid__innerScrollContainer {
+}
+
+/* Table default theme */
+
+.ReactVirtualized__Table {
+}
+
+.ReactVirtualized__Table__Grid {
+}
+
+.ReactVirtualized__Table__headerRow {
+  font-weight: 700;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ReactVirtualized__Table__row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ReactVirtualized__Table__headerTruncatedText {
+  display: inline-block;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ReactVirtualized__Table__headerColumn,
+.ReactVirtualized__Table__rowColumn {
+  margin-right: 10px;
+  min-width: 0px;
+}
+.ReactVirtualized__Table__rowColumn {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ReactVirtualized__Table__headerColumn:first-of-type,
+.ReactVirtualized__Table__rowColumn:first-of-type {
+  margin-left: 10px;
+}
+.ReactVirtualized__Table__sortableHeaderColumn {
+  cursor: pointer;
+}
+
+.ReactVirtualized__Table__sortableHeaderIconContainer {
+  display: flex;
+  align-items: center;
+}
+.ReactVirtualized__Table__sortableHeaderIcon {
+  flex: 0 0 24px;
+  height: 1em;
+  width: 1em;
+  fill: currentColor;
+}
+
+/* List default theme */
+
+.ReactVirtualized__List {
+}

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

@@ -68,6 +68,11 @@
       .bp3-context-menu-popover-target{
         z-index: 100;
       }
+
+      .tr-context{
+        display: flex;
+        flex: 1 0 auto;
+      }
     }
 
     .th,
@@ -256,6 +261,11 @@
         }
       }
     }
+
+    .tr-inner{
+      display: flex;
+      width: 100%;
+    }
   }
 
   .no-results {
@@ -314,4 +324,9 @@
       overflow-x: hidden;
     }
   }
+
+
+  .ReactVirtualized__Grid{
+    will-change: auto !important;
+  }
 }

client/src/style/pages/FinancialStatements/FinancialReportPage.scss

@@ -9,7 +9,7 @@
     border-radius: 2px;
     background-color: #fdecda;
     color: #342515;
-    font-size: 12px;
+    font-size: 13px;
 
     button{
       font-size: 12px;
@@ -29,4 +29,10 @@
       fill: #975f19;
     }
   }
+
+  .financial-progressbar{
+    .progress-materializecss{
+      top: -2px;
+    }
+  }
 }

client/src/style/pages/FinancialStatements/Journal.scss

@@ -36,6 +36,10 @@
           font-weight: 600;
         }
 
+        .tr{
+          height: 28px;
+        }
+
       }
     }
   }

client/src/utils.js

@@ -178,8 +178,8 @@ export function formattedExchangeRate(amount, currency) {
   return formatter.format(amount);
 }
 
-export const ConditionalWrapper = ({ condition, wrapper, children }) =>
+export const ConditionalWrapper = ({ condition, wrapper, children, ...rest }) =>
-  condition ? wrapper(children) : children;
+  condition ? wrapper({ children, ...rest }) : children;
 
 export const checkRequiredProperties = (obj, properties) => {
   return properties.some((prop) => {

server/src/api/controllers/Organization.ts

@@ -1,6 +1,6 @@
 import { Inject, Service } from 'typedi';
 import { Router, Request, Response, NextFunction } from 'express';
-import asyncMiddleware from "api/middleware/asyncMiddleware";
+import asyncMiddleware from 'api/middleware/asyncMiddleware';
 import JWTAuth from 'api/middleware/jwtAuth';
 import TenancyMiddleware from 'api/middleware/TenancyMiddleware';
 import SubscriptionMiddleware from 'api/middleware/SubscriptionMiddleware';
@@ -12,7 +12,7 @@ import EnsureConfiguredMiddleware from 'api/middleware/EnsureConfiguredMiddlewar
 import SettingsMiddleware from 'api/middleware/SettingsMiddleware';
 
 @Service()
-export default class OrganizationController extends BaseController{
+export default class OrganizationController extends BaseController {
   @Inject()
   organizationService: OrganizationService;
 
@@ -35,17 +35,12 @@ export default class OrganizationController extends BaseController{
 
     router.use('/build', SubscriptionMiddleware('main'));
 
-    router.post(
+    router.post('/build', asyncMiddleware(this.build.bind(this)));
-      '/build',
+    router.post('/seed', asyncMiddleware(this.seed.bind(this)));
-      asyncMiddleware(this.build.bind(this))
+    router.get('/all', asyncMiddleware(this.allOrganizations.bind(this)));
-    );
-    router.post(
-      '/seed',
-      asyncMiddleware(this.seed.bind(this)),
-    );
     router.get(
-      '/all',
+      '/current',
-      asyncMiddleware(this.allOrganizations.bind(this)),
+      asyncMiddleware(this.currentOrganization.bind(this))
     );
     return router;
   }
@@ -66,7 +61,7 @@ export default class OrganizationController extends BaseController{
       return res.status(200).send({
         type: 'success',
         code: 'ORGANIZATION.DATABASE.INITIALIZED',
-        message: 'The organization database has been initialized.'
+        message: 'The organization database has been initialized.',
       });
     } catch (error) {
       if (error instanceof ServiceError) {
@@ -100,7 +95,7 @@ export default class OrganizationController extends BaseController{
       return res.status(200).send({
         type: 'success',
         code: 'ORGANIZATION.DATABASE.SEED',
-        message: 'The organization database has been seeded.'
+        message: 'The organization database has been seeded.',
       });
     } catch (error) {
       if (error instanceof ServiceError) {
@@ -134,10 +129,31 @@ export default class OrganizationController extends BaseController{
     const { user } = req;
 
     try {
-      const organizations = await this.organizationService.listOrganizations(user);
+      const organizations = await this.organizationService.listOrganizations(
+        user
+      );
       return res.status(200).send({ organizations });
     } catch (error) {
       next(error);
     }
   }
+
+  /**
+   * Retrieve the current organization of the associated authenticated user.
+   * @param {Request} req
+   * @param {Response} res
+   * @param {NextFunction} next
+   */
+  async currentOrganization(req: Request, res: Response, next: NextFunction) {
+    const { tenantId } = req;
+
+    try {
+      const organization = await this.organizationService.currentOrganization(
+        tenantId
+      );
+      return res.status(200).send({ organization });
+    } catch (error) {
+      next(error);
+    }
+  }
 }

server/src/services/Organization/index.ts

@@ -19,6 +19,7 @@ const ERRORS = {
   TENANT_ALREADY_SEEDED: 'tenant_already_seeded',
   TENANT_DB_NOT_BUILT: 'tenant_db_not_built',
 };
+
 @Service()
 export default class OrganizationService {
   @EventDispatcher()
@@ -111,6 +112,20 @@ export default class OrganizationService {
     return [tenant];
   }
 
+  /**
+   * Retrieve the current organization metadata.
+   * @param {number} tenantId 
+   * @returns {Promise<ITenant[]>} 
+   */
+  public async currentOrganization(tenantId: number): Promise<ITenant[]> {
+    const { tenantRepository } = this.sysRepositories;
+    const tenant = await tenantRepository.findOneById(tenantId, ['subscriptions']);
+
+    this.throwIfTenantNotExists(tenant);
+
+    return tenant;
+  }
+
   /**
    * Throws error in case the given tenant is undefined.
    * @param {ITenant} tenant