feat: Inventory item details report.

feat: Cash flow statement report.

client/src/components/NumberFormatDropdown/NumberFormatFields.js

@@ -73,7 +73,7 @@ export default function NumberFormatFields({}) {
             label={<T id={'money_format'} />}
             helperText={<ErrorMessage name="formatMoney" />}
             intent={inputIntent({ error, touched })}
-            className={classNames(CLASSES.FILL)}
+            className={classNames('form-group--money-format', CLASSES.FILL)}
           >
             <ListSelect
               items={moneyFormat}

client/src/config/financialReportsMenu.js

@@ -4,44 +4,42 @@ export const financialReportMenus = [
     reports: [
       {
         title: 'Balance Sheet Report',
-        desc:
-          "Reports a company's assets, liabilities and shareholders' equity at a specific point in time with comparison period(s).",
+        desc: "Reports a company's assets, liabilities and shareholders' equity at a specific point in time with comparison period(s).",
         link: '/financial-reports/balance-sheet',
       },
       {
         title: 'Trial Balance Sheet',
-        desc:
-          'Summarizes the credit and debit balance of each account in your chart of accounts at a specific point in time.',
+        desc: 'Summarizes the credit and debit balance of each account in your chart of accounts at a specific point in time.',
         link: '/financial-reports/trial-balance-sheet',
       },
-      {
-        title: 'Journal Report',
-        desc:
-          'The debit and credit entries of system transactions, sorted by date.',
-        link: '/financial-reports/journal-sheet',
-      },
       {
         title: 'Profit/Loss Report',
-        desc:
-          'Reports the revenues, costs and expenses incurred during a specific point in time with comparison period(s).',
+        desc: 'Reports the revenues, costs and expenses incurred during a specific point in time with comparison period(s).',
         link: '/financial-reports/profit-loss-sheet',
       },
+      {
+        title: 'Cash Flow Statement',
+        desc: 'Reports inflow and outflow of cash and cash equivalents between a specific two points of time.',
+        link: '/financial-reports/cash-flow',
+      },
+      {
+        title: 'Journal Report',
+        desc: 'The debit and credit entries of system transactions, sorted by date.',
+        link: '/financial-reports/journal-sheet',
+      },
       {
         title: 'General Ledger Report',
-        desc:
-          'Reports every transaction going in and out of your accounts and organized by accounts and date to monitoring activity of accounts.',
+        desc: 'Reports every transaction going in and out of your accounts and organized by accounts and date to monitoring activity of accounts.',
         link: '/financial-reports/general-ledger',
       },
       {
         title: 'Receivable Aging Summary',
-        desc:
-          'Summarize total unpaid balances of customers invoices with number of days the unpaid invoice is overdue.',
+        desc: 'Summarize total unpaid balances of customers invoices with number of days the unpaid invoice is overdue.',
         link: '/financial-reports/receivable-aging-summary',
       },
       {
         title: 'Payable Aging Summary',
-        desc:
-          'Summarize total unpaid balances of vendors purchase invoices with the number of days the unpaid invoice is overdue.',
+        desc: 'Summarize total unpaid balances of vendors purchase invoices with the number of days the unpaid invoice is overdue.',
         link: '/financial-reports/payable-aging-summary',
       },
     ],
@@ -54,20 +52,17 @@ export const SalesAndPurchasesReportMenus = [
     reports: [
       {
         title: 'Purchases By Items',
-        desc:
-          'Shows the average age of unresolved issues for a project or filter. This helps you see whether your backlog is being kept up to date.',
+        desc: 'Shows the average age of unresolved issues for a project or filter. This helps you see whether your backlog is being kept up to date.',
         link: '/financial-reports/purchases-by-items',
       },
       {
         title: 'Sales By Items',
-        desc:
-          'Summarize the business’s sold items quantity, income and average income rate of each item during a specific point in time.',
+        desc: 'Summarize the business’s sold items quantity, income and average income rate of each item during a specific point in time.',
         link: '/financial-reports/sales-by-items',
       },
       {
         title: 'Inventory valuation',
-        desc:
-          'Summarize the business’s purchase items quantity, cost and average cost rate of each item during a specific point in time.',
+        desc: 'Summarize the business’s purchase items quantity, cost and average cost rate of each item during a specific point in time.',
         link: '/financial-reports/inventory-valuation',
       },
       {
@@ -90,6 +85,11 @@ export const SalesAndPurchasesReportMenus = [
         desc: 'Reports every transaction going in and out of each vendor/supplier.',
         link: '/financial-reports/transactions-by-vendors',
       },
+      {
+        title: 'Inventory Item details',
+        desc: 'Reports every transaction going in and out of your items to monitoring activity of items.',
+        link: '/financial-reports/inventory-item-details',
+      },
     ],
   },
 ];

client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.js

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
+import 'style/pages/FinancialStatements/CashFlowStatement.scss';
+
+import { FinancialStatement } from 'components';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
+import CashFlowStatementHeader from './CashFlowStatementHeader';
+import CashFlowStatementTable from './CashFlowStatementTable';
+import CashFlowStatementActionsBar from './CashFlowStatementActionsBar';
+
+import withSettings from 'containers/Settings/withSettings';
+import withCashFlowStatementActions from './withCashFlowStatementActions';
+import { CashFlowStatementProvider } from './CashFlowStatementProvider';
+import { CashFlowStatementLoadingBar } from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Cash flow statement.
+ */
+function CashFlowStatement({
+  // #withPreferences
+  organizationName,
+  //#withCashStatementActions
+  toggleCashFlowStatementFilterDrawer,
+}) {
+  // filter
+  const [filter, setFilter] = useState({
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+    basis: 'cash',
+    displayColumnsType: 'total',
+  });
+
+  // Handle refetch cash flow after filter change.
+  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 format number submit.
+  const handleNumberFormatSubmit = (values) => {
+    setFilter({
+      ...filter,
+      numberFormat: values,
+    });
+  };
+
+  useEffect(
+    () => () => {
+      toggleCashFlowStatementFilterDrawer(false);
+    },
+    [toggleCashFlowStatementFilterDrawer],
+  );
+
+  return (
+    <CashFlowStatementProvider filter={filter}>
+      <CashFlowStatementActionsBar
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <CashFlowStatementLoadingBar />
+      <DashboardPageContent>
+        <FinancialStatement>
+          <CashFlowStatementHeader
+            pageFilter={filter}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <div class="financial-statement__body">
+            <CashFlowStatementTable companyName={organizationName} />
+          </div>
+        </FinancialStatement>
+      </DashboardPageContent>
+    </CashFlowStatementProvider>
+  );
+}
+
+export default compose(
+  withSettings(({ organizationSettings }) => ({
+    organizationName: organizationSettings?.name,
+  })),
+  withCashFlowStatementActions,
+)(CashFlowStatement);

client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import {
+  NavbarGroup,
+  NavbarDivider,
+  Button,
+  Classes,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+
+import { Icon } from 'components';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';
+
+import { useCashFlowStatementContext } from './CashFlowStatementProvider';
+import withCashFlowStatement from './withCashFlowStatement';
+import withCashFlowStatementActions from './withCashFlowStatementActions';
+
+import { compose, saveInvoke } from 'utils';
+
+/**
+ * Cash flow statement actions bar.
+ */
+function CashFlowStatementActionsBar({
+  //#withCashFlowStatement
+  isFilterDrawerOpen,
+
+  //#withCashStatementActions
+  toggleCashFlowStatementFilterDrawer,
+
+  //#ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+}) {
+  const { isCashFlowLoading, refetchCashFlow } = useCashFlowStatementContext();
+
+  // Handle filter toggle click.
+  const handleFilterToggleClick = () => {
+    toggleCashFlowStatementFilterDrawer();
+  };
+
+  // Handle recalculate report button.
+  const handleRecalculateReport = () => {
+    refetchCashFlow();
+  };
+
+  // handle number format form submit.
+  const handleNumberFormatSubmit = (values) =>
+    saveInvoke(onNumberFormatSubmit, values);
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
+          text={<T id={'recalc_report'} />}
+          onClick={handleRecalculateReport}
+          icon={<Icon icon="refresh-16" iconSize={16} />}
+        />
+
+        <NavbarDivider />
+
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--table-views')}
+          icon={<Icon icon="cog-16" iconSize={16} />}
+          text={
+            isFilterDrawerOpen ? (
+              <T id={'hide_customizer'} />
+            ) : (
+              <T id={'customize_report'} />
+            )
+          }
+          onClick={handleFilterToggleClick}
+          active={isFilterDrawerOpen}
+        />
+
+        <NavbarDivider />
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={isCashFlowLoading}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
+        <Popover
+          // content={}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'filter'} />}
+            icon={<Icon icon="filter-16" iconSize={16} />}
+          />
+        </Popover>
+
+        <NavbarDivider />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" iconSize={16} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withCashFlowStatement(({ cashFlowStatementDrawerFilter }) => ({
+    isFilterDrawerOpen: cashFlowStatementDrawerFilter,
+  })),
+  withCashFlowStatementActions,
+)(CashFlowStatementActionsBar);

client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementGeneralPanel.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import FinancialAccountsFilter from '../FinancialAccountsFilter';
+import RadiosAccountingBasis from '../RadiosAccountingBasis';
+import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
+
+/**
+ * Cash flow statement header - General panel.
+ */
+
+export default function CashFlowStatementHeaderGeneralPanel() {
+  return (
+    <div>
+      <FinancialStatementDateRange />
+      <SelectDisplayColumnsBy />
+      <FinancialAccountsFilter initialSelectedItem={'all-accounts'} />
+      <RadiosAccountingBasis key={'basis'} />
+    </div>
+  );
+}

client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js

@@ -0,0 +1,102 @@
+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 CashFlowStatementGeneralPanel from './CashFlowStatementGeneralPanel';
+
+import withCashFlowStatement from './withCashFlowStatement';
+import withCashFlowStatementActions from './withCashFlowStatementActions';
+
+import { compose } from 'utils';
+
+/**
+ * Cash flow statement header.
+ */
+function CashFlowStatementHeader({
+  // #ownProps
+  onSubmitFilter,
+  pageFilter,
+
+  //#withCashFlowStatement
+  isFilterDrawerOpen,
+
+  //#withCashStatementActions
+  toggleCashFlowStatementFilterDrawer,
+}) {
+  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({
+    dateRange: Yup.string().optional(),
+    fromDate: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'fromDate' })),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(formatMessage({ id: 'toDate' })),
+    displayColumnsType: Yup.string(),
+  });
+
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    toggleCashFlowStatementFilterDrawer(false);
+    setSubmitting(false);
+  };
+
+  // Handle drawer close action.
+  const handleDrawerClose = () => {
+    toggleCashFlowStatementFilterDrawer(false);
+  };
+
+  return (
+    <FinancialStatementHeader
+      isOpen={isFilterDrawerOpen}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id="general"
+              title={<T id={'general'} />}
+              panel={<CashFlowStatementGeneralPanel />}
+            />
+          </Tabs>
+
+          <div class="financial-header-drawer__footer">
+            <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
+              <T id={'calculate_report'} />
+            </Button>
+            <Button onClick={handleDrawerClose} minimal={true}>
+              <T id={'cancel'} />
+            </Button>
+          </div>
+        </Form>
+      </Formik>
+    </FinancialStatementHeader>
+  );
+}
+
+export default compose(
+  withCashFlowStatement(({ cashFlowStatementDrawerFilter }) => ({
+    isFilterDrawerOpen: cashFlowStatementDrawerFilter,
+  })),
+  withCashFlowStatementActions,
+)(CashFlowStatementHeader);

