re-structure to monorepo.

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