Merge branch 'feature/customer-balance' of https://github.com/abouolia/Ratteb into feature/customer-balance

2026-02-16 04:40:32 +00:00 · 2021-05-08 04:33:02 +02:00
parent e174b81e16 777657a7f4
commit 93dca653f9
27 changed files with 1280 additions and 42 deletions
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js
@@ -28,7 +28,6 @@ function CustomersBalanceSummary({
  // #withCustomersBalanceSummaryActions
  toggleCustomerBalanceFilterDrawer,
 }) {
-
  const [filter, setFilter] = useState({
    asDate: moment().endOf('day').format('YYYY-MM-DD'),
  });
@@ -41,7 +40,7 @@ function CustomersBalanceSummary({
    };
    setFilter({ ..._filter });
  };
-  
+
  // Handle number format.
  const handleNumberFormat = (values) => {
    setFilter({
@@ -56,7 +55,7 @@ function CustomersBalanceSummary({
    },
    [toggleCustomerBalanceFilterDrawer],
  );
-
+  console.log(filter, 'EE');
  return (
    <CustomersBalanceSummaryProvider filter={filter}>
      <CustomersBalanceSummaryActionsBar
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.js
@@ -10,16 +10,16 @@ const CustomersBalanceSummaryContext = createContext();
 */
 function CustomersBalanceSummaryProvider({ filter, ...props }) {
 
-  // const query = React.useMemo(() => transformFilterFormToQuery(filter), [
-  //   filter,
-  // ]);
+  const query = React.useMemo(() => transformFilterFormToQuery(filter), [
+    filter,
+  ]);

  const {
    data: CustomerBalanceSummary,
    isLoading: isCustomersBalanceLoading,
    isFetching: isCustomersBalanceFetching,
    refetch
-  } = useCustomerBalanceSummaryReport(filter, {
+  } = useCustomerBalanceSummaryReport(query, {
    keepPreviousData: true,
  });

--- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js
@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import moment from 'moment';
+import 'style/pages/FinancialStatements/ContactsTransactions.scss';
+
+import { FinancialStatement } from 'components';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
+import CustomersTransactionsHeader from './CustomersTransactionsHeader';
+import CustomersTransactionsTable from './CustomersTransactionsTable';
+import CustomersTranscationsActionsBar from './CustomersTranscationsActionsBar';
+
+import withCustomersTransactionsActions from './withCustomersTransactionsActions';
+import withSettings from 'containers/Settings/withSettings';
+import { CustomersTranscationsLoadingBar } from './components';
+import { CustomersTranscationsProvider } from './CustomersTranscationsProvider';
+
+import { compose } from 'utils';
+
+/**
+ * Customers transactions.
+ */
+function CustomersTransactions({
+  // #withPreferences
+  organizationName,
+
+  //#withCustomersTransactionsActions
+  toggleCustomersTransactionsFilterDrawer,
+}) {
+  // filter
+  const [filter, setFilter] = useState({
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+  });
+
+  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 (
+    <CustomersTranscationsProvider filter={filter}>
+      <CustomersTranscationsActionsBar
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <CustomersTranscationsLoadingBar />
+      <DashboardPageContent>
+        <FinancialStatement>
+          <div className={'financial-statement--transactions'}>
+            <CustomersTransactionsHeader
+              pageFilter={filter}
+              onSubmitFilter={handleFilterSubmit}
+            />
+
+            <div class="financial-statement__body">
+              <CustomersTransactionsTable companyName={organizationName} />
+            </div>
+          </div>
+        </FinancialStatement>
+      </DashboardPageContent>
+    </CustomersTranscationsProvider>
+  );
+}
+export default compose(
+  withSettings(({ organizationSettings }) => ({
+    organizationName: organizationSettings.name,
+  })),
+  withCustomersTransactionsActions,
+)(CustomersTransactions);
--- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js
@@ -0,0 +1,100 @@
+import React from 'react';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import moment from 'moment';
+import * as Yup from 'yup';
+import { Formik, Form } from 'formik';
+
+import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
+import CustomersTransactionsHeaderGeneralPanel from './CustomersTransactionsHeaderGeneralPanel';
+
+import withCustomersTransactions from './withCustomersTransactions';
+import withCustomersTransactionsActions from './withCustomersTransactionsActions';
+
+import { compose } from 'utils';
+
+/**
+ * Customers transactions header.
+ */
+function CustomersTransactionsHeader({
+  // #ownProps
+  onSubmitFilter,
+  pageFilter,
+
+  //#withCustomersTransactions
+  isFilterDrawerOpen,
+
+  //#withCustomersTransactionsActions
+  toggleCustomersTransactionsFilterDrawer: toggleFilterDrawer,
+}) {
+  const { formatMessage } = useIntl();
+
+  // Filter form initial values.
+  const initialValues = {
+    ...pageFilter,
+    fromDate: moment(pageFilter.fromDate).toDate(),
+    toDate: moment(pageFilter.toDate).toDate(),
+  };
+
+  // Validation schema.
+  const validationSchema = Yup.object().shape({
+    fromDate: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'fromDate' })),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(formatMessage({ id: 'toDate' })),
+  });
+
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    toggleFilterDrawer(false);
+    setSubmitting(false);
+  };
+
+  // Handle drawer close action.
+  const handleDrawerClose = () => {
+    toggleFilterDrawer(false);
+  };
+
+  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={<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>
+    </FinancialStatementHeader>
+  );
+}
+
+export default compose(
+  withCustomersTransactions(({ customersTransactionsDrawerFilter }) => ({
+    isFilterDrawerOpen: customersTransactionsDrawerFilter,
+  })),
+  withCustomersTransactionsActions,
+)(CustomersTransactionsHeader);
--- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+
+/**
+ * Customers transactions header - General panel.
+ */
+export default function CustomersTransactionsHeaderGeneralPanel() {
+  return (
+    <div>
+      <FinancialStatementDateRange />
+    </div>
+  );
+}
--- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
@@ -0,0 +1,59 @@
+import React, { useMemo, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import classNames from 'classnames';
+
+import FinancialSheet from 'components/FinancialSheet';
+import DataTable from 'components/DataTable';
+import { useCustomersTranscationsColumns } from './components';
+import { useCustomersTranscationsContext } from './CustomersTranscationsProvider';
+
+import { defaultExpanderReducer, getColumnWidth } from 'utils';
+
+/**
+ * Customers transcations table.
+ */
+export default function CustomersTransactionsTable({
+  // #ownProps
+  companyName,
+}) {
+  const { formatMessage } = useIntl();
+
+  const {
+    customersTransactions: { tableRows },
+    isCustomersTransactionsLoading,
+    filter,
+  } = useCustomersTranscationsContext();
+
+  const columns = useCustomersTranscationsColumns();
+
+  const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 4), [
+    tableRows,
+  ]);
+
+  const rowClassNames = (row) => {
+    return [`row-type--${row.original.rowTypes}`];
+  };
+
+  return (
+    <FinancialSheet
+      name="customer-transactions"
+      companyName={companyName}
+      sheetType={formatMessage({ id: 'customers_transactions' })}
+      loading={isCustomersTransactionsLoading}
+      fromDate={filter.fromDate}
+      toDate={filter.toDate}
+    >
+      <DataTable
+        className="bigcapital-datatable--financial-report"
+        columns={columns}
+        data={tableRows}
+        rowClassNames={rowClassNames}
+        noInitialFetch={true}
+        expandable={true}
+        expanded={expandedRows}
+        expandToggleColumn={1}
+        expandColumnSpace={0.8}
+      />
+    </FinancialSheet>
+  );
+}
--- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTranscationsActionsBar.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTranscationsActionsBar.js
@@ -0,0 +1,135 @@
+import React from 'react';
+import {
+  NavbarGroup,
+  Button,
+  Classes,
+  NavbarDivider,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+
+import Icon from 'components/Icon';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';
+
+import { useCustomersTranscationsContext } from './CustomersTranscationsProvider';
+import withCustomersTransactions from './withCustomersTransactions';
+import withCustomersTransactionsActions from './withCustomersTransactionsActions';
+
+import { compose, saveInvoke } from 'utils';
+
+/**
+ * Customers transcations actions bar.
+ */
+function CustomersTranscationsActionsBar({
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+
+  //#withCustomersTransactions
+  isFilterDrawerOpen,
+
+  //#withCustomersTransactionsActions
+  toggleCustomersTransactionsFilterDrawer,
+}) {
+  const {
+    isCustomersTransactionsLoading,
+    CustomersTransactionsRefetch,
+  } = useCustomersTranscationsContext();
+
+  // 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={'customize_report'} />
+            ) : (
+              <T id={'hide_customizer'} />
+            )
+          }
+          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,
+)(CustomersTranscationsActionsBar);
--- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTranscationsProvider.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTranscationsProvider.js
@@ -0,0 +1,42 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useCustomersTranscationsReport } from 'hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const CustomersTranscationsContext = createContext();
+
+/**
+ * Customers transcations provider.
+ */
+function CustomersTranscationsProvider({ filter, ...props }) {
+  const query = useMemo(() => transformFilterFormToQuery(filter), [
+    filter,
+  ]);
+
+  // fetches the customers transcations.
+  const {
+    data: customersTransactions,
+    isFetching: isCustomersTransactionsFetching,
+    isLoading: isCustomersTransactionsLoading,
+    refetch: CustomersTransactionsRefetch,
+  } = useCustomersTranscationsReport(query, { keepPreviousData: true });
+
+  const provider = {
+    customersTransactions,
+    isCustomersTransactionsFetching,
+    isCustomersTransactionsLoading,
+    CustomersTransactionsRefetch,
+    filter,
+    query
+  };
+
+  return (
+    <FinancialReportPage name={'customer-transactions'}>
+      <CustomersTranscationsContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+const useCustomersTranscationsContext = () =>
+  useContext(CustomersTranscationsContext);
+
+export { CustomersTranscationsProvider, useCustomersTranscationsContext };
--- a/client/src/containers/FinancialStatements/CustomersTransactions/components.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/components.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import { formatMessage } from 'services/intl';
+import { If } from 'components';
+import { useCustomersTranscationsContext } from './CustomersTranscationsProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+import { getForceWidth, defaultExpanderReducer, getColumnWidth } from 'utils';
+import { CellTextSpan } from 'components/Datatable/Cells';
+
+/**
+ * Retrieve customers transcations columns.
+ */
+export const useCustomersTranscationsColumns = () => {
+  const {
+    customersTransactions: { tableRows },
+    isCustomersTransactionsLoading,
+  } = useCustomersTranscationsContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'customer_name' }),
+        accessor: ({ cells }) => {
+          return (
+            <span
+              className={'force-width'}
+              style={{ minWidth: getForceWidth(cells[0].key) }}
+            >
+              {cells[0].value}
+            </span>
+          );
+        },
+        className: 'customer_name',
+        textOverview: true,
+        // width: 240,
+      },
+      {
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: 'cells[1].value',
+        className: 'name',
+        textOverview: true,
+        width: 180,
+      },
+      {
+        Header: formatMessage({ id: 'reference_type' }),
+        accessor: 'cells[2].value',
+        width: 180,
+        textOverview: true,
+      },
+      {
+        Header: formatMessage({ id: 'transaction_type' }),
+        accessor: 'cells[3].value',
+        width: 180,
+        textOverview: true,
+      },
+      {
+        Header: formatMessage({ id: 'credit' }),
+        accessor: 'cells[4].value',
+        className: 'credit',
+        textOverview: true,
+        width: getColumnWidth(tableRows, 'credit', {
+          minWidth: 140,
+          magicSpacing: 10,
+        }),
+      },
+      {
+        Header: formatMessage({ id: 'debit' }),
+        accessor: 'cells[5].value',
+        className: 'debit',
+        textOverview: true,
+        width: getColumnWidth(tableRows, 'debit', {
+          minWidth: 140,
+          magicSpacing: 10,
+        }),
+      },
+      {
+        Header: formatMessage({ id: 'running_balance' }),
+        accessor: 'cells[6].value',
+        className: 'running_balance',
+        textOverview: true,
+        width: getColumnWidth(tableRows, 'running_balance', {
+          minWidth: 140,
+          magicSpacing: 10,
+        }),
+      },
+    ],
+    [tableRows, formatMessage],
+  );
+};
+
+/**
+ * customers transcations loading bar.
+ */
+export function CustomersTranscationsLoadingBar() {
+  const { isCustomersTransactionsLoading } = useCustomersTranscationsContext();
+
+  return (
+    <If condition={isCustomersTransactionsLoading}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}
--- a/client/src/containers/FinancialStatements/CustomersTransactions/withCustomersTransactions.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/withCustomersTransactions.js
@@ -0,0 +1,15 @@
+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);
+};
--- a/client/src/containers/FinancialStatements/CustomersTransactions/withCustomersTransactionsActions.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/withCustomersTransactionsActions.js
@@ -0,0 +1,10 @@
+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);
--- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js
+++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js
@@ -9,16 +9,16 @@ const VendorsBalanceSummaryContext = React.createContext();
 * Vendors balance summary provider.
 */
 function VendorsBalanceSummaryProvider({ filter, ...props }) {
-  // const query = React.useMemo(() => transformFilterFormToQuery(filter), [
-  //   filter,
-  // ]);
+  const query = React.useMemo(() => transformFilterFormToQuery(filter), [
+    filter,
+  ]);

  const {
    data: VendorBalanceSummary,
    isLoading: isVendorsBalanceLoading,
    isFetching: isVendorsBalanceFetching,
    refetch,
-  } = useVendorsBalanceSummaryReport(filter, {
+  } = useVendorsBalanceSummaryReport(query, {
    keepPreviousData: true,
  });

--- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.js
@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import moment from 'moment';
+import 'style/pages/FinancialStatements/ContactsTransactions.scss';
+
+import { FinancialStatement } from 'components';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
+import VendorsTransactionsHeader from './VendorsTransactionsHeader';
+import VendorsTransactionsActionsBar from './VendorsTransactionsActionsBar';
+import VendorsTransactionsTable from './VendorsTransactionsTable';
+
+import withVendorsTransactionsActions from './withVendorsTransactionsActions';
+import withSettings from 'containers/Settings/withSettings';
+
+import { VendorsTransactionsProvider } from './VendorsTransactionsProvider';
+import { VendorsTransactionsLoadingBar } from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Vendors transactions.
+ */
+function VendorsTransactions({
+  // #withPreferences
+  organizationName,
+
+  //#withVendorsTransactionsActions
+  toggleVendorsTransactionsFilterDrawer,
+}) {
+  // filter
+  const [filter, setFilter] = useState({
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+  });
+
+  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(
+    () => () => {
+      toggleVendorsTransactionsFilterDrawer(false);
+    },
+    [toggleVendorsTransactionsFilterDrawer],
+  );
+
+  return (
+    <VendorsTransactionsProvider filter={filter}>
+      <VendorsTransactionsActionsBar
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <VendorsTransactionsLoadingBar />
+      <DashboardPageContent>
+        <FinancialStatement>
+          <div className={'financial-statement--transactions'}>
+            <VendorsTransactionsHeader
+              pageFilter={filter}
+              onSubmitFilter={handleFilterSubmit}
+            />
+            <div class="financial-statement__body">
+              <VendorsTransactionsTable companyName={organizationName} />
+            </div>
+          </div>
+        </FinancialStatement>
+      </DashboardPageContent>
+    </VendorsTransactionsProvider>
+  );
+}
+export default compose(
+  withSettings(({ organizationSettings }) => ({
+    organizationName: organizationSettings.name,
+  })),
+  withVendorsTransactionsActions,
+)(VendorsTransactions);
--- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.js
@@ -0,0 +1,134 @@
+import React from 'react';
+import {
+  NavbarGroup,
+  Button,
+  Classes,
+  NavbarDivider,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+
+import Icon from 'components/Icon';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';
+
+import { useVendorsTranscationsContext } from './VendorsTransactionsProvider';
+import withVendorsTransaction from './withVendorsTransaction';
+import withVendorsTransactionsActions from './withVendorsTransactionsActions';
+
+import { compose, saveInvoke } from 'utils';
+
+/**
+ * vendors transcations actions bar.
+ */
+function VendorsTransactionsActionsBar({
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+
+  //#withVendorsTransaction
+  isFilterDrawerOpen,
+
+  //#withVendorsTransactionsActions
+  toggleVendorsTransactionsFilterDrawer,
+}) {
+  const {
+    isVendorsTransactionsLoading,
+    refetch,
+  } = useVendorsTranscationsContext();
+
+  // Handle filter toggle click.
+  const handleFilterToggleClick = () => {
+    toggleVendorsTransactionsFilterDrawer();
+  };
+
+  // Handle recalculate the report button.
+  const handleRecalcReport = () => {
+    refetch();
+  };
+
+  // Handle number format form submit.
+  const handleNumberFormatSubmit = (values) => {
+    saveInvoke(onNumberFormatSubmit, values);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
+          text={<T id={'recalc_report'} />}
+          onClick={handleRecalcReport}
+          icon={<Icon icon="refresh-16" iconSize={16} />}
+        />
+        <NavbarDivider />
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--table-views')}
+          icon={<Icon icon="cog-16" iconSize={16} />}
+          text={
+            isFilterDrawerOpen ? (
+              <T id={'customize_report'} />
+            ) : (
+              <T id={'hide_customizer'} />
+            )
+          }
+          onClick={handleFilterToggleClick}
+          active={isFilterDrawerOpen}
+        />
+        <NavbarDivider />
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={isVendorsTransactionsLoading}
+            />
+          }
+          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(
+  withVendorsTransaction(({ vendorsTransactionsDrawerFilter }) => ({
+    isFilterDrawerOpen: vendorsTransactionsDrawerFilter,
+  })),
+  withVendorsTransactionsActions,
+)(VendorsTransactionsActionsBar);
--- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js
@@ -0,0 +1,100 @@
+import React from 'react';
+import * as Yup from 'yup';
+import moment from 'moment';
+import { Formik, Form } from 'formik';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
+import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
+import VendorsTransactionsHeaderGeneralPanel from './VendorsTransactionsHeaderGeneralPanel';
+
+import withVendorsTransaction from './withVendorsTransaction';
+import withVendorsTransactionsActions from './withVendorsTransactionsActions';
+
+import { compose } from 'utils';
+
+/**
+ * Vendors transactions header.
+ */
+
+function VendorsTransactionsHeader({
+  // #ownProps
+  onSubmitFilter,
+  pageFilter,
+
+  //#withVendorsTransaction
+  isFilterDrawerOpen,
+
+  //#withVendorsTransactionsActions
+  toggleVendorsTransactionsFilterDrawer: toggleFilterDrawer,
+}) {
+  const { formatMessage } = useIntl();
+
+  // Filter form initial values.
+  const initialValues = {
+    ...pageFilter,
+    fromDate: moment(pageFilter.fromDate).toDate(),
+    toDate: moment(pageFilter.toDate).toDate(),
+  };
+
+  // Validation schema.
+  const validationSchema = Yup.object().shape({
+    fromDate: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'fromDate' })),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(formatMessage({ id: 'toDate' })),
+  });
+
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    toggleFilterDrawer(false);
+    setSubmitting(false);
+  };
+
+  // Handle drawer close action.
+  const handleDrawerClose = () => {
+    toggleFilterDrawer(false);
+  };
+
+  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={<VendorsTransactionsHeaderGeneralPanel />}
+            />
+          </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(
+  withVendorsTransactionsActions,
+  withVendorsTransaction(({ vendorsTransactionsDrawerFilter }) => ({
+    isFilterDrawerOpen: vendorsTransactionsDrawerFilter,
+  })),
+)(VendorsTransactionsHeader);
--- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+
+/**
+ * Vendors transactions header - General panel.
+ */
+export default function VendorsTransactionsHeaderGeneralPanel() {
+  return (
+    <div>
+      <FinancialStatementDateRange />
+    </div>
+  );
+}
--- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js
@@ -0,0 +1,40 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useVendorsTranscationsReport } from 'hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const VendorsTransactionsContext = createContext();
+
+/**
+ * Vendors transcations provider.
+ */
+function VendorsTransactionsProvider({ filter, ...props }) {
+  const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
+
+  const {
+    data: vendorsTransactions,
+    isFetching: isVendorsTransactionFetching,
+    isLoading: isVendorsTransactionsLoading,
+    refetch,
+  } = useVendorsTranscationsReport();
+
+  const provider = {
+    vendorsTransactions,
+    isVendorsTransactionsLoading,
+    isVendorsTransactionFetching,
+    refetch,
+    filter,
+    query,
+  };
+
+  return (
+    <FinancialReportPage name={'vendor-transactions'}>
+      <VendorsTransactionsContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+
+const useVendorsTranscationsContext = () =>
+  useContext(VendorsTransactionsContext);
+
+export { VendorsTransactionsProvider, useVendorsTranscationsContext };
--- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
@@ -0,0 +1,60 @@
+import React, { useMemo, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import classNames from 'classnames';
+
+import FinancialSheet from 'components/FinancialSheet';
+import DataTable from 'components/DataTable';
+import { useVendorsTransactionsColumns } from './components';
+import { useVendorsTranscationsContext } from './VendorsTransactionsProvider';
+
+import { defaultExpanderReducer, getColumnWidth } from 'utils';
+
+/**
+ * Vendors transcations table.
+ */
+
+export default function VendorsTransactionsTable({
+  // #ownProps
+  companyName,
+}) {
+  const { formatMessage } = useIntl();
+
+  const {
+    vendorsTransactions: { tableRows },
+    isVendorsTransactionsLoading,
+    filter,
+  } = useVendorsTranscationsContext();
+
+  const columns = useVendorsTransactionsColumns();
+
+  const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 5), [
+    tableRows,
+  ]);
+
+  const rowClassNames = (row) => {
+    return [`row-type--${row.original.rowTypes}`];
+  };
+
+  return (
+    <FinancialSheet
+      name="vendor-transactions"
+      companyName={companyName}
+      sheetType={formatMessage({ id: 'vendors_transactions' })}
+      loading={isVendorsTransactionsLoading}
+      fromDate={filter.fromDate}
+      toDate={filter.toDate}
+    >
+      <DataTable
+        className="bigcapital-datatable--financial-report"
+        columns={columns}
+        data={tableRows}
+        rowClassNames={rowClassNames}
+        noInitialFetch={true}
+        expandable={true}
+        expanded={expandedRows}
+        expandToggleColumn={1}
+        expandColumnSpace={0.8}
+      />
+    </FinancialSheet>
+  );
+}
--- a/client/src/containers/FinancialStatements/VendorsTransactions/components.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/components.js
@@ -0,0 +1,99 @@
+import React from 'react';
+import { formatMessage } from 'services/intl';
+import { If } from 'components';
+import { useVendorsTranscationsContext } from './VendorsTransactionsProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+import { defaultExpanderReducer, getColumnWidth, getForceWidth } from 'utils';
+import { CellTextSpan } from 'components/Datatable/Cells';
+
+/**
+ * Retrieve vendors transcations columns.
+ */
+export const useVendorsTransactionsColumns = () => {
+  const {
+    vendorsTransactions: { tableRows },
+  } = useVendorsTranscationsContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'vendor_name' }),
+        accessor: ({ cells }) => {
+          return (
+            <span
+              className={'force-width'}
+              style={{ minWidth: getForceWidth(cells[0].key) }}
+            >
+              {cells[0].value}
+            </span>
+          );
+        },
+        className: 'vendor_name',
+        textOverview: true,
+        // width: 240,
+      },
+      {
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: 'cells[1].value',
+        className: 'name',
+        textOverview: true,
+        width: 180,
+      },
+      {
+        Header: formatMessage({ id: 'reference_type' }),
+        accessor: 'cells[2].value',
+        textOverview: true,
+        width: 180,
+      },
+      {
+        Header: formatMessage({ id: 'transaction_type' }),
+        accessor: 'cells[3].value',
+        textOverview: true,
+        width: 180,
+      },
+      {
+        Header: formatMessage({ id: 'credit' }),
+        accessor: 'cells[4].value',
+        className: 'credit',
+        textOverview: true,
+        width: getColumnWidth(tableRows, 'credit', {
+          minWidth: 140,
+          magicSpacing: 10,
+        }),
+      },
+      {
+        Header: formatMessage({ id: 'debit' }),
+        accessor: 'cells[5].value',
+        className: 'debit',
+        textOverview: true,
+        width: getColumnWidth(tableRows, 'debit', {
+          minWidth: 140,
+          magicSpacing: 10,
+        }),
+      },
+      {
+        Header: formatMessage({ id: 'running_balance' }),
+        accessor: 'cells[6].value',
+        className: 'running_balance',
+        textOverview: true,
+        width: getColumnWidth(tableRows, 'running_balance', {
+          minWidth: 140,
+          magicSpacing: 10,
+        }),
+      },
+    ],
+    [tableRows, formatMessage],
+  );
+};
+
+/**
+ * vendors transcations loading bar.
+ */
+export function VendorsTransactionsLoadingBar() {
+  const { isVendorsTransactionsLoading } = useVendorsTranscationsContext();
+  return (
+    <If condition={isVendorsTransactionsLoading}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}
--- a/client/src/containers/FinancialStatements/VendorsTransactions/withVendorsTransaction.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/withVendorsTransaction.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { getVendorsTransactionsFilterDrawer } from 'store/financialStatement/financialStatements.selectors';
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      vendorsTransactionsDrawerFilter: getVendorsTransactionsFilterDrawer(
+        state,
+        props,
+      ),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
--- a/client/src/containers/FinancialStatements/VendorsTransactions/withVendorsTransactionsActions.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/withVendorsTransactionsActions.js
@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { toggleVendorsTransactionsFilterDrawer } from 'store/financialStatement/financialStatements.actions';
+
+const mapActionsToProps = (dispatch) => ({
+  toggleVendorsTransactionsFilterDrawer: (toggle) =>
+    dispatch(toggleVendorsTransactionsFilterDrawer(toggle)),
+});
+
+export default connect(null, mapActionsToProps);
--- a/client/src/hooks/query/financialReports.js
+++ b/client/src/hooks/query/financialReports.js
@@ -298,6 +298,9 @@ export function useCustomerBalanceSummaryReport(query, props) {
      method: 'get',
      url: '/financial_statements/customer-balance-summary',
      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
    },
    {
      select: (res) => ({
@@ -324,12 +327,16 @@ export function useVendorsBalanceSummaryReport(query, props) {
      method: 'get',
      url: '/financial_statements/vendor-balance-summary',
      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
    },
+
    {
      select: (res) => ({
        columns: res.data.columns,
        query: res.data.query,
-        tableRows: res.data.table.rows,
+        tableRows: res.data.table.data,
      }),
      defaultData: {
        tableRows: [],
@@ -350,6 +357,9 @@ export function useCustomersTranscationsReport(query, props) {
      method: 'get',
      url: '/financial_statements/transactions-by-customers',
      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
    },
    {
      select: (res) => ({
@@ -364,3 +374,31 @@ export function useCustomersTranscationsReport(query, props) {
    },
  );
 }
+
+/**
+ * Retrieve vendors transcations report.
+ */
+export function useVendorsTranscationsReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.VENDORS_TRANSACTIONS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/transactions-by-vendors',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        data: res.data.table,
+        tableRows: res.data.table.data,
+      }),
+      defaultData: {
+        tableRows: [],
+        data: [],
+      },
+      ...props,
+    },
+  );
+}
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -1055,6 +1055,12 @@ export default {
  transaction_date: 'Transaction date',
  transaction_type: 'Transaction type',
  running_balance: 'Running Balance',
-  account_normal:'Account normal',
-  published_at:'Published at',
+  account_normal: 'Account normal',
+  published_at: 'Published at',
+  customers_balance_summary: 'Customers Balance Summary',
+  vendors_balance_summary: 'Vendors Balance Summary',
+  percentage_of_column: 'Percentage',
+  customers_transactions: 'Customers Transcations',
+  vendors_transactions: 'Vendors Transcations',
+  reference_type: 'Reference type',
 };
--- a/client/src/routes/dashboard.js
+++ b/client/src/routes/dashboard.js
@@ -264,11 +264,11 @@ export default [
  },
  {
    path: `/financial-reports/transactions-by-customers`,
-    // component: lazy(() =>
-    //   import(
-    //     'containers/FinancialStatements/CustomersTransactions/CustomersTransactions'
-    //   ),
-    // ),
+    component: lazy(() =>
+      import(
+        'containers/FinancialStatements/CustomersTransactions/CustomersTransactions'
+      ),
+    ),
    breadcrumb: 'Customers Transactions ',
    hint: '..',
    pageTitle: formatMessage({ id: 'customers_transactions' }),
@@ -276,12 +276,12 @@ export default [
    sidebarExpand: false,
  },
  {
-    path: `/financial-reports/vendors-transactions`,
-    // component: lazy(() =>
-    //   import(
-    //     'containers/FinancialStatements/'
-    //   ),
-    // ),
+    path: `/financial-reports/transactions-by-vendors`,
+    component: lazy(() =>
+      import(
+        'containers/FinancialStatements/VendorsTransactions/VendorsTransactions'
+      ),
+    ),
    breadcrumb: 'Vendors Transactions ',
    hint: '..',
    pageTitle: formatMessage({ id: 'vendors_transactions' }),
--- a/client/src/store/financialStatement/financialStatements.actions.js
+++ b/client/src/store/financialStatement/financialStatements.actions.js
@@ -129,12 +129,11 @@ export function toggleInventoryValuationFilterDrawer(toggle) {
  };
 }

-
 /**
 * Toggles display of the customers balance summary filter drawer.
 * @param {boolean} toggle
 */
- export function toggleCustomersBalanceSummaryFilterDrawer(toggle) {
+export function toggleCustomersBalanceSummaryFilterDrawer(toggle) {
  return {
    type: `${t.CUSTOMERS_BALANCE_SUMMARY}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
    payload: {
@@ -146,7 +145,7 @@ export function toggleInventoryValuationFilterDrawer(toggle) {
 * Toggles display of the vendors balance summary filter drawer.
 * @param {boolean} toggle
 */
- export function toggleVendorsBalanceSummaryFilterDrawer(toggle) {
+export function toggleVendorsBalanceSummaryFilterDrawer(toggle) {
  return {
    type: `${t.VENDORS_BALANCE_SUMMARY}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
    payload: {
@@ -158,7 +157,7 @@ export function toggleInventoryValuationFilterDrawer(toggle) {
 * Toggles display of the customers transactions filter drawer.
 * @param {boolean} toggle
 */
- export function toggleCustomersTransactionsFilterDrawer(toggle) {
+export function toggleCustomersTransactionsFilterDrawer(toggle) {
  return {
    type: `${t.CUSTOMERS_TRANSACTIONS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
    payload: {
@@ -167,15 +166,15 @@ export function toggleInventoryValuationFilterDrawer(toggle) {
  };
 }

-// /**
-//  * Toggles display of the vendors transactions filter drawer.
-//  * @param {boolean} toggle
-//  */
-//  export function toggleVendorsTransactionsFilterDrawer(toggle) {
-//   return {
-//     type: `${t.VENDORS_TRANSACTIONS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
-//     payload: {
-//       toggle,
-//     },
-//   };
-// }
+/**
+ * Toggles display of the vendors transactions filter drawer.
+ * @param {boolean} toggle
+ */
+export function toggleVendorsTransactionsFilterDrawer(toggle) {
+  return {
+    type: `${t.VENDORS_TRANSACTIONS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
+    payload: {
+      toggle,
+    },
+  };
+}
--- a/client/src/store/financialStatement/financialStatements.types.js
+++ b/client/src/store/financialStatement/financialStatements.types.js
@@ -13,5 +13,5 @@ export default {
  CUSTOMERS_BALANCE_SUMMARY: 'CUSTOMERS BALANCE SUMMARY',
  VENDORS_BALANCE_SUMMARY: 'VENDORS BALANCE SUMMARY',
  CUSTOMERS_TRANSACTIONS: 'CUSTOMERS TRANSACTIONS',
-  // VENDORS_TRANSACTIONS: 'CUSTOMERS TRANSACTIONS',
+  VENDORS_TRANSACTIONS: 'VENDORS TRANSACTIONS',
 };
--- a/client/src/style/pages/FinancialStatements/ContactsTransactions.scss
+++ b/client/src/style/pages/FinancialStatements/ContactsTransactions.scss
@@ -0,0 +1,75 @@
+.financial-sheet {
+  &--customer-transactions,
+  &--vendor-transactions {
+    .financial-sheet__table {
+      .tbody,
+      .thead {
+        .tr .td,
+        .tr .th {
+          &.credit,
+          &.debit,
+          &.running_balance {
+            text-align: right;
+          }
+        }
+      }
+      .tbody {
+        .tr .td {
+          padding-top: 0.2rem;
+          padding-bottom: 0.2rem;
+          border-top-color: transparent;
+          border-bottom-color: transparent;
+
+          &.customer_name,
+          &.vendor_name {
+            > div {
+              display: flex;
+            }
+            span.force-width {
+              position: relative;
+            }
+          }
+        }
+        .tr:not(.no-results) .td {
+          // border-left: 1px solid #ececec;
+        }
+
+        .tr.row-type {
+          &--CUSTOMER,
+          &--VENDOR {
+            .td {
+              &.customer_name,
+              &.vendor_name {
+                font-weight: 500;
+              }
+              &.name {
+                border-left-color: transparent;
+              }
+            }
+            &:not(:first-child).is-expanded .td {
+              border-top: 1px solid #ddd;
+            }
+          }
+          &--OPENING_BALANCE,
+          // &--TRANSACTION,
+          &--CLOSING_BALANCE {
+            font-weight: 500;
+          }
+          &--CUSTOMER:last-child {
+            .td {
+              border-bottom: 1px solid #ddd;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.financial-statement--transactions {
+  .financial-header-drawer {
+    .bp3-drawer {
+      max-height: 350px;
+    }
+  }
+}