feat(UnrealizedGainorLoss): add Unrealized gain or loss.

src/config/sidebarMenu.js

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

src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLoss.js

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { FinancialStatement } from 'components';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
+import UnrealizedGainOrLossHeader from './UnrealizedGainOrLossHeader';
+import UnrealizedGainOrLossTable from './UnrealizedGainOrLossTable';
+import UnrealizedGainOrLossActionsBar from './UnrealizedGainOrLossActionsBar';
+
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';
+import withUnrealizedGainOrLossActions from './withUnrealizedGainOrLossActions';
+import { UnrealizedGainOrLossProvider } from './UnrealizedGainOrLossProvider';
+import { UnrealizedGainOrLossLoadingBar } from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Unrealized Gain or Loss
+ */
+function UnrealizedGainOrLoss({
+  // #withPreferences
+  organizationName,
+
+  //#withUnrealizedGainOrLossActions
+  toggleUnrealizedGainOrLossFilterDrawer,
+}) {
+  // Handle refetch unrealized Gain or Loss after filter change.
+  const handleFilterSubmit = (filter) => {};
+
+  // Handle format number submit.
+  const handleNumberFormatSubmit = (values) => {};
+
+  React.useEffect(
+    () => () => {
+      toggleUnrealizedGainOrLossFilterDrawer(false);
+    },
+    [toggleUnrealizedGainOrLossFilterDrawer],
+  );
+
+  return (
+    <UnrealizedGainOrLossProvider>
+      <UnrealizedGainOrLossActionsBar />
+      <DashboardPageContent>
+        <FinancialStatement>
+          <UnrealizedGainOrLossHeader
+            pageFilter={[]}
+            onSubmitFilter={handleFilterSubmit}
+          />
+
+          <UnrealizedGainOrLossLoadingBar />
+          <div className="financial-statement__body">
+            <UnrealizedGainOrLossTable companyName={organizationName} />
+          </div>
+        </FinancialStatement>
+      </DashboardPageContent>
+    </UnrealizedGainOrLossProvider>
+  );
+}
+
+export default compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+  withUnrealizedGainOrLossActions,
+)(UnrealizedGainOrLoss);