client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementProvider.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useCashFlowStatementReport } from 'hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const CashFLowStatementContext = React.createContext();
+
+/**
+ * Cash flow statement provider.
+ */
+function CashFlowStatementProvider({ filter, ...props }) {
+  // transforms the given filter to query.
+  const query = React.useMemo(
+    () => transformFilterFormToQuery(filter),
+    [filter],
+  );
+
+  // fetch the cash flow statement report.
+  const {
+    data: cashFlowStatement,
+    isFetching: isCashFlowFetching,
+    isLoading: isCashFlowLoading,
+    refetch: refetchCashFlow,
+  } = useCashFlowStatementReport(query, { keepPreviousData: true });
+
+  const provider = {
+    cashFlowStatement,
+    isCashFlowFetching,
+    isCashFlowLoading,
+    refetchCashFlow,
+    query,
+    filter,
+  };
+
+  return (
+    <FinancialReportPage name="cash-flow-statement">
+      <CashFLowStatementContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+
+const useCashFlowStatementContext = () =>
+  React.useContext(CashFLowStatementContext);
+
+export { CashFlowStatementProvider, useCashFlowStatementContext };

client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.js

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+
+import { DataTable } from 'components';
+import FinancialSheet from 'components/FinancialSheet';
+import { useCashFlowStatementColumns } from './components';
+import { useCashFlowStatementContext } from './CashFlowStatementProvider';
+
+import { defaultExpanderReducer } from 'utils';
+
+/**
+ * Cash flow statement table.
+ */
+export default function CashFlowStatementTable({
+  // #ownProps
+  companyName,
+}) {
+  const { formatMessage } = useIntl();
+
+  const {
+    cashFlowStatement: { tableRows },
+    isCashFlowLoading,
+    query,
+  } = useCashFlowStatementContext();
+
+  const columns = useCashFlowStatementColumns();
+
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(tableRows, 4),
+    [tableRows],
+  );
+
+  const rowClassNames = (row) => {
+    return [
+      `row-type--${row.original.rowTypes}`,
+      `row-type--${row.original.id}`,
+    ];
+  };
+
+  return (
+    <FinancialSheet
+      name="cash-flow-statement"
+      companyName={companyName}
+      sheetType={formatMessage({ id: 'statement_of_cash_flow' })}
+      loading={isCashFlowLoading}
+      fromDate={query.from_date}
+      toDate={query.to_date}
+      basis={query.basis}
+    >
+      <DataTable
+        className="bigcapital-datatable--financial-report"
+        columns={columns}
+        data={tableRows}
+        rowClassNames={rowClassNames}
+        noInitialFetch={true}
+        expandable={true}
+        expanded={expandedRows}
+        expandToggleColumn={1}
+        expandColumnSpace={0.8}
+      />
+    </FinancialSheet>
+  );
+}

client/src/containers/FinancialStatements/CashFlowStatement/components.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { If } from 'components';
+
+import { dynamicColumns } from './utils';
+import { useCashFlowStatementContext } from './CashFlowStatementProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+/**
+ * Retrieve cash flow statement columns.
+ */
+export const useCashFlowStatementColumns = () => {
+  const {
+    cashFlowStatement: { columns, data },
+  } = useCashFlowStatementContext();
+
+  return React.useMemo(() => dynamicColumns(columns, data), [columns, data]);
+};
+
+/**
+ * Cash flow statement loading bar.
+ */
+export function CashFlowStatementLoadingBar() {
+  const { isCashFlowLoading } = useCashFlowStatementContext();
+  return (
+    <If condition={isCashFlowLoading}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}

client/src/containers/FinancialStatements/CashFlowStatement/utils.js

@@ -0,0 +1,68 @@
+import * as R from 'ramda';
+import { CellTextSpan } from 'components/Datatable/Cells';
+import { getColumnWidth } from 'utils';
+import { formatMessage } from 'services/intl';
+
+/**
+ * Account name column mapper.
+ */
+const accountNameMapper = (column) => ({
+  id: column.key,
+  key: column.key,
+  Header: formatMessage({ id: 'account_name' }),
+  accessor: 'cells[0].value',
+  className: 'account_name',
+  textOverview: true,
+  width: 240,
+  disableSortBy: true,
+});
+
+/**
+ * Date range columns mapper.
+ */
+const dateRangeMapper = (data, index, column) => ({
+  id: column.key,
+  Header: column.label,
+  key: column.key,
+  accessor: `cells[${index}].value`,
+  width: getColumnWidth(data, `cells.${index}.value`, { minWidth: 100 }),
+  className: `date-period ${column.key}`,
+  disableSortBy: true,
+});
+
+/**
+ * Total column mapper.
+ */
+const totalMapper = (data, index, column) => ({
+  key: 'total',
+  Header: formatMessage({ id: 'total' }),
+  accessor: `cells[${index}].value`,
+  className: 'total',
+  textOverview: true,
+  Cell: CellTextSpan,
+  width: getColumnWidth(data, `cells[${index}].value`, { minWidth: 100  }),
+  disableSortBy: true,
+});
+
+
+/**
+ * Detarmines the given string starts with `date-range` string.
+ */
+const isMatchesDateRange = (r) => R.match(/^date-range/g, r).length > 0;
+
+/**
+ * Cash flow dynamic columns.
+ */
+export const dynamicColumns = (columns, data) => {
+  const mapper = (column, index) => {
+    return R.compose(
+      R.when(
+        R.pathSatisfies(isMatchesDateRange, ['key']),
+        R.curry(dateRangeMapper)(data, index),
+      ),
+      R.when(R.pathEq(['key'], 'name'), accountNameMapper),
+      R.when(R.pathEq(['key'], 'total'), R.curry(totalMapper)(data, index)),
+    )(column);
+  };
+  return columns.map(mapper);
+};

client/src/containers/FinancialStatements/CashFlowStatement/withCashFlowStatement.js

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

client/src/containers/FinancialStatements/CashFlowStatement/withCashFlowStatementActions.js

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

client/src/containers/FinancialStatements/CustomersTransactions/components.js

@@ -9,6 +9,7 @@ import { CellTextSpan } from 'components/Datatable/Cells';
 /**
  * Retrieve customers transactions columns.
  */
+
 export const useCustomersTransactionsColumns = () => {
   const {
     customersTransactions: { tableRows },

client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import moment from 'moment';
+import 'style/pages/FinancialStatements/InventoryItemDetails.scss';
+
+import { FinancialStatement } from 'components';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
+import InventoryItemDetailsActionsBar from './InventoryItemDetailsActionsBar';
+import InventoryItemDetailsHeader from './InventoryItemDetailsHeader';
+import InventoryItemDetailsTable from './InventoryItemDetailsTable';
+
+import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
+import withSettings from 'containers/Settings/withSettings';
+import { InventoryItemDetailsProvider } from './InventoryItemDetailsProvider';
+import { InventoryItemDetailsLoadingBar } from './components';
+
+import { compose } from 'utils';
+
+/**
+ * inventory item details.
+ */
+function InventoryItemDetails({
+  // #withSettings
+  organizationName,
+
+  //#withInventoryItemDetailsActions
+  toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
+}) {
+ 
+  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(() => () => toggleFilterDrawer(false), [toggleFilterDrawer]);
+
+  return (
+    <InventoryItemDetailsProvider filter={filter}>
+      <InventoryItemDetailsActionsBar
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <InventoryItemDetailsLoadingBar />
+      <DashboardPageContent>
+        <FinancialStatement>
+          <div className={'financial-statement--inventory-details'}>
+            <InventoryItemDetailsHeader
+              pageFilter={filter}
+              onSubmitFilter={handleFilterSubmit}
+            />
+          </div>
+          <div class="financial-statement__body">
+            <InventoryItemDetailsTable companyName={organizationName} />
+          </div>
+        </FinancialStatement>
+      </DashboardPageContent>
+    </InventoryItemDetailsProvider>
+  );
+}
+
+export default compose(
+  withSettings(({ organizationSettings }) => ({
+    organizationName: organizationSettings?.name,
+  })),
+  withInventoryItemDetailsActions,
+)(InventoryItemDetails);

client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.js

@@ -0,0 +1,131 @@
+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';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';
+
+import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
+import withInventoryItemDetails from './withInventoryItemDetails';
+import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
+
+import { compose, saveInvoke } from 'utils';
+
+/**
+ * Inventory item details actions bar.
+ */
+function InventoryItemDetailsActionsBar({
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+
+  //#withInventoryItemDetails
+  isFilterDrawerOpen,
+
+  //#withInventoryItemDetailsActions
+  toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
+}) {
+  const { isInventoryItemDetailsLoading, inventoryItemDetailsRefetch } =
+    useInventoryItemDetailsContext();
+
+  // Handle filter toggle click.
+  const handleFilterToggleClick = () => {
+    toggleFilterDrawer();
+  };
+  //Handle recalculate the report button.
+  const handleRecalcReport = () => {
+    inventoryItemDetailsRefetch();
+  };
+  // 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={isInventoryItemDetailsLoading}
+            />
+          }
+          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(
+  withInventoryItemDetails(({ inventoryItemDetailDrawerFilter }) => ({
+    isFilterDrawerOpen: inventoryItemDetailDrawerFilter,
+  })),
+  withInventoryItemDetailsActions,
+)(InventoryItemDetailsActionsBar);

client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js

@@ -0,0 +1,99 @@
+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 InventoryItemDetailsHeaderGeneralPanel from './InventoryItemDetailsHeaderGeneralPanel';
+
+import withInventoryItemDetails from './withInventoryItemDetails';
+import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
+
+import { compose } from 'utils';
+
+/**
+ * Inventory item details header.
+ */
+function InventoryItemDetailsHeader({
+  // #ownProps
+  onSubmitFilter,
+  pageFilter,
+  //#withInventoryItemDetails
+  isFilterDrawerOpen,
+
+  //#withInventoryItemDetailsActions
+  toggleInventoryItemDetailsFilterDrawer: 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={<InventoryItemDetailsHeaderGeneralPanel />}
+            />
+          </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(
+  withInventoryItemDetails(({ inventoryItemDetailDrawerFilter }) => ({
+    isFilterDrawerOpen: inventoryItemDetailDrawerFilter,
+  })),
+  withInventoryItemDetailsActions,
+)(InventoryItemDetailsHeader);

client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+
+/**
+ * Inventory item details header - General panel.
+ */
+export default function InventoryItemDetailsHeaderGeneralPanel() {
+  return (
+    <div>
+      <FinancialStatementDateRange />
+    </div>
+  );
+}

client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useInventoryItemDetailsReport } from 'hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const InventoryItemDetailsContext = React.createContext();
+
+/**
+ * Inventory item details provider.
+ */
+function InventoryItemDetailsProvider({ filter, ...props }) {
+  const query = React.useMemo(
+    () => transformFilterFormToQuery(filter),
+    [filter],
+  );
+
+  // fetch inventory item details.
+  const {
+    data: inventoryItemDetails,
+    isFetching: isInventoryItemDetailsFetching,
+    isLoading: isInventoryItemDetailsLoading,
+    refetch: inventoryItemDetailsRefetch,
+  } = useInventoryItemDetailsReport(query, { keepPreviousData: true });
+
+  const provider = {
+    inventoryItemDetails,
+    isInventoryItemDetailsFetching,
+    isInventoryItemDetailsLoading,
+    inventoryItemDetailsRefetch,
+    query,
+    filter,
+  };
+
+  return (
+    <FinancialReportPage name={'inventory-item-details'}>
+      <InventoryItemDetailsContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+const useInventoryItemDetailsContext = () =>
+  React.useContext(InventoryItemDetailsContext);
+
+export { InventoryItemDetailsProvider, useInventoryItemDetailsContext };

client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js

@@ -0,0 +1,59 @@
+import React, { useMemo, useCallback } from 'react';
+import { formatMessage } from 'services/intl';
+
+import classNames from 'classnames';
+
+import FinancialSheet from 'components/FinancialSheet';
+import { DataTable } from 'components';
+import { useInventoryItemDetailsColumns } from './components';
+import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
+
+import { defaultExpanderReducer } from 'utils';
+
+/**
+ * Inventory item detail table.
+ */
+export default function InventoryItemDetailsTable({
+  // #ownProps
+  companyName,
+}) {
+  const {
+    inventoryItemDetails: { tableRows },
+    isInventoryItemDetailsLoading,
+    query,
+  } = useInventoryItemDetailsContext();
+
+  const columns = useInventoryItemDetailsColumns();
+
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(tableRows, 4),
+    [tableRows],
+  );
+
+  const rowClassNames = (row) => {
+    return [`row-type--${row.original.rowTypes}`];
+  };
+
+  return (
+    <FinancialSheet
+      name="inventory-item-details"
+      companyName={companyName}
+      sheetType={formatMessage({ id: 'inventory_item_details' })}
+      loading={isInventoryItemDetailsLoading}
+      fromDate={query.from_date}
+      toDate={query.to_date}
+    >
+      <DataTable
+        className="bigcapital-datatable--financial-report"
+        columns={columns}
+        data={tableRows}
+        rowClassNames={rowClassNames}
+        noInitialFetch={true}
+        expandable={true}
+        expanded={expandedRows}
+        expandToggleColumn={1}
+        expandColumnSpace={0.8}
+      />
+    </FinancialSheet>
+  );
+}

client/src/containers/FinancialStatements/InventoryItemDetails/components.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { If } from 'components';
+
+import { dynamicColumns } from './utils';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
+
+/**
+ * Retrieve inventory item details columns.
+ */
+export const useInventoryItemDetailsColumns = () => {
+  const {
+    inventoryItemDetails: { columns, data },
+  } = useInventoryItemDetailsContext();
+
+  return React.useMemo(() => dynamicColumns(columns, data), [columns, data]);
+};
+
+/**
+ * Cash inventory item details  loading bar.
+ */
+export function InventoryItemDetailsLoadingBar() {
+  const { isInventoryItemDetailsLoading } = useInventoryItemDetailsContext();
+  return (
+    <If condition={isInventoryItemDetailsLoading}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}

client/src/containers/FinancialStatements/InventoryItemDetails/utils.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import * as R from 'ramda';
+import { getColumnWidth, getForceWidth } from 'utils';
+
+/**
+ *  columns mapper.
+ */
+const columnsMapper = (data, index, column) => ({
+  id: column.key,
+  key: column.key,
+  Header: column.label,
+  accessor: ({ cells }) => {
+    return (
+      <span
+        className={'force-width'}
+        style={{
+          minWidth: getForceWidth(cells[0].value),
+        }}
+      >
+        {cells[index]?.value}
+      </span>
+    );
+  },
+  className: column.key,
+  width: getColumnWidth(data, `cells.${index}.key`, {
+    minWidth: 130,
+    magicSpacing: 10,
+  }),
+  disableSortBy: true,
+});
+
+/**
+ * Inventory item details columns.
+ */
+export const dynamicColumns = (columns, data) => {
+  const mapper = (column, index) => {
+    return R.compose(
+      R.when(R.pathEq(['key']), R.curry(columnsMapper)(data, index)),
+    )(column);
+  };
+  return columns.map(mapper);
+};

client/src/containers/FinancialStatements/InventoryItemDetails/withInventoryItemDetails.js

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

client/src/containers/FinancialStatements/InventoryItemDetails/withInventoryItemDetailsActions.js

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

client/src/hooks/query/financialReports.js

@@ -402,3 +402,63 @@ export function useVendorsTransactionsReport(query, props) {
     },
   );
 }
+
+/**
+ * Retrieve cash flow statement report.
+ */
+export function useCashFlowStatementReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.CASH_FLOW_STATEMENT, query],
+    {
+      method: 'get',
+      url: '/financial_statements/cash-flow',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        columns: res.data.table.columns,
+        data: res.data.table.data,
+        tableRows: res.data.table.data,
+      }),
+      defaultData: {
+        tableRows: [],
+        data: [],
+        columns: [],
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve inventory item detail report.
+ */
+ export function useInventoryItemDetailsReport(query, props) {
+  return useRequestQuery(
+    [t.FINANCIAL_REPORT, t.INVENTORY_ITEM_DETAILS, query],
+    {
+      method: 'get',
+      url: '/financial_statements/inventory-item-details',
+      params: query,
+      headers: {
+        Accept: 'application/json+table',
+      },
+    },
+    {
+      select: (res) => ({
+        columns: res.data.table.columns,
+        data: res.data.table.data,
+        tableRows: res.data.table.data,
+      }),
+      defaultData: {
+        tableRows: [],
+        data: [],
+        columns: [],
+      },
+      ...props,
+    },
+  );
+}

client/src/hooks/query/types.js

@@ -20,7 +20,9 @@ const FINANCIAL_REPORTS = {
   CUSTOMERS_BALANCE_SUMMARY: 'CUSTOMERS_BALANCE_SUMMARY',
   SALES_BY_ITEMS: 'SALES_BY_ITEMS',
   PURCHASES_BY_ITEMS: 'PURCHASES_BY_ITEMS',
-  INVENTORY_VALUATION: 'INVENTORY_VALUATION'
+  INVENTORY_VALUATION: 'INVENTORY_VALUATION',
+  CASH_FLOW_STATEMENT: 'CASH_FLOW_STATEMENT',
+  INVENTORY_ITEM_DETAILS:'INVENTORY_ITEM_DETAILS'
 };
 
 const BILLS = {

client/src/lang/en/index.js

@@ -1064,4 +1064,7 @@ export default {
   vendors_transactions: 'Vendors Transactions',
   reference_type: 'Reference type',
   transaction_number: 'Transaction number',
+  cash_flow_statement: 'Cash Flow Statement',
+  statement_of_cash_flow: 'Statement of Cash Flow ',
+  inventory_item_details:'Inventory Item Details'
 };

client/src/routes/dashboard.js

@@ -112,8 +112,7 @@ export default [
       import('containers/FinancialStatements/GeneralLedger/GeneralLedger'),
     ),
     breadcrumb: 'General Ledger',
-    hint:
-      'Reports every transaction going in and out of your accounts and organized by accounts and date to monitoring activity of accounts.',
+    hint: 'Reports every transaction going in and out of your accounts and organized by accounts and date to monitoring activity of accounts.',
     hotkey: 'shift+4',
     pageTitle: formatMessage({ id: 'general_ledger' }),
     backLink: true,
@@ -125,8 +124,7 @@ export default [
       import('containers/FinancialStatements/BalanceSheet/BalanceSheet'),
     ),
     breadcrumb: 'Balance Sheet',
-    hint:
-      "Reports a company's assets, liabilities and shareholders' equity at a specific point in time with comparison period(s).",
+    hint: "Reports a company's assets, liabilities and shareholders' equity at a specific point in time with comparison period(s).",
     hotkey: 'shift+1',
     pageTitle: formatMessage({ id: 'balance_sheet' }),
     backLink: true,
@@ -140,8 +138,7 @@ export default [
       ),
     ),
     breadcrumb: 'Trial Balance Sheet',
-    hint:
-      'Summarizes the credit and debit balance of each account in your chart of accounts at a specific point in time. ',
+    hint: 'Summarizes the credit and debit balance of each account in your chart of accounts at a specific point in time. ',
     hotkey: 'shift+5',
     pageTitle: formatMessage({ id: 'trial_balance_sheet' }),
     backLink: true,
@@ -153,8 +150,7 @@ export default [
       import('containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet'),
     ),
     breadcrumb: 'Profit Loss Sheet',
-    hint:
-      'Reports the revenues, costs and expenses incurred during a specific point in time with comparison period(s).',
+    hint: 'Reports the revenues, costs and expenses incurred during a specific point in time with comparison period(s).',
     hotkey: 'shift+2',
     pageTitle: formatMessage({ id: 'profit_loss_sheet' }),
     backLink: true,
@@ -166,8 +162,7 @@ export default [
       import('containers/FinancialStatements/ARAgingSummary/ARAgingSummary'),
     ),
     breadcrumb: 'Receivable Aging Summary',
-    hint:
-      'Summarize total unpaid balances of customers invoices with number of days the unpaid invoice is overdue.',
+    hint: 'Summarize total unpaid balances of customers invoices with number of days the unpaid invoice is overdue.',
     pageTitle: formatMessage({ id: 'receivable_aging_summary' }),
     backLink: true,
     sidebarExpand: false,
@@ -178,8 +173,7 @@ export default [
       import('containers/FinancialStatements/APAgingSummary/APAgingSummary'),
     ),
     breadcrumb: 'Payable Aging Summary',
-    hint:
-      'Summarize total unpaid balances of vendors purchase invoices with the number of days the unpaid invoice is overdue.',
+    hint: 'Summarize total unpaid balances of vendors purchase invoices with the number of days the unpaid invoice is overdue.',
     pageTitle: formatMessage({ id: 'payable_aging_summary' }),
     backLink: true,
     sidebarExpand: false,
@@ -190,8 +184,7 @@ export default [
       import('containers/FinancialStatements/Journal/Journal'),
     ),
     breadcrumb: 'Journal Sheet',
-    hint:
-      'The debit and credit entries of system transactions, sorted by date.',
+    hint: 'The debit and credit entries of system transactions, sorted by date.',
     hotkey: 'shift+3',
     pageTitle: formatMessage({ id: 'journal_sheet' }),
     sidebarExpand: false,
@@ -217,8 +210,7 @@ export default [
     ),
     breadcrumb: 'Sales by Items',
     pageTitle: formatMessage({ id: 'sales_by_items' }),
-    hint:
-      'Summarize the business’s sold items quantity, income and average income rate of each item during a specific point in time.',
+    hint: 'Summarize the business’s sold items quantity, income and average income rate of each item during a specific point in time.',
     backLink: true,
     sidebarExpand: false,
   },
@@ -230,8 +222,7 @@ export default [
       ),
     ),
     breadcrumb: 'Inventory Valuation ',
-    hint:
-      'Summerize your transactions for each inventory item and how they affect quantity, valuation and weighted average.',
+    hint: 'Summerize your transactions for each inventory item and how they affect quantity, valuation and weighted average.',
     pageTitle: formatMessage({ id: 'inventory_valuation' }),
     backLink: true,
     sidebarExpand: false,
@@ -257,7 +248,7 @@ export default [
       ),
     ),
     breadcrumb: 'Vendors Balance Summary ',
-    hint: '..',
+    hint: 'Summerize the total amount your business owes each vendor.',
     pageTitle: formatMessage({ id: 'vendors_balance_summary' }),
     backLink: true,
     sidebarExpand: false,
@@ -270,7 +261,7 @@ export default [
       ),
     ),
     breadcrumb: 'Customers Transactions ',
