re-structure to monorepo.

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

@@ -0,0 +1,67 @@
+// @ts-nocheck
+import React, { useCallback, useEffect } from 'react';
+import moment from 'moment';
+
+import { FinancialStatement, DashboardPageContent } from '@/components';
+
+import JournalHeader from './JournalHeader';
+import JournalActionsBar from './JournalActionsBar';
+import { JournalBody } from './JournalBody';
+import { JournalSheetProvider } from './JournalProvider';
+import { JournalSheetLoadingBar, JournalSheetAlerts } from './components';
+
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import withJournalActions from './withJournalActions';
+
+import { useJournalQuery } from './utils';
+import { compose } from '@/utils';
+
+/**
+ * Journal sheet.
+ */
+function Journal({
+  // #withJournalActions
+  toggleJournalSheetFilter,
+}) {
+  const {query, setLocationQuery} = useJournalQuery();
+
+  // Handle financial statement filter change.
+  const handleFilterSubmit = useCallback(
+    (filter) => {
+      const _filter = {
+        ...filter,
+        fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
+        toDate: moment(filter.toDate).format('YYYY-MM-DD'),
+      };
+      setLocationQuery(_filter);
+    },
+    [setLocationQuery],
+  );
+  // Hide the journal sheet filter drawer once the page unmount.
+  useEffect(
+    () => () => {
+      toggleJournalSheetFilter(false);
+    },
+    [toggleJournalSheetFilter],
+  );
+
+  return (
+    <JournalSheetProvider query={query}>
+      <JournalActionsBar />
+
+      <DashboardPageContent>
+        <FinancialStatement>
+          <JournalHeader
+            onSubmitFilter={handleFilterSubmit}
+            pageFilter={query}
+          />
+          <JournalSheetLoadingBar />
+          <JournalSheetAlerts />
+          <JournalBody />
+        </FinancialStatement>
+      </DashboardPageContent>
+    </JournalSheetProvider>
+  );
+}
+
+export default compose(withDashboardActions, withJournalActions)(Journal);

packages/webapp/src/containers/FinancialStatements/Journal/JournalActionsBar.tsx

@@ -0,0 +1,103 @@
+// @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 withJournalActions from './withJournalActions';
+import withJournal from './withJournal';
+
+import { compose } from '@/utils';
+import { useJournalSheetContext } from './JournalProvider';
+
+/**
+ * Journal sheeet - Actions bar.
+ */
+function JournalActionsBar({
+  // #withJournal
+  isFilterDrawerOpen,
+
+  // #withJournalActions
+  toggleJournalSheetFilter,
+}) {
+  const { refetchSheet } = useJournalSheetContext();
+
+  // Handle filter toggle click.
+  const handleFilterToggleClick = () => {
+    toggleJournalSheetFilter();
+  };
+
+  // Handle re-calc the report.
+  const handleRecalcReport = () => {
+    refetchSheet();
+  };
+
+  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'} />
+            )
+          }
+          active={isFilterDrawerOpen}
+          onClick={handleFilterToggleClick}
+        />
+        <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(
+  withJournal(({ journalSheetDrawerFilter }) => ({
+    isFilterDrawerOpen: journalSheetDrawerFilter,
+  })),
+  withJournalActions,
+)(JournalActionsBar);

