re-structure to monorepo.

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