re-structure to monorepo.

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

@@ -0,0 +1,78 @@
+// @ts-nocheck
+import React, { useState, useCallback, useEffect } from 'react';
+import moment from 'moment';
+
+import { getDefaultAPAgingSummaryQuery } from './common';
+import { FinancialStatement, DashboardPageContent } from '@/components';
+
+import APAgingSummaryHeader from './APAgingSummaryHeader';
+import APAgingSummaryActionsBar from './APAgingSummaryActionsBar';
+
+import { APAgingSummaryBody } from './APAgingSummaryBody';
+import { APAgingSummaryProvider } from './APAgingSummaryProvider';
+import { APAgingSummarySheetLoadingBar } from './components';
+
+import withAPAgingSummaryActions from './withAPAgingSummaryActions';
+
+import { compose } from '@/utils';
+
+/**
+ * A/P aging summary report.
+ */
+function APAgingSummary({
+  // #withSettings
+  organizationName,
+
+  // #withAPAgingSummaryActions
+  toggleAPAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
+}) {
+  const [filter, setFilter] = useState({
+    ...getDefaultAPAgingSummaryQuery(),
+  });
+
+  // Handle filter submit.
+  const handleFilterSubmit = useCallback((filter) => {
+    const _filter = {
+      ...filter,
+      asDate: moment(filter.asDate).format('YYYY-MM-DD'),
+    };
+    setFilter(_filter);
+  }, []);
+
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (numberFormat) => {
+    setFilter({
+      ...filter,
+      numberFormat,
+    });
+  };
+  // Hide the report filter drawer once the page unmount.
+  useEffect(
+    () => () => {
+      toggleDisplayFilterDrawer(false);
+    },
+    [toggleDisplayFilterDrawer],
+  );
+
+  return (
+    <APAgingSummaryProvider filter={filter}>
+      <APAgingSummaryActionsBar
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <APAgingSummarySheetLoadingBar />
+
+      <DashboardPageContent>
+        <FinancialStatement name={'AP-aging-summary'}>
+          <APAgingSummaryHeader
+            pageFilter={filter}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <APAgingSummaryBody organizationName={organizationName} />
+        </FinancialStatement>
+      </DashboardPageContent>
+    </APAgingSummaryProvider>
+  );
+}
+
+export default compose(withAPAgingSummaryActions)(APAgingSummary);

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.tsx

@@ -0,0 +1,124 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  NavbarDivider,
+  NavbarGroup,
+  Classes,
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+
+import classNames from 'classnames';
+import { DashboardActionsBar, FormattedMessage as T, Icon } from '@/components';
+import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
+
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
+
+import withAPAgingSummary from './withAPAgingSummary';
+import withAPAgingSummaryActions from './withAPAgingSummaryActions';
+
+import { saveInvoke, compose } from '@/utils';
+
+/**
+ * AP Aging summary sheet - Actions bar.
+ */
+function APAgingSummaryActionsBar({
+  // #withPayableAgingSummary
+  isFilterDrawerOpen,
+
+  // #withARAgingSummaryActions
+  toggleAPAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
+
+  //#ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+}) {
+  const { isAPAgingFetching, refetch } = useAPAgingSummaryContext();
+
+  const handleFilterToggleClick = () => {
+    toggleFilterDrawerDisplay();
+  };
+
+  // handle recalculate report button.
+  const handleRecalculateReport = () => {
+    refetch();
+  };
+
+  // handle number format submit.
+  const handleNumberFormatSubmit = (numberFormat) => {
+    saveInvoke(onNumberFormatSubmit, numberFormat);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
+          text={<T id={'recalc_report'} />}
+          onClick={handleRecalculateReport}
+          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={handleFilterToggleClick}
+          active={isFilterDrawerOpen}
+        />
+        <NavbarDivider />
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={isAPAgingFetching}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
+        <Button
+          className={Classes.MINIMAL}
+          text={<T id={'filter'} />}
+          icon={<Icon icon="filter-16" iconSize={16} />}
+        />
+        <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(
+  withAPAgingSummaryActions,
+  withAPAgingSummary(({ APAgingSummaryFilterDrawer }) => ({
+    isFilterDrawerOpen: APAgingSummaryFilterDrawer,
+  })),
+)(APAgingSummaryActionsBar);

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryBody.tsx

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import APAgingSummaryTable from './APAgingSummaryTable';
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '@/components/FinancialSheet';
+import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
+
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+
+/**
+ * AP aging summary body.
+ * @returns {JSX.Element}
+ */
+function APAgingSummaryBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isLoading } = useAPAgingSummaryContext();
+
+  return (
+    <FinancialReportBody>
+      {isLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <APAgingSummaryTable organizationName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const APAgingSummaryBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization?.name,
+  })),
+)(APAgingSummaryBodyJSX);

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryGeneralProvider.tsx

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+
+import { useVendors } from '@/hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const APAgingSummaryGeneralContext = createContext();
+
+/**
+ * A/P aging summary provider.
+ */
+function APAgingSummaryGeneralProvider({ filter, ...props }) {
+  // Retrieve the vendors list.
+  const {
+    data: { vendors },
+    isFetching: isVendorsLoading,
+  } = useVendors();
+
+  const provider = {
+    vendors,
+    isVendorsLoading,
+  };
+  // Loading state.
+  const loading = isVendorsLoading;
+
+  return loading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <APAgingSummaryGeneralContext.Provider value={provider} {...props} />
+  );
+}
+
+const useAPAgingSummaryGeneralContext = () =>
+  useContext(APAgingSummaryGeneralContext);
+
+export { APAgingSummaryGeneralProvider, useAPAgingSummaryGeneralContext };

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx

