re-structure to monorepo.

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GLHeaderGeneralPaneProvider.tsx

@@ -0,0 +1,33 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+
+import { useAccounts } from '@/hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const GLHeaderGeneralPanelContext = createContext();
+
+/**
+ * General ledger provider.
+ */
+function GLHeaderGeneralPanelProvider({ ...props }) {
+  // Accounts list.
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+
+  // Provider
+  const provider = {
+    accounts,
+    isAccountsLoading,
+  };
+
+  const loading = isAccountsLoading;
+
+  return loading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <GLHeaderGeneralPanelContext.Provider value={provider} {...props} />
+  );
+}
+
+const useGLGeneralPanelContext = () => useContext(GLHeaderGeneralPanelContext);
+
+export { GLHeaderGeneralPanelProvider, useGLGeneralPanelContext };

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import moment from 'moment';
+
+import GeneralLedgerHeader from './GeneralLedgerHeader';
+import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
+import { GeneralLedgerBody } from './GeneralLedgerBody';
+import { useGeneralLedgerQuery } from './common';
+import { GeneralLedgerProvider } from './GeneralLedgerProvider';
+import { FinancialStatement, DashboardPageContent } from '@/components';
+
+import {
+  GeneralLedgerSheetAlerts,
+  GeneralLedgerSheetLoadingBar,
+} from './components';
+
+import withGeneralLedgerActions from './withGeneralLedgerActions';
+import { compose } from '@/utils';
+
+/**
+ * General Ledger (GL) sheet.
+ */
+function GeneralLedger({
+  // #withGeneralLedgerActions
+  toggleGeneralLedgerFilterDrawer,
+}) {
+  // General ledger query.
+  const { query, setLocationQuery } = useGeneralLedgerQuery();
+
+  // Handle financial statement filter change.
+  const handleFilterSubmit = useCallback(
+    (filter) => {
+      const parsedFilter = {
+        ...filter,
+        fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
+        toDate: moment(filter.toDate).format('YYYY-MM-DD'),
+      };
+      setLocationQuery(parsedFilter);
+    },
+    [setLocationQuery],
+  );
+
+  // Hide the filter drawer once the page unmount.
+  React.useEffect(
+    () => () => {
+      toggleGeneralLedgerFilterDrawer(false);
+    },
+    [toggleGeneralLedgerFilterDrawer],
+  );
+
+  return (
+    <GeneralLedgerProvider query={query}>
+      <GeneralLedgerActionsBar />
+
+      <DashboardPageContent>
+        <FinancialStatement>
+          <GeneralLedgerHeader
+            pageFilter={query}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <GeneralLedgerSheetLoadingBar />
+          <GeneralLedgerSheetAlerts />
+          <GeneralLedgerBody />
+        </FinancialStatement>
+      </DashboardPageContent>
+    </GeneralLedgerProvider>
+  );
+}
+
+export default compose(withGeneralLedgerActions)(GeneralLedger);

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.tsx

