feat(RealizedGainorLoss): add realized gain or loss.

src/config/sidebarMenu.js

@@ -641,6 +641,10 @@ export default [
           ability: ReportsAction.READ_AP_AGING_SUMMARY,
         },
       },
+      {
+        text: <T id={'realized_gain_or_loss.label'} />,
+        href: '/financial-reports/realized-gain-loss',
+      },
       {
         text: <T id={'Sales/Purchases'} />,
         label: true,

src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLoss.js

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { FinancialStatement } from 'components';
+
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
+import RealizedGainOrLossHeader from './RealizedGainOrLossHeader';
+import RealizedGainOrLossTable from './RealizedGainOrLossTable';
+import RealizedGainOrLossActionsBar from './RealizedGainOrLossActionsBar';
+
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';
+import withRealizedGainOrLossActions from './withRealizedGainOrLossActions';
+import { RealizedGainOrLossProvider } from './RealizedGainOrLossProvider';
+import { RealizedGainOrLossLoadingBar } from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Realized Gain or Loss.
+ */
+function RealizedGainOrLoss({
+  // #withPreferences
+  organizationName,
+
+  //#withRealizedGainOrLossActions
+  toggleRealizedGainOrLossFilterDrawer,
+}) {
+  // Handle refetch realized Gain or Loss after filter change.
+  const handleFilterSubmit = (filter) => {};
+
+  // Handle format number submit.
+  const handleNumberFormatSubmit = (values) => {};
+
+  React.useEffect(
+    () => () => {
+      toggleRealizedGainOrLossFilterDrawer(false);
+    },
+    [toggleRealizedGainOrLossFilterDrawer],
+  );
+
+  return (
+    <RealizedGainOrLossProvider>
+      <RealizedGainOrLossActionsBar />
+
+      <DashboardPageContent>
+        <FinancialStatement>
+          <RealizedGainOrLossHeader
+            pageFilter={[]}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <RealizedGainOrLossLoadingBar />
+
+          <div className="financial-statement__body">
+            <RealizedGainOrLossTable companyName={organizationName} />
+          </div>
+        </FinancialStatement>
+      </DashboardPageContent>
+    </RealizedGainOrLossProvider>
+  );
+}
+
+export default compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+  withRealizedGainOrLossActions,
+)(RealizedGainOrLoss);