-    hint: '..',
+    hint: 'Reports every transaction going in and out of each customer.',
     pageTitle: formatMessage({ id: 'customers_transactions' }),
     backLink: true,
     sidebarExpand: false,
@@ -283,11 +274,37 @@ export default [
       ),
     ),
     breadcrumb: 'Vendors Transactions ',
-    hint: '..',
+    hint: 'Reports every transaction going in and out of each vendor/supplier.',
     pageTitle: formatMessage({ id: 'vendors_transactions' }),
     backLink: true,
     sidebarExpand: false,
   },
+  {
+    path: `/financial-reports/cash-flow`,
+    component: lazy(() =>
+      import(
+        'containers/FinancialStatements/CashFlowStatement/CashFlowStatement'
+      ),
+    ),
+    breadcrumb: 'Cash Flow Statement',
+    hint: 'Reports inflow and outflow of cash and cash equivalents between a specific two points of time.',
+    pageTitle: formatMessage({ id: 'cash_flow_statement' }),
+    backLink: true,
+    sidebarExpand: false,
+  },
+  {
+    path: `/financial-reports/inventory-item-details`,
+    component: lazy(() =>
+      import(
+        'containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails'
+      ),
+    ),
+    breadcrumb: 'Inventory Item Details',
+    hint: 'Reports every transaction going in and out of your items to monitoring activity of items.',
+    pageTitle: formatMessage({ id: 'inventory_item_details' }),
+    backLink: true,
+    sidebarExpand: false,
+  },
   {
     path: '/financial-reports',
     component: lazy(() =>

client/src/store/financialStatement/financialStatements.actions.js

@@ -178,3 +178,29 @@ export function toggleVendorsTransactionsFilterDrawer(toggle) {
     },
   };
 }