src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossActionsBar.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 { useUnrealizedGainOrLossContext } from './UnrealizedGainOrLossProvider';
+import withUnrealizedGainOrLoss from './withUnrealizedGainOrLoss';
+import withUnrealizedGainOrLossActions from './withUnrealizedGainOrLossActions';
+
+import { compose, saveInvoke } from 'utils';
+
+/**
+ * unrealized Gain or Loss actions bar.
+ */
+function UnrealizedGainOrLossActionsBar({
+  //#withRealizedGainOrLoss
+  isFilterDrawerOpen,
+
+  //#withRealizedGainOrLossActions
+  toggleUnrealizedGainOrLossFilterDrawer,
+
+  //#ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+}) {
+  // Handle filter toggle click.
+  const handleFilterToggleClick = () => {
+    toggleUnrealizedGainOrLossFilterDrawer();
+  };
+
+  // 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(
+  withUnrealizedGainOrLoss(({ unrealizedGainOrLossDrawerFilter }) => ({
+    isFilterDrawerOpen: unrealizedGainOrLossDrawerFilter,
+  })),
+  withUnrealizedGainOrLossActions,
+)(UnrealizedGainOrLossActionsBar);

src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossGeneralPanel.js

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

src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossHeader.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 UnrealizedGainOrLossGeneralPanel from './UnrealizedGainOrLossGeneralPanel';
+
+import withUnrealizedGainOrLoss from './withUnrealizedGainOrLoss';
+import withUnrealizedGainOrLossActions from './withUnrealizedGainOrLossActions';
+
+import { compose, transformToForm } from 'utils';
+
+/**
+ * Unrealized Gain or Loss.header.
+ */
+function UnrealizedGainOrLossHeader({
+  // #ownProps
+  onSubmitFilter,
+  pageFilter,
+
+  //#withUnrealizedGainOrLoss
+  isFilterDrawerOpen,
+
+  //#withUnrealizedGainOrLossActions
+  toggleUnrealizedGainOrLossFilterDrawer,
+}) {
+  // 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);
+    toggleUnrealizedGainOrLossFilterDrawer(false);
+    setSubmitting(false);
+  };
+
+  // Handle drawer close action.
+  const handleDrawerClose = () => {
+    toggleUnrealizedGainOrLossFilterDrawer(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={<UnrealizedGainOrLossGeneralPanel />}
+            />
+          </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(
+  withUnrealizedGainOrLoss(({ unrealizedGainOrLossDrawerFilter }) => ({
+    isFilterDrawerOpen: unrealizedGainOrLossDrawerFilter,
+  })),
+  withUnrealizedGainOrLossActions,
+)(UnrealizedGainOrLossHeader);

src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossProvider.js

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

src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossTable.js

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

src/containers/FinancialStatements/UnrealizedGainOrLoss/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 { useUnrealizedGainOrLossContext } from './UnrealizedGainOrLossProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+/**
+ * Unrealized Gain or Loss loading bar.
+ */
+export function UnrealizedGainOrLossLoadingBar() {
+  return (
+    <If condition={false}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}

src/containers/FinancialStatements/UnrealizedGainOrLoss/withUnrealizedGainOrLoss.js

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

src/containers/FinancialStatements/UnrealizedGainOrLoss/withUnrealizedGainOrLossActions.js

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

src/hooks/query/types.js

@@ -25,6 +25,7 @@ const FINANCIAL_REPORTS = {
   INVENTORY_ITEM_DETAILS: 'INVENTORY_ITEM_DETAILS',
   TRANSACTIONS_BY_REFERENCE: 'TRANSACTIONS_BY_REFERENCE',
   REALIZED_GAIN_OR_LOSS: 'REALIZED_GAIN_OR_LOSS',
+  UNREALIZED_GAIN_OR_LOSS: 'UNREALIZED_GAIN_OR_LOSS',
 };
 
 const BILLS = {

src/lang/en/index.json

@@ -1846,5 +1846,7 @@
   "branch.dialog.label.website": "Website",
   "branch.dialog.success_message": "The branch has been created successfully.",
   "branch.alert.delete_message":"The branch has been deleted successfully",
-  "branch.once_delete_this_branch":"Once you delete this branch, you won't be able to restore it later. Are you sure you want to delete this branch?"
+  "branch.once_delete_this_branch":"Once you delete this branch, you won't be able to restore it later. Are you sure you want to delete this branch?",
+  "realized_gain_or_loss.label":"Realized Gain or Loss",
+  "unrealized_gain_or_loss.label":"Unrealized Gain or Loss"
 }

src/routes/dashboard.js

@@ -383,13 +383,25 @@ export const getDashboardRoutes = () => [
         '../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/unrealized-gain-loss`,
+    component: lazy(() =>
+      import(
+        '../containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLoss'
+      ),
+    ),
+    breadcrumb: intl.get('unrealized_gain_or_loss.label'),
+    pageTitle: intl.get('unrealized_gain_or_loss.label'),
+    backLink: true,
+    sidebarExpand: false,
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
   {
     path: '/financial-reports',
     component: lazy(() =>

src/store/financialStatement/financialStatements.actions.js

@@ -209,7 +209,7 @@ export function toggleInventoryItemDetailsFilterDrawer(toggle) {
  *  Toggle display of the Realized Gain or Loss filter drawer.
  * @param {boolean} toggle
  */
-export function toggleRealizedGainOrLossCilterDrawer(toggle) {
+export function toggleRealizedGainOrLossFilterDrawer(toggle) {
   return {
     type: `${t.REALIZED_GAIN_OR_LOSS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
     payload: {
@@ -217,3 +217,16 @@ export function toggleRealizedGainOrLossCilterDrawer(toggle) {
     },
   };
 }
+
+/**
+ *  Toggle display of the Unrealized Gain or Loss filter drawer.
+ * @param {boolean} toggle
+ */
+export function toggleUnrealizedGainOrLossFilterDrawer(toggle) {
+  return {
+    type: `${t.UNREALIZED_GAIN_OR_LOSS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
+    payload: {
+      toggle,
+    },
+  };
+}

src/store/financialStatement/financialStatements.reducer.js

@@ -54,6 +54,9 @@ const initialState = {
   realizedGainOrLoss: {
     displayFilterDrawer: false,
   },
+  unrealizedGainOrLoss: {
+    displayFilterDrawer: false,
+  },
 };
 
 /**
@@ -106,5 +109,6 @@ export default createReducer(initialState, {
     'inventoryItemDetails',
   ),
   ...financialStatementFilterToggle(t.REALIZED_GAIN_OR_LOSS, 'realizedGainOrLoss'),
+  ...financialStatementFilterToggle(t.UNREALIZED_GAIN_OR_LOSS, 'unrealizedGainOrLoss'),
 
 });

src/store/financialStatement/financialStatements.selectors.js

@@ -77,6 +77,10 @@ export const realizedGainOrLossFilterDrawerSelector = (state) => {
   return filterDrawerByTypeSelector('realizedGainOrLoss')(state);
 };
 
+export const unrealizedGainOrLossFilterDrawerSelector = (state) => {
+  return filterDrawerByTypeSelector('unrealizedGainOrLoss')(state);
+};
+
 /**
  * Retrieve balance sheet filter drawer.
  */
@@ -253,3 +257,12 @@ export const getRealizedGainOrLossFilterDrawer = createSelector(
     return isOpen;
   },
 );
+/**
+ * Retrieve Unrealized Gain or Loss filter drawer.
+ */
+export const getUnrealizedGainOrLossFilterDrawer = createSelector(
+  unrealizedGainOrLossFilterDrawerSelector,
+  (isOpen) => {
+    return isOpen;
+  },
+);

src/store/financialStatement/financialStatements.types.js

@@ -17,4 +17,5 @@ export default {
   CASH_FLOW_STATEMENT: 'CASH FLOW STATEMENT',
   INVENTORY_ITEM_DETAILS: 'INVENTORY ITEM DETAILS',
   REALIZED_GAIN_OR_LOSS: 'REALIZED GAIN OR LOSS',
+  UNREALIZED_GAIN_OR_LOSS: 'UNREALIZED GAIN OR LOSS',
 };