packages/webapp/src/containers/FinancialStatements/Journal/JournalBody.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '@/components';
+import { JournalTable } from './JournalTable';
+import { useJournalSheetContext } from './JournalProvider';
+
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+/**
+ * Journal report body.
+ * @returns {JSX.Element}
+ */
+function JournalBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isLoading } = useJournalSheetContext();
+
+  return (
+    <FinancialReportBody>
+      {isLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <JournalTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const JournalBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(JournalBodyJSX);

packages/webapp/src/containers/FinancialStatements/Journal/JournalHeader.tsx

@@ -0,0 +1,104 @@
+// @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 { Tab, Tabs, Button, Intent } from '@blueprintjs/core';
+
+import { FormattedMessage as T } from '@/components';
+
+import JournalSheetHeaderGeneral from './JournalSheetHeaderGeneral';
+import FinancialStatementHeader from '@/containers/FinancialStatements/FinancialStatementHeader';
+
+import withJournal from './withJournal';
+import withJournalActions from './withJournalActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Journal sheet header.
+ */
+function JournalHeader({
+  pageFilter,
+  onSubmitFilter,
+
+  // #withJournalActions
+  toggleJournalSheetFilter,
+
+  // #withJournal
+  journalSheetDrawerFilter,
+}) {
+  const initialValues = {
+    ...pageFilter,
+    fromDate: moment(pageFilter.fromDate).toDate(),
+    toDate: moment(pageFilter.toDate).toDate(),
+  };
+
+  // Validation schema.
+  const validationSchema = Yup.object().shape({
+    fromDate: Yup.date().required(),
+    toDate: Yup.date().min(Yup.ref('fromDate')).required(),
+  });
+
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    setSubmitting(false);
+    toggleJournalSheetFilter(false);
+  };
+
+  // Handle cancel journal drawer header.
+  const handleCancelClick = () => {
+    toggleJournalSheetFilter(false);
+  };
+
+  const handleDrawerClose = () => {
+    toggleJournalSheetFilter(false);
+  };
+
+  return (
+    <JournalDrawerHeader
+      isOpen={journalSheetDrawerFilter}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
+      <Formik
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+        validationSchema={validationSchema}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id="general"
+              title={<T id={'general'} />}
+              panel={<JournalSheetHeaderGeneral />}
+            />
+          </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>
+    </JournalDrawerHeader>
+  );
+}
+
+export default compose(
+  withJournal(({ journalSheetDrawerFilter }) => ({
+    journalSheetDrawerFilter,
+  })),
+  withJournalActions,
+)(JournalHeader);
+
+const JournalDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 350px;
+  }
+`;

packages/webapp/src/containers/FinancialStatements/Journal/JournalProvider.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useJournalSheet } from '@/hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const JournalSheetContext = createContext();
+
+/**
+ * Journal sheet provider.
+ */
+function JournalSheetProvider({ query, ...props }) {
+  // Transforms the sheet query to request query.
+  const requestQuery = React.useMemo(
+    () => transformFilterFormToQuery(query),
+    [query],
+  );
+
+  const {
+    data: journalSheet,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useJournalSheet(requestQuery, { keepPreviousData: true });
+
+  const provider = {
+    journalSheet,
+    isLoading,
+    isFetching,
+    refetchSheet: refetch,
+  };
+
+  return (
+    <FinancialReportPage name={'journal-sheet'}>
+      <JournalSheetContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+
+const useJournalSheetContext = () => useContext(JournalSheetContext);
+
+export { JournalSheetProvider, useJournalSheetContext };

packages/webapp/src/containers/FinancialStatements/Journal/JournalSheetHeaderGeneral.tsx

@@ -0,0 +1,11 @@
+// @ts-nocheck
+import React from 'react';
+import FinancialStatementDateRange from '../FinancialStatementDateRange';
+
+export default function JournalSheetHeaderGeneralPanel({}) {
+  return (
+    <div>
+      <FinancialStatementDateRange />
+    </div>
+  );
+}

packages/webapp/src/containers/FinancialStatements/Journal/JournalTable.tsx

@@ -0,0 +1,95 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { TableStyle } from '@/constants';
+import {
+  ReportDataTable,
+  FinancialSheet,
+  TableFastCell,
+  TableVirtualizedListRows,
+} from '@/components';
+
+import { useJournalTableColumns } from './components';
+import { useJournalSheetContext } from './JournalProvider';
+
+import { defaultExpanderReducer, tableRowTypesToClassnames } from '@/utils';
+
+/**
+ * Journal sheet table.
+ * @returns {JSX.Element}
+ */
+export function JournalTable({ companyName }) {
+  // Journal sheet context.
+  const {
+    journalSheet: { tableRows, query },
+    isLoading,
+  } = useJournalSheetContext();
+
+  // Retreive the journal table columns.
+  const columns = useJournalTableColumns();
+
+  // Default expanded rows of general journal table.
+  const expandedRows = useMemo(() => defaultExpanderReducer([], 1), []);
+
+  return (
+    <FinancialSheet
+      companyName={companyName}
+      sheetType={intl.get('journal_sheet')}
+      fromDate={query.from_date}
+      toDate={query.to_date}
+      name="journal"
+      loading={isLoading}
+      fullWidth={true}
+    >
+      <JournalDataTable
+        columns={columns}
+        data={tableRows}
+        rowClassNames={tableRowTypesToClassnames}
+        noResults={intl.get(
+          'this_report_does_not_contain_any_data_between_date_period',
+        )}
+        expanded={expandedRows}
+        sticky={true}
+        TableRowsRenderer={TableVirtualizedListRows}
+        // #TableVirtualizedListRows props.
+        vListrowHeight={28}
+        vListOverscanRowCount={2}
+        TableCellRenderer={TableFastCell}
+        id={'journal'}
+        styleName={TableStyle.Constrant}
+      />
+    </FinancialSheet>
+  );
+}
+
+const JournalDataTable = styled(ReportDataTable)`
+  .table {
+    .tbody {
+      .tr:not(.no-results) .td {
+        padding: 0.3rem 0.4rem;
+        color: #000;
+        border-bottom-color: transparent;
+        min-height: 28px;
+        border-left: 1px solid #ececec;
+
+        &:first-of-type {
+          border-left: 0;
+        }
+      }
+      .tr:not(.no-results):last-child {
+        .td {
+          border-bottom: 1px solid #dbdbdb;
+        }
+      }
+      .tr.row_type--TOTAL_ENTRIES {
+        font-weight: 600;
+      }
+
+      .tr:not(.no-results) {
+        height: 28px;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,115 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import { Button } from '@blueprintjs/core';
+
+import { Icon, If, FormattedMessage as T } from '@/components';
+import { useJournalSheetContext } from './JournalProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+import { Align } from '@/constants';
+
+/**
+ * Retrieve the journal table columns.
+ */
+export const useJournalTableColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: (row) =>
+          row.date ? moment(row.date).format('YYYY MMM DD') : '',
+        className: 'date',
+        width: 100,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('transaction_type'),
+        accessor: 'reference_type_formatted',
+        className: 'reference_type_formatted',
+        width: 120,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('num'),
+        accessor: 'transaction_number',
+        className: 'reference_id',
+        width: 70,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'note',
+        className: 'note',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('acc_code'),
+        accessor: 'account_code',
+        width: 95,
+        className: 'account_code',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('account'),
+        accessor: 'account_name',
+        className: 'account_name',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: 'formatted_credit',
+        align: Align.Right,
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: 'formatted_debit',
+        align: Align.Right,
+      },
+    ],
+    [],
+  );
+};
+
+/**
+ * Journal sheet loading bar.
+ */
+export function JournalSheetLoadingBar() {
+  const { isFetching } = useJournalSheetContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}
+
+/**
+ * Journal sheet alerts.
+ */
+export function JournalSheetAlerts() {
+  const { isLoading, refetchSheet, journalSheet } = useJournalSheetContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    refetchSheet();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <If condition={journalSheet.meta.is_cost_compute_running}>
+      <div class="alert-compute-running">
+        <Icon icon="info-block" iconSize={12} />
+        <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/Journal/utils.tsx

@@ -0,0 +1,51 @@
+// @ts-nocheck
+import React from 'react';
+import { castArray } from 'lodash';
+import moment from 'moment';
+
+import { useAppQueryString } from '@/hooks';
+import { transformToForm } from '@/utils';
+
+/**
+ * Retrieves the default journal report query.
+ */
+export const getDefaultJournalQuery = () => {
+  return {
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+    basis: 'accural',
+  };
+};
+
+
+/**
+ * Parses balance sheet query.
+ */
+ const parseJournalQuery = (locationQuery) => {
+  const defaultQuery = getDefaultJournalQuery();
+
+  return {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+};
+
+/**
+ * Retrieves the jorunal sheet query.
+ */
+export const useJournalQuery = () => {
+  // Retrieves location query.
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  // Merges the default filter query with location URL query.
+  const query = React.useMemo(
+    () => parseJournalQuery(locationQuery),
+    [locationQuery],
+  );
+
+  return {
+    query,
+    locationQuery,
+    setLocationQuery,
+  };
+};

packages/webapp/src/containers/FinancialStatements/Journal/withJournal.tsx

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

packages/webapp/src/containers/FinancialStatements/Journal/withJournalActions.tsx

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