+
+/**
+ *  Toggle display of the cash flow statement filter drawer.
+ * @param {boolean} toggle
+ */
+export function toggleCashFlowStatementFilterDrawer(toggle) {
+  return {
+    type: `${t.CASH_FLOW_STATEMENT}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
+    payload: {
+      toggle,
+    },
+  };
+}
+
+/**
+ * Toggles display of the inventory item details filter drawer.
+ * @param {boolean} toggle
+ */
+ export function toggleInventoryItemDetailsFilterDrawer(toggle) {
+  return {
+    type: `${t.INVENTORY_ITEM_DETAILS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
+    payload: {
+      toggle,
+    },
+  };
+}

client/src/store/financialStatement/financialStatements.reducer.js

@@ -45,6 +45,12 @@ const initialState = {
   vendorsTransactions: {
     displayFilterDrawer: false,
   },
+  cashFlowStatement: {
+    displayFilterDrawer: false,
+  },
+  inventoryItemDetails: {
+    displayFilterDrawer: false,
+  },
 };
 
 /**
@@ -91,4 +97,9 @@ export default createReducer(initialState, {
     t.VENDORS_TRANSACTIONS,
     'vendorsTransactions',
   ),
+  ...financialStatementFilterToggle(t.CASH_FLOW_STATEMENT, 'cashFlowStatement'),
+  ...financialStatementFilterToggle(
+    t.INVENTORY_ITEM_DETAILS,
+    'inventoryItemDetails',
+  ),
 });

client/src/store/financialStatement/financialStatements.selectors.js

@@ -65,6 +65,14 @@ export const vendorsTransactionsFilterDrawerSelector = (state) => {
   return filterDrawerByTypeSelector('vendorsTransactions')(state);
 };
 
+export const cashFlowStatementFilterDrawerSelector = (state) => {
+  return filterDrawerByTypeSelector('cashFlowStatement')(state);
+};
+
+export const inventoryItemDetailsDrawerFilter = (state) => {
+  return filterDrawerByTypeSelector('inventoryItemDetails')(state);
+};
+
 /**
  * Retrieve balance sheet filter drawer.
  */
@@ -211,3 +219,23 @@ export const getVendorsTransactionsFilterDrawer = createSelector(
     return isOpen;
   },
 );