@@ -0,0 +1,132 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import * as Yup from 'yup';
+import styled from 'styled-components';
+import { FormattedMessage as T } from '@/components';
+import { Formik, Form } from 'formik';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+
+import FinancialStatementHeader from '@/containers/FinancialStatements/FinancialStatementHeader';
+import APAgingSummaryHeaderGeneral from './APAgingSummaryHeaderGeneral';
+import APAgingSummaryHeaderDimensions from './APAgingSummaryHeaderDimensions';
+
+import withAPAgingSummary from './withAPAgingSummary';
+import withAPAgingSummaryActions from './withAPAgingSummaryActions';
+
+import { transformToForm, compose } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+/**
+ * AP Aging Summary Report - Drawer Header.
+ */
+function APAgingSummaryHeader({
+  // #ownProps
+  pageFilter,
+  onSubmitFilter,
+
+  // #withAPAgingSummaryActions
+  toggleAPAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
+
+  // #withAPAgingSummary
+  isFilterDrawerOpen,
+}) {
+  // Validation schema.
+  const validationSchema = Yup.object({
+    asDate: Yup.date().required().label('asDate'),
+    agingDaysBefore: Yup.number()
+      .required()
+      .integer()
+      .positive()
+      .label('agingBeforeDays'),
+    agingPeriods: Yup.number()
+      .required()
+      .integer()
+      .positive()
+      .label('agingPeriods'),
+  });
+
+  // Initial values.
+  const defaultValues = {
+    asDate: moment(pageFilter.asDate).toDate(),
+    agingDaysBefore: 30,
+    agingPeriods: 3,
+    vendorsIds: [],
+    branchesIds: [],
+    filterByOption: 'without-zero-balance',
+  };
+  // Formik initial values.
+  const initialValues = transformToForm({ ...pageFilter }, defaultValues);
+
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    toggleFilterDrawerDisplay(false);
+    setSubmitting(false);
+  };
+
+  // Handle cancel button click.
+  const handleCancelClick = () => {
+    toggleFilterDrawerDisplay(false);
+  };
+  // Handle the drawer closing.
+  const handleDrawerClose = () => {
+    toggleFilterDrawerDisplay(false);
+  };
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
+  return (
+    <APAgingDrawerHeader
+      isOpen={isFilterDrawerOpen}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id={'general'}
+              title={<T id={'general'} />}
+              panel={<APAgingSummaryHeaderGeneral />}
+            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<APAgingSummaryHeaderDimensions />}
+              />
+            )}
+          </Tabs>
+          <div className={'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>
+    </APAgingDrawerHeader>
+  );
+}
+
+export default compose(
+  withAPAgingSummaryActions,
+  withAPAgingSummary(({ APAgingSummaryFilterDrawer }) => ({
+    isFilterDrawerOpen: APAgingSummaryFilterDrawer,
+  })),
+)(APAgingSummaryHeader);
+
+const APAgingDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderDimensions.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 {
+  APAgingSummaryHeaderDimensionsProvider,
+  useAPAgingSummaryHeaderDimensonsContext,
+} from './APAgingSummaryHeaderDimensionsProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+/**
+ * APAging summary header dimensions.
+ * @returns
+ */
+export default function APAgingSummaryHeaderDimensions() {
+  return (
+    <APAgingSummaryHeaderDimensionsProvider>
+      <APAgingSummaryHeaderDimensionsContent />
+    </APAgingSummaryHeaderDimensionsProvider>
+  );
+}
+
+/**
+ * APAging summary header dimensions content.
+ * @returns
+ */
+function APAgingSummaryHeaderDimensionsContent() {
+  const { branches } = useAPAgingSummaryHeaderDimensonsContext();
+
+  // 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/APAgingSummary/APAgingSummaryHeaderDimensionsProvider.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+import React from 'react';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import { useBranches } from '@/hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const APAgingSummaryHeaderDimensonsContext = React.createContext();
+
+/**
+ * APAging summary header dismensions provider.
+ * @returns
+ */
+function APAgingSummaryHeaderDimensionsProvider({ 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 />
+  ) : (
+    <APAgingSummaryHeaderDimensonsContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useAPAgingSummaryHeaderDimensonsContext = () =>
+  React.useContext(APAgingSummaryHeaderDimensonsContext);
+
+export {
+  APAgingSummaryHeaderDimensionsProvider,
+  useAPAgingSummaryHeaderDimensonsContext,
+};

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import React from 'react';
+import { APAgingSummaryGeneralProvider } from './APAgingSummaryGeneralProvider';
+import APAgingSummaryHeaderGeneralContent from './APAgingSummaryHeaderGeneralContent';
+
+/**
+ * AP Aging Summary - Drawer Header - General panel.
+ */
+export default function APAgingSummaryHeaderGeneral() {
+  return (
+    <APAgingSummaryGeneralProvider>
+      <APAgingSummaryHeaderGeneralContent />
+    </APAgingSummaryGeneralProvider>
+  );
+}

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.tsx

@@ -0,0 +1,127 @@
+// @ts-nocheck
+import React from 'react';
+import { FastField, Field } from 'formik';
+import { DateInput } from '@blueprintjs/datetime';
+import {
+  Intent,
+  FormGroup,
+  InputGroup,
+  Position,
+  Classes,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import {
+  FormattedMessage as T,
+  ContactsMultiSelect,
+  Row,
+  Col,
+  FieldHint,
+} from '@/components';
+import { useAPAgingSummaryGeneralContext } from './APAgingSummaryGeneralProvider';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
+import { filterVendorsOptions } from './constants';
+import {
+  momentFormatter,
+  tansformDateValue,
+  inputIntent,
+  handleDateChange,
+} from '@/utils';
+
+/**
+ * AP Aging Summary - Drawer Header - General panel - Content.
+ */
+export default function APAgingSummaryHeaderGeneralContent() {
+  const { vendors } = useAPAgingSummaryGeneralContext();
+
+  return (
+    <div>
+      <Row>
+        <Col xs={5}>
+          <FastField name={'asDate'}>
+            {({ form, field: { value }, meta: { error } }) => (
+              <FormGroup
+                label={<T id={'as_date'} />}
+                labelInfo={<FieldHint />}
+                fill={true}
+                intent={inputIntent({ error })}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  value={tansformDateValue(value)}
+                  onChange={handleDateChange((selectedDate) => {
+                    form.setFieldValue('asDate', selectedDate);
+                  })}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  minimal={true}
+                  fill={true}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FastField name={'agingDaysBefore'}>
+            {({ field, meta: { error } }) => (
+              <FormGroup
+                label={<T id={'aging_before_days'} />}
+                labelInfo={<FieldHint />}
+                intent={inputIntent({ error })}
+              >
+                <InputGroup intent={error && Intent.DANGER} {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FastField name={'agingPeriods'}>
+            {({ field, meta: { error } }) => (
+              <FormGroup
+                label={<T id={'aging_periods'} />}
+                labelInfo={<FieldHint />}
+                intent={inputIntent({ error })}
+              >
+                <InputGroup intent={error && Intent.DANGER} {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FinancialStatementsFilter
+            items={filterVendorsOptions}
+            label={<T id={'AP_aging_summary.filter_options.label'} />}
+          />
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <Field name={'vendorsIds'}>
+            {({ form: { setFieldValue }, field: { value } }) => (
+              <FormGroup
+                label={<T id={'specific_vendors'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ContactsMultiSelect
+                  items={vendors}
+                  onItemSelect={(vendors) => {
+                    const vendorsIds = vendors.map((customer) => customer.id);
+                    setFieldValue('vendorsIds', vendorsIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
+    </div>
+  );
+}

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.tsx

@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React, { useMemo, createContext, useContext } from 'react';
+
+import FinancialReportPage from '../FinancialReportPage';
+import { useAPAgingSummaryReport } from '@/hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const APAgingSummaryContext = createContext();
+
+/**
+ * A/P aging summary provider.
+ */
+function APAgingSummaryProvider({ filter, ...props }) {
+  // Transformers the filter from to the Url query.
+  const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
+
+  const {
+    data: APAgingSummary,
+    isLoading: isAPAgingLoading,
+    isFetching: isAPAgingFetching,
+    refetch,
+  } = useAPAgingSummaryReport(query, { keepPreviousData: true });
+
+  const provider = {
+    APAgingSummary,
+
+    isAPAgingLoading,
+    isAPAgingFetching,
+    refetch,
+  };
+
+  return (
+    <FinancialReportPage name={'AP-Aging-Summary'}>
+      <APAgingSummaryContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+
+const useAPAgingSummaryContext = () => useContext(APAgingSummaryContext);
+
+export { APAgingSummaryProvider, useAPAgingSummaryContext };

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx

@@ -0,0 +1,59 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { TableStyle } from '@/constants';
+import { ReportDataTable, FinancialSheet } from '@/components';
+
+import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
+import { useAPAgingSummaryColumns } from './components';
+
+import { tableRowTypesToClassnames } from '@/utils';
+
+/**
+ * AP aging summary table sheet.
+ */
+export default function APAgingSummaryTable({
+  //#ownProps
+  organizationName,
+}) {
+  // AP aging summary report content.
+  const {
+    APAgingSummary: { tableRows },
+    isAPAgingLoading,
+  } = useAPAgingSummaryContext();
+
+  // AP aging summary columns.
+  const columns = useAPAgingSummaryColumns();
+
+  return (
+    <FinancialSheet
+      companyName={organizationName}
+      sheetType={intl.get('payable_aging_summary')}
+      asDate={new Date()}
+      loading={isAPAgingLoading}
+    >
+      <APAgingSummaryDataTable
+        columns={columns}
+        data={tableRows}
+        rowClassNames={tableRowTypesToClassnames}
+        noInitialFetch={true}
+        sticky={true}
+        styleName={TableStyle.Constrant}
+      />
+    </FinancialSheet>
+  );
+}
+
+const APAgingSummaryDataTable = styled(ReportDataTable)`
+  .table {
+    .tbody .tr {
+      .td {
+        border-bottom: 0;
+        padding-top: 0.32rem;
+        padding-bottom: 0.32rem;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,18 @@
+// @ts-nocheck
+import moment from 'moment';
+import { transformToCamelCase, flatObject } from '@/utils';
+
+export const transformFilterFormToQuery = (form) => {
+  return flatObject(transformToCamelCase(form));
+};
+
+export const getDefaultAPAgingSummaryQuery = () => {
+  return {
+    asDate: moment().endOf('day').format('YYYY-MM-DD'),
+    agingDaysBefore: 30,
+    agingPeriods: 3,
+    vendorsIds: [],
+    branchesIds: [],
+    filterByOption: 'without-zero-balance',
+  }
+}

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

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import { If, FormattedMessage as T } from '@/components';
+import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
+import { getColumnWidth } from '@/utils';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+/**
+ * Retrieve AP aging summary columns.
+ */
+export const useAPAgingSummaryColumns = () => {
+  const {
+    APAgingSummary: { tableRows, columns },
+  } = useAPAgingSummaryContext();
+
+  const agingColumns = React.useMemo(() => {
+    return columns.map(
+      (agingColumn) =>
+        `${agingColumn.before_days} - ${
+          agingColumn.to_days || intl.get('and_over')
+        }`,
+    );
+  }, [columns]);
+
+  return useMemo(
+    () => [
+      {
+        Header: <T id={'vendor_name'} />,
+        accessor: 'name',
+        className: 'vendor_name',
+        width: 240,
+        sticky: 'left',
+        textOverview: true,
+      },
+      {
+        Header: <T id={'current'} />,
+        accessor: 'current',
+        className: 'current',
+        width: getColumnWidth(tableRows, `current`, { minWidth: 120 }),
+      },
+      ...agingColumns.map((agingColumn, index) => ({
+        Header: agingColumn,
+        accessor: `aging-${index}`,
+        width: getColumnWidth(tableRows, `aging-${index}`, { minWidth: 120 }),
+      })),
+      {
+        Header: <T id={'total'} />,
+        accessor: 'total',
+        width: getColumnWidth(tableRows, 'total', { minWidth: 120 }),
+      },
+    ],
+    [tableRows, agingColumns],
+  );
+};
+
+/**
+ * A/P aging summary sheet loading bar.
+ */
+export function APAgingSummarySheetLoadingBar() {
+  const { isAPAgingFetching } = useAPAgingSummaryContext();
+
+  return (
+    <If condition={isAPAgingFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}

packages/webapp/src/containers/FinancialStatements/APAgingSummary/constants.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import intl from 'react-intl-universal';
+
+export const filterVendorsOptions = [
+  {
+    key: 'all-vendors',
+    name: intl.get('AP_aging_summary.filter_vendors.all_vendors'),
+    hint: intl.get('AP_aging_summary.filter_vendors.all_vendors.hint'),
+  },
+  {
+    key: 'without-zero-balance',
+    name: intl.get('AP_aging_summary.filter_vendors.without_zero_balance'),
+    hint: intl.get('AP_aging_summary.filter_vendors.without_zero_balance.hint'),
+  },
+];

packages/webapp/src/containers/FinancialStatements/APAgingSummary/withAPAgingSummary.tsx

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

packages/webapp/src/containers/FinancialStatements/APAgingSummary/withAPAgingSummaryActions.tsx

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

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

@@ -0,0 +1,72 @@
+// @ts-nocheck
+import React, { useState, useCallback, useEffect } from 'react';
+import moment from 'moment';
+
+
+import ARAgingSummaryHeader from './ARAgingSummaryHeader';
+import ARAgingSummaryActionsBar from './ARAgingSummaryActionsBar';
+
+import { FinancialStatement, DashboardPageContent } from '@/components';
+import { ARAgingSummaryProvider } from './ARAgingSummaryProvider';
+import { ARAgingSummarySheetLoadingBar } from './components';
+import { ARAgingSummaryBody } from './ARAgingSummaryBody';
+
+import withARAgingSummaryActions from './withARAgingSummaryActions';
+
+import { getDefaultARAgingSummaryQuery } from './common';
+import { compose } from '@/utils';
+
+/**
+ * A/R aging summary report.
+ */
+function ReceivableAgingSummarySheet({
+  // #withARAgingSummaryActions
+  toggleARAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
+}) {
+  const [filter, setFilter] = useState({
+    ...getDefaultARAgingSummaryQuery(),
+  });
+
+  // Handle filter submit.
+  const handleFilterSubmit = useCallback((filter) => {
+    const _filter = {
+      ...filter,
+      asDate: moment(filter.asDate).format('YYYY-MM-DD'),
+    };
+    setFilter(_filter);
+  }, []);
+
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (numberFormat) => {
+    setFilter({ ...filter, numberFormat });
+  };
+  // Hide the filter drawer once the page unmount.
+  useEffect(
+    () => () => {
+      toggleDisplayFilterDrawer(false);
+    },
+    [toggleDisplayFilterDrawer],
+  );
+
+  return (
+    <ARAgingSummaryProvider filter={filter}>
+      <ARAgingSummaryActionsBar
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <ARAgingSummarySheetLoadingBar />
+
+      <DashboardPageContent>
+        <FinancialStatement>
+          <ARAgingSummaryHeader
+            pageFilter={filter}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <ARAgingSummaryBody />
+        </FinancialStatement>
+      </DashboardPageContent>
+    </ARAgingSummaryProvider>
+  );
+}
+
+export default compose(withARAgingSummaryActions)(ReceivableAgingSummarySheet);

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx

@@ -0,0 +1,126 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  NavbarDivider,
+  NavbarGroup,
+  Classes,
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { DashboardActionsBar, FormattedMessage as T, Icon } from '@/components';
+import classNames from 'classnames';
+
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
+
+import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
+import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
+import withARAgingSummaryActions from './withARAgingSummaryActions';
+import withARAgingSummary from './withARAgingSummary';
+
+import { compose } from '@/utils';
+
+/**
+ * A/R Aging summary sheet - Actions bar.
+ */
+function ARAgingSummaryActionsBar({
+  // #withReceivableAging
+  isFilterDrawerOpen,
+
+  // #withReceivableAgingActions
+  toggleARAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
+
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+}) {
+  const { isARAgingFetching, refetch } = useARAgingSummaryContext();
+
+  const handleFilterToggleClick = () => {
+    toggleDisplayFilterDrawer();
+  };
+
+  // Handles re-calculate report button.
+  const handleRecalcReport = () => {
+    refetch();
+  };
+
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (numberFormat) => {
+    safeInvoke(onNumberFormatSubmit, numberFormat);
+  };
+
+  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={handleFilterToggleClick}
+          active={isFilterDrawerOpen}
+        />
+        <NavbarDivider />
+
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={isARAgingFetching}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
+        <Button
+          className={Classes.MINIMAL}
+          text={<T id={'filter'} />}
+          icon={<Icon icon="filter-16" iconSize={16} />}
+        />
+        <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(
+  withARAgingSummaryActions,
+  withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
+    isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
+  })),
+)(ARAgingSummaryActionsBar);

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryBody.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import ARAgingSummaryTable from './ARAgingSummaryTable';
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '@/components';
+import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
+
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+/**
+ * A/R Aging summary body.
+ * @returns {JSX.Element}
+ */
+function ARAgingSummaryBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isARAgingLoading } = useARAgingSummaryContext();
+
+  return (
+    <FinancialReportBody>
+      {isARAgingLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <ARAgingSummaryTable organizationName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const ARAgingSummaryBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(ARAgingSummaryBodyJSX);

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryGeneralProvider.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import { useCustomers } from '@/hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const ARAgingSummaryGeneralContext = createContext();
+
+/**
+ * A/R aging summary general tab provider.
+ */
+function ARAgingSummaryGeneralProvider({ ...props }) {
+  // Retrieve the customers list.
+  const {
+    data: { customers },
+    isLoading: isCustomersLoading,
+  } = useCustomers();
+
+  const provider = {
+    customers,
+    isCustomersLoading,
+  };
+  // Loading state.
+  const loading = isCustomersLoading;
+
+  return loading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <ARAgingSummaryGeneralContext.Provider value={provider} {...props} />
+  );
+}
+
+const useARAgingSummaryGeneralContext = () =>
+  useContext(ARAgingSummaryGeneralContext);
+
+export { ARAgingSummaryGeneralProvider, useARAgingSummaryGeneralContext };

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx

@@ -0,0 +1,137 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import moment from 'moment';
+import * as Yup from 'yup';
+import { FormattedMessage as T } from '@/components';
+import { Formik, Form } from 'formik';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+
+import FinancialStatementHeader from '@/containers/FinancialStatements/FinancialStatementHeader';
+import ARAgingSummaryHeaderGeneral from './ARAgingSummaryHeaderGeneral';
+import ARAgingSummaryHeaderDimensions from './ARAgingSummaryHeaderDimensions';
+
+import withARAgingSummary from './withARAgingSummary';
+import withARAgingSummaryActions from './withARAgingSummaryActions';
+
+import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+/**
+ * AR Aging Summary Report - Drawer Header.
+ */
+function ARAgingSummaryHeader({
+  // #ownProps
+  pageFilter,
+  onSubmitFilter,
+
+  // #withReceivableAgingSummaryActions
+  toggleARAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
+
+  // #withARAgingSummary
+  isFilterDrawerOpen,
+}) {
+  // Validation schema.
+  const validationSchema = Yup.object().shape({
+    asDate: Yup.date().required().label('asDate'),
+    agingDaysBefore: Yup.number()
+      .required()
+      .integer()
+      .positive()
+      .label('agingDaysBefore'),
+    agingPeriods: Yup.number()
+      .required()
+      .integer()
+      .positive()
+      .label('agingPeriods'),
+  });
+  // Initial values.
+  const defaultValues = {
+    asDate: moment().toDate(),
+    agingDaysBefore: 30,
+    agingPeriods: 3,
+    customersIds: [],
+    branchesIds: [],
+    filterByOption: 'without-zero-balance',
+  };
+
+  // Initial values.
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      asDate: moment(pageFilter.asDate).toDate(),
+    },
+    defaultValues,
+  );
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    toggleFilterDrawerDisplay(false);
+    setSubmitting(false);
+  };
+  // Handle cancel button click.
+  const handleCancelClick = () => {
+    toggleFilterDrawerDisplay(false);
+  };
+  // Handle the drawer close.
+  const handleDrawerClose = () => {
+    toggleFilterDrawerDisplay(false);
+  };
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
+  return (
+    <ARAgingDrawerHeader
+      isOpen={isFilterDrawerOpen}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id="general"
+              title={<T id={'general'} />}
+              panel={<ARAgingSummaryHeaderGeneral />}
+            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<ARAgingSummaryHeaderDimensions />}
+              />
+            )}
+          </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>
+    </ARAgingDrawerHeader>
+  );
+}
+
+export default compose(
+  withARAgingSummaryActions,
+  withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
+    isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
+  })),
+)(ARAgingSummaryHeader);
+
+const ARAgingDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderDimensions.tsx

@@ -0,0 +1,49 @@
+// @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 {
+  ARAgingSummaryHeaderDimensionsProvider,
+  useARAgingSummaryHeaderDimensonsContext,
+} from './ARAgingSummaryHeaderDimensionsProvider';
+
+/**
+ * ARAging summary header dimensions.
+ * @returns {JSX.Element}
+ */
+export default function ARAgingSummaryHeaderDimensions() {
+  return (
+    <ARAgingSummaryHeaderDimensionsProvider>
+      <ARAgingSummaryHeaderDimensionsContent />
+    </ARAgingSummaryHeaderDimensionsProvider>
+  );
+}
+
+/**
+ * ARAging summary header dimensions content.
+ * @returns {JSX.Element}
+ */
+function ARAgingSummaryHeaderDimensionsContent() {
+  const { branches } = useARAgingSummaryHeaderDimensonsContext();
+
+  // 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/ARAgingSummary/ARAgingSummaryHeaderDimensionsProvider.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+import React from 'react';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import { useBranches } from '@/hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const ARAgingSummaryHeaderDimensonsContext = React.createContext();
+
+/**
+ * ARAging summary header dismensions provider.
+ * @returns
+ */
+function ARAgingSummaryHeaderDimensionsProvider({ 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 />
+  ) : (
+    <ARAgingSummaryHeaderDimensonsContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useARAgingSummaryHeaderDimensonsContext = () =>
+  React.useContext(ARAgingSummaryHeaderDimensonsContext);
+
+export {
+  ARAgingSummaryHeaderDimensionsProvider,
+  useARAgingSummaryHeaderDimensonsContext,
+};

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import React from 'react';
+import { ARAgingSummaryGeneralProvider } from './ARAgingSummaryGeneralProvider';
+import ARAgingSummaryHeaderGeneralContent from './ARAgingSummaryHeaderGeneralContent';
+
+/**
+ * AR Aging Summary - Drawer Header - General Fields - Content.
+ */
+export default function ARAgingSummaryHeaderGeneral() {
+  return (
+    <ARAgingSummaryGeneralProvider>
+      <ARAgingSummaryHeaderGeneralContent />
+    </ARAgingSummaryGeneralProvider>
+  );
+}

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.tsx

@@ -0,0 +1,136 @@
+// @ts-nocheck
+import React from 'react';
+import { FastField, Field } from 'formik';
+import { DateInput } from '@blueprintjs/datetime';
+import {
+  Intent,
+  FormGroup,
+  InputGroup,
+  Position,
+  Classes,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
+import {
+  FormattedMessage as T,
+  ContactsMultiSelect,
+  Row,
+  Col,
+  FieldHint,
+} from '@/components';
+import { momentFormatter } from '@/utils';
+import { useARAgingSummaryGeneralContext } from './ARAgingSummaryGeneralProvider';
+import { filterCustomersOptions } from './constants';
+
+/**
+ * AR Aging Summary - Drawer Header - General Fields.
+ */
+export default function ARAgingSummaryHeaderGeneralContent() {
+  // AR Aging summary context.
+  const { customers } = useARAgingSummaryGeneralContext();
+
+  return (
+    <div>
+      <Row>
+        <Col xs={5}>
+          <FastField name={'asDate'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'as_date'} />}
+                labelInfo={<FieldHint />}
+                fill={true}
+                intent={error && Intent.DANGER}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  value={value}
+                  onChange={(selectedDate) => {
+                    form.setFieldValue('asDate', selectedDate);
+                  }}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  minimal={true}
+                  fill={true}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FastField name={'agingDaysBefore'}>
+            {({ field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'aging_before_days'} />}
+                labelInfo={<FieldHint />}
+                className={'form-group--aging-before-days'}
+                intent={error && Intent.DANGER}
+              >
+                <InputGroup
+                  medium={true}
+                  intent={error && Intent.DANGER}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FastField name={'agingPeriods'}>
+            {({ field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'aging_periods'} />}
+                labelInfo={<FieldHint />}
+                className={'form-group--aging-periods'}
+                intent={error && Intent.DANGER}
+              >
+                <InputGroup
+                  medium={true}
+                  intent={error && Intent.DANGER}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FinancialStatementsFilter
+            items={filterCustomersOptions}
+            label={<T id={'AR_aging_summary.filter_options.label'} />}
+          />
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <Field name="customersIds">
+            {({ form: { setFieldValue }, field: { value } }) => (
+              <FormGroup
+                label={<T id={'specific_customers'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ContactsMultiSelect
+                  items={customers}
+                  onItemSelect={(customers) => {
+                    const customersIds = customers.map(
+                      (customer) => customer.id,
+                    );
+                    setFieldValue('customersIds', customersIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
+    </div>
+  );
+}

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.tsx

@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React, { useMemo, createContext, useContext } from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useARAgingSummaryReport } from '@/hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const ARAgingSummaryContext = createContext();
+
+/**
+ * A/R aging summary provider.
+ */
+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, { keepPreviousData: true });
+
+  const provider = {
+    ARAgingSummary,
+
+    isARAgingLoading,
+    isARAgingFetching,
+    refetch,
+  };
+
+  return (
+    <FinancialReportPage name={'AR-Aging-Summary'}>
+      <ARAgingSummaryContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+
+const useARAgingSummaryContext = () => useContext(ARAgingSummaryContext);
+
+export { ARAgingSummaryProvider, useARAgingSummaryContext };

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx

@@ -0,0 +1,75 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { TableStyle } from '@/constants';
+import { ReportDataTable, FinancialSheet } from '@/components';
+
+import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
+import { useARAgingSummaryColumns } from './components';
+
+import { tableRowTypesToClassnames } from '@/utils';
+
+/**
+ * AR aging summary table sheet.
+ */
+export default function ReceivableAgingSummaryTable({
+  // #ownProps
+  organizationName,
+}) {
+  // AR aging summary report context.
+  const { ARAgingSummary, isARAgingLoading } = useARAgingSummaryContext();
+
+  // AR aging summary columns.
+  const columns = useARAgingSummaryColumns();
+
+  return (
+    <FinancialSheet
+      companyName={organizationName}
+      sheetType={intl.get('receivable_aging_summary')}
+      asDate={new Date()}
+      loading={isARAgingLoading}
+    >
+      <ARAgingSummaryDataTable
+        columns={columns}
+        data={ARAgingSummary.tableRows}
+        rowClassNames={tableRowTypesToClassnames}
+        noInitialFetch={true}
+        sticky={true}
+        styleName={TableStyle.Constrant}
+      />
+    </FinancialSheet>
+  );
+}
+
+const ARAgingSummaryDataTable = styled(ReportDataTable)`
+  .table {
+    .tbody .tr {
+      .td {
+        border-bottom: 0;
+        padding-top: 0.32rem;
+        padding-bottom: 0.32rem;
+      }
+
+      &:not(.no-results) {
+        .td {
+          border-bottom: 0;
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
+        }
+        &:not(:first-child) .td {
+          border-top: 1px solid transparent;
+        }
+        &.row_type--total {
+          font-weight: 500;
+
+          .td {
+            border-top: 1px solid #bbb;
+            border-bottom: 3px double #333;
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import moment from 'moment';
+import { transformToCamelCase, flatObject } from '@/utils';
+
+export const transfromFilterFormToQuery = (form) => {
+  return flatObject(transformToCamelCase(form));
+};
+
+/**
+ * Retrieves the default A/R aging summary query.
+ */
+export const getDefaultARAgingSummaryQuery = () => {
+  return {
+    asDate: moment().endOf('day').format('YYYY-MM-DD'),
+    agingDaysBefore: 30,
+    agingPeriods: 3,
+    customersIds: [],
+    filterByOption: 'without-zero-balance',
+    branchesIds: [],
+  };
+};

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

@@ -0,0 +1,82 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
+import { If, FormattedMessage as T } from '@/components';
+import { getColumnWidth } from '@/utils';
+import { Align } from '@/constants';
+
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+/**
+ * Retrieve AR aging summary columns.
+ */
+export const useARAgingSummaryColumns = () => {
+  const {
+    ARAgingSummary: { tableRows, columns },
+  } = useARAgingSummaryContext();
+
+  const agingColumns = React.useMemo(() => {
+    return columns.map(
+      (agingColumn) =>
+        `${agingColumn.before_days} - ${
+          agingColumn.to_days || intl.get('and_over')
+        }`,
+    );
+  }, [columns]);
+
+  return React.useMemo(
+    () => [
+      {
+        Header: <T id={'customer_name'} />,
+        accessor: 'name',
+        className: 'customer_name',
+        sticky: 'left',
+        width: 240,
+        textOverview: true,
+      },
+      {
+        Header: <T id={'current'} />,
+        accessor: 'current',
+        className: 'current',
+        width: getColumnWidth(tableRows, `current`, {
+          minWidth: 120,
+        }),
+        align: Align.Right
+      },
+      ...agingColumns.map((agingColumn, index) => ({
+        Header: agingColumn,
+        accessor: `aging-${index}`,
+        width: getColumnWidth(tableRows, `aging-${index}`, {
+          minWidth: 120,
+        }),
+        align: Align.Right
+      })),
+      {
+        Header: <T id={'total'} />,
+        id: 'total',
+        accessor: 'total',
+        className: 'total',
+        width: getColumnWidth(tableRows, 'total', {
+          minWidth: 120,
+        }),
+        align: Align.Right
+      },
+    ],
+    [tableRows, agingColumns],
+  );
+};
+
+/**
+ * A/R aging summary sheet loading bar.
+ */
+export function ARAgingSummarySheetLoadingBar() {
+  const { isARAgingFetching } = useARAgingSummaryContext();
+
+  return (
+    <If condition={isARAgingFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/constants.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import intl from 'react-intl-universal';
+
+export const filterCustomersOptions = [
+  {
+    key: 'all-customers',
+    name: intl.get('AR_aging_summary.filter_customers.all_customers'),
+    hint: intl.get('AR_aging_summary.filter_customers.all_customers.hint'),
+  },
+  {
+    key: 'without-zero-balance',
+    name: intl.get('AR_aging_summary.filter_customers.without_zero_balance'),
+    hint: intl.get(
+      'AR_aging_summary.filter_customers.without_zero_balance.hint',
+    ),
+  },
+];

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummary.tsx

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

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummaryActions.tsx

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

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

@@ -0,0 +1,74 @@
+// @ts-nocheck
+import React, { useEffect } from 'react';
+import moment from 'moment';
+
+import { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components';
+import { FinancialStatement, DashboardPageContent } from '@/components';
+
+import BalanceSheetHeader from './BalanceSheetHeader';
+import BalanceSheetActionsBar from './BalanceSheetActionsBar';
+import { BalanceSheetProvider } from './BalanceSheetProvider';
+import { BalanceSheetBody } from './BalanceSheetBody';
+import { useBalanceSheetQuery } from './utils';
+import { compose } from '@/utils';
+
+import withBalanceSheetActions from './withBalanceSheetActions';
+
+/**
+ * Balance sheet.
+ * @returns {React.JSX}
+ */
+function BalanceSheet({
+  // #withBalanceSheetActions
+  toggleBalanceSheetFilterDrawer,
+}) {
+  // Balance sheet query.
+  const { query, setLocationQuery } = useBalanceSheetQuery();
+
+  // Handle re-fetch balance sheet after filter change.
+  const handleFilterSubmit = (filter) => {
+    const newFilter = {
+      ...filter,
+      fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
+      toDate: moment(filter.toDate).format('YYYY-MM-DD'),
+    };
+    setLocationQuery({ ...newFilter });
+  };
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (values) => {
+    setLocationQuery({
+      ...query,
+      numberFormat: values,
+    });
+  };
+  // Hides the balance sheet filter drawer once the page unmount.
+  useEffect(
+    () => () => {
+      toggleBalanceSheetFilterDrawer(false);
+    },
+    [toggleBalanceSheetFilterDrawer],
+  );
+
+  return (
+    <BalanceSheetProvider filter={query}>
+      <BalanceSheetActionsBar
+        numberFormat={query.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <BalanceSheetLoadingBar />
+      <BalanceSheetAlerts />
+
+      <DashboardPageContent>
+        <FinancialStatement>
+          <BalanceSheetHeader
+            pageFilter={query}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <BalanceSheetBody />
+        </FinancialStatement>
+      </DashboardPageContent>
+    </BalanceSheetProvider>
+  );
+}
+
+export default compose(withBalanceSheetActions)(BalanceSheet);

packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx

@@ -0,0 +1,132 @@
+// @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 NumberFormatDropdown from '@/components/NumberFormatDropdown';
+
+import { compose, saveInvoke } from '@/utils';
+import { useBalanceSheetContext } from './BalanceSheetProvider';
+import withBalanceSheet from './withBalanceSheet';
+import withBalanceSheetActions from './withBalanceSheetActions';
+
+/**
+ * Balance sheet - actions bar.
+ */
+function BalanceSheetActionsBar({
+  // #withBalanceSheet
+  balanceSheetDrawerFilter,
+
+  // #withBalanceSheetActions
+  toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
+
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+}) {
+  const { isLoading, refetchBalanceSheet } = useBalanceSheetContext();
+
+  // Handle filter toggle click.
+  const handleFilterToggleClick = () => {
+    toggleFilterDrawer();
+  };
+
+  // Handle recalculate the report button.
+  const handleRecalcReport = () => {
+    refetchBalanceSheet();
+  };
+
+  // Handle number format form submit.
+  const handleNumberFormatSubmit = (values) => {
+    saveInvoke(onNumberFormatSubmit, values);
+  };
+
+  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={
+            !balanceSheetDrawerFilter ? (
+              <T id={'customize_report'} />
+            ) : (
+              <T id={'hide_customizer'} />
+            )
+          }
+          onClick={handleFilterToggleClick}
+          active={balanceSheetDrawerFilter}
+        />
+        <NavbarDivider />
+
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={isLoading}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
+        <Popover
+          // content={}
+          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(
+  withBalanceSheet(({ balanceSheetDrawerFilter }) => ({
+    balanceSheetDrawerFilter,
+  })),
+  withBalanceSheetActions,
+)(BalanceSheetActionsBar);

packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetBody.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+
+import BalanceSheetTable from './BalanceSheetTable';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+import { FinancialReportBody } from '../FinancialReportPage';
+import { useBalanceSheetContext } from './BalanceSheetProvider';
+import { FinancialSheetSkeleton } from '@/components';
+import { compose } from '@/utils';
+
+/**
+ * Balance sheet body JSX.
+ * @returns {React.JSX}
+ */
+function BalanceSheetBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isLoading } = useBalanceSheetContext();
+
+  return (
+    <FinancialReportBody>
+      {isLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <BalanceSheetTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const BalanceSheetBody = compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(BalanceSheetBodyJSX);

packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx

@@ -0,0 +1,132 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import moment from 'moment';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import { Formik, Form } from 'formik';
+
+import { FormattedMessage as T } from '@/components';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+import withBalanceSheet from './withBalanceSheet';
+import withBalanceSheetActions from './withBalanceSheetActions';
+
+import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal';
+import BalanceSheetHeaderComparisonPanal from './BalanceSheetHeaderComparisonPanal';
+import BalanceSheetHeaderDimensionsPanel from './BalanceSheetHeaderDimensionsPanel';
+import FinancialStatementHeader from '../../FinancialStatements/FinancialStatementHeader';
+
+import { compose, transformToForm } from '@/utils';
+import {
+  getBalanceSheetHeaderValidationSchema,
+  getDefaultBalanceSheetQuery,
+} from './utils';
+
+/**
+ * Balance sheet header.
+ */
+function BalanceSheetHeader({
+  // #ownProps
+  onSubmitFilter,
+  pageFilter,
+
+  // #withBalanceSheet
+  balanceSheetDrawerFilter,
+
+  // #withBalanceSheetActions
+  toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
+}) {
+  const defaultValues = getDefaultBalanceSheetQuery();
+
+  // Filter form initial values.
+  const initialValues = transformToForm(
+    {
+      ...defaultValues,
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultValues,
+  );
+  // Validation schema.
+  const validationSchema = getBalanceSheetHeaderValidationSchema();
+
+  // Handle form submit.
+  const handleSubmit = (values, actions) => {
+    onSubmitFilter(values);
+    toggleFilterDrawer(false);
+    actions.setSubmitting(false);
+  };
+  // Handle cancel button click.
+  const handleCancelClick = () => {
+    toggleFilterDrawer(false);
+  };
+  // Handle drawer close action.
+  const handleDrawerClose = () => {
+    toggleFilterDrawer(false);
+  };
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
+  return (
+    <BalanceSheetFinancialHeader
+      isOpen={balanceSheetDrawerFilter}
+      drawerProps={{
+        onClose: handleDrawerClose,
+      }}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id="general"
+              title={<T id={'general'} />}
+              panel={<BalanceSheetHeaderGeneralPanal />}
+            />
+            <Tab
+              id="comparison"
+              title={<T id={'balance_sheet.comparisons'} />}
+              panel={<BalanceSheetHeaderComparisonPanal />}
+            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'balance_sheet.dimensions'} />}
+                panel={<BalanceSheetHeaderDimensionsPanel />}
+              />
+            )}
+          </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>
+    </BalanceSheetFinancialHeader>
+  );
+}
+
+export default compose(
+  withBalanceSheet(({ balanceSheetDrawerFilter }) => ({
+    balanceSheetDrawerFilter,
+  })),
+  withBalanceSheetActions,
+)(BalanceSheetHeader);
+
+const BalanceSheetFinancialHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;

packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx

@@ -0,0 +1,173 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { FastField, Field } from 'formik';
+import { FormGroup, Checkbox } from '@blueprintjs/core';
+import { Flex, FlexItem, FieldHint, FormattedMessage as T } from '@/components';
+import {
+  handlePreviousYearCheckBoxChange,
+  handlePreviousYearChangeCheckboxChange,
+  handlePreviousPeriodCheckBoxChange,
+  handlePreivousPeriodPercentageCheckboxChange,
+  handlePreviousYearPercentageCheckboxChange,
+  handlePreviousPeriodChangeCheckboxChange,
+} from './utils';
+
+/**
+ * Balance sheet header - Comparison panal - Comparisons fields.
+ */
+function BalanceSheetHeaderComparisonPanalFields() {
+  return (
+    <>
+      {/**----------- Previous Year -----------*/}
+      <Field name={'previousYear'} type={'checkbox'}>
+        {({ form, field }) => (
+          <FormGroup labelInfo={<FieldHint />}>
+            <Checkbox
+              inline={true}
+              label={<T id={'balance_sheet.previous_year'} />}
+              {...field}
+              onChange={handlePreviousYearCheckBoxChange(form)}
+            />
+          </FormGroup>
+        )}
+      </Field>
+
+      <FlexSubFields align={'left'}>
+        <FlexItem col={6}>
+          <Field name={'previousYearAmountChange'} type={'checkbox'}>
+            {({ form, field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  small={true}
+                  label={<T id={'balance_sheet.total_change'} />}
+                  {...field}
+                  onChange={handlePreviousYearChangeCheckboxChange(form)}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </FlexItem>
+
+        <FlexItem col={6}>
+          <FastField name={'previousYearPercentageChange'} type={'checkbox'}>
+            {({ form, field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  label={<T id={'balance_sheet.change'} />}
+                  {...field}
+                  onChange={handlePreviousYearPercentageCheckboxChange(form)}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </FlexItem>
+      </FlexSubFields>
+
+      {/*------------ Previous Period -----------*/}
+      <FastField name={'previousPeriod'} type={'checkbox'}>
+        {({ form, field }) => (
+          <FormGroup labelInfo={<FieldHint />}>
+            <Checkbox
+              inline={true}
+              small={true}
+              label={<T id={'balance_sheet.previous_period'} />}
+              {...field}
+              onChange={handlePreviousPeriodCheckBoxChange(form)}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <FlexSubFields>
+        <FlexItem col={6}>
+          <FastField name={'previousPeriodAmountChange'} type={'checkbox'}>
+            {({ form, field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  small={true}
+                  label={<T id={'balance_sheet.total_change'} />}
+                  {...field}
+                  onChange={handlePreviousPeriodChangeCheckboxChange(form)}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </FlexItem>
+
+        <FlexItem col={6}>
+          <FastField name={'previousPeriodPercentageChange'} type={'checkbox'}>
+            {({ form, field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  label={<T id={'balance_sheet.change'} />}
+                  {...field}
+                  onChange={handlePreivousPeriodPercentageCheckboxChange(form)}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </FlexItem>
+      </FlexSubFields>
+
+      {/**----------- % of Column -----------*/}
+      <FastField name={'percentageOfColumn'} type={'checkbox'}>
+        {({ field }) => (
+          <FormGroup labelInfo={<FieldHint />}>
+            <Checkbox
+              inline={true}
+              small={true}
+              label={<T id={'balance_sheet.percentage_of_column'} />}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/**----------- % of Row -----------*/}
+      <FastField name={'percentageOfRow'} type={'checkbox'}>
+        {({ field }) => (
+          <FormGroup labelInfo={<FieldHint />}>
+            <Checkbox
+              inline={true}
+              small={true}
+              label={<T id={'balance_sheet.percentage_of_row'} />}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </>
+  );
+}
+
+/**
+ * Balance sheet header - Comparison panal.
+ */
+export default function BalanceSheetHeaderComparisonPanal() {
+  return (
+    <BalanceSheetComparisonWrap>
+      <BalanceSheetComparisonFieldsWrap>
+        <BalanceSheetHeaderComparisonPanalFields />
+      </BalanceSheetComparisonFieldsWrap>
+    </BalanceSheetComparisonWrap>
+  );
+}
+
+const BalanceSheetComparisonWrap = styled.div`
+  .bp3-form-group {
+    margin-bottom: 3px;
+  }
+`;
+
+const FlexSubFields = styled(Flex)`
+  padding-left: 20px;
+`;
+
+const BalanceSheetComparisonFieldsWrap = styled.div`
+  width: 400px;
+`;

packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.tsx

@@ -0,0 +1,49 @@
+// @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 {
+  BalanceSheetHeaderDimensionsProvider,
+  useBalanceSheetHeaderDimensionsPanelContext,
+} from './BalanceSheetHeaderDimensionsProvider';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+
+/**
+ * Balance sheet header dismension panel.
+ * @returns
+ */
+export default function BalanceSheetHeaderDimensionsPanel() {
+  return (
+    <BalanceSheetHeaderDimensionsProvider>
+      <BalanceSheetHeaderDimensionsPanelContent />
+    </BalanceSheetHeaderDimensionsProvider>
+  );
+}
+
+/**
+ * Balance sheet header dismension panel content.
+ * @returns
+ */
+function BalanceSheetHeaderDimensionsPanelContent() {
+  const { branches } = useBalanceSheetHeaderDimensionsPanelContext();
+  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/BalanceSheet/BalanceSheetHeaderDimensionsProvider.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 BalanceSheetHeaderDimensionsPanelContext = React.createContext();
+
+/**
+ * BL sheet header provider.
+ * @returns
+ */
+function BalanceSheetHeaderDimensionsProvider({ 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 />
+  ) : (
+    <BalanceSheetHeaderDimensionsPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useBalanceSheetHeaderDimensionsPanelContext = () =>
+  React.useContext(BalanceSheetHeaderDimensionsPanelContext);
+
+export {
+  BalanceSheetHeaderDimensionsProvider,
+  useBalanceSheetHeaderDimensionsPanelContext,
+};

packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderGeneralPanal.tsx

@@ -0,0 +1,28 @@
+// @ts-nocheck
+import React from 'react';
+
+import { Row, Col } from '@/components';
+
+import RadiosAccountingBasis from '../RadiosAccountingBasis';
+import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
+import FinancialStatementDateRange from '../FinancialStatementDateRange';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
+
+/**
+ * Balance sheet header - General panal.
+ */
+export default function BalanceSheetHeaderGeneralTab({}) {
+  return (
+    <div>
+      <FinancialStatementDateRange />
+      <SelectDisplayColumnsBy />
+
+      <Row>
+        <Col xs={4}>
+          <FinancialStatementsFilter initialSelectedItem={'all-accounts'} />
+        </Col>
+      </Row>
+      <RadiosAccountingBasis key={'basis'} />
+    </div>
+  );
+}

packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+
+import FinancialReportPage from '../FinancialReportPage';
+import { useBalanceSheet } from '@/hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const BalanceSheetContext = createContext();
+
+function BalanceSheetProvider({ filter, ...props }) {
+  // Transformes the given filter to query.
+  const query = React.useMemo(() => transformFilterFormToQuery(filter), [
+    filter,
+  ]);
+
+  // Fetches the balance sheet report.
+  const {
+    data: balanceSheet,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useBalanceSheet(query, { keepPreviousData: true });
+
+  const provider = {
+    balanceSheet,
+    isFetching,
+    isLoading,
+    refetchBalanceSheet: refetch,
+
+    query,
+    filter,
+  };
+  return (
+    <FinancialReportPage name={'balance-sheet'}>
+      <BalanceSheetContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+
+const useBalanceSheetContext = () => useContext(BalanceSheetContext);
+
+export { BalanceSheetProvider, useBalanceSheetContext };

packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx

@@ -0,0 +1,89 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+
+import { TableStyle } from '@/constants';
+import { ReportDataTable, FinancialSheet } from '@/components';
+import { useBalanceSheetContext } from './BalanceSheetProvider';
+import { useBalanceSheetColumns } from './components';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from '@/utils';
+
+
+/**
+ * Balance sheet table.
+ */
+export default function BalanceSheetTable({
+  // #ownProps
+  companyName,
+}) {
+  // Balance sheet context.
+  const {
+    balanceSheet: { table, query },
+  } = useBalanceSheetContext();
+
+  // Retrieve the database columns.
+  const tableColumns = useBalanceSheetColumns();
+
+  // Retrieve default expanded rows of balance sheet.
+  const expandedRows = React.useMemo(
+    () => defaultExpanderReducer(table.rows, 3),
+    [table],
+  );
+
+  return (
+    <FinancialSheet
+      companyName={companyName}
+      sheetType={intl.get('balance_sheet')}
+      asDate={query.to_date}
+      basis={query.basis}
+    >
+      <BalanceSheetDataTable
+        columns={tableColumns}
+        data={table.rows}
+        rowClassNames={tableRowTypesToClassnames}
+        noInitialFetch={true}
+        expandable={true}
+        expanded={expandedRows}
+        expandToggleColumn={1}
+        expandColumnSpace={0.8}
+        headerLoading={true}
+        sticky={true}
+        styleName={TableStyle.Constrant}
+      />
+    </FinancialSheet>
+  );
+}
+
+const BalanceSheetDataTable = styled(ReportDataTable)`
+  .table {
+    .tbody .tr {
+      .td {
+        border-bottom: 0;
+        padding-top: 0.32rem;
+        padding-bottom: 0.32rem;
+      }
+      &.is-expanded {
+        .td:not(.name) .cell-inner {
+          opacity: 0;
+        }
+      }
+      &.row_type--TOTAL {
+        .td {
+          font-weight: 500;
+          border-top: 1px solid #bbb;
+        }
+      }
+
+      &:last-of-type .td {
+        border-bottom: 1px solid #bbb;
+      }
+      &.row_type--TOTAL.row-id--ASSETS,
+      &.row_type--TOTAL.row-id--LIABILITY_EQUITY {
+        .td {
+          border-bottom: 3px double #000;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import React from 'react';
+import { Button } from '@blueprintjs/core';
+
+import { FormattedMessage as T, Icon, If } from '@/components';
+
+import FinancialLoadingBar from '../FinancialLoadingBar';
+import { useBalanceSheetContext } from './BalanceSheetProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
+import { dynamicColumns } from './dynamicColumns';
+
+/**
+ * Balance sheet alerts.
+ */
+export function BalanceSheetAlerts() {
+  const { isLoading, refetchBalanceSheet, balanceSheet } =
+    useBalanceSheetContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    refetchBalanceSheet();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) return null;
+
+  return (
+    <If condition={balanceSheet.meta.is_cost_compute_running}>
+      <FinancialComputeAlert>
+        <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={'report.compute_running.refresh'} />
+        </Button>
+      </FinancialComputeAlert>
+    </If>
+  );
+}
+
+/**
+ * Balance sheet loading bar.
+ */
+export function BalanceSheetLoadingBar() {
+  const { isFetching } = useBalanceSheetContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}
+
+/**
+ * Retrieve balance sheet columns.
+ */
+export const useBalanceSheetColumns = () => {
+  // Balance sheet context.
+  const {
+    balanceSheet: { table },
+  } = useBalanceSheetContext();
+
+  return React.useMemo(
+    () => dynamicColumns(table.columns, table.rows),
+    [table],
+  );
+};

packages/webapp/src/containers/FinancialStatements/BalanceSheet/dynamicColumns.tsx

@@ -0,0 +1,334 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import { isEmpty } from 'lodash';
+
+import { Align } from '@/constants';
+import { CellTextSpan } from '@/components/Datatable/Cells';
+import { getColumnWidth } from '@/utils';
+
+const getTableCellValueAccessor = (index) => `cells[${index}].value`;
+
+const getReportColWidth = (data, accessor, headerText) => {
+  return getColumnWidth(
+    data,
+    accessor,
+    { magicSpacing: 10, minWidth: 100 },
+    headerText,
+  );
+};
+
+
+/**
+ * Account name column mapper.
+ */
+const accountNameMapper = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
+
+  return {
+    key: column.key,
+    Header: column.label,
+    accessor,
+    className: column.key,
+    textOverview: true,
+    width: Math.max(width, 300),
+    sticky: Align.Left,
+  };
+});
+
+/**
+ * Assoc columns to total column.
+ */
+const assocColumnsToTotalColumn = R.curry((data, column, columnAccessor) => {
+  const columns = totalColumnsComposer(data, column);
+
+  return R.assoc('columns', columns, columnAccessor);
+});
+
+/**
+ * Detarmines whether the given column has children columns.
+ * @returns {boolean}
+ */
+const isColumnHasColumns = (column) => !isEmpty(column.children);
+
+/**
+ *
+ * @param {*} data
+ * @param {*} column
+ * @returns
+ */
+const dateRangeSoloColumnAttrs = (data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    accessor,
+    width: getReportColWidth(data, accessor),
+  };
+};
+
+/**
+ * Date range columns mapper.
+ */
+const dateRangeMapper = R.curry((data, column) => {
+  const isDateColumnHasColumns = isColumnHasColumns(column);
+
+  const columnAccessor = {
+    Header: column.label,
+    key: column.key,
+    disableSortBy: true,
+    textOverview: true,
+    align: isDateColumnHasColumns ? Align.Center : Align.Right,
+  };
+  return R.compose(
+    R.when(
+      R.always(isDateColumnHasColumns),
+      assocColumnsToTotalColumn(data, column),
+    ),
+    R.when(
+      R.always(!isDateColumnHasColumns),
+      R.mergeLeft(dateRangeSoloColumnAttrs(data, column)),
+    ),
+  )(columnAccessor);
+});
+
+/**
+ * Total column mapper.
+ */
+const totalMapper = R.curry((data, column) => {
+  const hasChildren = !isEmpty(column.children);
+  const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
+
+  const columnAccessor = {
+    key: column.key,
+    Header: column.label,
+    accessor,
+    textOverview: true,
+    Cell: CellTextSpan,
+    width,
+    disableSortBy: true,
+    align: hasChildren ? Align.Center : Align.Right,
+  };
+  return R.compose(
+    R.when(R.always(hasChildren), assocColumnsToTotalColumn(data, column)),
+  )(columnAccessor);
+});
+
+/**
+ * `Percentage of column` column accessor.
+ */
+const percentageOfColumnAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width,
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * `Percentage of row` column accessor.
+ */
+const percentageOfRowAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width,
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * Previous year column accessor.
+ */
+const previousYearAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width,
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * Pervious year change column accessor.
+ */
+const previousYearChangeAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width,
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * Previous year percentage column accessor.
+ */
+const previousYearPercentageAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width,
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * Previous period column accessor.
+ */
+const previousPeriodAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width,
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * Previous period change column accessor.
+ */
+const previousPeriodChangeAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width,
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ * Previous period percentage column accessor.
+ */
+const previousPeriodPercentageAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
+
+  return {
+    Header: column.label,
+    key: column.key,
+    accessor,
+    width,
+    align: Align.Right,
+    disableSortBy: true,
+    textOverview: true,
+  };
+});
+
+/**
+ *
+ * @param {*} column
+ * @param {*} index
+ * @returns
+ */
+const totalColumnsMapper = R.curry((data, column) => {
+  return R.compose(
+    R.when(R.pathEq(['key'], 'total'), totalMapper(data)),
+    // Percetage of column/row.
+    R.when(
+      R.pathEq(['key'], 'percentage_of_column'),
+      percentageOfColumnAccessor(data),
+    ),
+    R.when(
+      R.pathEq(['key'], 'percentage_of_row'),
+      percentageOfRowAccessor(data),
+    ),
+    // Previous year.
+    R.when(R.pathEq(['key'], 'previous_year'), previousYearAccessor(data)),
+    R.when(
+      R.pathEq(['key'], 'previous_year_change'),
+      previousYearChangeAccessor(data),
+    ),
+    R.when(
+      R.pathEq(['key'], 'previous_year_percentage'),
+      previousYearPercentageAccessor(data),
+    ),
+    // Pervious period.
+    R.when(R.pathEq(['key'], 'previous_period'), previousPeriodAccessor(data)),
+    R.when(
+      R.pathEq(['key'], 'previous_period_change'),
+      previousPeriodChangeAccessor(data),
+    ),
+    R.when(
+      R.pathEq(['key'], 'previous_period_percentage'),
+      previousPeriodPercentageAccessor(data),
+    ),
+  )(column);
+});
+
+/**
+ * Total sub-columns composer.
+ */
+const totalColumnsComposer = R.curry((data, column) => {
+  return R.map(totalColumnsMapper(data), column.children);
+});
+
+/**
+ * Detarmines the given string starts with `date-range` string.
+ */
+const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0;
+
+/**
+ * Dynamic column mapper.
+ */
+const dynamicColumnMapper = R.curry((data, column) => {
+  const indexTotalMapper = totalMapper(data);
+  const indexAccountNameMapper = accountNameMapper(data);
+  const indexDatePeriodMapper = dateRangeMapper(data);
+
+  return R.compose(
+    R.when(R.pathSatisfies(isMatchesDateRange, ['key']), indexDatePeriodMapper),
+    R.when(R.pathEq(['key'], 'name'), indexAccountNameMapper),
+    R.when(R.pathEq(['key'], 'total'), indexTotalMapper),
+  )(column);
+});
+
+/**
+ * Cash flow dynamic columns.
+ */
+export const dynamicColumns = (columns, data) => {
+  return R.map(dynamicColumnMapper(data), columns);
+};

packages/webapp/src/containers/FinancialStatements/BalanceSheet/utils.tsx

@@ -0,0 +1,182 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import moment from 'moment';
+import * as Yup from 'yup';
+import { castArray } from 'lodash';
+import intl from 'react-intl-universal';
+
+import { transformToForm } from '@/utils';
+import { useAppQueryString } from '@/hooks';
+
+/**
+ * Retrieves the default balance sheet query.
+ * @returns {}
+ */
+export const getDefaultBalanceSheetQuery = () => ({
+  fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+  toDate: moment().endOf('year').format('YYYY-MM-DD'),
+  basis: 'cash',
+  displayColumnsType: 'total',
+  filterByOption: 'without-zero-balance',
+
+  previousYear: false,
+  previousYearAmountChange: false,
+  previousYearPercentageChange: false,
+
+  previousPeriod: false,
+  previousPeriodAmountChange: false,
+  previousPeriodPercentageChange: false,
+
+  // Percentage columns.
+  percentageOfColumn: false,
+  percentageOfRow: false,
+
+  branchesIds: [],
+});
+
+/**
+ * Parses balance sheet query.
+ */
+const parseBalanceSheetQuery = (locationQuery) => {
+  const defaultQuery = getDefaultBalanceSheetQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+  return {
+    ...transformed,
+
+    // Ensures the branches ids is always array.
+    branchesIds: castArray(transformed.branchesIds),
+  };
+};
+
+/**
+ * Retrieves the balance sheet query.
+ */
+export const useBalanceSheetQuery = () => {
+  // Retrieves location query.
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  // Merges the default filter query with location URL query.
+  const query = React.useMemo(
+    () => parseBalanceSheetQuery(locationQuery),
+    [locationQuery],
+  );
+
+  return {
+    query,
+    locationQuery,
+    setLocationQuery,
+  };
+};
+
+/**
+ * Retrieves the balance sheet header default values.
+ */
+export const getBalanceSheetHeaderDefaultValues = () => {
+  return {
+    basic: 'cash',
+    filterByOption: 'without-zero-balance',
+    displayColumnsType: 'total',
+    fromDate: moment().toDate(),
+    toDate: moment().toDate(),
+  };
+};
+
+/**
+ * Retrieves the balance sheet header validation schema.
+ */
+export const getBalanceSheetHeaderValidationSchema = () =>
+  Yup.object().shape({
+    dateRange: Yup.string().optional(),
+    fromDate: Yup.date().required().label(intl.get('fromDate')),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(intl.get('toDate')),
+    filterByOption: Yup.string(),
+    displayColumnsType: Yup.string(),
+  });
+
+/**
+ * Handles previous year checkbox change.
+ */
+export const handlePreviousYearCheckBoxChange = R.curry((form, event) => {
+  const isChecked = event.currentTarget.checked;
+  form.setFieldValue('previousYear', isChecked);
+
+  if (!isChecked) {
+    form.setFieldValue('previousYearAmountChange', isChecked);
+    form.setFieldValue('previousYearPercentageChange', isChecked);
+  }
+});
+
+/**
+ * Handles previous period checkbox change.
+ */
+export const handlePreviousPeriodCheckBoxChange = R.curry((form, event) => {
+  const isChecked = event.currentTarget.checked;
+  form.setFieldValue('previousPeriod', isChecked);
+
+  if (!isChecked) {
+    form.setFieldValue('previousPeriodAmountChange', isChecked);
+    form.setFieldValue('previousPeriodPercentageChange', isChecked);
+  }
+});
+
+/**
+ * Handles previous year change checkbox change.
+ */
+export const handlePreviousYearChangeCheckboxChange = R.curry((form, event) => {
+  const isChecked = event.currentTarget.checked;
+
+  if (isChecked) {
+    form.setFieldValue('previousYear', event.currentTarget.checked);
+  }
+  form.setFieldValue('previousYearAmountChange', event.currentTarget.checked);
+});
+
+/**
+ * Handles preivous year percentage checkbox change.
+ */
+export const handlePreviousYearPercentageCheckboxChange = R.curry(
+  (form, event) => {
+    const isChecked = event.currentTarget.checked;
+
+    if (isChecked) {
+      form.setFieldValue('previousYear', event.currentTarget.checked);
+    }
+    form.setFieldValue('previousYearPercentageChange', isChecked);
+  },
+);
+
+/**
+ * Handles previous period percentage checkbox change.
+ */
+export const handlePreivousPeriodPercentageCheckboxChange = R.curry(
+  (form, event) => {
+    const isChecked = event.currentTarget.checked;
+
+    if (isChecked) {
+      form.setFieldValue('previousPeriod', isChecked);
+    }
+    form.setFieldValue('previousPeriodPercentageChange', isChecked);
+  },
+);
+
+/**
+ * Handle previous period change checkbox change.
+ */
+export const handlePreviousPeriodChangeCheckboxChange = R.curry(
+  (form, event) => {
+    const isChecked = event.currentTarget.checked;
+
+    if (isChecked) {
+      form.setFieldValue('previousPeriod', isChecked);
+    }
+    form.setFieldValue('previousPeriodAmountChange', isChecked);
+  },
+);

packages/webapp/src/containers/FinancialStatements/BalanceSheet/withBalanceSheet.tsx

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

packages/webapp/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.tsx

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

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

@@ -0,0 +1,78 @@
+// @ts-nocheck
+import React, { useEffect } from 'react';
+import moment from 'moment';
+
+import { FinancialStatement, DashboardPageContent } from '@/components';
+import { CashFlowStatementBody } from './CashFlowStatementBody';
+import { CashFlowStatementProvider } from './CashFlowStatementProvider';
+
+import CashFlowStatementHeader from './CashFlowStatementHeader';
+import CashFlowStatementActionsBar from './CashFlowStatementActionsBar';
+
+import withCashFlowStatementActions from './withCashFlowStatementActions';
+import {
+  CashFlowStatementLoadingBar,
+  CashFlowStatementAlerts,
+} from './components';
+
+import { useCashflowStatementQuery } from './utils';
+import { compose } from '@/utils';
+
+/**
+ * Cash flow statement.
+ * @returns {JSX.Element}
+ */
+function CashFlowStatement({
+  // # withCashStatementActions
+  toggleCashFlowStatementFilterDrawer,
+}) {
+  // Cashflow statement query.
+  const { query, setLocationQuery } = useCashflowStatementQuery();
+
+  // Handle refetch cash flow after filter change.
+  const handleFilterSubmit = (filter) => {
+    const newFilter = {
+      ...filter,
+      fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
+      toDate: moment(filter.toDate).format('YYYY-MM-DD'),
+    };
+    setLocationQuery({ ...newFilter });
+  };
+  // Handle format number submit.
+  const handleNumberFormatSubmit = (values) => {
+    setLocationQuery({
+      ...query,
+      numberFormat: values,
+    });
+  };
+
+  useEffect(
+    () => () => {
+      toggleCashFlowStatementFilterDrawer(false);
+    },
+    [toggleCashFlowStatementFilterDrawer],
+  );
+
+  return (
+    <CashFlowStatementProvider filter={query}>
+      <CashFlowStatementActionsBar
+        numberFormat={query.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <CashFlowStatementLoadingBar />
+      <CashFlowStatementAlerts />
+
+      <DashboardPageContent>
+        <FinancialStatement>
+          <CashFlowStatementHeader
+            pageFilter={query}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <CashFlowStatementBody />
+        </FinancialStatement>
+      </DashboardPageContent>
+    </CashFlowStatementProvider>
+  );
+}
+
+export default compose(withCashFlowStatementActions)(CashFlowStatement);

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.tsx

@@ -0,0 +1,133 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  NavbarGroup,
+  NavbarDivider,
+  Button,
+  Classes,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { Icon, FormattedMessage as T, DashboardActionsBar } from '@/components';
+import classNames from 'classnames';
+
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
+
+import { useCashFlowStatementContext } from './CashFlowStatementProvider';
+import withCashFlowStatement from './withCashFlowStatement';
+import withCashFlowStatementActions from './withCashFlowStatementActions';
+
+import { compose, saveInvoke } from '@/utils';
+
+/**
+ * Cash flow statement actions bar.
+ */
+function CashFlowStatementActionsBar({
+  //#withCashFlowStatement
+  isFilterDrawerOpen,
+
+  //#withCashStatementActions
+  toggleCashFlowStatementFilterDrawer,
+
+  //#ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+}) {
+  const { isCashFlowLoading, refetchCashFlow } = useCashFlowStatementContext();
+
+  // Handle filter toggle click.
+  const handleFilterToggleClick = () => {
+    toggleCashFlowStatementFilterDrawer();
+  };
+
+  // Handle recalculate report button.
+  const handleRecalculateReport = () => {
+    refetchCashFlow();
+  };
+
+  // handle number format form submit.
+  const handleNumberFormatSubmit = (values) =>
+    saveInvoke(onNumberFormatSubmit, values);
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
+          text={<T id={'recalc_report'} />}
+          onClick={handleRecalculateReport}
+          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={handleFilterToggleClick}
+          active={isFilterDrawerOpen}
+        />
+
+        <NavbarDivider />
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={isCashFlowLoading}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
+        <Popover
+          // content={}
+          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(
+  withCashFlowStatement(({ cashFlowStatementDrawerFilter }) => ({
+    isFilterDrawerOpen: cashFlowStatementDrawerFilter,
+  })),
+  withCashFlowStatementActions,
+)(CashFlowStatementActionsBar);

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementBody.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import CashFlowStatementTable from './CashFlowStatementTable';
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '@/components/FinancialSheet';
+
+import { useCashFlowStatementContext } from './CashFlowStatementProvider';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+/**
+ * Cashflow stement body.
+ * @returns {React.JSX}
+ */
+function CashFlowStatementBodyJSX({
+  // #withPreferences
+  organizationName,
+}) {
+  const { isCashFlowLoading } = useCashFlowStatementContext();
+
+  return (
+    <FinancialReportBody>
+      {isCashFlowLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <CashFlowStatementTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const CashFlowStatementBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(CashFlowStatementBodyJSX);

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.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 {
+  CashFlowStatementDimensionsPanelProvider,
+  useCashFlowStatementDimensionsPanelContext,
+} from './CashFlowStatementDimensionsPanelProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+/**
+ * Cash flow statement dismension panel.
+ * @returns
+ */
+export default function CashFlowStatementDimensionsPanel() {
+  return (
+    <CashFlowStatementDimensionsPanelProvider>
+      <CashFlowStatementDimensionsPanelContent />
+    </CashFlowStatementDimensionsPanelProvider>
+  );
+}
+
+/**
+ * Cash flow statement dismension panel content.
+ * @returns
+ */
+function CashFlowStatementDimensionsPanelContent() {
+  // Fetches the branches list.
+  const { branches } = useCashFlowStatementDimensionsPanelContext();
+
+  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/CashFlowStatement/CashFlowStatementDimensionsPanelProvider.tsx

@@ -0,0 +1,46 @@
+// @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 CashFlowStatementDimensionsPanelContext = React.createContext();
+
+/**
+ * cash flow statement dimensions panel provider.
+ * @returns
+ */
+function CashFlowStatementDimensionsPanelProvider({ 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 />
+  ) : (
+    <CashFlowStatementDimensionsPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useCashFlowStatementDimensionsPanelContext = () =>
+  React.useContext(CashFlowStatementDimensionsPanelContext);
+
+export {
+  CashFlowStatementDimensionsPanelProvider,
+  useCashFlowStatementDimensionsPanelContext,
+};

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementGeneralPanel.tsx

@@ -0,0 +1,30 @@
+// @ts-nocheck
+import React from 'react';
+
+import { Row, Col } from '@/components';
+import FinancialStatementDateRange from '../FinancialStatementDateRange';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
+import RadiosAccountingBasis from '../RadiosAccountingBasis';
+import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
+
+/**
+ * Cash flow statement header - General panel.
+ */
+
+export default function CashFlowStatementHeaderGeneralPanel() {
+  return (
+    <div>
+      <FinancialStatementDateRange />
+      <SelectDisplayColumnsBy />
+
+      <Row>
+        <Col xs={4}>
+          <FinancialStatementsFilter
+            initialSelectedItem={'with-transactions'}
+          />
+        </Col>
+      </Row>
+      <RadiosAccountingBasis key={'basis'} />
+    </div>
+  );
+}

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.tsx

@@ -0,0 +1,120 @@
+// @ts-nocheck
+import React from 'react';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import * as Yup from 'yup';
+import { Formik, Form } from 'formik';
+
+import FinancialStatementHeader from '../FinancialStatementHeader';
+import CashFlowStatementGeneralPanel from './CashFlowStatementGeneralPanel';
+import CashFlowStatementDimensionsPanel from './CashFlowStatementDimensionsPanel';
+
+import withCashFlowStatement from './withCashFlowStatement';
+import withCashFlowStatementActions from './withCashFlowStatementActions';
+
+import { getDefaultCashFlowSheetQuery } from './utils';
+import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+/**
+ * Cash flow statement header.
+ */
+function CashFlowStatementHeader({
+  // #ownProps
+  onSubmitFilter,
+  pageFilter,
+
+  // #withCashFlowStatement
+  isFilterDrawerOpen,
+
+  // #withCashStatementActions
+  toggleCashFlowStatementFilterDrawer,
+}) {
+  // Filter form default values.
+  const defaultValues = getDefaultCashFlowSheetQuery();
+
+  // Initial form 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().label(intl.get('fromDate')),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(intl.get('toDate')),
+    displayColumnsType: Yup.string(),
+  });
+
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    toggleCashFlowStatementFilterDrawer(false);
+    setSubmitting(false);
+  };
+
+  // Handle drawer close action.
+  const handleDrawerClose = () => {
+    toggleCashFlowStatementFilterDrawer(false);
+  };
+
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
+  return (
+    <FinancialStatementHeader
+      isOpen={isFilterDrawerOpen}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id="general"
+              title={<T id={'general'} />}
+              panel={<CashFlowStatementGeneralPanel />}
+            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<CashFlowStatementDimensionsPanel />}
+              />
+            )}
+          </Tabs>
+
+          <div class="financial-header-drawer__footer">
+            <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
+              <T id={'calculate_report'} />
+            </Button>
+            <Button onClick={handleDrawerClose} minimal={true}>
+              <T id={'cancel'} />
+            </Button>
+          </div>
+        </Form>
+      </Formik>
+    </FinancialStatementHeader>
+  );
+}
+
+export default compose(
+  withCashFlowStatement(({ cashFlowStatementDrawerFilter }) => ({
+    isFilterDrawerOpen: cashFlowStatementDrawerFilter,
+  })),
+  withCashFlowStatementActions,
+)(CashFlowStatementHeader);

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementProvider.tsx

@@ -0,0 +1,46 @@
+// @ts-nocheck
+import React from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useCashFlowStatementReport } from '@/hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const CashFLowStatementContext = React.createContext();
+
+/**
+ * Cash flow statement provider.
+ */
+function CashFlowStatementProvider({ filter, ...props }) {
+  // transforms the given filter to query.
+  const query = React.useMemo(
+    () => transformFilterFormToQuery(filter),
+    [filter],
+  );
+
+  // fetch the cash flow statement report.
+  const {
+    data: cashFlowStatement,
+    isFetching: isCashFlowFetching,
+    isLoading: isCashFlowLoading,
+    refetch: refetchCashFlow,
+  } = useCashFlowStatementReport(query, { keepPreviousData: true });
+
+  const provider = {
+    cashFlowStatement,
+    isCashFlowFetching,
+    isCashFlowLoading,
+    refetchCashFlow,
+    query,
+    filter,
+  };
+
+  return (
+    <FinancialReportPage name="cash-flow-statement">
+      <CashFLowStatementContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+
+const useCashFlowStatementContext = () =>
+  React.useContext(CashFLowStatementContext);
+
+export { CashFlowStatementProvider, useCashFlowStatementContext };

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.tsx

@@ -0,0 +1,90 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { TableStyle } from '@/constants';
+import { DataTable, FinancialSheet } from '@/components';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from '@/utils';
+
+import { useCashFlowStatementColumns } from './components';
+import { useCashFlowStatementContext } from './CashFlowStatementProvider';
+
+/**
+ * Cash flow statement table.
+ */
+export default function CashFlowStatementTable({
+  // #ownProps
+  companyName,
+}) {
+  const {
+    cashFlowStatement: { tableRows },
+    query,
+  } = useCashFlowStatementContext();
+
+  const columns = useCashFlowStatementColumns();
+
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(tableRows, 4),
+    [tableRows],
+  );
+  return (
+    <FinancialSheet
+      companyName={companyName}
+      sheetType={intl.get('statement_of_cash_flow')}
+      fromDate={query.from_date}
+      toDate={query.to_date}
+      basis={query.basis}
+    >
+      <CashflowStatementDataTable
+        columns={columns}
+        data={tableRows}
+        rowClassNames={tableRowTypesToClassnames}
+        noInitialFetch={true}
+        expandable={true}
+        expanded={expandedRows}
+        expandToggleColumn={1}
+        expandColumnSpace={0.8}
+        styleName={TableStyle.Constrant}
+      />
+    </FinancialSheet>
+  );
+}
+
+const CashflowStatementDataTable = styled(DataTable)`
+  .table {
+    .tbody {
+      .tr:not(.no-results) {
+        .td {
+          border-bottom: 0;
+          padding-top: 0.32rem;
+          padding-bottom: 0.32rem;
+        }
+
+        // &.row-type--AGGREGATE,
+        &.row_type--ACCOUNTS {
+          border-top: 1px solid #bbb;
+        }
+        &.row-id--CASH_END_PERIOD {
+          border-bottom: 3px double #333;
+        }
+        &.row_type--TOTAL {
+          font-weight: 500;
+
+          &:not(:first-child) .td {
+            border-top: 1px solid #bbb;
+          }
+        }
+      }
+
+      .tr.is-expanded {
+        .td.total,
+        .td.date-period {
+          .cell-inner {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,64 @@
+// @ts-nocheck
+import React from 'react';
+import { Button } from '@blueprintjs/core';
+
+import { Icon, If, FormattedMessage as T } from '@/components';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+import { dynamicColumns } from './dynamicColumns';
+import { useCashFlowStatementContext } from './CashFlowStatementProvider';
+
+/**
+ * Retrieve cash flow statement columns.
+ */
+export const useCashFlowStatementColumns = () => {
+  const {
+    cashFlowStatement: { columns, tableRows },
+  } = useCashFlowStatementContext();
+
+  return React.useMemo(
+    () => dynamicColumns(columns, tableRows),
+    [columns, tableRows],
+  );
+};
+
+/**
+ * Cash flow statement loading bar.
+ */
+export function CashFlowStatementLoadingBar() {
+  const { isCashFlowFetching } = useCashFlowStatementContext();
+  return (
+    <If condition={isCashFlowFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}
+
+/**
+ * Cash flow statement alter
+ */
+export function CashFlowStatementAlerts() {
+  const { cashFlowStatement, isCashFlowLoading, refetchCashFlow } =
+    useCashFlowStatementContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    refetchCashFlow();
+  };
+
+  // Can't display any error if the report is loading
+  if (isCashFlowLoading) {
+    return null;
+  }
+  return (
+    <If condition={cashFlowStatement.meta.is_cost_compute_running}>
+      <div className="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>
+  );
+}

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/dynamicColumns.tsx

@@ -0,0 +1,80 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import intl from 'react-intl-universal';
+
+import { Align } from '@/constants';
+import { CellTextSpan } from '@/components/Datatable/Cells';
+import { getColumnWidth } from '@/utils';
+
+/**
+ * Account name column mapper.
+ */
+const accountNameMapper = (column) => ({
+  id: column.key,
+  key: column.key,
+  Header: intl.get('account_name'),
+  accessor: 'cells[0].value',
+  className: 'account_name',
+  textOverview: true,
+  width: 400,
+  disableSortBy: true,
+  sticky: Align.Left,
+});
+
+/**
+ * Date range columns mapper.
+ */
+const dateRangeMapper = (data, index, column) => ({
+  id: column.key,
+  Header: column.label,
+  key: column.key,
+  accessor: `cells[${index}].value`,
+  width: getColumnWidth(data, `cells.${index}.value`, {
+    magicSpacing: 10,
+    minWidth: 100,
+  }),
+  className: `date-period ${column.key}`,
+  disableSortBy: true,
+  textOverview: true,
+  align: Align.Right,
+});
+
+/**
+ * Total column mapper.
+ */
+const totalMapper = (data, index, column) => ({
+  key: 'total',
+  Header: intl.get('total'),
+  accessor: `cells[${index}].value`,
+  className: 'total',
+  textOverview: true,
+  Cell: CellTextSpan,
+  width: getColumnWidth(data, `cells[${index}].value`, {
+    magicSpacing: 10,
+    minWidth: 100,
+  }),
+  disableSortBy: true,
+  align: Align.Right,
+});
+
+/**
+ * Detarmines the given string starts with `date-range` string.
+ */
+const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0;
+
+/**
+ * Cash flow dynamic columns.
+ */
+export const dynamicColumns = (columns, data) => {
+  const mapper = (column, index) => {
+    return R.compose(
+      R.when(
+        R.pathSatisfies(isMatchesDateRange, ['key']),
+        R.curry(dateRangeMapper)(data, index),
+      ),
+      R.when(R.pathEq(['key'], 'name'), accountNameMapper),
+      R.when(R.pathEq(['key'], 'total'), R.curry(totalMapper)(data, index)),
+    )(column);
+  };
+  return columns.map(mapper);
+};

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/utils.tsx

@@ -0,0 +1,59 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import { castArray } from 'lodash';
+
+import { transformToForm } from '@/utils';
+import { useAppQueryString } from '@/hooks';
+
+/**
+ * Retrieves the default cashflow sheet query.
+ */
+export const getDefaultCashFlowSheetQuery = () => {
+  return {
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+    basis: 'cash',
+    displayColumnsType: 'total',
+    filterByOption: 'with-transactions',
+    branchesIds: [],
+  };
+};
+
+/**
+ * Parses the cashflow query from browser location.
+ */
+const parseCashflowQuery = (query) => {
+  const defaultQuery = getDefaultCashFlowSheetQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(query, defaultQuery),
+  };
+  return {
+    ...transformed,
+
+    // Ensures the branches ids is always array.
+    branchesIds: castArray(transformed.branchesIds),
+  };
+};
+
+/**
+ * Retrieves the cashflow statement query.
+ */
+export const useCashflowStatementQuery = () => {
+  // Retrieves location query.
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  // Merges the default filter query with location URL query.
+  const query = React.useMemo(
+    () => parseCashflowQuery(locationQuery),
+    [locationQuery],
+  );
+
+  return {
+    query,
+    locationQuery,
+    setLocationQuery,
+  };
+};

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/withCashFlowStatement.tsx

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

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/withCashFlowStatementActions.tsx

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

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalanceSummaryBody.tsx

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '@/components/FinancialSheet';
+import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
+import CustomersBalanceSummaryTable from './CustomersBalanceSummaryTable';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+/**
+ * Customer balance summary body.
+ * @returns {JSX.Element}
+ */
+function CustomerBalanceSummaryBodyJSX({
+  // #withPreferences
+  organizationName,
+}) {
+  const { isCustomersBalanceLoading } = useCustomersBalanceSummaryContext();
+
+  return (
+    <FinancialReportBody>
+      {isCustomersBalanceLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <CustomersBalanceSummaryTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const CustomerBalanceSummaryBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(CustomerBalanceSummaryBodyJSX);

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

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import React, { useEffect, useState } from 'react';
+import moment from 'moment';
+import * as R from 'ramda';
+
+import { FinancialStatement, DashboardPageContent } from '@/components';
+
+import CustomersBalanceSummaryActionsBar from './CustomersBalanceSummaryActionsBar';
+import CustomersBalanceSummaryHeader from './CustomersBalanceSummaryHeader';
+
+import { CustomerBalanceSummaryBody } from './CustomerBalanceSummaryBody';
+import { CustomersBalanceSummaryProvider } from './CustomersBalanceSummaryProvider';
+import { getDefaultCustomersBalanceQuery } from './utils';
+import { CustomersBalanceLoadingBar } from './components';
+import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
+
+
+/**
+ * Customers Balance summary.
+ */
+function CustomersBalanceSummary({
+  // #withCustomersBalanceSummaryActions
+  toggleCustomerBalanceFilterDrawer,
+}) {
+  const [filter, setFilter] = useState({
+    ...getDefaultCustomersBalanceQuery(),
+  });
+  // Handle re-fetch customers balance summary after filter change.
+  const handleFilterSubmit = (filter) => {
+    const _filter = {
+      ...filter,
+      asDate: moment(filter.asDate).format('YYYY-MM-DD'),
+    };
+    setFilter({ ..._filter });
+  };
+  // Handle number format.
+  const handleNumberFormat = (values) => {
+    setFilter({
+      ...filter,
+      numberFormat: values,
+    });
+  };
+
+  useEffect(
+    () => () => {
+      toggleCustomerBalanceFilterDrawer(false);
+    },
+    [toggleCustomerBalanceFilterDrawer],
+  );
+
+  return (
+    <CustomersBalanceSummaryProvider filter={filter}>
+      <CustomersBalanceSummaryActionsBar
+        numberFormat={filter?.numberFormat}
+        onNumberFormatSubmit={handleNumberFormat}
+      />
+      <CustomersBalanceLoadingBar />
+
+      <DashboardPageContent>
+        <FinancialStatement>
+          <CustomersBalanceSummaryHeader
+            pageFilter={filter}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <CustomerBalanceSummaryBody />
+        </FinancialStatement>
+      </DashboardPageContent>
+    </CustomersBalanceSummaryProvider>
+  );
+}
+export default R.compose(withCustomersBalanceSummaryActions)(
+  CustomersBalanceSummary,
+);

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx

@@ -0,0 +1,130 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  NavbarGroup,
+  Button,
+  Classes,
+  NavbarDivider,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { Icon, FormattedMessage as T, DashboardActionsBar } from '@/components';
+import classNames from 'classnames';
+
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
+
+import withCustomersBalanceSummary from './withCustomersBalanceSummary';
+import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
+import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
+import { compose, saveInvoke } from '@/utils';
+
+/**
+ * customer balance summary action bar.
+ */
+function CustomersBalanceSummaryActionsBar({
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+
+  //#withCustomersBalanceSummary
+  isFilterDrawerOpen,
+
+  //#withCustomersBalanceSummaryActions
+  toggleCustomerBalanceFilterDrawer,
+}) {
+  const { refetch, isCustomersBalanceLoading } =
+    useCustomersBalanceSummaryContext();
+
+  // handle filter toggle click.
+  const handleFilterToggleClick = () => {
+    toggleCustomerBalanceFilterDrawer();
+  };
+
+  // Handle recalculate the report button.
+  const handleRecalcReport = () => {
+    refetch();
+  };
+
+  // Handle number format form submit.
+  const handleNumberFormatSubmit = (values) => {
+    saveInvoke(onNumberFormatSubmit, values);
+  };
+
+  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={handleFilterToggleClick}
+          active={isFilterDrawerOpen}
+        />
+        <NavbarDivider />
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={isCustomersBalanceLoading}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
+        <Popover
+          // content={}
+          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(
+  withCustomersBalanceSummary(({ customersBalanceDrawerFilter }) => ({
+    isFilterDrawerOpen: customersBalanceDrawerFilter,
+  })),
+  withCustomersBalanceSummaryActions,
+)(CustomersBalanceSummaryActionsBar);

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import React from 'react';
+import CustomersBalanceSummaryGeneralPanelContent from './CustomersBalanceSummaryGeneralPanelContent';
+import { CustomersBalanceSummaryGeneralProvider } from './CustomersBalanceSummaryGeneralProvider';
+
+/**
+ * Customers balance header - General panel.
+ */
+export default function CustomersBalanceSummaryGeneralPanel() {
+  return (
+    <CustomersBalanceSummaryGeneralProvider>
+      <CustomersBalanceSummaryGeneralPanelContent />
+    </CustomersBalanceSummaryGeneralProvider>
+  );
+}

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.tsx

@@ -0,0 +1,113 @@
+// @ts-nocheck
+import React from 'react';
+import { FastField, Field } from 'formik';
+import { DateInput } from '@blueprintjs/datetime';
+import { Classes, FormGroup, Position, Checkbox } from '@blueprintjs/core';
+import {
+  ContactsMultiSelect,
+  FormattedMessage as T,
+  Row,
+  Col,
+  FieldHint,
+} from '@/components';
+import classNames from 'classnames';
+
+import {
+  momentFormatter,
+  tansformDateValue,
+  inputIntent,
+  handleDateChange,
+} from '@/utils';
+import { filterCustomersOptions } from '../constants';
+import { useCustomersBalanceSummaryGeneralContext } from './CustomersBalanceSummaryGeneralProvider';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
+
+/**
+ * Customers balance header - General panel - Content
+ */
+export default function CustomersBalanceSummaryGeneralPanelContent() {
+  const { customers } = useCustomersBalanceSummaryGeneralContext();
+
+  return (
+    <div>
+      <Row>
+        <Col xs={5}>
+          <FastField name={'asDate'}>
+            {({ form, field: { value }, meta: { error } }) => (
+              <FormGroup
+                label={<T id={'as_date'} />}
+                labelInfo={<FieldHint />}
+                fill={true}
+                intent={inputIntent({ error })}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  value={tansformDateValue(value)}
+                  onChange={handleDateChange((selectedDate) => {
+                    form.setFieldValue('asDate', selectedDate);
+                  })}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  minimal={true}
+                  fill={true}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FastField name={'percentage_column'} type={'checkbox'}>
+            {({ field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  name={'percentage'}
+                  small={true}
+                  label={<T id={'percentage_of_column'} />}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FinancialStatementsFilter
+            items={filterCustomersOptions}
+            label={<T id={'customers.label_filter_customers'} />}
+            initialSelectedItem={'with-transactions'}
+          />
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <Field name={'customersIds'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'specific_customers'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ContactsMultiSelect
+                  items={customers}
+                  onItemSelect={(contacts) => {
+                    const customersIds = contacts.map((contact) => contact.id);
+                    setFieldValue('customersIds', customersIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
+    </div>
+  );
+}

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralProvider.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+import { useCustomers } from '@/hooks/query';
+
+const CustomersBalanceSummaryGeneralContext = createContext();
+
+/**
+ * Customers balance summary provider.
+ */
+function CustomersBalanceSummaryGeneralProvider({ ...props }) {
+  // Fetches the customers list.
+  const {
+    data: { customers },
+    isFetching: isCustomersFetching,
+    isLoading: isCustomersLoading,
+  } = useCustomers();
+
+  const provider = {
+    isCustomersLoading,
+    isCustomersFetching,
+    customers,
+  };
+
+  const loading = isCustomersLoading;
+
+  return loading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <CustomersBalanceSummaryGeneralContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useCustomersBalanceSummaryGeneralContext = () =>
+  useContext(CustomersBalanceSummaryGeneralContext);
+
+export {
+  CustomersBalanceSummaryGeneralProvider,
+  useCustomersBalanceSummaryGeneralContext,
+};

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx

@@ -0,0 +1,106 @@
+// @ts-nocheck
+import React from 'react';
+import * as Yup from 'yup';
+import styled from 'styled-components';
+import moment from 'moment';
+import { Formik, Form } from 'formik';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
+
+import FinancialStatementHeader from '../FinancialStatementHeader';
+import withCustomersBalanceSummary from './withCustomersBalanceSummary';
+import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
+import CustomersBalanceSummaryGeneralPanel from './CustomersBalanceSummaryGeneralPanel';
+
+import { compose, transformToForm } from '@/utils';
+
+/**
+ * Customers balance summary.
+ */
+function CustomersBalanceSummaryHeader({
+  // #ownProps
+  onSubmitFilter,
+  pageFilter,
+
+  // #withCustomersBalanceSummary
+  customersBalanceDrawerFilter,
+
+  // #withCustomersBalanceSummaryActions
+  toggleCustomerBalanceFilterDrawer,
+}) {
+  // validation schema.
+  const validationSchema = Yup.object().shape({
+    asDate: Yup.date().required().label('asDate'),
+  });
+  // Default form values.
+  const defaultValues = {
+    ...pageFilter,
+    asDate: moment().toDate(),
+    customersIds: [],
+  };
+
+  // Filter form initial values.
+  const initialValues = transformToForm(
+    {
+      ...defaultValues,
+      ...pageFilter,
+      asDate: moment(pageFilter.asDate).toDate(),
+    },
+    defaultValues,
+  );
+  // handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    toggleCustomerBalanceFilterDrawer(false);
+    setSubmitting(false);
+  };
+  // handle close drawer.
+  const handleDrawerClose = () => {
+    toggleCustomerBalanceFilterDrawer(false);
+  };
+
+  return (
+    <CustomerBalanceDrawerHeader
+      isOpen={customersBalanceDrawerFilter}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id="general"
+              title={<T id={'general'} />}
+              panel={<CustomersBalanceSummaryGeneralPanel />}
+            />
+          </Tabs>
+
+          <div class="financial-header-drawer__footer">
+            <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
+              <T id={'calculate_report'} />
+            </Button>
+            <Button onClick={handleDrawerClose} minimal={true}>
+              <T id={'cancel'} />
+            </Button>
+          </div>
+        </Form>
+      </Formik>
+    </CustomerBalanceDrawerHeader>
+  );
+}
+
+export default compose(
+  withCustomersBalanceSummary(({ customersBalanceDrawerFilter }) => ({
+    customersBalanceDrawerFilter,
+  })),
+  withCustomersBalanceSummaryActions,
+)(CustomersBalanceSummaryHeader);
+
+const CustomerBalanceDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.tsx

@@ -0,0 +1,45 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useCustomerBalanceSummaryReport } from '@/hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const CustomersBalanceSummaryContext = createContext();
+
+/**
+ * Customers balance summary provider.
+ */
+function CustomersBalanceSummaryProvider({ filter, ...props }) {
+  const query = React.useMemo(
+    () => transformFilterFormToQuery(filter),
+    [filter],
+  );
+
+  // Fetches customers balance summary report based on the given report.
+  const {
+    data: CustomerBalanceSummary,
+    isLoading: isCustomersBalanceLoading,
+    isFetching: isCustomersBalanceFetching,
+    refetch,
+  } = useCustomerBalanceSummaryReport(query, {
+    keepPreviousData: true,
+  });
+
+  const provider = {
+    CustomerBalanceSummary,
+    isCustomersBalanceFetching,
+    isCustomersBalanceLoading,
+
+    refetch,
+  };
+  return (
+    <FinancialReportPage name={'customers-balance-summary'}>
+      <CustomersBalanceSummaryContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+
+const useCustomersBalanceSummaryContext = () =>
+  useContext(CustomersBalanceSummaryContext);
+
+export { CustomersBalanceSummaryProvider, useCustomersBalanceSummaryContext };

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.tsx

@@ -0,0 +1,65 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { TableStyle } from '@/constants';
+import { ReportDataTable, FinancialSheet } from '@/components';
+import { tableRowTypesToClassnames } from '@/utils';
+
+import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
+import { useCustomersSummaryColumns } from './components';
+
+/**
+ * Customers balance summary table.
+ */
+export default function CustomersBalanceSummaryTable({
+  // #ownProps
+  companyName,
+}) {
+  const {
+    CustomerBalanceSummary: { table },
+  } = useCustomersBalanceSummaryContext();
+
+  // Retrieves the customers summary columns.
+  const columns = useCustomersSummaryColumns();
+
+  return (
+    <FinancialSheet
+      companyName={companyName}
+      sheetType={intl.get('customers_balance_summary')}
+      asDate={new Date()}
+    >
+      <CustomerBalanceDataTable
+        columns={columns}
+        data={table.data}
+        rowClassNames={tableRowTypesToClassnames}
+        noInitialFetch={true}
+        styleName={TableStyle.Constrant}
+      />
+    </FinancialSheet>
+  );
+}
+
+const CustomerBalanceDataTable = styled(ReportDataTable)`
+  .table {
+    .tbody {
+      .tr:not(.no-results) {
+        .td {
+          border-bottom: 0;
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
+        }
+
+        &.row_type--TOTAL {
+          font-weight: 500;
+
+          .td {
+            border-top: 1px solid #bbb;
+            border-bottom: 3px double #333;
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,81 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+
+import { If } from '@/components';
+import { Align } from '@/constants';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
+
+
+/**
+ * Retrieve customers balance summary columns.
+ */
+export const useCustomersSummaryColumns = () => {
+  const {
+    CustomerBalanceSummary: { table },
+  } = useCustomersBalanceSummaryContext();
+
+  return React.useMemo(() => {
+    return dynamicColumns(table.columns || []);
+  }, [table.columns]);
+};
+
+/**
+ * Account name column accessor.
+ */
+const accountNameColumnAccessor = () => ({
+  Header: intl.get('customer_name'),
+  accessor: 'cells[0].value',
+  className: 'customer_name',
+  width: 240,
+});
+
+/**
+ * Total column accessor.
+ */
+const totalColumnAccessor = () => ({
+  Header: intl.get('total'),
+  accessor: 'cells[1].value',
+  className: 'total',
+  width: 140,
+  align: Align.Right,
+});
+
+/**
+ * Percentage column accessor.
+ */
+const percentageColumnAccessor = () => ({
+  Header: intl.get('percentage_of_column'),
+  accessor: 'cells[2].value',
+  className: 'total',
+  width: 140,
+  align: Align.Right,
+});
+
+const dynamicColumns = (columns) => {
+  return R.map(
+    R.compose(
+      R.when(R.pathEq(['key'], 'name'), accountNameColumnAccessor),
+      R.when(R.pathEq(['key'], 'total'), totalColumnAccessor),
+      R.when(
+        R.pathEq(['key'], 'percentage_of_column'),
+        percentageColumnAccessor,
+      ),
+    ),
+  )(columns);
+};
+
+/**
+ * customers balance summary loading bar.
+ */
+export function CustomersBalanceLoadingBar() {
+  const { isCustomersBalanceFetching } = useCustomersBalanceSummaryContext();
+
+  return (
+    <If condition={isCustomersBalanceFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/utils.tsx

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import moment from 'moment';
+
+export const getDefaultCustomersBalanceQuery = () => {
+  return {
+    asDate: moment().endOf('day').format('YYYY-MM-DD'),
+    filterByOption: 'with-transactions',
+  };
+};

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/withCustomersBalanceSummary.tsx

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

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/withCustomersBalanceSummaryActions.tsx

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

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

@@ -0,0 +1,74 @@
+// @ts-nocheck
+import React, { useEffect, useState } from 'react';
+import moment from 'moment';
+
+import { FinancialStatement, DashboardPageContent } from '@/components';
+
+import CustomersTransactionsHeader from './CustomersTransactionsHeader';
+import CustomersTransactionsActionsBar from './CustomersTransactionsActionsBar';
+
+import withCustomersTransactionsActions from './withCustomersTransactionsActions';
+import { CustomersTransactionsLoadingBar } from './components';
+import { CustomersTransactionsBody } from './CustomersTransactionsBody';
+import { CustomersTransactionsProvider } from './CustomersTransactionsProvider';
+
+import { compose } from '@/utils';
+
+/**
+ * Customers transactions.
+ */
+function CustomersTransactions({
+  //#withCustomersTransactionsActions
+  toggleCustomersTransactionsFilterDrawer,
+}) {
+  // filter
+  const [filter, setFilter] = useState({
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+    filterByOption: 'with-transactions',
+  });
+
+  const handleFilterSubmit = (filter) => {
+    const _filter = {
+      ...filter,
+      fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
+      toDate: moment(filter.toDate).format('YYYY-MM-DD'),
+    };
+    setFilter({ ..._filter });
+  };
+
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (values) => {
+    setFilter({
+      ...filter,
+      numberFormat: values,
+    });
+  };
+
+  useEffect(
+    () => () => {
+      toggleCustomersTransactionsFilterDrawer(false);
+    },
+    [toggleCustomersTransactionsFilterDrawer],
+  );
+
+  return (
+    <CustomersTransactionsProvider filter={filter}>
+      <CustomersTransactionsActionsBar
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <CustomersTransactionsLoadingBar />
+      <DashboardPageContent>
+        <FinancialStatement>
+          <CustomersTransactionsHeader
+            pageFilter={filter}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <CustomersTransactionsBody />
+        </FinancialStatement>
+      </DashboardPageContent>
+    </CustomersTransactionsProvider>
+  );
+}
+export default compose(withCustomersTransactionsActions)(CustomersTransactions);

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.tsx

@@ -0,0 +1,132 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  NavbarGroup,
+  Button,
+  Classes,
+  NavbarDivider,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { DashboardActionsBar, FormattedMessage as T, Icon } from '@/components';
+import classNames from 'classnames';
+
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
+
+import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
+import withCustomersTransactions from './withCustomersTransactions';
+import withCustomersTransactionsActions from './withCustomersTransactionsActions';
+
+import { compose, saveInvoke } from '@/utils';
+
+/**
+ * Customers transactions actions bar.
+ */
+function CustomersTransactionsActionsBar({
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+
+  //#withCustomersTransactions
+  isFilterDrawerOpen,
+
+  //#withCustomersTransactionsActions
+  toggleCustomersTransactionsFilterDrawer,
+}) {
+  const { isCustomersTransactionsLoading, CustomersTransactionsRefetch } =
+    useCustomersTransactionsContext();
+
+  // Handle filter toggle click.
+  const handleFilterToggleClick = () => {
+    toggleCustomersTransactionsFilterDrawer();
+  };
+
+  // Handle recalculate the report button.
+  const handleRecalcReport = () => {
+    CustomersTransactionsRefetch();
+  };
+
+  // Handle number format form submit.
+  const handleNumberFormatSubmit = (values) => {
+    saveInvoke(onNumberFormatSubmit, values);
+  };
+
+  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={handleFilterToggleClick}
+          active={isFilterDrawerOpen}
+        />
+        <NavbarDivider />
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={isCustomersTransactionsLoading}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
+        <Popover
+          // content={}
+          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(
+  withCustomersTransactions(({ customersTransactionsDrawerFilter }) => ({
+    isFilterDrawerOpen: customersTransactionsDrawerFilter,
+  })),
+  withCustomersTransactionsActions,
+)(CustomersTransactionsActionsBar);

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsBody.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+import CustomersTransactionsTable from './CustomersTransactionsTable';
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '@/components/FinancialSheet';
+
+import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
+
+/**
+ * Customers transactions body.
+ */
+function CustomersTransactionsBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isCustomersTransactionsLoading } = useCustomersTransactionsContext();
+
+  return (
+    <FinancialReportBody>
+      {isCustomersTransactionsLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <CustomersTransactionsTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const CustomersTransactionsBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(CustomersTransactionsBodyJSX);

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx

@@ -0,0 +1,115 @@
+// @ts-nocheck
+import React from 'react';
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import styled from 'styled-components';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
+import { Formik, Form } from 'formik';
+
+import FinancialStatementHeader from '../FinancialStatementHeader';
+import CustomersTransactionsHeaderGeneralPanel from './CustomersTransactionsHeaderGeneralPanel';
+
+import withCustomersTransactions from './withCustomersTransactions';
+import withCustomersTransactionsActions from './withCustomersTransactionsActions';
+
+import { compose, transformToForm } from '@/utils';
+
+/**
+ * Customers transactions header.
+ */
+function CustomersTransactionsHeader({
+  // #ownProps
+  onSubmitFilter,
+  pageFilter,
+
+  //#withCustomersTransactions
+  isFilterDrawerOpen,
+
+  //#withCustomersTransactionsActions
+  toggleCustomersTransactionsFilterDrawer: toggleFilterDrawer,
+}) {
+  // Default form values.
+  const defaultValues = {
+    ...pageFilter,
+    fromDate: moment().toDate(),
+    toDate: moment().toDate(),
+    customersIds: [],
+  };
+  // Initial form values.
+  const initialValues = transformToForm(
+    {
+      ...defaultValues,
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultValues,
+  );
+
+  // Validation schema.
+  const validationSchema = Yup.object().shape({
+    fromDate: Yup.date().required().label(intl.get('fromDate')),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(intl.get('toDate')),
+  });
+
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    toggleFilterDrawer(false);
+    setSubmitting(false);
+  };
+  // Handle drawer close action.
+  const handleDrawerClose = () => {
+    toggleFilterDrawer(false);
+  };
+
+  return (
+    <CustomerTransactionsDrawerHeader
+      isOpen={isFilterDrawerOpen}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id="general"
+              title={<T id={'general'} />}
+              panel={<CustomersTransactionsHeaderGeneralPanel />}
+            />
+          </Tabs>
+
+          <div class="financial-header-drawer__footer">
+            <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
+              <T id={'calculate_report'} />
+            </Button>
+            <Button onClick={handleDrawerClose} minimal={true}>
+              <T id={'cancel'} />
+            </Button>
+          </div>
+        </Form>
+      </Formik>
+    </CustomerTransactionsDrawerHeader>
+  );
+}
+
+export default compose(
+  withCustomersTransactions(({ customersTransactionsDrawerFilter }) => ({
+    isFilterDrawerOpen: customersTransactionsDrawerFilter,
+  })),
+  withCustomersTransactionsActions,
+)(CustomersTransactionsHeader);
+
+const CustomerTransactionsDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.tsx

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import { Field } from 'formik';
+import { Classes, FormGroup } from '@blueprintjs/core';
+import FinancialStatementDateRange from '../FinancialStatementDateRange';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
+import {
+  Row,
+  Col,
+  ContactsMultiSelect,
+  FormattedMessage as T,
+} from '@/components';
+import { filterCustomersOptions } from '../constants';
+
+import {
+  CustomersTransactionsGeneralPanelProvider,
+  useCustomersTransactionsGeneralPanelContext,
+} from './CustomersTransactionsHeaderGeneralPanelProvider';
+
+/**
+ * Customers transactions header - General panel.
+ */
+export default function CustomersTransactionsHeaderGeneralPanel() {
+  return (
+    <CustomersTransactionsGeneralPanelProvider>
+      <CustomersTransactionsHeaderGeneralPanelContent />
+    </CustomersTransactionsGeneralPanelProvider>
+  );
+}
+
+/**
+ * Customers transactions header - General panel - Content.
+ */
+function CustomersTransactionsHeaderGeneralPanelContent() {
+  const { customers } = useCustomersTransactionsGeneralPanelContext();
+
+  return (
+    <div>
+      <FinancialStatementDateRange />
+
+      <Row>
+        <Col xs={4}>
+          <FinancialStatementsFilter
+            items={filterCustomersOptions}
+            label={<T id={'customers.label_filter_customers'} />}
+            initialSelectedItem={'with-transactions'}
+          />
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={4}>
+          <Field name={'customersIds'}>
+            {({ form: { setFieldValue }, field: { value } }) => (
+              <FormGroup
+                label={<T id={'specific_customers'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ContactsMultiSelect
+                  items={customers}
+                  onItemSelect={(customers) => {
+                    const customersIds = customers.map(
+                      (customer) => customer.id,
+                    );
+                    setFieldValue('customersIds', customersIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
+    </div>
+  );
+}

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanelProvider.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+import { useCustomers } from '@/hooks/query';
+
+const CustomersTransactionsGeneralPanelContext = createContext();
+
+/**
+ * Customers transactions provider.
+ */
+function CustomersTransactionsGeneralPanelProvider({ ...props }) {
+  // Fetches the customers list.
+  const {
+    data: { customers },
+    isFetching: isCustomersFetching,
+    isLoading: isCustomersLoading,
+  } = useCustomers();
+
+  const provider = {
+    customers,
+    isCustomersLoading,
+    isCustomersFetching,
+  };
+
+  const loading = isCustomersLoading;
+
+  return loading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <CustomersTransactionsGeneralPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+const useCustomersTransactionsGeneralPanelContext = () =>
+  useContext(CustomersTransactionsGeneralPanelContext);
+
+export {
+  CustomersTransactionsGeneralPanelProvider,
+  useCustomersTransactionsGeneralPanelContext,
+};

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.tsx

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import React, { createContext, useContext, useMemo } from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useCustomersTransactionsReport } from '@/hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const CustomersTransactionsContext = createContext();
+
+/**
+ * Customers transactions provider.
+ */
+function CustomersTransactionsProvider({ filter, ...props }) {
+  const query = useMemo(() => transformFilterFormToQuery(filter), [
+    filter,
+  ]);
+
+  // fetches the customers transactions.
+  const {
+    data: customersTransactions,
+    isFetching: isCustomersTransactionsFetching,
+    isLoading: isCustomersTransactionsLoading,
+    refetch: CustomersTransactionsRefetch,
+  } = useCustomersTransactionsReport(query, { keepPreviousData: true });
+
+  const provider = {
+    customersTransactions,
+    isCustomersTransactionsFetching,
+    isCustomersTransactionsLoading,
+    CustomersTransactionsRefetch,
+
+    filter,
+    query
+  };
+
+  return (
+    <FinancialReportPage name={'customer-transactions'}>
+      <CustomersTransactionsContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+const useCustomersTransactionsContext = () =>
+  useContext(CustomersTransactionsContext);
+
+export { CustomersTransactionsProvider, useCustomersTransactionsContext };

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.tsx

@@ -0,0 +1,110 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { DataTable, FinancialSheet } from '@/components';
+
+import { useCustomersTransactionsColumns } from './components';
+import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
+
+import { defaultExpanderReducer, tableRowTypesToClassnames } from '@/utils';
+import { TableStyle } from '@/constants';
+
+/**
+ * Customers transactions table.
+ */
+export default function CustomersTransactionsTable({
+  // #ownProps
+  companyName,
+}) {
+  // Customers transactions context.
+  const {
+    customersTransactions: { tableRows },
+    query,
+  } = useCustomersTransactionsContext();
+
+  // Customers transactions table columns.
+  const columns = useCustomersTransactionsColumns();
+
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(tableRows, 4),
+    [tableRows],
+  );
+
+  return (
+    <FinancialSheet
+      companyName={companyName}
+      sheetType={intl.get('customers_transactions')}
+      fromDate={query.from_date}
+      toDate={query.to_date}
+      fullWidth={true}
+    >
+      <CustomersTransactionsDataTable
+        columns={columns}
+        data={tableRows}
+        rowClassNames={tableRowTypesToClassnames}
+        noInitialFetch={true}
+        expandable={true}
+        expanded={expandedRows}
+        expandToggleColumn={1}
+        expandColumnSpace={0.8}
+        styleName={TableStyle.Constrant}
+      />
+    </FinancialSheet>
+  );
+}
+
+const CustomersTransactionsDataTable = styled(DataTable)`
+  .table {
+    .tbody {
+      .tr .td {
+        padding-top: 0.36rem;
+        padding-bottom: 0.36rem;
+      }
+      .tr:not(.no-results) .td:not(:first-of-type) {
+        border-left: 1px solid #ececec;
+      }
+      .tr:last-child .td {
+        border-bottom: 1px solid #e0e0e0;
+      }
+
+      .tr.row_type {
+        &--CUSTOMER {
+          .td {
+            &.customer_name {
+              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 {
+          font-weight: 500;
+        }
+        &--CUSTOMER {
+          &.is-expanded {
+            .td.running_balance .cell-inner {
+              display: none;
+            }
+          }
+          &:not(:first-child).is-expanded .td {
+            border-top: 1px solid #ddd;
+          }
+        }
+        &--CUSTOMER:last-child {
+          .td {
+            border-bottom: 1px solid #ddd;
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,94 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { If } from '@/components';
+import { Align } from '@/constants';
+import { getColumnWidth } from '@/utils';
+import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+
+/**
+ * Retrieve customers transactions columns.
+ */
+export const useCustomersTransactionsColumns = () => {
+  const {
+    customersTransactions: { tableRows },
+  } = useCustomersTransactionsContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('customer_name'),
+        accessor: 'cells[0].value',
+        className: 'customer_name',
+      },
+      {
+        Header: intl.get('account_name'),
+        accessor: 'cells[1].value',
+        className: 'name',
+        textOverview: true,
+        width: 170,
+      },
+      {
+        Header: intl.get('reference_type'),
+        accessor: 'cells[2].value',
+        width: 120,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('transaction_type'),
+        accessor: 'cells[3].value',
+        width: 120,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: 'cells[4].value',
+        className: 'credit',
+        textOverview: true,
+        width: getColumnWidth(tableRows, 'cells[5].value', {
+          minWidth: 100,
+          magicSpacing: 10,
+        }),
+        align: Align.Right,
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: 'cells[5].value',
+        className: 'debit',
+        textOverview: true,
+        width: getColumnWidth(tableRows, 'cells[6].value', {
+          minWidth: 100,
+          magicSpacing: 10,
+        }),
+        align: Align.Right,
+      },
+      {
+        Header: intl.get('running_balance'),
+        accessor: 'cells[6].value',
+        className: 'running_balance',
+        textOverview: true,
+        width: getColumnWidth(tableRows, 'cells[7].value', {
+          minWidth: 120,
+          magicSpacing: 10,
+        }),
+        align: Align.Right,
+      },
+    ],
+    [tableRows],
+  );
+};
+
+/**
+ * customers transactions loading bar.
+ */
+export function CustomersTransactionsLoadingBar() {
+  const { isCustomersTransactionsFetching } = useCustomersTransactionsContext();
+
+  return (
+    <If condition={isCustomersTransactionsFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/withCustomersTransactions.tsx

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

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/withCustomersTransactionsActions.tsx

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

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

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import { isEmpty } from 'lodash';
+import { useAbilityContext } from '@/hooks';
+
+function useFilterFinancialReports(financialSection) {
+  const ability = useAbilityContext();
+
+  const section = financialSection
+    .map((section) => {
+      const reports = section.reports.filter((report) => {
+        return ability.can(report.ability, report.subject);
+      });
+
+      return {
+        sectionTitle: section.sectionTitle,
+        reports,
+      };
+    })
+    .filter(({ reports }) => !isEmpty(reports));
+
+  return section;
+}
+
+export default useFilterFinancialReports;

packages/webapp/src/containers/FinancialStatements/FinancialHeaderLoadingSkeleton.module.scss

@@ -0,0 +1,22 @@
+.lines {
+    padding-top: 20px;
+
+    .line+.line {
+        margin-top: 30px;
+    }
+}
+
+.line {
+    display: flex;
+    width: 600px;
+    flex-direction: row;
+
+    &_label {
+        width: 30%;
+        margin-right: 20px;
+    }
+
+    &_field {
+        width: 70%;
+    }
+}

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

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+import { Classes } from '@blueprintjs/core';
+import clsx from 'classnames';
+import Style from './FinancialHeaderLoadingSkeleton.module.scss';
+
+function FinancialHeaderLoadingSkeletonLine() {
+  return (
+    <div className={clsx(Style.line)}>
+      <h4 className={clsx(Classes.SKELETON, Style.line_label)}>XXXXXXXX</h4>
+      <h4 className={clsx(Classes.SKELETON, Style.line_field)}>XXXXXXXX</h4>
+    </div>
+  );
+}
+
+/**
+ * Financial drawer header loading skeleton.
+ */
+export function FinancialHeaderLoadingSkeleton() {
+  return (
+    <div className={clsx(Style.lines)}>
+      <FinancialHeaderLoadingSkeletonLine />
+      <FinancialHeaderLoadingSkeletonLine />
+      <FinancialHeaderLoadingSkeletonLine />
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,61 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { DashboardInsider } from '@/components';
+import { CLASSES } from '@/constants/classes';
+
+/**
+ * Financial report page.
+ */
+export default function FinancialReportPage(props) {
+  return (
+    <FinancialReportPageRoot
+      {...props}
+      className={classNames(CLASSES.FINANCIAL_REPORT_INSIDER, props.className)}
+    />
+  );
+}
+
+export const FinancialComputeAlert = styled.div`
+  position: relative;
+  padding: 8px 20px;
+  border-radius: 2px;
+  background-color: #fdecda;
+  color: #342515;
+  font-size: 13px;
+
+  button {
+    font-size: 12px;
+    min-height: 16px;
+    padding: 0 4px;
+
+    &,
+    &:hover {
+      color: #824400;
+      text-decoration: underline;
+    }
+  }
+  svg {
+    margin-right: 6px;
+    position: relative;
+    top: -2px;
+    fill: #975f19;
+  }
+`;
+
+export const FinancialProgressbar = styled.div`
+  .progress-materializecss {
+    top: -2px;
+  }
+`;
+
+export const FinancialReportPageRoot = styled(DashboardInsider)``;
+
+export const FinancialReportBody = styled.div`
+  padding-left: 15px;
+  padding-right: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

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

@@ -0,0 +1,57 @@
+// @ts-nocheck
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { For, DashboardInsider } from '@/components';
+import useFilterFinancialReports from './FilterFinancialReports';
+
+import {
+  financialReportMenus,
+  SalesAndPurchasesReportMenus,
+} from '@/constants/financialReportsMenu';
+
+import '@/style/pages/FinancialStatements/FinancialSheets.scss';
+
+function FinancialReportsItem({ title, desc, link }) {
+  return (
+    <div class="financial-reports__item">
+      <Link class="title" to={link}>
+        {title}
+      </Link>
+      <p class="desc">{desc}</p>
+    </div>
+  );
+}
+
+function FinancialReportsSection({ sectionTitle, reports }) {
+  return (
+    <div class="financial-reports__section">
+      <div class="section-title">{sectionTitle}</div>
+
+      <div class="financial-reports__list">
+        <For render={FinancialReportsItem} of={reports} />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Financial reports.
+ */
+export default function FinancialReports() {
+  const financialReportMenu = useFilterFinancialReports(financialReportMenus);
+  const SalesAndPurchasesReportMenu = useFilterFinancialReports(
+    SalesAndPurchasesReportMenus,
+  );
+
+  return (
+    <DashboardInsider name={'financial-reports'}>
+      <div class="financial-reports">
+        <For render={FinancialReportsSection} of={financialReportMenu} />
+        <For
+          render={FinancialReportsSection}
+          of={SalesAndPurchasesReportMenu}
+        />
+      </div>
+    </DashboardInsider>
+  );
+}

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

@@ -0,0 +1,127 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import { FastField, ErrorMessage } from 'formik';
+import { HTMLSelect, FormGroup, Intent, Position } from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+
+import { Row, Col, Hint } from '@/components';
+import { momentFormatter, parseDateRangeQuery } from '@/utils';
+import { dateRangeOptions } from './constants';
+
+const FINANCIAL_REPORT_MAX_DATE = moment().add(5, 'years').toDate();
+
+/**
+ * Financial statement - Date range select.
+ */
+export default function FinancialStatementDateRange() {
+  return (
+    <>
+      <Row>
+        <Col xs={4}>
+          <FastField name={'date_range'}>
+            {({ form: { setFieldValue }, field: { value } }) => (
+              <FormGroup
+                label={intl.get('report_date_range')}
+                labelInfo={<Hint />}
+                minimal={true}
+                fill={true}
+              >
+                <HTMLSelect
+                  fill={true}
+                  options={dateRangeOptions}
+                  value={value}
+                  onChange={(e) => {
+                    const newValue = e.target.value;
+
+                    if (newValue !== 'custom') {
+                      const dateRange = parseDateRangeQuery(newValue);
+
+                      if (dateRange) {
+                        setFieldValue(
+                          'fromDate',
+                          moment(dateRange.fromDate).toDate(),
+                        );
+                        setFieldValue(
+                          'toDate',
+                          moment(dateRange.toDate).toDate(),
+                        );
+                      }
+                    }
+                    setFieldValue('dateRange', newValue);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={4}>
+          <FastField name={'fromDate'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={intl.get('from_date')}
+                labelInfo={<Hint />}
+                fill={true}
+                intent={error && Intent.DANGER}
+                helperText={<ErrorMessage name={'fromDate'} />}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY-MM-DD')}
+                  value={value}
+                  onChange={(selectedDate) => {
+                    setFieldValue('fromDate', selectedDate);
+                  }}
+                  popoverProps={{ minimal: true, position: Position.BOTTOM }}
+                  canClearSelection={false}
+                  minimal={true}
+                  fill={true}
+                  maxDate={FINANCIAL_REPORT_MAX_DATE}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+
+        <Col xs={4}>
+          <FastField name={'toDate'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+              meta: { error },
+            }) => (
+              <FormGroup
+                label={intl.get('to_date')}
+                labelInfo={<Hint />}
+                fill={true}
+                intent={error && Intent.DANGER}
+                helperText={<ErrorMessage name={'toDate'} />}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY-MM-DD')}
+                  value={value}
+                  onChange={(selectedDate) => {
+                    setFieldValue('toDate', selectedDate);
+                  }}
+                  popoverProps={{ minimal: true, position: Position.BOTTOM }}
+                  canClearSelection={false}
+                  fill={true}
+                  minimal={true}
+                  intent={error && Intent.DANGER}
+                  maxDate={FINANCIAL_REPORT_MAX_DATE}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+    </>
+  );
+}

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

@@ -0,0 +1,67 @@
+// @ts-nocheck
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { Position, Drawer } from '@blueprintjs/core';
+import '@/style/containers/FinancialStatements/DrawerHeader.scss';
+
+/**
+ * Financial statement header.
+ * @returns {JSX.Element}
+ */
+export default function FinancialStatementHeader({
+  children,
+  isOpen,
+  drawerProps,
+  className,
+}) {
+  const timeoutRef = React.useRef();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  // Hides the content scrollbar and scroll to the top of the page once the drawer open.
+  useEffect(() => {
+    const contentPanel = document.querySelector('body');
+    contentPanel.classList.toggle('hide-scrollbar', isOpen);
+
+    if (isOpen) {
+      document.querySelector('.Pane2').scrollTo(0, 0);
+    }
+    return () => {
+      contentPanel.classList.remove('hide-scrollbar');
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    clearTimeout(timeoutRef.current);
+
+    if (isOpen) {
+      setIsDrawerOpen(isOpen);
+    } else {
+      timeoutRef.current = setTimeout(() => setIsDrawerOpen(isOpen), 300);
+    }
+  }, [isOpen]);
+
+  return (
+    <div
+      className={classNames(
+        'financial-statement__header',
+        'financial-header-drawer',
+        {
+          'is-hidden': !isDrawerOpen,
+        },
+        className,
+      )}
+    >
+      <Drawer
+        isOpen={isOpen}
+        usePortal={false}
+        hasBackdrop={true}
+        position={Position.TOP}
+        canOutsideClickClose={true}
+        canEscapeKeyClose={true}
+        {...drawerProps}
+      >
+        {children}
+      </Drawer>
+    </div>
+  );
+}

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

@@ -0,0 +1,71 @@
+// @ts-nocheck
+import React from 'react';
+import { FastField } from 'formik';
+import {
+  PopoverInteractionKind,
+  Tooltip,
+  MenuItem,
+  Position,
+  FormGroup,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import { ListSelect, MODIFIER, FormattedMessage as T } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import { filterAccountsOptions } from './constants';
+
+const SUBMENU_POPOVER_MODIFIERS = {
+  flip: { boundariesElement: 'viewport', padding: 20 },
+  offset: { offset: '0, 10' },
+  preventOverflow: { boundariesElement: 'viewport', padding: 40 },
+};
+
+
+export default function FinancialStatementsFilter({
+  items = filterAccountsOptions,
+  label = <T id={'filter_accounts'} />,
+  ...restProps
+}) {
+
+  const filterRenderer = (item, { handleClick, modifiers, query }) => {
+    return (
+      <Tooltip
+        interactionKind={PopoverInteractionKind.HOVER}
+        position={Position.RIGHT_TOP}
+        content={item.hint}
+        modifiers={SUBMENU_POPOVER_MODIFIERS}
+        inline={true}
+        minimal={true}
+        className={MODIFIER.SELECT_LIST_TOOLTIP_ITEMS}
+      >
+        <MenuItem text={item.name} key={item.key} onClick={handleClick} />
+      </Tooltip>
+    );
+  };
+
+  return (
+    <FastField name={'filterByOption'}>
+      {({ form: { setFieldValue }, field: { value } }) => (
+        <FormGroup
+          label={label}
+          className="form-group--select-list bp3-fill"
+          inline={false}
+        >
+          <ListSelect
+            items={items}
+            itemRenderer={filterRenderer}
+            popoverProps={{ minimal: true }}
+            filterable={false}
+            selectedItem={value}
+            selectedItemProp={'key'}
+            textProp={'name'}
+            onItemSelect={(item) => {
+              setFieldValue('filterByOption', item.key);
+            }}
+            className={classNames(CLASSES.SELECT_LIST_FILL_POPOVER)}
+            {...restProps}
+          />
+        </FormGroup>
+      )}
+    </FastField>
+  );
+}

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