src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossActionsBar.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import {
+  NavbarGroup,
+  NavbarDivider,
+  Button,
+  Classes,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { FormattedMessage as T, Icon } from 'components';
+import classNames from 'classnames';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';
+
+import { useRealizedGainOrLossContext } from './RealizedGainOrLossProvider';
+import withRealizedGainOrLoss from './withRealizedGainOrLoss';
+import withRealizedGainOrLossActions from './withRealizedGainOrLossActions';
+
+import { compose, saveInvoke } from 'utils';
+
+/**
+ * Realized Gain or Loss actions bar.
+ */
+function RealizedGainOrLossActionsBar({
+  //#withRealizedGainOrLoss
+  isFilterDrawerOpen,
+
+  //#withRealizedGainOrLossActions
+  toggleRealizedGainOrLossFilterDrawer,
+
+  //#ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+}) {
+  // Handle filter toggle click.
+  const handleFilterToggleClick = () => {
+    toggleRealizedGainOrLossFilterDrawer();
+  };
+
+  // Handle recalculate report button.
+  const handleRecalculateReport = () => {};
+
+  // 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={false}
+            />
+          }
+          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>
+
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--filter')}
+          text={<T id={'filter'} />}
+          icon={<Icon icon="filter-16" iconSize={16} />}
+        />
+        <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(
+  withRealizedGainOrLoss(({ realizedGainOrLossDrawerFilter }) => ({
+    isFilterDrawerOpen: realizedGainOrLossDrawerFilter,
+  })),
+  withRealizedGainOrLossActions,
+)(RealizedGainOrLossActionsBar);

src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossGeneralPanel.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Row, Col } from '../../../components';
+import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
+
+/**
+ * Realized Gain or Loss header - General panel.
+ */
+export default function RealizedGainOrLossGeneralPanel() {
+  return (
+    <div>
+      <FinancialStatementDateRange />
+      <SelectDisplayColumnsBy />
+    </div>
+  );
+}

src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossHeader.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import moment from 'moment';
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { Formik, Form } from 'formik';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
+import RealizedGainOrLossGeneralPanel from './RealizedGainOrLossGeneralPanel';
+
+import withRealizedGainOrLoss from './withRealizedGainOrLoss';
+import withRealizedGainOrLossActions from './withRealizedGainOrLossActions';
+
+import { compose, transformToForm } from 'utils';
+
+/**
+ * Realized Gain or Loss.header.
+ */
+function RealizedGainOrLossHeader({
+  // #ownProps
+  onSubmitFilter,
+  pageFilter,
+
+  //#withRealizedGainOrLoss
+  isFilterDrawerOpen,
+
+  //#withRealizedGainOrLossActions
+  toggleRealizedGainOrLossFilterDrawer,
+}) {
+  // Filter form default values.
+  const defaultValues = {
+    fromDate: moment().toDate(),
+    toDate: moment().toDate(),
+  };
+
+  // Initial form values.
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultValues,
+  );
+
+  // Validation schema.
+  const validationSchema = Yup.object().shape({
+    dateRange: Yup.string().optional(),
+    fromDate: Yup.date().required().label(intl.get('fromDate')),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(intl.get('toDate')),
+    displayColumnsType: Yup.string(),
+  });
+
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    toggleRealizedGainOrLossFilterDrawer(false);
+    setSubmitting(false);
+  };
+
+  // Handle drawer close action.
+  const handleDrawerClose = () => {
+    toggleRealizedGainOrLossFilterDrawer(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={<RealizedGainOrLossGeneralPanel />}
+            />
+          </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(
+  withRealizedGainOrLoss(({ realizedGainOrLossDrawerFilter }) => ({
+    isFilterDrawerOpen: realizedGainOrLossDrawerFilter,
+  })),
+  withRealizedGainOrLossActions,
+)(RealizedGainOrLossHeader);

src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossProvider.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+
+const RealizedGainOrLossContext = React.createContext();
+
+/**
+ * Realized Gain or Loss provider.
+ */
+function RealizedGainOrLossProvider({ filter, ...props }) {
+  const provider = {};
+
+  return (
+    <FinancialReportPage name="realized-gain-loss">
+      <RealizedGainOrLossContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+
+const useRealizedGainOrLossContext = () =>
+  React.useContext(RealizedGainOrLossContext);
+
+export { RealizedGainOrLossProvider, useRealizedGainOrLossContext };

src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossTable.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { DataTable } from 'components';
+import FinancialSheet from 'components/FinancialSheet';
+
+/**
+ * Realized Gain or Loss table.
+ */
+export default function RealizedGainOrLossTable({
+  // #ownProps
+  companyName,
+}) {
+  return (
+    <FinancialSheet
+      name="realized-gain-loss"
+      companyName={companyName}
+      sheetType={intl.get('realized_gain_or_loss.label')}
+    ></FinancialSheet>
+  );
+}

src/containers/FinancialStatements/RealizedGainOrLoss/components.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Button } from '@blueprintjs/core';
+import { Icon, If } from 'components';
+import { FormattedMessage as T } from 'components';
+
+import { useRealizedGainOrLossContext } from './RealizedGainOrLossProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+/**
+ *  Realized Gain or Loss loading bar.
+ */
+export function RealizedGainOrLossLoadingBar() {
+  return (
+    <If condition={false}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}

src/containers/FinancialStatements/RealizedGainOrLoss/withRealizedGainOrLoss.js

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

src/containers/FinancialStatements/RealizedGainOrLoss/withRealizedGainOrLossActions.js

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

src/hooks/query/types.js

@@ -24,6 +24,7 @@ const FINANCIAL_REPORTS = {
   CASH_FLOW_STATEMENT: 'CASH_FLOW_STATEMENT',
   INVENTORY_ITEM_DETAILS: 'INVENTORY_ITEM_DETAILS',
   TRANSACTIONS_BY_REFERENCE: 'TRANSACTIONS_BY_REFERENCE',
+  REALIZED_GAIN_OR_LOSS: 'REALIZED_GAIN_OR_LOSS',
 };
 
 const BILLS = {
@@ -195,11 +196,11 @@ const TARNSACTIONS_LOCKING = {
 const WAREHOUSES = {
   WAREHOUSE: 'WAREHOUSE',
   WAREHOUSES: 'WAREHOUSES',
-}
+};
 const WAREHOUSE_TRANSFERS = {
   WAREHOUSE_TRANSFER: 'WAREHOUSE_TRANSFER',
   WAREHOUSE_TRANSFERS: 'WAREHOUSE_TRANSFERS',
-}
+};
 const BRANCHES = {
   BRANCHES: 'BRANCHES',
   BRANCH: 'BRANCH',

src/routes/dashboard.js

@@ -376,6 +376,20 @@ export const getDashboardRoutes = () => [
     sidebarExpand: false,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
+  {
+    path: `/financial-reports/realized-gain-loss`,
+    component: lazy(() =>
+      import(
+        '../containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLoss'
+      ),
+    ),
+    
+    breadcrumb: intl.get('realized_gain_or_loss.label'),
+    pageTitle: intl.get('realized_gain_or_loss.label'),
+    backLink: true,
+    sidebarExpand: false,
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
   {
     path: '/financial-reports',
     component: lazy(() =>

src/store/financialStatement/financialStatements.actions.js

@@ -196,7 +196,7 @@ export function toggleCashFlowStatementFilterDrawer(toggle) {
  * Toggles display of the inventory item details filter drawer.
  * @param {boolean} toggle
  */
- export function toggleInventoryItemDetailsFilterDrawer(toggle) {
+export function toggleInventoryItemDetailsFilterDrawer(toggle) {
   return {
     type: `${t.INVENTORY_ITEM_DETAILS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
     payload: {
@@ -204,3 +204,16 @@ export function toggleCashFlowStatementFilterDrawer(toggle) {
     },
   };
 }
+
+/**
+ *  Toggle display of the Realized Gain or Loss filter drawer.
+ * @param {boolean} toggle
+ */
+export function toggleRealizedGainOrLossCilterDrawer(toggle) {
+  return {
+    type: `${t.REALIZED_GAIN_OR_LOSS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
+    payload: {
+      toggle,
+    },
+  };
+}

src/store/financialStatement/financialStatements.reducer.js

@@ -51,6 +51,9 @@ const initialState = {
   inventoryItemDetails: {
     displayFilterDrawer: false,
   },
+  realizedGainOrLoss: {
+    displayFilterDrawer: false,
+  },
 };
 
 /**
@@ -102,4 +105,6 @@ export default createReducer(initialState, {
     t.INVENTORY_ITEM_DETAILS,
     'inventoryItemDetails',
   ),
+  ...financialStatementFilterToggle(t.REALIZED_GAIN_OR_LOSS, 'realizedGainOrLoss'),
+
 });

src/store/financialStatement/financialStatements.selectors.js

@@ -73,6 +73,10 @@ export const inventoryItemDetailsDrawerFilter = (state) => {
   return filterDrawerByTypeSelector('inventoryItemDetails')(state);
 };
 
+export const realizedGainOrLossFilterDrawerSelector = (state) => {
+  return filterDrawerByTypeSelector('realizedGainOrLoss')(state);
+};
+
 /**
  * Retrieve balance sheet filter drawer.
  */
@@ -239,3 +243,13 @@ export const getInventoryItemDetailsFilterDrawer = createSelector(
     return isOpen;
   },
 );
+
+/**
+ * Retrieve Realized Gain or Loss filter drawer.
+ */
+export const getRealizedGainOrLossFilterDrawer = createSelector(
+  realizedGainOrLossFilterDrawerSelector,
+  (isOpen) => {
+    return isOpen;
+  },
+);

src/store/financialStatement/financialStatements.types.js

@@ -16,4 +16,5 @@ export default {
   VENDORS_TRANSACTIONS: 'VENDORS TRANSACTIONS',
   CASH_FLOW_STATEMENT: 'CASH FLOW STATEMENT',
   INVENTORY_ITEM_DETAILS: 'INVENTORY ITEM DETAILS',
+  REALIZED_GAIN_OR_LOSS: 'REALIZED GAIN OR LOSS',
 };