re-structure to monorepo.

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.tsx

@@ -0,0 +1,126 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  NavbarGroup,
+  Button,
+  Classes,
+  NavbarDivider,
+  Popover,
+  Position,
+  PopoverInteractionKind,
+} from '@blueprintjs/core';
+import { DashboardActionsBar, FormattedMessage as T, Icon } from '@/components';
+import classNames from 'classnames';
+
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
+
+import withProfitLossActions from './withProfitLossActions';
+import withProfitLoss from './withProfitLoss';
+
+import { compose, saveInvoke } from '@/utils';
+import { useProfitLossSheetContext } from './ProfitLossProvider';
+
+/**
+ * Profit/Loss sheet actions bar.
+ */
+function ProfitLossActionsBar({
+  // #withProfitLoss
+  profitLossDrawerFilter,
+
+  // #withProfitLossActions
+  toggleProfitLossFilterDrawer: toggleFilterDrawer,
+
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+}) {
+  const { sheetRefetch, isLoading } = useProfitLossSheetContext();
+
+  const handleFilterClick = () => {
+    toggleFilterDrawer();
+  };
+
+  const handleRecalcReport = () => {
+    sheetRefetch();
+  };
+  // Handle number format 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={
+            profitLossDrawerFilter ? (
+              <T id={'hide_customizer'} />
+            ) : (
+              <T id={'customize_report'} />
+            )
+          }
+          onClick={handleFilterClick}
+          active={profitLossDrawerFilter}
+        />
+        <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>
+
+        <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(
+  withProfitLoss(({ profitLossDrawerFilter }) => ({ profitLossDrawerFilter })),
+  withProfitLossActions,
+)(ProfitLossActionsBar);

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossBody.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+
+import ProfitLossSheetTable from './ProfitLossSheetTable';
+import { FinancialSheetSkeleton } from '@/components';
+import { FinancialReportBody } from '../FinancialReportPage';
+import { useProfitLossSheetContext } from './ProfitLossProvider';
+
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+import { compose } from '@/utils';
+
+/**
+ * @returns {React.JSX}
+ */
+function ProfitLossBodyJSX({
+  // #withPreferences
+  organizationName,
+}) {
+  const { isLoading } = useProfitLossSheetContext();
+
+  return (
+    <FinancialReportBody>
+      {isLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <ProfitLossSheetTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const ProfitLossBody = compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(ProfitLossBodyJSX);

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossProvider.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useProfitLossSheet } from '@/hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const ProfitLossSheetContext = createContext();
+
+/**
+ * Profit/loss sheet provider.
+ * @returns {React.JSX}
+ */
+function ProfitLossSheetProvider({ query, ...props }) {
+  const {
+    data: profitLossSheet,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useProfitLossSheet(
+    {
+      ...transformFilterFormToQuery(query),
+    },
+    { keepPreviousData: true },
+  );
+
+  const provider = {
+    profitLossSheet,
+    isLoading,
+    isFetching,
+    sheetRefetch: refetch,
+  };
+
+  return (
+    <FinancialReportPage name={'profit-loss-sheet'}>
+      <ProfitLossSheetContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+
+const useProfitLossSheetContext = () => useContext(ProfitLossSheetContext);
+
+export { useProfitLossSheetContext, ProfitLossSheetProvider };

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

@@ -0,0 +1,77 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import * as R from 'ramda';
+
+import ProfitLossSheetHeader from './ProfitLossSheetHeader';
+import ProfitLossActionsBar from './ProfitLossActionsBar';
+
+import { DashboardPageContent } from '@/components';
+
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import withProfitLossActions from './withProfitLossActions';
+
+import { useProfitLossSheetQuery } from './utils';
+import { ProfitLossSheetProvider } from './ProfitLossProvider';
+import { ProfitLossSheetLoadingBar } from './components';
+import { ProfitLossBody } from './ProfitLossBody';
+
+/**
+ * Profit/Loss financial statement sheet.
+ * @returns {React.JSX}
+ */
+function ProfitLossSheet({
+  // #withProfitLossActions
+  toggleProfitLossFilterDrawer: toggleDisplayFilterDrawer,
+}) {
+  // Profit/loss sheet query.
+  const { query, setLocationQuery } = useProfitLossSheetQuery();
+
+  // Handle submit filter.
+  const handleSubmitFilter = (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 = (numberFormat) => {
+    setLocationQuery({
+      ...query,
+      numberFormat,
+    });
+  };
+  // Hide the filter drawer once the page unmount.
+  React.useEffect(
+    () => () => {
+      toggleDisplayFilterDrawer(false);
+    },
+    [toggleDisplayFilterDrawer],
+  );
+
+  return (
+    <ProfitLossSheetProvider query={query}>
+      <ProfitLossActionsBar
+        numberFormat={query.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <ProfitLossSheetLoadingBar />
+      {/* <ProfitLossSheetAlerts /> */}
+
+      <DashboardPageContent>
+        <ProfitLossSheetHeader
+          pageFilter={query}
+          onSubmitFilter={handleSubmitFilter}
+        />
+        <ProfitLossBody />
+      </DashboardPageContent>
+    </ProfitLossSheetProvider>
+  );
+}
+
+export default R.compose(
+  withDashboardActions,
+  withProfitLossActions,
+)(ProfitLossSheet);

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx

@@ -0,0 +1,120 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import styled from 'styled-components';
+import { Formik, Form } from 'formik';
+import * as R from 'ramda';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
+
+import FinancialStatementHeader from '../FinancialStatementHeader';
+import ProfitLossSheetHeaderGeneralPane from './ProfitLossSheetHeaderGeneralPane';
+import ProfitLossSheetHeaderComparisonPanel from './ProfitLossSheetHeaderComparisonPanel';
+import ProfitLossSheetHeaderDimensionsPanel from './ProfitLossSheetHeaderDimensionsPanel';
+
+import withProfitLoss from './withProfitLoss';
+import withProfitLossActions from './withProfitLossActions';
+
+import { useProfitLossHeaderValidationSchema } from './utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+/**
+ * Profit/loss header.
+ * @returns {React.JSX}
+ */
+function ProfitLossHeader({
+  // #ownProps
+  pageFilter,
+  onSubmitFilter,
+
+  // #withProfitLoss
+  profitLossDrawerFilter,
+
+  // #withProfitLossActions
+  toggleProfitLossFilterDrawer: toggleFilterDrawer,
+}) {
+  // Validation schema.
+  const validationSchema = useProfitLossHeaderValidationSchema();
+
+  // Initial values.
+  const initialValues = {
+    ...pageFilter,
+    fromDate: moment(pageFilter.fromDate).toDate(),
+    toDate: moment(pageFilter.toDate).toDate(),
+  };
+  // Handle form submit.
+  const handleSubmit = (values, actions) => {
+    onSubmitFilter(values);
+    toggleFilterDrawer(false);
+  };
+  // Handles the cancel button click.
+  const handleCancelClick = () => {
+    toggleFilterDrawer(false);
+  };
+  // Handles the drawer close action.
+  const handleDrawerClose = () => {
+    toggleFilterDrawer(false);
+  };
+
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
+  return (
+    <ProfitLossSheetHeader
+      isOpen={profitLossDrawerFilter}
+      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={<ProfitLossSheetHeaderGeneralPane />}
+            />
+            <Tab
+              id="comparison"
+              title={<T id={'profit_loss_sheet.comparisons'} />}
+              panel={<ProfitLossSheetHeaderComparisonPanel />}
+            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'profit_loss_sheet.dimensions'} />}
+                panel={<ProfitLossSheetHeaderDimensionsPanel />}
+              />
+            )}
+          </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>
+    </ProfitLossSheetHeader>
+  );
+}
+
+export default R.compose(
+  withProfitLoss(({ profitLossDrawerFilter }) => ({
+    profitLossDrawerFilter,
+  })),
+  withProfitLossActions,
+)(ProfitLossHeader);
+
+const ProfitLossSheetHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.tsx

@@ -0,0 +1,205 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { FastField } from 'formik';
+import { FormGroup, Checkbox } from '@blueprintjs/core';
+
+import { Flex, FlexItem, FieldHint, FormattedMessage as T } from '@/components';
+
+import {
+  handlePreviousYearCheckBoxChange,
+  handlePreviousPeriodCheckBoxChange,
+  handlePreviousYearChangeCheckboxChange,
+  handlePreviousYearPercentageCheckboxChange,
+  handlePreviousPeriodChangeCheckboxChange,
+  handlePreviousPeriodPercentageCheckboxChange,
+} from './utils';
+
+/**
+ * Profit/loss comparisons panel fields.
+ * @returns {JSX.Element}
+ */
+function ProfitLossComaprsionPanelFields() {
+  return (
+    <>
+      {/**----------- Previous Year -----------*/}
+      <FastField name={'previousYear'} type={'checkbox'}>
+        {({ form, field }) => (
+          <FormGroup labelInfo={<FieldHint />}>
+            <Checkbox
+              inline={true}
+              small={true}
+              label={<T id={'profit_loss_sheet.previous_year'} />}
+              {...field}
+              onChange={handlePreviousYearCheckBoxChange(form)}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <FlexSubFields>
+        <FlexItem col={6}>
+          <FastField name={'previousYearAmountChange'} type={'checkbox'}>
+            {({ form, field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  small={true}
+                  label={<T id={'profit_loss_sheet.total_change'} />}
+                  {...field}
+                  onChange={handlePreviousYearChangeCheckboxChange(form)}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </FlexItem>
+        <FlexItem col={6}>
+          <FastField name={'previousYearPercentageChange'} type={'checkbox'}>
+            {({ form, field }) => (
+              <FormGroup labelInfo={<FieldHint />}>
+                <Checkbox
+                  inline={true}
+                  small={true}
+                  label={<T id={'profit_loss_sheet.perentage_change'} />}
+                  {...field}
+                  onChange={handlePreviousYearPercentageCheckboxChange(form)}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </FlexItem>
+      </FlexSubFields>
+
+      {/**----------- Previous Period (PP) -----------*/}
+      <FastField name={'previousPeriod'} type={'checkbox'}>
+        {({ form, field }) => (
+          <FormGroup labelInfo={<FieldHint />}>
+            <Checkbox
+              inline={true}
+              small={true}
+              label={<T id={'profit_loss_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={'profit_loss_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}
+                  small={true}
+                  label={<T id={'profit_loss_sheet.perentage_change'} />}
+                  {...field}
+                  onChange={handlePreviousPeriodPercentageCheckboxChange(form)}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </FlexItem>
+      </FlexSubFields>
+
+      {/**----------- % of Column -----------*/}
+      <FastField name={'percentageColumn'} type={'checkbox'}>
+        {({ field }) => (
+          <FormGroup labelInfo={<FieldHint />}>
+            <Checkbox
+              inline={true}
+              small={true}
+              label={<T id={'profit_loss_sheet.percentage_of_column'} />}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/**----------- % of Row -----------*/}
+      <FastField name={'percentageRow'} type={'checkbox'}>
+        {({ field }) => (
+          <FormGroup labelInfo={<FieldHint />}>
+            <Checkbox
+              inline={true}
+              small={true}
+              label={<T id={'profit_loss_sheet.percentage_of_row'} />}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/**----------- % of Expense -----------*/}
+      <FastField name={'percentageExpense'} type={'checkbox'}>
+        {({ field }) => (
+          <FormGroup labelInfo={<FieldHint />}>
+            <Checkbox
+              inline={true}
+              small={true}
+              label={<T id={'profit_loss_sheet.percentage_of_expense'} />}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/**----------- % of Income -----------*/}
+      <FastField name={'percentageIncome'} type={'checkbox'}>
+        {({ field }) => (
+          <FormGroup labelInfo={<FieldHint />}>
+            <Checkbox
+              inline={true}
+              small={true}
+              label={<T id={'profit_loss_sheet.percentage_of_income'} />}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </>
+  );
+}
+
+/**
+ * ProfitLoss sheet header -comparison panel.
+ */
+export default function ProfitLossSheetHeaderComparisonPanel() {
+  return (
+    <ProfitLossSheetComparisonWrap>
+      <ProfitLossComaprsionFieldsWrap>
+        <ProfitLossComaprsionPanelFields />
+      </ProfitLossComaprsionFieldsWrap>
+    </ProfitLossSheetComparisonWrap>
+  );
+}
+
+const ProfitLossSheetComparisonWrap = styled.div`
+  .bp3-form-group {
+    margin-bottom: 3px;
+  }
+`;
+
+const FlexSubFields = styled(Flex)`
+  padding-left: 20px;
+`;
+
+const ProfitLossComaprsionFieldsWrap = styled.div`
+  max-width: 400px;
+`;

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsPanel.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 {
+  ProfitLossSheetHeaderDimensionsProvider,
+  useProfitLossSheetPanelContext,
+} from './ProfitLossSheetHeaderDimensionsProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+/**
+ * profit loss Sheet Header dimensions panel.
+ * @returns {JSX.Element}
+ */
+export default function ProfitLossSheetHeaderDimensionsPanel() {
+  return (
+    <ProfitLossSheetHeaderDimensionsProvider>
+      <ProfitLossSheetHeaderDimensionsPanelContent />
+    </ProfitLossSheetHeaderDimensionsProvider>
+  );
+}
+
+/**
+ * Profit/Loss Sheet Header dimensions panel content.
+ * @returns {JSX.Element}
+ */
+function ProfitLossSheetHeaderDimensionsPanelContent() {
+  const { branches } = useProfitLossSheetPanelContext();
+  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/ProfitLossSheet/ProfitLossSheetHeaderDimensionsProvider.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 ProfitLossSheetHeaderDimensionsPanelContext = React.createContext();
+
+/**
+ * profit loss sheet header provider.
+ * @returns
+ */
+function ProfitLossSheetHeaderDimensionsProvider({ 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 />
+  ) : (
+    <ProfitLossSheetHeaderDimensionsPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useProfitLossSheetPanelContext = () =>
+  React.useContext(ProfitLossSheetHeaderDimensionsPanelContext);
+
+export {
+  ProfitLossSheetHeaderDimensionsProvider,
+  useProfitLossSheetPanelContext,
+};

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderGeneralPane.tsx

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

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx

@@ -0,0 +1,81 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import { TableStyle } from '@/constants';
+import {
+  ReportDataTable,
+  FinancialSheet,
+  FormattedMessage as T,
+} from '@/components';
+
+import { useProfitLossSheetColumns } from './hooks';
+import { useProfitLossSheetContext } from './ProfitLossProvider';
+import { tableRowTypesToClassnames, defaultExpanderReducer } from '@/utils';
+
+export default function ProfitLossSheetTable({
+  // #ownProps
+  companyName,
+}) {
+  // Profit/Loss sheet context.
+  const {
+    profitLossSheet: { table, query },
+  } = useProfitLossSheetContext();
+
+  // Retrieves the profit/loss table columns.
+  const tableColumns = useProfitLossSheetColumns();
+
+  // Retrieve default expanded rows of balance sheet.
+  const expandedRows = React.useMemo(
+    () => defaultExpanderReducer(table?.rows || [], 3),
+    [table],
+  );
+
+  return (
+    <FinancialSheet
+      companyName={companyName}
+      sheetType={<T id={'profit_loss_sheet'} />}
+      fromDate={query.from_date}
+      toDate={query.to_date}
+      basis={query.basis}
+    >
+      <ProfitLossDataTable
+        columns={tableColumns}
+        data={table.rows}
+        noInitialFetch={true}
+        expanded={expandedRows}
+        rowClassNames={tableRowTypesToClassnames}
+        expandable={true}
+        expandToggleColumn={1}
+        sticky={true}
+        styleName={TableStyle.Constrant}
+      />
+    </FinancialSheet>
+  );
+}
+
+const ProfitLossDataTable = 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: 3px double #000;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,50 @@
+// @ts-nocheck
+import React from 'react';
+import { Button } from '@blueprintjs/core';
+import { Icon, If, FormattedMessage as T } from '@/components';
+
+import { useProfitLossSheetContext } from './ProfitLossProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+/**
+ * Profit/loss sheet loading bar.
+ */
+export function ProfitLossSheetLoadingBar() {
+  const { isFetching } = useProfitLossSheetContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}
+
+/**
+ * Balance sheet alerts.
+ */
+export function ProfitLossSheetAlerts() {
+  const { isLoading, sheetRefetch, profitLossSheet } =
+    useProfitLossSheetContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    sheetRefetch();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <If condition={profitLossSheet.meta.is_cost_compute_running}>
+      <div class="alert-compute-running">
+        <Icon icon="info-block" iconSize={12} />
+        <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/ProfitLossSheet/dynamicColumns.tsx

@@ -0,0 +1,384 @@
+// @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, labelText) => {
+  return getColumnWidth(
+    data,
+    accessor,
+    { magicSpacing: 10, minWidth: 100 },
+    labelText,
+  );
+};
+
+const isNodeHasChildren = (node) => !isEmpty(node.children);
+
+/**
+ * `Percentage of income` column accessor.
+ */
+const percentageOfIncomeAccessor = 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 expense` column accessor.
+ */
+const percentageOfExpenseAccessor = 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 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'), totalColumn(data)),
+    // Percetage of column/row.
+    R.when(
+      R.pathEq(['key'], 'percentage_column'),
+      percentageOfColumnAccessor(data),
+    ),
+    R.when(R.pathEq(['key'], 'percentage_row'), percentageOfRowAccessor(data)),
+    R.when(
+      R.pathEq(['key'], 'percentage_income'),
+      percentageOfIncomeAccessor(data),
+    ),
+    R.when(
+      R.pathEq(['key'], 'percentage_expenses'),
+      percentageOfExpenseAccessor(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);
+});
+
+/**
+ * Assoc columns to total column.
+ */
+const assocColumnsToTotalColumn = R.curry((data, column, columnAccessor) => {
+  const columns = totalColumnsComposer(data, column);
+
+  return R.assoc('columns', columns, columnAccessor);
+});
+
+/**
+ * Retrieves the total column.
+ */
+const totalColumn = R.curry((data, column) => {
+  const hasChildren = isNodeHasChildren(column);
+  const accessor = getTableCellValueAccessor(column.cell_index);
+  const width = getReportColWidth(data, accessor, column.label);
+
+  return {
+    key: column.key,
+    Header: column.label,
+    accessor,
+    textOverview: true,
+    Cell: CellTextSpan,
+    width,
+    disableSortBy: true,
+    align: hasChildren ? Align.Center : Align.Right,
+  };
+});
+
+/**
+ *
+ */
+const totalColumnCompose = R.curry((data, column) => {
+  const hasChildren = isNodeHasChildren(column);
+
+  return R.compose(
+    R.when(R.always(hasChildren), assocColumnsToTotalColumn(data, column)),
+    totalColumn(data),
+  )(column);
+});
+
+/**
+ * Account name column mapper.
+ */
+const accountNameColumn = 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,
+  };
+});
+
+/**
+ *
+ * @param {*} data
+ * @param {*} column
+ * @returns
+ */
+const dateRangeSoloColumnAttrs = (data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    accessor,
+    width: getReportColWidth(data, accessor),
+  };
+};
+
+/**
+ * Retrieves date range column.
+ */
+const dateRangeColumn = R.curry((data, column) => {
+  const isDateColumnHasColumns = isNodeHasChildren(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);
+});
+
+/**
+ * Detarmines the given string starts with `date-range` string.
+ */
+const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0;
+
+/**
+ *
+ * @param {} data
+ * @param {} column
+ */
+const dynamicColumnMapper = R.curry((data, column) => {
+  const indexTotalColumn = totalColumnCompose(data);
+  const indexAccountNameColumn = accountNameColumn(data);
+  const indexDatePeriodMapper = dateRangeColumn(data);
+
+  return R.compose(
+    R.when(R.pathSatisfies(isMatchesDateRange, ['key']), indexDatePeriodMapper),
+    R.when(R.pathEq(['key'], 'name'), indexAccountNameColumn),
+    R.when(R.pathEq(['key'], 'total'), indexTotalColumn),
+  )(column);
+});
+
+/**
+ *
+ * @param {*} columns
+ * @param {*} data
+ * @returns
+ */
+export const dynamicColumns = (columns, data) => {
+  return R.map(dynamicColumnMapper(data), columns);
+};

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/hooks.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import React from 'react';
+
+import { dynamicColumns } from './dynamicColumns';
+import { useProfitLossSheetContext } from './ProfitLossProvider';
+
+/**
+ * Retrieves the profit/loss table columns.
+ * @returns 
+ */
+export const useProfitLossSheetColumns = () => {
+  const {
+    profitLossSheet: { table },
+  } = useProfitLossSheetContext();
+
+  return React.useMemo(
+    () => dynamicColumns(table.columns || [], table.rows || []),
+    [table],
+  );
+};

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

@@ -0,0 +1,174 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+import * as Yup from 'yup';
+
+import { useAppQueryString } from '@/hooks';
+import { transformToForm } from '@/utils';
+import { castArray } from 'lodash';
+
+/**
+ * Retrieves the default profit/loss sheet query.
+ * @returns
+ */
+export const getDefaultProfitLossQuery = () => ({
+  basis: 'cash',
+  fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+  toDate: moment().endOf('year').format('YYYY-MM-DD'),
+  displayColumnsType: 'total',
+  filterByOption: 'with-transactions',
+
+  previousYear: false,
+  previousYearAmountChange: false,
+  previousYearPercentageChange: false,
+
+  previousPeriod: false,
+  previousPeriodAmountChange: false,
+  previousPeriodPercentageChange: false,
+
+  // Percentage columns.
+  percentageColumn: false,
+  percentageRow: false,
+  percentageIncome: false,
+  percentageExpense: false,
+
+  branchesIds: [],
+});
+
+/**
+ * Parses the profit/loss sheet query.
+ */
+const parseProfitLossQuery = (locationQuery) => {
+  const defaultQuery = getDefaultProfitLossQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+
+  return {
+    ...transformed,
+
+    // Ensures the branches ids is always array.
+    branchesIds: castArray(transformed.branchesIds),
+  };
+};
+
+/**
+ * Retrieves the balance sheet query API.
+ */
+export const useProfitLossSheetQuery = () => {
+  // Retrieves location query.
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  // Merges the default query with location query.
+  const query = React.useMemo(
+    () => parseProfitLossQuery(locationQuery),
+    [locationQuery],
+  );
+  return {
+    query,
+    locationQuery,
+    setLocationQuery,
+  };
+};
+
+/**
+ * Retrieves the profit/loss header validation schema.
+ * @returns
+ */
+export const useProfitLossHeaderValidationSchema = () => {
+  return Yup.object().shape({
+    fromDate: Yup.date().required().label(intl.get('from_date')),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(intl.get('to_date')),
+    filterByOption: Yup.string(),
+    displayColumnsType: Yup.string(),
+  });
+};
+
+/**
+ * Handles the 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 the preivous 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 amount checkbox change.
+ */
+export const handlePreviousYearChangeCheckboxChange = R.curry((form, event) => {
+  const isChecked = event.currentTarget.checked;
+
+  if (isChecked) {
+    form.setFieldValue('previousYear', isChecked);
+  }
+  form.setFieldValue('previousYearAmountChange', isChecked);
+});
+
+/**
+ * Handle previous year percentage checkbox change.
+ */
+export const handlePreviousYearPercentageCheckboxChange = R.curry(
+  (form, event) => {
+    const isChecked = event.currentTarget.checked;
+
+    if (isChecked) {
+      form.setFieldValue('previousYear', isChecked);
+    }
+    form.setFieldValue('previousYearPercentageChange', isChecked);
+  },
+);
+
+/**
+ * Handles previous period change amout checkbox change.
+ */
+export const handlePreviousPeriodChangeCheckboxChange = R.curry(
+  (form, event) => {
+    const isChecked = event.currentTarget.checked;
+
+    if (isChecked) {
+      form.setFieldValue('previousPeriod', isChecked);
+    }
+    form.setFieldValue('previousPeriodAmountChange', isChecked);
+  },
+);
+
+/**
+ * Handles previous period percentage checkbox change.
+ */
+export const handlePreviousPeriodPercentageCheckboxChange = R.curry(
+  (form, event) => {
+    const isChecked = event.currentTarget.checked;
+
+    if (isChecked) {
+      form.setFieldValue('previousPeriod', isChecked);
+    }
+    form.setFieldValue('previousPeriodPercentageChange', isChecked);
+  },
+);

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.tsx

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

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.tsx

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