+
+/**
+ * Retrieve cash flow statement filter drawer.
+ */
+export const getCashFlowStatementFilterDrawer = createSelector(
+  cashFlowStatementFilterDrawerSelector,
+  (isOpen) => {
+    return isOpen;
+  },
+);
+
+/**
+ * Retrieve inventory item details filter drawer.
+ */
+export const getInventoryItemDetailsFilterDrawer = createSelector(
+  inventoryItemDetailsDrawerFilter,
+  (isOpen) => {
+    return isOpen;
+  },
+);

client/src/store/financialStatement/financialStatements.types.js

@@ -14,4 +14,6 @@ export default {
   VENDORS_BALANCE_SUMMARY: 'VENDORS BALANCE SUMMARY',
   CUSTOMERS_TRANSACTIONS: 'CUSTOMERS TRANSACTIONS',
   VENDORS_TRANSACTIONS: 'VENDORS TRANSACTIONS',
+  CASH_FLOW_STATEMENT: 'CASH FLOW STATEMENT',
+  INVENTORY_ITEM_DETAILS: 'INVENTORY ITEM DETAILS',
 };

client/src/style/pages/FinancialStatements/CashFlowStatement.scss

@@ -0,0 +1,50 @@
+.financial-sheet {
+  &--cash-flow-statement {
+    .financial-sheet__table {
+      .thead,
+      .tbody {
+        .tr .td.account_name ~ .td,
+        .tr .th.account_name ~ .th {
+          text-align: right;
+        }
+      }
+      .tbody {
+        .tr:not(.no-results) {
+          &.row-type--CASH_END_PERIOD{
+            border-bottom: 3px double #333;
+          }
+          .td {
+            border-bottom: 0;
+            padding-top: 0.4rem;
+            padding-bottom: 0.4rem;
+          }
+
+          &.row-type--TOTAL {
+            font-weight: 500;
+
+            &:not(:first-child) .td {
+              border-top: 1px solid #bbb;
+            }
+          }
+        }
+
+        .tr.is-expanded {
+          .td.total,
+          .td.date-period{
+            .cell-inner {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.financial-statement--cash-flow {
+  .financial-header-drawer {
+    .bp3-drawer {
+      max-height: 450px;
+    }
+  }
+}

client/src/style/pages/FinancialStatements/InventoryItemDetails.scss

@@ -0,0 +1,77 @@
+.financial-sheet {
+  &--inventory-item-details {
+    width: 100%;
+
+    .financial-sheet__table {
+      .tbody,
+      .thead {
+        .tr .td.transaction_id ~ .td,
+        .tr .th.transaction_id ~ .th {
+          text-align: right;
+        }
+      }
+      .tbody {
+        .tr .td {
+          padding-top: 0.2rem;
+          padding-bottom: 0.2rem;
+          border-top-color: transparent;
+          border-bottom-color: transparent;
+          &.date {
+            > div {
+              display: flex;
+            }
+
+            span.force-width {
+              position: relative;
+            }
+          }
+        }
+        .tr:not(.no-results) .td {
+          border-left: 1px solid #ececec;
+        }
+
+        .tr.row-type {
+          &--ITEM {
+            .td {
+              &.transaction_type {
+                border-left-color: transparent;
+              }
+            }
+            &:not(:first-child).is-expanded .td {
+              border-top: 1px solid #ddd;
+            }
+          }
+          &--ITEM,
+          &--OPENING_ENTRY,
+          &--CLOSING_ENTRY {
+            font-weight: 500;
+          }
+          &--ITEM {
+            &.is-expanded {
+              .td.value .cell-inner {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.number-format-dropdown {
+  .toggles-fields {
+    .bp3-form-group:first-child {
+      display: none;
+    }
+  }
+  .form-group--money-format {
+    display: none;
+  }
+}
+.financial-statement--inventory-details {
+  .financial-header-drawer {
+    .bp3-drawer {
+      max-height: 350px;
+    }
+  }
+}