@@ -0,0 +1,102 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  NavbarGroup,
+  Button,
+  Classes,
+  NavbarDivider,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+
+import { DashboardActionsBar, FormattedMessage as T, Icon } from '@/components';
+import { useGeneralLedgerContext } from './GeneralLedgerProvider';
+import { compose } from '@/utils';
+
+import withGeneralLedger from './withGeneralLedger';
+import withGeneralLedgerActions from './withGeneralLedgerActions';
+
+/**
+ * General ledger - Actions bar.
+ */
+function GeneralLedgerActionsBar({
+  // #withGeneralLedger
+  isFilterDrawerOpen,
+
+  // #withGeneralLedgerActions
+  toggleGeneralLedgerFilterDrawer: toggleDisplayFilterDrawer,
+}) {
+  const { sheetRefresh } = useGeneralLedgerContext();
+
+  // Handle customize button click.
+  const handleCustomizeClick = () => {
+    toggleDisplayFilterDrawer();
+  };
+
+  // Handle re-calculate button click.
+  const handleRecalcReport = () => {
+    sheetRefresh();
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
+          text={<T id={'recalc_report'} />}
+          onClick={handleRecalcReport}
+          icon={<Icon icon="refresh-16" iconSize={16} />}
+        />
+        <NavbarDivider />
+
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--table-views')}
+          icon={<Icon icon="cog-16" iconSize={16} />}
+          text={
+            isFilterDrawerOpen ? (
+              <T id={'hide_customizer'} />
+            ) : (
+              <T id={'customize_report'} />
+            )
+          }
+          onClick={handleCustomizeClick}
+          active={isFilterDrawerOpen}
+        />
+        <NavbarDivider />
+
+        <Popover
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'filter'} />}
+            icon={<Icon icon="filter-16" iconSize={16} />}
+          />
+        </Popover>
+
+        <NavbarDivider />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" iconSize={16} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withGeneralLedger(({ generalLedgerFilterDrawer }) => ({
+    isFilterDrawerOpen: generalLedgerFilterDrawer,
+  })),
+  withGeneralLedgerActions,
+)(GeneralLedgerActionsBar);

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerBody.tsx

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import GeneralLedgerTable from './GeneralLedgerTable';
+
+import { FinancialSheetSkeleton } from '@/components/FinancialSheet';
+import { FinancialReportBody } from '../FinancialReportPage';
+import { useGeneralLedgerContext } from './GeneralLedgerProvider';
+
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+
+/**
+ * General ledger body JSX.
+ */
+function GeneralLedgerBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isLoading } = useGeneralLedgerContext();
+
+  return (
+    <FinancialReportBody>
+      {isLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <GeneralLedgerTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const GeneralLedgerBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(GeneralLedgerBodyJSX);

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx

@@ -0,0 +1,125 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import styled from 'styled-components';
+import * as Yup from 'yup';
+import { Formik, Form } from 'formik';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+
+import { FormattedMessage as T } from '@/components';
+import { getDefaultGeneralLedgerQuery } from './common';
+import { compose, transformToForm, saveInvoke } from '@/utils';
+
+import FinancialStatementHeader from '../FinancialStatementHeader';
+import GeneralLedgerHeaderGeneralPane from './GeneralLedgerHeaderGeneralPane';
+import GeneralLedgerHeaderDimensionsPanel from './GeneralLedgerHeaderDimensionsPanel';
+
+import withGeneralLedger from './withGeneralLedger';
+import withGeneralLedgerActions from './withGeneralLedgerActions';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+/**
+ * Geenral Ledger (GL) - Header.
+ */
+function GeneralLedgerHeader({
+  // #ownProps
+  onSubmitFilter,
+  pageFilter,
+
+  // #withGeneralLedgerActions
+  toggleGeneralLedgerFilterDrawer: toggleDisplayFilterDrawer,
+
+  // #withGeneralLedger
+  isFilterDrawerOpen,
+}) {
+  // Default values.
+  const defaultValues = getDefaultGeneralLedgerQuery();
+
+  // Initial values.
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultValues,
+  );
+  // Validation schema.
+  const validationSchema = Yup.object().shape({
+    dateRange: Yup.string().optional(),
+    fromDate: Yup.date().required(),
+    toDate: Yup.date().min(Yup.ref('fromDate')).required(),
+  });
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    saveInvoke(onSubmitFilter, values);
+    toggleDisplayFilterDrawer(false);
+    setSubmitting(false);
+  };
+  // Handle cancel button click.
+  const handleCancelClick = () => {
+    toggleDisplayFilterDrawer(false);
+  };
+  // Handle drawer close action.
+  const handleDrawerClose = () => {
+    toggleDisplayFilterDrawer(false);
+  };
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
+  return (
+    <GeneralLedgerDrawerHeader
+      isOpen={isFilterDrawerOpen}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
+      <Formik
+        validationSchema={validationSchema}
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id="general"
+              title={<T id={'general'} />}
+              panel={<GeneralLedgerHeaderGeneralPane />}
+            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<GeneralLedgerHeaderDimensionsPanel />}
+              />
+            )}
+          </Tabs>
+
+          <div class="financial-header-drawer__footer">
+            <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
+              <T id={'calculate_report'} />
+            </Button>
+
+            <Button onClick={handleCancelClick} minimal={true}>
+              <T id={'cancel'} />
+            </Button>
+          </div>
+        </Form>
+      </Formik>
+    </GeneralLedgerDrawerHeader>
+  );
+}
+
+export default compose(
+  withGeneralLedger(({ generalLedgerFilterDrawer }) => ({
+    isFilterDrawerOpen: generalLedgerFilterDrawer,
+  })),
+  withGeneralLedgerActions,
+)(GeneralLedgerHeader);
+
+const GeneralLedgerDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanel.tsx

@@ -0,0 +1,51 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { BranchMultiSelect, Row, Col } from '@/components';
+import {
+  GeneralLedgerHeaderDimensionsPanelProvider,
+  useGeneralLedgerHeaderDimensionsContext,
+} from './GeneralLedgerHeaderDimensionsPanelProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+/**
+ * Gereral ledger sheet header dismension panel.
+ * @returns
+ */
+export default function GeneralLedgerHeaderDimensionsPanel() {
+  return (
+    <GeneralLedgerHeaderDimensionsPanelProvider>
+      <GeneralLedgerHeaderDimensionsPanelContent />
+    </GeneralLedgerHeaderDimensionsPanelProvider>
+  );
+}
+
+/**
+ * Gereral ledger sheet header dismension panel content.
+ * @returns
+ */
+function GeneralLedgerHeaderDimensionsPanelContent() {
+  const { branches } = useGeneralLedgerHeaderDimensionsContext();
+
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
+  return (
+    <Row>
+      <Col xs={4}>
+        {isBranchesFeatureCan && (
+          <FormGroup
+            label={intl.get('branches_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
+      </Col>
+    </Row>
+  );
+}

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanelProvider.tsx

@@ -0,0 +1,48 @@
+// @ts-nocheck
+import React from 'react';
+
+import { Features } from '@/constants';
+import { useBranches } from '@/hooks/query';
+import { useFeatureCan } from '@/hooks/state';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const GeneralLedgerHeaderDimensionsPanelContext = React.createContext();
+
+/**
+ * General Ledger Header Dimensions Panel provider.
+ * @returns
+ */
+function GeneralLedgerHeaderDimensionsPanelProvider({ query, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
+  // Fetches the branches list.
+  const { isLoading: isBranchesLoading, data: branches } = useBranches(query, {
+    enabled: isBranchFeatureCan,
+    keepPreviousData: true,
+  });
+
+  // Provider
+  const provider = {
+    branches,
+    isBranchesLoading,
+  };
+
+  return isBranchesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <GeneralLedgerHeaderDimensionsPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useGeneralLedgerHeaderDimensionsContext = () =>
+  React.useContext(GeneralLedgerHeaderDimensionsPanelContext);
+
+export {
+  GeneralLedgerHeaderDimensionsPanelProvider,
+  useGeneralLedgerHeaderDimensionsContext,
+};

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.tsx

@@ -0,0 +1,65 @@
+// @ts-nocheck
+import React from 'react';
+import { Classes } from '@blueprintjs/core';
+
+import {
+  AccountMultiSelect,
+  Row,
+  Col,
+  FormattedMessage as T,
+  FFormGroup,
+} from '@/components';
+
+import RadiosAccountingBasis from '../RadiosAccountingBasis';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
+import FinancialStatementDateRange from '../FinancialStatementDateRange';
+
+import { filterAccountsOptions } from './common';
+import { useGLGeneralPanelContext } from './GLHeaderGeneralPaneProvider';
+import { GLHeaderGeneralPanelProvider } from './GLHeaderGeneralPaneProvider';
+
+/**
+ * General ledger (GL) - Header - General panel.
+ */
+export default function GLHeaderGeneralPane() {
+  return (
+    <GLHeaderGeneralPanelProvider>
+      <GLHeaderGeneralPaneContent />
+    </GLHeaderGeneralPanelProvider>
+  );
+}
+
+/**
+ * General ledger (GL) - Header - General panel - content.
+ */
+function GLHeaderGeneralPaneContent() {
+  const { accounts } = useGLGeneralPanelContext();
+
+  return (
+    <React.Fragment>
+      <FinancialStatementDateRange />
+
+      <Row>
+        <Col xs={4}>
+          <FinancialStatementsFilter
+            items={filterAccountsOptions}
+            initialSelectedItem={'with-transactions'}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={4}>
+          <FFormGroup
+            label={<T id={'specific_accounts'} />}
+            name={'accountsIds'}
+            className={Classes.FILL}
+          >
+            <AccountMultiSelect name="accountsIds" accounts={accounts} />
+          </FFormGroup>
+        </Col>
+      </Row>
+
+      <RadiosAccountingBasis key={'basis'} />
+    </React.Fragment>
+  );
+}

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+
+import FinancialReportPage from '../FinancialReportPage';
+import { useGeneralLedgerSheet } from '@/hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const GeneralLedgerContext = createContext();
+
+/**
+ * General ledger provider.
+ */
+function GeneralLedgerProvider({ query, ...props }) {
+  // Transformes the report query to request query.
+  const requestQuery = React.useMemo(
+    () => transformFilterFormToQuery(query),
+    [query],
+  );
+
+  const {
+    data: generalLedger,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useGeneralLedgerSheet(requestQuery, { keepPreviousData: true });
+
+  const provider = {
+    generalLedger,
+    sheetRefresh: refetch,
+    isFetching,
+    isLoading,
+  };
+  return (
+    <FinancialReportPage name={'general-ledger-sheet'}>
+      <GeneralLedgerContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+
+const useGeneralLedgerContext = () => useContext(GeneralLedgerContext);
+
+export { GeneralLedgerProvider, useGeneralLedgerContext };

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx

@@ -0,0 +1,120 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { TableStyle } from '@/constants';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from '@/utils';
+import {
+  FinancialSheet,
+  ReportDataTable,
+  TableFastCell,
+  TableVirtualizedListRows,
+} from '@/components';
+
+import { useGeneralLedgerContext } from './GeneralLedgerProvider';
+import { useGeneralLedgerTableColumns } from './components';
+
+/**
+ * General ledger table.
+ */
+export default function GeneralLedgerTable({ companyName }) {
+  // General ledger context.
+  const {
+    generalLedger: { tableRows, query },
+    isLoading,
+  } = useGeneralLedgerContext();
+
+  // General ledger table columns.
+  const columns = useGeneralLedgerTableColumns();
+
+  // Default expanded rows of general ledger table.
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(tableRows, 1),
+    [tableRows],
+  );
+
+  return (
+    <FinancialSheet
+      companyName={companyName}
+      sheetType={intl.get('general_ledger_sheet')}
+      fromDate={query.from_date}
+      toDate={query.to_date}
+      loading={isLoading}
+      fullWidth={true}
+    >
+      <GeneralLedgerDataTable
+        noResults={intl.get(
+          'this_report_does_not_contain_any_data_between_date_period',
+        )}
+        columns={columns}
+        data={tableRows}
+        rowClassNames={tableRowTypesToClassnames}
+        expanded={expandedRows}
+        virtualizedRows={true}
+        fixedItemSize={30}
+        fixedSizeHeight={1000}
+        expandable={true}
+        expandToggleColumn={1}
+        sticky={true}
+        TableRowsRenderer={TableVirtualizedListRows}
+        // #TableVirtualizedListRows props.
+        vListrowHeight={28}
+        vListOverscanRowCount={0}
+        TableCellRenderer={TableFastCell}
+        styleName={TableStyle.Constrant}
+      />
+    </FinancialSheet>
+  );
+}
+
+const GeneralLedgerDataTable = styled(ReportDataTable)`
+  .tbody {
+    .tr .td {
+      padding-top: 0.2rem;
+      padding-bottom: 0.2rem;
+    }
+    .tr.is-expanded {
+      .td:not(.date) .cell-inner {
+        opacity: 0;
+      }
+    }
+
+    .tr:not(.no-results) .td:not(:first-of-type) {
+      border-left: 1px solid #ececec;
+    }
+    .tr:last-child .td {
+      border-bottom: 1px solid #ececec;
+    }
+
+    .tr.row_type {
+      &--ACCOUNT_ROW {
+        .td {
+          &.date {
+            font-weight: 500;
+
+            .cell-inner {
+              white-space: nowrap;
+              position: relative;
+            }
+          }
+        }
+        &:not(:first-child).is-expanded .td {
+          border-top: 1px solid #ddd;
+        }
+      }
+
+      &--OPENING_BALANCE,
+      &--CLOSING_BALANCE {
+        .amount {
+          font-weight: 500;
+        }
+      }
+      &--CLOSING_BALANCE {
+        .name {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+`;

packages/webapp/src/containers/FinancialStatements/GeneralLedger/common.tsx

@@ -0,0 +1,72 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import { castArray } from 'lodash';
+
+import { useAppQueryString } from '@/hooks';
+import { transformToForm } from '@/utils';
+
+// Filters accounts options.
+export const filterAccountsOptions = [
+  {
+    key: 'all-accounts',
+    name: intl.get('all_accounts'),
+    hint: intl.get('all_accounts_including_with_zero_balance'),
+  },
+  {
+    key: 'with-transactions',
+    name: intl.get('accounts_with_transactions'),
+    hint: intl.get(
+      'include_accounts_once_has_transactions_on_given_date_period',
+    ),
+  },
+];
+
+/**
+ * Retrieves the default general ledger query.
+ */
+export const getDefaultGeneralLedgerQuery = () => {
+  return {
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+    basis: 'accural',
+    filterByOption: 'with-transactions',
+    branchesIds: [],
+    accountsIds: [],
+  };
+};
+
+/**
+ * Parses general ledger query of browser location.
+ */
+const parseGeneralLedgerQuery = (locationQuery) => {
+  const defaultQuery = getDefaultGeneralLedgerQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+  return {
+    ...transformed,
+
+    // Ensures the branches, accounts ids is always array.
+    branchesIds: castArray(transformed.branchesIds),
+    accountsIds: castArray(transformed.accountsIds),
+  };
+};
+
+/**
+ * Retrieves the general ledger location query.
+ */
+export const useGeneralLedgerQuery = () => {
+  // Retrieves location query.
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  // Merges the default filter query with location URL query.
+  const query = React.useMemo(
+    () => parseGeneralLedgerQuery(locationQuery),
+    [locationQuery],
+  );
+  return { query, locationQuery, setLocationQuery };
+};

packages/webapp/src/containers/FinancialStatements/GeneralLedger/components.tsx

@@ -0,0 +1,144 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Button } from '@blueprintjs/core';
+import { FormattedMessage as T, Icon, If } from '@/components';
+
+import { getColumnWidth } from '@/utils';
+import { useGeneralLedgerContext } from './GeneralLedgerProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+import { Align } from '@/constants';
+
+/**
+ * Retrieve the general ledger table columns.
+ */
+export function useGeneralLedgerTableColumns() {
+  // General ledger context.
+  const {
+    generalLedger: { tableRows },
+  } = useGeneralLedgerContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'date',
+        className: 'date',
+        width: 120,
+      },
+      {
+        Header: intl.get('account_name'),
+        accessor: 'name',
+        className: 'name',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('transaction_type'),
+        accessor: 'reference_type_formatted',
+        className: 'transaction_type',
+        width: 125,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('transaction_number'),
+        accessor: 'reference_id',
+        className: 'transaction_number',
+        width: 100,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'note',
+        className: 'description',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: 'formatted_credit',
+        className: 'credit',
+        width: getColumnWidth(tableRows, 'formatted_credit', {
+          minWidth: 100,
+          magicSpacing: 10,
+        }),
+        textOverview: true,
+        align: Align.Right,
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: 'formatted_debit',
+        className: 'debit',
+        width: getColumnWidth(tableRows, 'formatted_debit', {
+          minWidth: 100,
+          magicSpacing: 10,
+        }),
+        textOverview: true,
+        align: Align.Right,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'formatted_amount',
+        className: 'amount',
+        width: getColumnWidth(tableRows, 'formatted_amount', {
+          minWidth: 100,
+          magicSpacing: 10,
+        }),
+        textOverview: true,
+        align: Align.Right,
+      },
+      {
+        Header: intl.get('running_balance'),
+        accessor: 'formatted_running_balance',
+        className: 'running_balance',
+        width: getColumnWidth(tableRows, 'formatted_running_balance', {
+          minWidth: 100,
+          magicSpacing: 10,
+        }),
+        textOverview: true,
+        align: Align.Right,
+      },
+    ],
+    [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} />
+        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+          <T id={'refresh'} />
+        </Button>
+      </div>
+    </If>
+  );
+}
+
+/**
+ * General ledger sheet loading bar.
+ */
+export function GeneralLedgerSheetLoadingBar() {
+  const { isFetching } = useGeneralLedgerContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}

packages/webapp/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  getGeneralLedgerFilterDrawer
+} from '@/store/financialStatement/financialStatements.selectors';
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      generalLedgerFilterDrawer: getGeneralLedgerFilterDrawer(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

packages/webapp/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.tsx

@@ -0,0 +1,12 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  toggleGeneralLedgerFilterDrawer,
+} from '@/store/financialStatement/financialStatements.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleGeneralLedgerFilterDrawer: (toggle) =>
+    dispatch(toggleGeneralLedgerFilterDrawer(toggle)),
+});
+
+export default connect(null, mapDispatchToProps);