Update CHANGELOG.md

BIG-372: activate branches & warehouses reloading.

CHANGELOG.md

@@ -2,6 +2,80 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+## [1.7.3-rc.2] - 15-04-2022
+
+### Fixed
+  - `BIG-372` Activate branches and warehouses dialog reloading once activating.
+  - `BIG-373` Issue general ledger report select specific account.
+  - `BIG-377` Make readonly details entries as oneline with tooltip for more details.
+
+## [1.7.2-rc.2] - 04-04-2022
+
+### Fixed
+  - Add the missing Arabic localization.
+  - Subscription plans modifications.
+
+## [1.7.1-rc.2] - 30-03-2022
+
+## Added
+  - `BIG-141` Add inactive status to item drawer details.
+  - `BIG-278` Add created at date on expense details.
+  - `BIG-350` Add empty status content of warehouse transfers service.
+  - `BIG-344` Add branch details to manual journal and expense details.
+## Fixed
+  - `BIG-221` Remove Non-inventory radio choice on item form.
+  - `BIG-236` Validate estimate expiration date should be equal or bigger than estimate date.
+  - `BIG-237` Validate invoice due date should be equal or bigger than invoice date.
+  - `BIG-238` Validate bill due date should be equal or bigger than bill date.
+  - `BIG-280` Optimize style of multi-select accounts menu.
+  - `BIG-284` Cashflow statement loading bar.
+  - `BIG-296` Creating a new child account from accounts list.
+  - `BIG-301` Navigation bar divider on actions bar hide with permissions control.
+  - `BIG-304` Adding cash or bank account from cash flow service.
+  - `BIG-351` Invalid date in the inventory adjustment detail.
+  - `BIG-352` Fix terms and notes fields on footer of all services.
+  - `BIG-354` Validate the warehouse transfer quantity should be above zero.
+
+## [1.7.0-rc.1] - 24-03-2022
+
+## Added 
+ - Multiply currencies with foreign currencies.
+ - Multiply warehouses to track inventory items.
+ - Multiply branches to track organization transactions.
+ - Transfer orders between warehouses.
+ - Integrate financial reports with multiply branches.
+ - Integrate inventory reports with multiply warehouses.
+
+## Changes
+ - Optimize style of sale invoice form.
+ - Optimize style of sale receipt form.
+ - Optimize style of credit note form.
+ - Optimize style of payment receive form.
+ - Optimize style of bill form.
+ - Optimize style of payment made form.
+ - Optimize style of manual journal form.
+ - Optimize style of expense form.
+
+## [1.6.3] - 21-02-2022
+
+### Fixed
+ - `BIG-337` Display billing page once the organization subscription is inactive.
+
+## [1.6.2] - 19-02-2022
+
+### Fixed
+ - fix syled components dependency with imported as default components.
+
+## [1.6.0] - 18-02-2022
+
+### Added
+- Balance sheet comparison of previous period (PP).
+- Balance sheet comparison of previous year (PY).
+- Balance sheet percentage analysis columns and rows basis.
+- Profit & loss sheet comparison of preivous period (PP).
+- Profit & loss sheet comparison of previous year (PY).
+- Profit & loss sheet percentage analysis columns, rows, income and expenses basis.
+
 ## [1.5.8] - 13-01-2022
 
 ### Added

config/env.js

@@ -85,6 +85,9 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
         WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+
+        // Application version.
+        VERSION: paths.appVersion
       }
     );
   // Stringify all values so we can feed into webpack DefinePlugin

config/paths.js

@@ -48,6 +48,8 @@ const resolveModule = (resolveFn, filePath) => {
   return resolveFn(`${filePath}.js`);
 };
 
+const appVersion = require(resolveApp('package.json')).version;
+
 // config after eject: we're in ./config/
 module.exports = {
   dotenv: resolveApp('.env'),
@@ -65,6 +67,7 @@ module.exports = {
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrlOrPath,
+  appVersion
 };
 
 

package.json

@@ -1,10 +1,10 @@
 {
   "name": "bigcapital-client",
-  "version": "1.5.8",
+  "version": "1.7.1",
   "private": true,
   "dependencies": {
     "@babel/core": "7.8.4",
-    "@blueprintjs-formik/core": "^0.1.5",
+    "@blueprintjs-formik/core": "^0.2.1",
     "@blueprintjs-formik/select": "^0.1.4",
     "@blueprintjs/core": "^3.50.2",
     "@blueprintjs/datetime": "^3.23.12",

src/common/accountTypes.js

@@ -221,3 +221,5 @@ export const ACCOUNT_TYPES = [
     incomeSheet: true,
   },
 ];
+
+export const FOREIGN_CURRENCY_ACCOUNTS = ['cash', 'bank'];

src/common/cellTypes.js

@@ -0,0 +1,7 @@
+
+
+export const CellType = {
+  Text: 'text',
+  Field: 'field',
+  Button: 'button'
+}

src/common/features.js

@@ -2,5 +2,6 @@
 
 export const Features = {
   Warehouses: 'warehouses',
-  Branches: 'branches'
+  Branches: 'branches',
+  ManualJournal: 'manualJournal',
 }

src/common/index.js

@@ -1,4 +1,6 @@
+export * from './accountTypes';
 export * from './TableStyle';
 export * from './features';
+export * from './cellTypes';
 
 export const Align = { Left: 'left', Right: 'right', Center: 'center' };

src/components/Accounts/AccountMultiSelect.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from 'styled-components';
+import { MenuItem } from '@blueprintjs/core';
+import { FMultiSelect } from '../Forms';
+import classNames from 'classnames';
+import { Classes } from '@blueprintjs/popover2';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} account
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const accountItemPredicate = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} account
+ * @param {*} param1
+ * @returns
+ */
+const accountItemRenderer = (
+  account,
+  { handleClick, modifiers, query },
+  { isSelected },
+) => {
+  return (
+    <MenuItem
+      icon={isSelected ? 'tick' : 'blank'}
+      text={account.name}
+      label={account.code}
+      key={account.id}
+      onClick={handleClick}
+    />
+  );
+};
+
+const accountSelectProps = {
+  itemPredicate: accountItemPredicate,
+  itemRenderer: accountItemRenderer,
+  valueAccessor: (item) => item.id,
+  labelAccessor: (item) => item.code,
+  tagRenderer: (item) => item.name,
+};
+
+/**
+ * branches mulit select.
+ * @param {*} param0
+ * @returns {JSX.Element}
+ */
+export function AccountMultiSelect({ accounts, ...rest }) {
+  return (
+    <FMultiSelect
+      items={accounts}
+      popoverProps={{
+        minimal: true,
+      }}
+      {...accountSelectProps}
+      {...rest}
+    />
+  );
+}

src/components/Accounts/index.js

@@ -0,0 +1 @@
+export * from './AccountMultiSelect';

src/components/BranchSuggestField.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem } from '@blueprintjs/core';
+import { Suggest } from '@blueprintjs/select';
+import { FormattedMessage as T } from 'components';
+
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+/**
+ * branch suggest field.
+ * @returns
+ */
+export default function BranchSuggestField({
+  branches,
+  initialBranchId,
+  selectedBranchId,
+  defaultSelectText = intl.get('select_branch'),
+  popoverFill = false,
+  onBranchSelected,
+  ...suggestProps
+}) {
+  const initialBranch = React.useMemo(
+    () => branches.find((b) => b.id === initialBranchId),
+    [initialBranchId, branches],
+  );
+
+  const [selectedBranch, setSelectedBranch] = React.useState(
+    initialBranch || null,
+  );
+
+  React.useEffect(() => {
+    if (typeof selectedBranchId !== 'undefined') {
+      const branch = selectedBranchId
+        ? branches.find((a) => a.id === selectedBranchId)
+        : null;
+      setSelectedBranch(branch);
+    }
+  }, [selectedBranchId, branches, setSelectedBranch]);
+
+  /**
+   *
+   * @param {*} branch
+   * @returns
+   */
+  const branchItemRenderer = (branch, { handleClick, modifiers, query }) => {
+    return (
+      <MenuItem
+        // active={modifiers.active}
+        disabled={modifiers.disabled}
+        label={branch.code}
+        key={branch.id}
+        onClick={handleClick}
+        text={branch.name}
+      />
+    );
+  };
+
+  /**
+   *
+   * @param {*} query
+   * @param {*} branch
+   * @param {*} _index
+   * @param {*} exactMatch
+   * @returns
+   */
+  const branchItemPredicate = (query, branch, _index, exactMatch) => {
+    const normalizedTitle = branch.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return `${branch.code}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+    }
+  };
+
+  /**
+   *
+   * @param {*} branch
+   * @returns
+   */
+  const brnachItemSelect = React.useCallback(
+    (branch) => {
+      if (branch.id) {
+        setSelectedBranch({ ...branch });
+        onBranchSelected && onBranchSelected(branch);
+      }
+    },
+    [setSelectedBranch, onBranchSelected],
+  );
+
+  /**
+   *
+   * @param {*} inputVaue
+   * @returns
+   */
+  const branchInputValueRenderer = (inputValue) => {
+    if (inputValue) {
+      return inputValue.name.toString();
+    }
+    return '';
+  };
+
+  return (
+    <Suggest
+      items={branches}
+      noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
+      itemRenderer={branchItemRenderer}
+      itemPredicate={branchItemPredicate}
+      onItemSelect={brnachItemSelect}
+      selectedItem={selectedBranch}
+      inputProps={{ placeholder: defaultSelectText }}
+      resetOnClose={true}
+      fill={true}
+      popoverProps={{ minimal: true, boundary: 'window' }}
+      inputValueRenderer={branchInputValueRenderer}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      {...suggestProps}
+    />
+  );
+}

src/components/Branches/BranchMultiSelect.js

@@ -38,8 +38,8 @@ const branchItemRenderer = (
       active={modifiers.active}
       disabled={modifiers.disabled}
       icon={isSelected ? 'tick' : 'blank'}
-      text={branch.name.toString()}
-      label={branch.code.toString()}
+      text={branch.name}
+      label={branch.code}
       key={branch.id}
       onClick={handleClick}
     />
@@ -50,14 +50,14 @@ const branchSelectProps = {
   itemPredicate: branchItemPredicate,
   itemRenderer: branchItemRenderer,
   valueAccessor: (item) => item.id,
-  labelAccessor: (item) => item.label,
+  labelAccessor: (item) => item.code,
   tagRenderer: (item) => item.name,
 };
 
 /**
  * branches mulit select.
  * @param {*} param0
- * @returns
+ * @returns {JSX.Element}
  */
 export function BranchMultiSelect({ branches, ...rest }) {
   return (

src/components/Branches/BranchSelect.js

@@ -35,7 +35,7 @@ const branchItemRenderer = (branch, { handleClick, modifiers, query }) => {
     <MenuItem
       active={modifiers.active}
       disabled={modifiers.disabled}
-      label={branch.name.toString()}
+      label={branch.code}
       key={branch.id}
       onClick={handleClick}
       text={text}

src/components/Button/index.js

@@ -1,3 +1 @@
-
-
 export * from './ButtonLink';

src/components/CommercialDoc/index.js

@@ -11,7 +11,7 @@ export const CommercialDocHeader = styled.div`
 `;
 
 export const CommercialDocTopHeader = styled.div`
-  margin-bottom: 25px;
+  margin-bottom: 30px;
 `;
 
 export const CommercialDocEntriesTable = styled(DataTable)`

src/components/Currencies/BaseCurrency.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CurrencyTag } from 'components';
+
+/**
+ * base currecncy.
+ * @returns
+ */
+export function BaseCurrency({ currency }) {
+  return <CurrencyTag>{currency}</CurrencyTag>;
+}

src/components/Currencies/index.js

@@ -1 +1,2 @@
-export * from './CurrencySelect'
+export * from './CurrencySelect';
+export * from './BaseCurrency';

src/components/Customers/CustomerDrawerLink.js

@@ -1,23 +1,29 @@
 import React from 'react';
 import * as R from 'ramda';
 
-import { ButtonLink } from 'components';
+import { ButtonLink } from '../Button';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 function CustomerDrawerLinkComponent({
   // #ownProps
   children,
   customerId,
+  className,
 
   // #withDrawerActions
   openDrawer,
 }) {
   // Handle view customer drawer.
-  const handleCustomerDrawer = () => {
+  const handleCustomerDrawer = (event) => {
     openDrawer('customer-details-drawer', { customerId });
+    event.preventDefault();
   };
 
-  return <ButtonLink onClick={handleCustomerDrawer}>{children}</ButtonLink>;
+  return (
+    <ButtonLink className={className} onClick={handleCustomerDrawer}>
+      {children}
+    </ButtonLink>
+  );
 }
 
 export const CustomerDrawerLink = R.compose(withDrawerActions)(

src/components/Dashboard/DashboardAbilityProvider.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Ability } from '@casl/ability';
 import { createContextualCan } from '@casl/react';
-import { useDashboardMeta } from '../../hooks/query';
+
+import { useDashboardMetaBoot } from './DashboardBoot';
 
 export const AbilityContext = React.createContext();
 export const Can = createContextualCan(AbilityContext.Consumer);
@@ -11,8 +12,8 @@ export const Can = createContextualCan(AbilityContext.Consumer);
  */
 export function DashboardAbilityProvider({ children }) {
   const {
-    data: { abilities },
-  } = useDashboardMeta();
+    meta: { abilities },
+  } = useDashboardMetaBoot();
 
   // Ability instance.
   const ability = new Ability(abilities);

src/components/Dashboard/DashboardBoot.js

@@ -6,18 +6,26 @@ import {
 } from '../../hooks/query';
 import { useSplashLoading } from '../../hooks/state';
 import { useWatch, useWatchImmediate, useWhen } from '../../hooks';
+import { useSubscription } from '../../hooks/state';
 import { setCookie, getCookie } from '../../utils';
 
 /**
  * Dashboard meta async booting.
+ *  - Fetches the dashboard meta only if the organization subscribe is active.
+ *  - Once the dashboard meta query is loading display dashboard splash screen.
  */
 export function useDashboardMetaBoot() {
+  const { isSubscriptionActive } = useSubscription();
+
   const {
     data: dashboardMeta,
     isLoading: isDashboardMetaLoading,
     isSuccess: isDashboardMetaSuccess,
   } = useDashboardMeta({
     keepPreviousData: true,
+
+    // Avoid run the query if the organization subscription is not active.
+    enabled: isSubscriptionActive,
   });
   const [startLoading, stopLoading] = useSplashLoading();
 
@@ -30,20 +38,12 @@ export function useDashboardMetaBoot() {
   }, isDashboardMetaSuccess);
 
   return {
+    meta: dashboardMeta,
     isLoading: isDashboardMetaLoading,
+    isSuccess: isDashboardMetaSuccess
   };
 }
 
-/**
- * Dashboard async booting.
- * @returns {{ isLoading: boolean }}
- */
-export function useDashboardBoot() {
-  const { isLoading } = useDashboardMetaBoot();
-
-  return { isLoading };
-}
-
 /**
  * Application async booting.
  */

src/components/Dashboard/DashboardProvider.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { DashboardAbilityProvider } from '../../components';
-import { useDashboardBoot } from './DashboardBoot';
+import { useDashboardMetaBoot } from './DashboardBoot';
 
 /**
  * Dashboard provider.
  */
 export default function DashboardProvider({ children }) {
-  const { isLoading } = useDashboardBoot();
+  const { isLoading } = useDashboardMetaBoot();
 
   // Avoid display any dashboard component before complete booting.
   if (isLoading) {

src/components/DataTableCells/AccountsListFieldCell.js

@@ -1,13 +1,12 @@
 import React, { useRef, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
-import { useCellAutoFocus } from 'hooks';
+import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
+import { CellType } from 'common';
+import { useCellAutoFocus } from 'hooks';
 import AccountsSuggestField from 'components/AccountsSuggestField';
 
-// import AccountsSelectList from 'components/AccountsSelectList';
-import { FormGroup, Classes, Intent } from '@blueprintjs/core';
-
 /**
  * Account cell renderer.
  */
@@ -74,3 +73,4 @@ export default function AccountCellRenderer({
     </FormGroup>
   );
 }
+AccountCellRenderer.cellType = CellType.Field;

src/components/DataTableCells/BranchesListFieldCell.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FormGroup, Intent, Classes } from '@blueprintjs/core';
+import classNames from 'classnames';
+
+import { CellType } from 'common';
+import BranchSuggestField from '../BranchSuggestField';
+
+/**
+ * Branches list field cell.
+ * @returns
+ */
+export default function BranchesListFieldCell({
+  column: { id },
+  row: { index, original },
+  payload: { branches, updateData, errors },
+}) {
+  const handleBranchSelected = React.useCallback(
+    (branch) => {
+      updateData(index, 'branch_id', branch.id);
+    },
+    [updateData, index],
+  );
+
+  const error = errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(
+        'form-group--select-list',
+        'form-group--contacts-list',
+        Classes.FILL,
+      )}
+    >
+      <BranchSuggestField
+        branches={branches}
+        onBranchSelected={handleBranchSelected}
+        selectedBranchId={original?.branch_id}
+      />
+    </FormGroup>
+  );
+}
+
+BranchesListFieldCell.cellType = CellType.Field;

src/components/DataTableCells/CheckBoxFieldCell.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { Classes, Checkbox, FormGroup, Intent } from '@blueprintjs/core';
+import { CellType } from 'common';
 
 const CheckboxEditableCell = ({
   row: { index, original },
@@ -45,4 +46,6 @@ const CheckboxEditableCell = ({
   );
 };
 
+CheckboxEditableCell.cellType = CellType.Field;
+
 export default CheckboxEditableCell;

src/components/DataTableCells/ContactsListFieldCell.js

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
 import { FormGroup, Intent, Classes } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { ContactSelecetList } from 'components';
-import ContactsSuggestField from 'components/ContactsSuggestField';
 
+import { CellType } from 'common';
+import ContactsSuggestField from 'components/ContactsSuggestField';
 export default function ContactsListCellRenderer({
   column: { id },
   row: { index, original },
@@ -37,3 +37,5 @@ export default function ContactsListCellRenderer({
     </FormGroup>
   );
 }
+
+ContactsListCellRenderer.cellType = CellType.Field;

src/components/DataTableCells/InputGroupCell.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { Classes, InputGroup, FormGroup, Intent } from '@blueprintjs/core';
+import { CellType } from 'common';
 
 const InputEditableCell = ({
   row: { index },
@@ -37,4 +38,6 @@ const InputEditableCell = ({
   );
 };
 
+InputEditableCell.cellType = CellType.Field;
+
 export default InputEditableCell;

src/components/DataTableCells/ItemsListCell.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
+import { CellType } from 'common';
 import ItemsSuggestField from 'components/ItemsSuggestField';
 
 import { useCellAutoFocus } from 'hooks';
@@ -54,3 +55,5 @@ export default function ItemsListCell({
     </FormGroup>
   );
 }
+
+ItemsListCell.cellType = CellType.Field;

src/components/DataTableCells/MoneyFieldCell.js

@@ -1,7 +1,9 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import { FormGroup, Intent } from '@blueprintjs/core';
+
 import { MoneyInputGroup } from 'components';
 import { CLASSES } from 'common/classes';
+import { CellType } from 'common';
 
 // Input form cell renderer.
 const MoneyFieldCellRenderer = ({
@@ -48,4 +50,6 @@ const MoneyFieldCellRenderer = ({
   );
 };
 
+MoneyFieldCellRenderer.cellType = CellType.Field;
+
 export default MoneyFieldCellRenderer;

src/components/DataTableCells/NumericInputCell.js

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { FormGroup, NumericInput, Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
+
+import { CellType } from 'common';
 import { CLASSES } from 'common/classes';
 
 /**
@@ -36,8 +38,10 @@ export default function NumericInputCell({
         onValueChange={handleValueChange}
         onBlur={onBlur}
         fill={true}
-        buttonPosition={"none"}
+        buttonPosition={'none'}
       />
     </FormGroup>
   );
 }
+
+NumericInputCell.cellType = CellType.Field;

src/components/DataTableCells/PaymentReceiveListFieldCell.js

@@ -1,8 +1,9 @@
 import React, { useCallback } from 'react';
-import PaymentReceiveListField from 'components/PaymentReceiveListField';
 import classNames from 'classnames';
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 
+import PaymentReceiveListField from 'components/PaymentReceiveListField';
+import { CellType } from 'common';
 function PaymentReceiveListFieldCell({
   column: { id },
   row: { index },
@@ -32,4 +33,6 @@ function PaymentReceiveListFieldCell({
   );
 }
 
+PaymentReceiveListFieldCell.cellType = CellType.Field;
+
 export default PaymentReceiveListFieldCell;

src/components/DataTableCells/PercentFieldCell.js

@@ -1,6 +1,8 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import { FormGroup, Intent } from '@blueprintjs/core';
+
 import { MoneyInputGroup } from 'components';
+import { CellType } from 'common';
 
 const PercentFieldCell = ({
   cell: { value: initialValue },
@@ -38,4 +40,6 @@ const PercentFieldCell = ({
   );
 };
 
+PercentFieldCell.cellType = CellType.Field;
+
 export default PercentFieldCell;

src/components/DataTableCells/SwitchFieldCell.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { Classes, Switch, FormGroup, Intent } from '@blueprintjs/core';
 
+import { CellType } from 'common';
 import { safeInvoke } from 'utils';
 
 /**
@@ -48,4 +49,6 @@ const SwitchEditableCell = ({
   );
 };
 
-export default SwitchEditableCell;
+SwitchEditableCell.cellType = CellType.Field;
+
+export default SwitchEditableCell;

src/components/DataTableCells/TextAreaCell.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { Classes, TextArea, FormGroup, Intent } from '@blueprintjs/core';
+import { CellType } from 'common';
 
 const TextAreaEditableCell = ({
   row: { index },
@@ -39,4 +40,6 @@ const TextAreaEditableCell = ({
   );
 };
 
+TextAreaEditableCell.cellType = CellType.Field;
+
 export default TextAreaEditableCell;

src/components/DataTableCells/TextOverviewTooltipCell.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Tooltip, Position } from '@blueprintjs/core';
+
+/**
+ * Text overview tooltip cell.
+ * @returns {JSX.Element}
+ */
+export function TextOverviewTooltipCell({ cell: { value } }) {
+  const SUBMENU_POPOVER_MODIFIERS = {
+    flip: { boundariesElement: 'viewport', padding: 20 },
+    offset: { offset: '0, 10' },
+    preventOverflow: { boundariesElement: 'viewport', padding: 40 },
+  };
+
+  return (
+    <Tooltip
+      content={value}
+      position={Position.BOTTOM_LEFT}
+      boundary={'viewport'}
+      minimal={true}
+      modifiers={SUBMENU_POPOVER_MODIFIERS}
+      targetClassName={'table-tooltip-overview-target'}
+    >
+      {value}
+    </Tooltip>
+  );
+}

src/components/DataTableCells/index.js

@@ -9,6 +9,8 @@ import NumericInputCell from './NumericInputCell';
 import CheckBoxFieldCell from './CheckBoxFieldCell';
 import SwitchFieldCell from './SwitchFieldCell';
 import TextAreaCell from './TextAreaCell';
+import BranchesListFieldCell from './BranchesListFieldCell';
+import { TextOverviewTooltipCell } from './TextOverviewTooltipCell';
 
 export {
   AccountsListFieldCell,
@@ -23,4 +25,6 @@ export {
   CheckBoxFieldCell,
   SwitchFieldCell,
   TextAreaCell,
+  BranchesListFieldCell,
+  TextOverviewTooltipCell,
 };

src/components/Datatable/DatatableEditable.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-import { DataTable, If } from 'components';
-import 'style/components/DataTable/DataTableEditable.scss';
+import styled from 'styled-components';
+
+import { DataTable } from 'components';
 
 /**
  * Editable datatable.
@@ -11,26 +10,106 @@ export default function DatatableEditable({
   totalRow = false,
   actions,
   name,
-  className,
   ...tableProps
 }) {
   return (
-    <div
-      className={classNames(
-        CLASSES.DATATABLE_EDITOR,
-        {
-          [`${CLASSES.DATATABLE_EDITOR}--${name}`]: name,
-        },
-        className,
-      )}
-    >
+    <DatatableEditableRoot>
       <DataTable {...tableProps} />
-
-      <If condition={actions}>
-        <div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS)}>
-          {actions}
-        </div>
-      </If>
-    </div>
+    </DatatableEditableRoot>
   );
 }
+
+const DatatableEditableRoot = styled.div`
+  .bp3-form-group {
+    margin-bottom: 0;
+  }
+  .table {
+    border: 1px solid #d2dce2;
+    border-radius: 5px;
+    background-color: #fff;
+
+    .th,
+    .td {
+      border-left: 1px solid #e2e2e2;
+
+      &:first-of-type{
+        border-left: 0;
+      }
+    }
+
+    .thead {
+      .tr .th {
+        padding: 9px 14px;
+        background-color: #f2f3fb;
+        font-size: 13px;
+        color: #415060;
+        border-bottom: 1px solid #d2dce2;
+
+        &,
+        .inner-resizer {
+          border-left-color: transparent;
+        }
+      }
+    }
+    .tbody {
+      .tr .td {
+        border-bottom: 0;
+        border-bottom: 1px solid #d8d8d8;
+        min-height: 38px;
+        padding: 4px 14px;
+
+        &.td-field-type,
+        &.td-button-type{
+          padding: 2px;
+        }
+      }
+      .tr:last-of-type .td {
+        border-bottom: 0;
+      }
+      .tr {
+        &:hover .td,
+        .bp3-input {
+          background-color: transparent;
+        }
+        .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
+        .form-group--select-list .bp3-button {
+          border-color: #ffffff;
+          color: #222;
+          border-radius: 3px;
+          text-align: inherit;
+        }
+        .bp3-form-group:not(.bp3-intent-danger) .bp3-input {
+          border-radius: 2px;
+          padding-left: 14px;
+          padding-right: 14px;
+
+          &:focus {
+            box-shadow: 0 0 0 2px #116cd0;
+          }
+        }
+        .form-group--select-list .bp3-button {
+          padding-left: 6px;
+          padding-right: 6px;
+
+          &:after {
+            display: none;
+          }
+        }
+        .form-group--select-list,
+        .bp3-form-group {
+          &.bp3-intent-danger {
+            .bp3-button:not(.bp3-minimal),
+            .bp3-input {
+              border-color: #f7b6b6;
+            }
+          }
+        }
+        .td.actions {
+          .bp3-button {
+            color: #80858f;
+          }
+        }
+      }
+    }
+  }
+`;

src/components/Datatable/TableCell.js

@@ -1,7 +1,8 @@
 import React, { useContext } from 'react';
 import classNames from 'classnames';
-import { If } from 'components';
-import { Skeleton } from 'components';
+import { camelCase} from 'lodash';
+
+import { If, Skeleton } from 'components';
 import { useAppIntlContext } from 'components/AppIntlProvider';
 import TableContext from './TableContext';
 import { saveInvoke, ignoreEventFromSelectors } from 'utils';
@@ -56,7 +57,8 @@ export default function TableCell({ cell, row, index }) {
       return;
     }
     saveInvoke(onCellClick, cell, event);
-  };
+  };  
+  const cellType = camelCase(cell.column.Cell.cellType) || 'text';
 
   return (
     <div
@@ -65,6 +67,9 @@ export default function TableCell({ cell, row, index }) {
           'is-text-overview': cell.column.textOverview,
           clickable: cell.column.clickable,
           'align-right': cell.column.align === 'right',
+          'align-center': cell.column.align === 'center',
+          [`td-${cell.column.id}`]: cell.column.id,
+          [`td-${cellType}-type`]: !!cellType,
         }),
         onClick: handleCellClick,
       })}

src/components/Datatable/TableIndeterminateCheckboxRow.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Checkbox } from '@blueprintjs/core';
-
+import { CellType } from 'common';
 export default function TableIndeterminateCheckboxRow({ row }) {
   return (
     <div class="selection-checkbox">
@@ -8,3 +8,5 @@ export default function TableIndeterminateCheckboxRow({ row }) {
     </div>
   );
 }
+
+TableIndeterminateCheckboxRow.cellType = CellType.Field;

src/components/DetailExchangeRate.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+import { DetailItem } from 'components';
+import { isEqual } from 'lodash';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+/**
+ * Detail exchange rate item.
+ * @param {*} param0
+ * @param {*} param1
+ * @returns
+ */
+function DetailExchangeRate({
+  exchangeRate,
+  toCurrency,
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  if (isEqual(base_currency, toCurrency)) {
+    return null;
+  }
+
+  return (
+    <DetailItem label={intl.get('exchange_rate')}>
+      1 {base_currency} = {exchangeRate} {toCurrency}
+    </DetailItem>
+  );
+}
+
+export const ExchangeRateDetailItem = R.compose(withCurrentOrganization())(
+  DetailExchangeRate,
+);

src/components/DialogsContainer.js

@@ -38,6 +38,8 @@ import WarehouseFormDialog from '../containers/Dialogs/WarehouseFormDialog';
 import BranchFormDialog from '../containers/Dialogs/BranchFormDialog';
 import BranchActivateDialog from '../containers/Dialogs/BranchActivateDialog';
 import WarehouseActivateDialog from '../containers/Dialogs/WarehouseActivateDialog';
+import CustomerOpeningBalanceDialog from '../containers/Dialogs/CustomerOpeningBalanceDialog';
+import VendorOpeningBalanceDialog from '../containers/Dialogs/VendorOpeningBalanceDialog';
 
 /**
  * Dialogs container.
@@ -86,6 +88,8 @@ export default function DialogsContainer() {
       <BranchFormDialog dialogName={'branch-form'} />
       <BranchActivateDialog dialogName={'branch-activate'} />
       <WarehouseActivateDialog dialogName={'warehouse-activate'} />
+      <CustomerOpeningBalanceDialog dialogName={'customer-opening-balance'} />
+      <VendorOpeningBalanceDialog dialogName={'vendor-opening-balance'} />
     </div>
   );
 }

src/components/Drawer/DrawerHeaderContent.js

@@ -4,6 +4,7 @@ import { Classes, Icon, H4, Button } from '@blueprintjs/core';
 
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
+import styled from 'styled-components';
 import { compose } from 'utils';
 
 /**
@@ -13,6 +14,7 @@ function DrawerHeaderContent(props) {
   const {
     icon,
     title = <T id={'view_paper'} />,
+    subTitle,
     onClose,
     name,
     closeDrawer,
@@ -30,7 +32,10 @@ function DrawerHeaderContent(props) {
   return (
     <div className={Classes.DRAWER_HEADER}>
       <Icon icon={icon} iconSize={Icon.SIZE_LARGE} />
-      <H4>{title}</H4>
+      <H4>
+        {title}
+        <SubTitle>{subTitle}</SubTitle>
+      </H4>
 
       <Button
         aria-label="Close"
@@ -44,3 +49,24 @@ function DrawerHeaderContent(props) {
 }
 
 export default compose(withDrawerActions)(DrawerHeaderContent);
+
+/**
+ * SubTitle Drawer header.
+ * @returns {React.JSX}
+ */
+function SubTitle({ children }) {
+  if (children == null) {
+    return null;
+  }
+
+  return <SubTitleHead>{children}</SubTitleHead>;
+}
+
+const SubTitleHead = styled.div`
+  color: #666;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
+  padding: 2px 0px;
+  margin: 2px 0px;
+`;

src/components/ExchangeRate/ExchangeRateInput.js

@@ -12,23 +12,20 @@ export function ExchangeRateInputGroup({
   formGroupProps,
   name,
 }) {
-  const fromCountryCode = 'US';
-  const toCountryCode = 'LY';
-
   return (
     <FFormGroup inline={true} {...formGroupProps} name={name}>
       <ControlGroup>
         <ExchangeRatePrepend>
-          <ExchangeFlagIcon countryCode={fromCountryCode} /> 1 {fromCurrency} =
+          <ExchangeFlagIcon currencyCode={fromCurrency} /> 1 {fromCurrency} =
         </ExchangeRatePrepend>
         <ExchangeRateField
-          allowDecimals={false}
+          allowDecimals={true}
           allowNegativeValue={true}
           {...inputGroupProps}
           name={name}
         />
         <ExchangeRateAppend>
-          <ExchangeFlagIcon countryCode={toCountryCode} /> {toCurrency}
+          <ExchangeFlagIcon currencyCode={toCurrency} /> {toCurrency}
         </ExchangeRateAppend>
       </ControlGroup>
     </FFormGroup>
@@ -36,7 +33,7 @@ export function ExchangeRateInputGroup({
 }
 
 const ExchangeRateField = styled(FMoneyInputGroup)`
-  max-width: 88px;
+  max-width: 75px;
 `;
 
 const ExchangeRateSideIcon = styled.div`

src/components/ExchangeRate/ExchangeRateMutedField.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  FormGroup,
+  Position,
+  Classes,
+} from '@blueprintjs/core';
+import { ExchangeRateInputGroup, Icon } from 'components';
+
+export function ExchangeRateMutedField({
+  name,
+  toCurrency,
+  fromCurrency,
+  date,
+  exchangeRate,
+  exchangeRateFieldProps,
+  popoverProps,
+}) {
+  const content = (
+    <ExchangeRateFormGroupContent>
+      <ExchangeRateInputGroup
+        name={name}
+        fromCurrency={fromCurrency}
+        toCurrency={toCurrency}
+        {...exchangeRateFieldProps}
+      />
+    </ExchangeRateFormGroupContent>
+  );
+
+  return (
+    <ExchangeRateFormGroup label={`As on ${date},`}>
+      <Popover
+        content={content}
+        interactionKind={PopoverInteractionKind.CLICK}
+        position={Position.RIGHT_TOP}
+        modifiers={{
+          offset: { offset: '0, 4' },
+        }}
+        {...popoverProps}
+        minimal={true}
+        usePortal={false}
+        target={<div />}
+      >
+        <ExchangeRateButton>
+          1 {fromCurrency} = {exchangeRate} {toCurrency}
+          <Button
+            className={Classes.MINIMAL}
+            rightIcon={<Icon icon="pen-18" iconSize={14} />}
+            small={true}
+          />
+        </ExchangeRateButton>
+      </Popover>
+    </ExchangeRateFormGroup>
+  );
+}
+
+const ExchangeRateFormGroup = styled(FormGroup)`
+  &.bp3-form-group {
+    label.bp3-label {
+      font-size: 12px;
+      opacity: 0.7;
+      line-height: 1;
+      margin-bottom: 5px;
+    }
+  }
+`;
+
+const ExchangeRateButton = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 400;
+  color: #0d244a;
+  position: relative;
+  padding-right: 28px;
+
+  .bp3-button {
+    position: absolute;
+    right: 0;
+  }
+`;
+
+const ExchangeRateFormGroupContent = styled.div`
+  padding: 5px 0;
+
+  .bp3-form-group {
+    padding: 2px;
+    margin: 2px 4px !important;
+  }
+`;

src/components/ExchangeRate/index.js

@@ -1 +1,2 @@
-export * from './ExchangeRateInput';
+export * from './ExchangeRateInput';
+export * from './ExchangeRateMutedField'

src/components/FinancialSheet/FinancialSheet.js

@@ -2,7 +2,8 @@ import React, { useMemo, useCallback } from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
 
-import { If, FormattedMessage as T } from 'components';
+import If from '../Utils/If';
+import { FormattedMessage as T } from '../FormattedMessage';
 import {
   FinancialSheetRoot,
   FinancialSheetFooterCurrentTime,

src/components/FinancialSheet/FinancialSheetSkeleton.js

@@ -2,7 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Align } from 'common';
-import { SkeletonText, DataTable } from 'components';
+import { SkeletonText } from 'components';
+import DataTable from '../../components/DataTable'
 
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';

src/components/FinancialSheet/ReportDataTable.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+import DataTable from '../DataTable';
+
+export const ReportDataTable = styled(DataTable)`
+  .table .tbody .tr.no-results:last-of-type .td {
+    border-bottom: 1px solid #ddd;
+  }
+`;

src/components/FinancialSheet/index.js

@@ -1,2 +1,3 @@
 export * from './FinancialSheet';
-export * from './FinancialSheetSkeleton';
+export * from './FinancialSheetSkeleton';
+export * from './ReportDataTable';

src/components/FormTopbar.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Navbar } from '@blueprintjs/core';
+
+/**
+ * Form the topbar.
+ * @param   {JSX.Element} children
+ * @returns {JSX.Element}
+ */
+export function FormTopbar({ className, children }) {
+  return <FormTopBarRoot className={className}>{children}</FormTopBarRoot>;
+}
+
+const FormTopBarRoot = styled(Navbar)`
+  box-shadow: 0 0 0;
+  border-bottom: 1px solid #c7d5db;
+  height: 35px;
+  padding: 0 20px;
+
+  .bp3-navbar-group {
+    height: 35px;
+  }
+  .bp3-navbar-divider {
+    border-left-color: #d2dce2;
+  }
+  .bp3-skeleton {
+    max-height: 10px;
+  }
+  .bp3-button {
+    &:hover {
+      background: rgba(167, 182, 194, 0.12);
+      color: #32304a;
+    }
+  }
+`;
+
+export const DetailsBarSkeletonBase = styled.div`
+  letter-spacing: 10px;
+  margin-right: 10px;
+  margin-left: 10px;
+  font-size: 8px;
+  width: 140px;
+  height: 10px;
+`;

src/components/Forms/BlueprintFormik.js

@@ -5,6 +5,8 @@ import {
   Checkbox,
   RadioGroup,
   Switch,
+  EditableText,
+  TextArea,
 } from '@blueprintjs-formik/core';
 import { Select, MultiSelect } from '@blueprintjs-formik/select';
 
@@ -17,4 +19,6 @@ export {
   Switch as FSwitch,
   Select as FSelect,
   MultiSelect as FMultiSelect,
+  EditableText as FEditableText,
+  TextArea as FTextArea,
 };

src/components/Forms/FormikObserver.js

@@ -1,7 +1,9 @@
-
+import { useFormikContext } from 'formik';
 import { useDeepCompareEffect } from 'hooks/utils';
 
-export function FormikObserver({ onChange, values }) {
+export function FormikObserver({ onChange }) {
+  const { values } = useFormikContext();
+
   useDeepCompareEffect(() => {
     onChange(values);
   }, [values]);

src/components/Paper/Paper.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export function Paper({ children, className }) {
+  return <PaperRoot className={className}>{children}</PaperRoot>;
+}
+
+const PaperRoot = styled.div`
+  border: 1px solid #d2dce2;
+  background: #fff;
+  padding: 10px;
+`;

src/components/Paper/index.js

@@ -0,0 +1 @@
+export * from './Paper';

src/components/Sidebar/Sidebar.js

@@ -28,7 +28,7 @@ export default function Sidebar({ dashboardContentRef }) {
  * @returns {React.JSX}
  */
 function SidebarFooterVersion() {
-  const { REACT_APP_VERSION: VERSION } = process.env;
+  const { VERSION } = process.env;
 
   if (!VERSION) {
     return null;

src/components/Tags/CurrencyTag.js

@@ -9,3 +9,13 @@ export const CurrencyTag = styled.span`
   line-height: 1;
   margin-left: 4px;
 `;
+
+export const BaseCurrencyRoot = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+  margin-left: 4px;
+  > span {
+    background: #5c7080;
+  }
+`;

src/components/Tags/FlagIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-export const FlagIcon = ({ countryCode, className }) => {
-  const source = `/icons/flags/${countryCode}.svg`;
+export const FlagIcon = ({ currencyCode, className }) => {
+  const source = `/icons/flags/${currencyCode}.svg`;
 
   return <img alt="flag" src={source} className={className} />;
 };

src/components/TotalLines/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 export const TotalLineBorderStyle = {
+  None: 'None',
   SingleDark: 'SingleDark',
   DoubleDark: 'DoubleDark',
 };
@@ -80,6 +81,11 @@ export const TotalLineRoot = styled.div`
       `
       border-bottom: 1px double #000;
     `}
+    ${(props) =>
+      props.borderStyle === TotalLineBorderStyle.None &&
+      `
+      border-bottom-color: transparent;
+    `}
     ${(props) =>
       props.textStyle === TotalLineTextStyle.Bold &&
       `

src/components/Vendors/VendorDrawerLink.js

@@ -1,23 +1,25 @@
 import React from 'react';
 import * as R from 'ramda';
 
-import { ButtonLink } from 'components';
+import { ButtonLink } from '../Button';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 function VendorDrawerLinkComponent({
   // #ownProps
   children,
   vendorId,
+  className,
 
   // #withDrawerActions
   openDrawer,
 }) {
   // Handle view customer drawer.
-  const handleVendorDrawer = () => {
+  const handleVendorDrawer = (event) => {
     openDrawer('vendor-details-drawer', { vendorId });
+    event.preventDefault();
   };
 
-  return <ButtonLink onClick={handleVendorDrawer}>{children}</ButtonLink>;
+  return <ButtonLink className={className} onClick={handleVendorDrawer}>{children}</ButtonLink>;
 }
 
 export const VendorDrawerLink = R.compose(withDrawerActions)(VendorDrawerLinkComponent);

src/components/Warehouses/WarehouseMultiSelect.js

@@ -40,8 +40,8 @@ const warehouseItemRenderer = (
       active={modifiers.active}
       disabled={modifiers.disabled}
       icon={isSelected ? 'tick' : 'blank'}
-      text={warehouse.name.toString()}
-      label={warehouse.code.toString()}
+      text={warehouse.name}
+      label={warehouse.code}
       key={warehouse.id}
       onClick={handleClick}
     />
@@ -52,7 +52,7 @@ const warehouseSelectProps = {
   itemPredicate: warehouseItemPredicate,
   itemRenderer: warehouseItemRenderer,
   valueAccessor: (item) => item.id,
-  labelAccessor: (item) => item.label,
+  labelAccessor: (item) => item.code,
   tagRenderer: (item) => item.name,
 };
 

src/components/Warehouses/WarehouseSelect.js

@@ -40,7 +40,7 @@ const warehouseItemRenderer = (
     <MenuItem
       active={modifiers.active}
       disabled={modifiers.disabled}
-      label={warehouse.name.toString()}
+      label={warehouse.code}
       key={warehouse.id}
       onClick={handleClick}
       text={text}

src/components/index.js

@@ -49,13 +49,12 @@ import DrawerHeaderContent from './Drawer/DrawerHeaderContent';
 import Postbox from './Postbox';
 import AccountsSuggestField from './AccountsSuggestField';
 import MaterialProgressBar from './MaterialProgressBar';
-import { MoneyFieldCell } from './DataTableCells';
 import AvaterCell from './AvaterCell';
 
 import { ItemsMultiSelect } from './Items';
 import MoreMenuItems from './MoreMenutItems';
 import CustomSelectList from './CustomSelectList';
-import BaseCurrency from './BaseCurrency';
+import { ExchangeRateDetailItem } from './DetailExchangeRate';
 
 export * from './Dialog';
 export * from './Menu';
@@ -102,6 +101,10 @@ export * from './ExchangeRate';
 export * from './Branches';
 export * from './Warehouses';
 export * from './Currencies';
+export * from './FormTopbar'
+export * from './Paper';
+export * from './Accounts'
+export * from './DataTableCells';
 
 const Hint = FieldHint;
 
@@ -164,10 +167,9 @@ export {
   Postbox,
   AccountsSuggestField,
   MaterialProgressBar,
-  MoneyFieldCell,
   ItemsMultiSelect,
   AvaterCell,
-  BaseCurrency,
   MoreMenuItems,
   CustomSelectList,
+  ExchangeRateDetailItem,
 };

src/config/financialReportsMenu.js

@@ -70,6 +70,20 @@ export const financialReportMenus = [
         subject: AbilitySubject.Report,
         ability: ReportsAction.READ_AP_AGING_SUMMARY,
       },
+      {
+        title: <T id={'report.balance_sheet_comparison.title'} />,
+        desc: <T id={'report.balance_sheet_comparison.desc'} />,
+        link: 'financial-reports/balance-sheet?previousYear=true&previousYearAmountChange=true&previousYearPercentageChange=true',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_BALANCE_SHEET,
+      },
+      {
+        title: <T id={'report.profit_loss_sheet_comparison.title'} />,
+        desc: <T id={'report.profit_loss_sheet_comparison.desc'} />,
+        link: '/financial-reports/profit-loss-sheet?previousYear=true&previousYearAmountChange=true&previousYearPercentageChange=true',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_PROFIT_LOSS,
+      },
     ],
   },
 ];

src/config/interfaces.tsx

@@ -0,0 +1,45 @@
+export enum ISidebarMenuItemType {
+  Label = 'label',
+  Link = 'link',
+  Group = 'group',
+  Overlay = 'overlay'
+}
+
+export interface ISidebarMenuItemOverlay extends ISidebarMenuItemCommon {
+  type: ISidebarMenuItemType.Overlay;
+}
+
+export interface ISidebarMenuItemLink extends ISidebarMenuItemCommon {
+  text: string | JSX.Element;
+  href: string;
+  type: ISidebarMenuItemType.Link;
+  matchExact?: boolean;
+}
+
+export interface ISidebarMenuItemLabel extends ISidebarMenuItemCommon {
+  text?: string;
+  type: ISidebarMenuItemType.Label;
+}
+
+export interface ISidebarMenuItemGroup extends ISidebarMenuItemCommon {
+  type: ISidebarMenuItemType.Group;
+}
+
+export interface ISidebarMenuItemPermission {
+  subject: string;
+  ability: string;
+}
+
+export interface ISidebarMenuItemCommon {
+  ability?: ISidebarMenuItemPermission | ISidebarMenuItemPermission[];
+  feature?: string;
+  disabled?: boolean;
+  children?: ISidebarMenuItem[];
+  onlySubscriptionExpired?: boolean;
+}
+
+export type ISidebarMenuItem =
+  | ISidebarMenuItemLink
+  | ISidebarMenuItemLabel
+  | ISidebarMenuItemGroup
+  | ISidebarMenuItemOverlay;

src/config/sidebarMenu.js

@@ -641,14 +641,14 @@ 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={'unrealized_gain_or_loss.label'} />,
-        href: '/financial-reports/unrealized-gain-loss',
-      },
+      // {
+      //   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/Accounting/MakeJournal/MakeJournalEntries.schema.js

@@ -13,13 +13,13 @@ const Schema = Yup.object().shape({
     .min(1)
     .max(DATATYPES_LENGTH.STRING)
     .label(intl.get('journal_type')),
-  date: Yup.date()
-    .required()
-    .label(intl.get('date')),
+  date: Yup.date().required().label(intl.get('date')),
   currency_code: Yup.string().max(3),
   publish: Yup.boolean(),
+  branch_id: Yup.string(),
   reference: Yup.string().nullable().min(1).max(DATATYPES_LENGTH.STRING),
   description: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
+  exchange_rate: Yup.number(),
   entries: Yup.array().of(
     Yup.object().shape({
       credit: Yup.number().nullable(),

src/containers/Accounting/MakeJournal/MakeJournalEntriesField.js

@@ -10,7 +10,7 @@ import { useMakeJournalFormContext } from './MakeJournalProvider';
  * Make journal entries field.
  */
 export default function MakeJournalEntriesField() {
-  const { accounts, contacts } = useMakeJournalFormContext();
+  const { accounts, contacts ,branches } = useMakeJournalFormContext();
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
@@ -18,6 +18,7 @@ export default function MakeJournalEntriesField() {
         name={'entries'}
         contacts={contacts}
         accounts={accounts}
+        branches={branches}
         shouldUpdate={entriesFieldShouldUpdate}
       >
         {({

src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js

@@ -17,6 +17,7 @@ import MakeJournalFormFloatingActions from './MakeJournalFormFloatingActions';
 import MakeJournalEntriesField from './MakeJournalEntriesField';
 import MakeJournalFormFooter from './MakeJournalFormFooter';
 import MakeJournalFormDialogs from './MakeJournalFormDialogs';
+import MakeJournalFormTopBar from './MakeJournalFormTopBar';
 
 import withSettings from 'containers/Settings/withSettings';
 import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
@@ -58,6 +59,7 @@ function MakeJournalEntriesForm({
     journalNumberPrefix,
     journalNextNumber,
   );
+
   // Form initial values.
   const initialValues = useMemo(
     () => ({
@@ -68,12 +70,12 @@ function MakeJournalEntriesForm({
         : {
             ...defaultManualJournal,
             ...(journalAutoIncrement && {
-              journal_number: defaultTo(journalNumber, ''),
+              journal_number: journalNumber,
             }),
             currency_code: base_currency,
           }),
     }),
-    [manualJournal, base_currency, journalNumber],
+    [manualJournal, base_currency, journalNumber, journalAutoIncrement],
   );
 
   // Handle the form submiting.
@@ -107,7 +109,7 @@ function MakeJournalEntriesForm({
       return;
     }
     const form = {
-      ...omit(values, ['journal_number', 'journal_number_manually']),
+      ...omit(values, ['journal_number_manually']),
       ...(values.journal_number_manually && {
         journal_number: values.journal_number,
       }),
@@ -169,6 +171,7 @@ function MakeJournalEntriesForm({
         onSubmit={handleSubmit}
       >
         <Form>
+          <MakeJournalFormTopBar />
           <MakeJournalEntriesHeader />
           <MakeJournalEntriesField />
           <MakeJournalFormFooter />
@@ -185,7 +188,7 @@ function MakeJournalEntriesForm({
 export default compose(
   withMediaActions,
   withSettings(({ manualJournalsSettings }) => ({
-    journalNextNumber: parseInt(manualJournalsSettings?.nextNumber, 10),
+    journalNextNumber: manualJournalsSettings?.nextNumber,
     journalNumberPrefix: manualJournalsSettings?.numberPrefix,
     journalAutoIncrement: manualJournalsSettings?.autoIncrement,
   })),

src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.js

@@ -28,6 +28,7 @@ import {
 } from 'components';
 import withSettings from 'containers/Settings/withSettings';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
+import { JournalExchangeRateInputField } from './components';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import {
   currenciesFieldShouldUpdate,
@@ -52,14 +53,14 @@ function MakeJournalEntriesHeader({
 
   // Handle journal number change.
   const handleJournalNumberChange = () => {
-    openDialog('journal-number-form', {});
+    openDialog('journal-number-form');
   };
 
   // Handle journal number blur.
   const handleJournalNoBlur = (form, field) => (event) => {
     const newValue = event.target.value;
 
-    if (field.value !== newValue) {
+    if (field.value !== newValue && journalAutoIncrement) {
       openDialog('journal-number-form', {
         initialFormValues: {
           manualTransactionNo: newValue,
@@ -201,13 +202,19 @@ function MakeJournalEntriesHeader({
               selectedCurrencyCode={value}
               onCurrencySelected={(currencyItem) => {
                 form.setFieldValue('currency_code', currencyItem.currency_code);
+                form.setFieldValue('exchange_rate', '');
               }}
               defaultSelectText={value}
-              disabled={true}
             />
           </FormGroup>
         )}
       </FastField>
+
+      {/* ----------- Exchange rate ----------- */}
+      <JournalExchangeRateInputField
+        name={'exchange_rate'}
+        formGroupProps={{ label: ' ', inline: true }}
+      />
     </div>
   );
 }

src/containers/Accounting/MakeJournal/MakeJournalEntriesPage.js

@@ -11,7 +11,7 @@ import { MakeJournalProvider } from './MakeJournalProvider';
  */
 export default function MakeJournalEntriesPage() {
   const { id: journalId } = useParams();
-  
+
   return (
     <MakeJournalProvider journalId={journalId}>
       <MakeJournalEntriesForm />

src/containers/Accounting/MakeJournal/MakeJournalEntriesTable.js

@@ -21,15 +21,16 @@ export default function MakeJournalEntriesTable({
   entries,
   defaultEntry,
   error,
-  initialLinesNumber = 4,
-  minLinesNumber = 4,
+  initialLinesNumber = 1,
+  minLinesNumber = 1,
   currencyCode,
 }) {
-  const { accounts, contacts } = useMakeJournalFormContext();
+  const { accounts, contacts, branches } = useMakeJournalFormContext();
 
   // Memorized data table columns.
   const columns = useJournalTableEntriesColumns();
 
+
   // Handles update datatable data.
   const handleUpdateData = (rowIndex, columnId, value) => {
     const newRows = compose(
@@ -62,13 +63,13 @@ export default function MakeJournalEntriesTable({
       data={entries}
       sticky={true}
       totalRow={true}
-      footer={true}
       payload={{
         accounts,
         errors: error,
         updateData: handleUpdateData,
         removeRow: handleRemoveRow,
         contacts,
+        branches,
         autoFocus: ['account_id', 0],
         currencyCode,
       }}

src/containers/Accounting/MakeJournal/MakeJournalFormFooter.js

@@ -1,44 +1,29 @@
 import React from 'react';
-import { FastField } from 'formik';
 import classNames from 'classnames';
+import styled from 'styled-components';
+
 import { CLASSES } from 'common/classes';
-import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import { Postbox, ErrorMessage, Row, Col } from 'components';
-import Dragzone from 'components/Dragzone';
-import { inputIntent } from 'utils';
+import { Row, Col, Paper } from 'components';
+import { MakeJournalFormFooterLeft } from './MakeJournalFormFooterLeft';
+import { MakeJournalFormFooterRight } from './MakeJournalFormFooterRight';
 
 export default function MakeJournalFormFooter() {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
-      <Postbox title={<T id={'journal_details'} />} defaultOpen={false}>
+      <MakeJournalFooterPaper>
         <Row>
           <Col md={8}>
-            <FastField name={'description'}>
-              {({ field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'description'} />}
-                  className={'form-group--description'}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name="description" />}
-                  fill={true}
-                >
-                  <TextArea fill={true} {...field} />
-                </FormGroup>
-              )}
-            </FastField>
+            <MakeJournalFormFooterLeft />
           </Col>
 
           <Col md={4}>
-            <Dragzone
-              initialFiles={[]}
-              // onDrop={handleDropFiles}
-              // onDeleteFile={handleDeleteFile}
-              hint={<T id={'attachments_maximum'} />}
-            />
+            <MakeJournalFormFooterRight />
           </Col>
         </Row>
-      </Postbox>
+      </MakeJournalFooterPaper>
     </div>
   );
 }
+const MakeJournalFooterPaper = styled(Paper)`
+  padding: 20px;
+`;

src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
+
+export function MakeJournalFormFooterLeft() {
+  return (
+    <React.Fragment>
+      {/* --------- Description --------- */}
+      <DescriptionFormGroup
+        label={<T id={'description'} />}
+        name={'description'}
+      >
+        <FEditableText
+          name={'description'}
+          placeholder={<T id={'make_jorunal.decscrption.placeholder'} />}
+        />
+      </DescriptionFormGroup>
+    </React.Fragment>
+  );
+}
+
+const DescriptionFormGroup = styled(FFormGroup)`
+  &.bp3-form-group {
+    .bp3-label {
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .bp3-form-content {
+      margin-left: 10px;
+    }
+  }
+`;

src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from 'components';
+import { useJournalTotals } from './utils';
+
+export function MakeJournalFormFooterRight() {
+  const { formattedSubtotal, formattedTotal } = useJournalTotals();
+
+  return (
+    <MakeJouranlTotalLines>
+      <TotalLine
+        title={<T id={'make_journal.label.subtotal'} />}
+        value={formattedSubtotal}
+        borderStyle={TotalLineBorderStyle.None}
+      />
+      <TotalLine
+        title={<T id={'make_journal.label.total'} />}
+        value={formattedTotal}
+        textStyle={TotalLineTextStyle.Bold}
+      />
+    </MakeJouranlTotalLines>
+  );
+}
+
+const MakeJouranlTotalLines = styled(TotalLines)`
+  width: 100%;
+  color: #555555;
+`;

src/containers/Accounting/MakeJournal/MakeJournalFormTopBar.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Button, Alignment, NavbarGroup, Classes } from '@blueprintjs/core';
+import styled from 'styled-components';
+import { useSetPrimaryBranchToForm } from './utils';
+import { useFeatureCan } from 'hooks/state';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
+import { useMakeJournalFormContext } from './MakeJournalProvider';
+import { Features } from 'common';
+
+/**
+ * Make journal form topbar.
+ * @returns
+ */
+export default function MakeJournalFormTopBar() {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
+  // Can't display the navigation bar if  branches feature is not enabled.
+  if (!featureCan(Features.Branches)) {
+    return null;
+  }
+
+  return (
+    <FormTopbar>
+      <NavbarGroup align={Alignment.LEFT}>
+        <FeatureCan feature={Features.Branches}>
+          <MakeJournalFormSelectBranch />
+        </FeatureCan>
+      </NavbarGroup>
+    </FormTopbar>
+  );
+}
+
+function MakeJournalFormSelectBranch() {
+  // Invoice form context.
+  const { branches, isBranchesLoading } = useMakeJournalFormContext();
+
+  return isBranchesLoading ? (
+    <DetailsBarSkeletonBase className={Classes.SKELETON} />
+  ) : (
+    <BranchSelect
+      name={'branch_id'}
+      branches={branches}
+      input={MakeJournalBranchSelectButton}
+      popoverProps={{ minimal: true }}
+    />
+  );
+}
+function MakeJournalBranchSelectButton({ label }) {
+  return (
+    <Button
+      text={intl.get('make_journal.branch_button.label', { label })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'branch-16'} iconSize={16} />}
+    />
+  );
+}

src/containers/Accounting/MakeJournal/MakeJournalProvider.js

@@ -1,4 +1,7 @@
 import React, { createContext, useState } from 'react';
+import { isEqual, isUndefined } from 'lodash';
+import { Features } from 'common';
+import { useFeatureCan } from 'hooks/state';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useAccounts,
@@ -8,7 +11,8 @@ import {
   useCreateJournal,
   useEditJournal,
   useSettings,
-  useSettingsManualJournals
+  useBranches,
+  useSettingsManualJournals,
 } from 'hooks/query';
 
 const MakeJournalFormContext = createContext();
@@ -16,15 +20,17 @@ const MakeJournalFormContext = createContext();
 /**
  * Make journal form provider.
  */
-function MakeJournalProvider({ journalId, ...props }) {
+function MakeJournalProvider({ journalId, query, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
   // Load the accounts list.
   const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
 
   // Load the customers list.
-  const {
-    data: contacts,
-    isLoading: isContactsLoading,
-  } = useAutoCompleteContacts();
+  const { data: contacts, isLoading: isContactsLoading } =
+    useAutoCompleteContacts();
 
   // Load the currencies list.
   const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
@@ -43,15 +49,27 @@ function MakeJournalProvider({ journalId, ...props }) {
   // Loading the journal settings.
   const { isLoading: isSettingsLoading } = useSettingsManualJournals();
 
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches(query, { enabled: isBranchFeatureCan });
+
   // Submit form payload.
   const [submitPayload, setSubmitPayload] = useState({});
 
+  // Determines whether the warehouse and branches are loading.
+  const isFeatureLoading = isBranchesLoading;
+
   const provider = {
     accounts,
     contacts,
     currencies,
     manualJournal,
 
+    branches,
+
     createJournalMutate,
     editJournalMutate,
 
@@ -59,12 +77,13 @@ function MakeJournalProvider({ journalId, ...props }) {
     isContactsLoading,
     isCurrenciesLoading,
     isJournalLoading,
+    isFeatureLoading,
     isSettingsLoading,
-
+    isBranchesSuccess,
     isNewMode: !journalId,
 
     submitPayload,
-    setSubmitPayload
+    setSubmitPayload,
   };
 
   return (
@@ -73,7 +92,7 @@ function MakeJournalProvider({ journalId, ...props }) {
         isJournalLoading ||
         isAccountsLoading ||
         isCurrenciesLoading ||
-        isContactsLoading || 
+        isContactsLoading ||
         isSettingsLoading
       }
       name={'make-journal-page'}

src/containers/Accounting/MakeJournal/components.js

@@ -1,15 +1,28 @@
 import React from 'react';
-import { Intent, Position, Button, Tooltip } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import { Icon, Money, Hint } from 'components';
+import { Menu, MenuItem, Position, Button } from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
+import { useFormikContext } from 'formik';
 import intl from 'react-intl-universal';
+
+import {
+  ExchangeRateInputGroup,
+  Icon,
+  Hint,
+  FormattedMessage as T,
+} from 'components';
 import {
   AccountsListFieldCell,
   MoneyFieldCell,
   InputGroupCell,
   ContactsListFieldCell,
+  BranchesListFieldCell,
 } from 'components/DataTableCells';
-import { safeSumBy } from 'utils';
+
+import { CellType, Features, Align } from 'common';
+
+import { useFeatureCan } from 'hooks/state';
+import { useCurrentOrganization } from 'hooks/state';
+import { useJournalIsForeign } from './utils';
 
 /**
  * Contact header cell.
@@ -40,42 +53,6 @@ export function DebitHeaderCell({ payload: { currencyCode } }) {
   return intl.get('debit_currency', { currency: currencyCode });
 }
 
-/**
- * Account footer cell.
- */
-function AccountFooterCell({ payload: { currencyCode } }) {
-  return (
-    <span>
-      {intl.get('total_currency', { currency: currencyCode })}
-    </span>
-  );
-}
-
-/**
- * Total credit table footer cell.
- */
-function TotalCreditFooterCell({ payload: { currencyCode }, rows }) {
-  const credit = safeSumBy(rows, 'original.credit');
-
-  return (
-    <span>
-      <Money amount={credit} currency={currencyCode} />
-    </span>
-  );
-}
-
-/**
- * Total debit table footer cell.
- */
-function TotalDebitFooterCell({ payload: { currencyCode }, rows }) {
-  const debit = safeSumBy(rows, 'original.debit');
-
-  return (
-    <span>
-      <Money amount={debit} currency={currencyCode} />
-    </span>
-  );
-}
 /**
  * Actions cell renderer.
  */
@@ -86,95 +63,123 @@ export const ActionsCellRenderer = ({
   data,
   payload,
 }) => {
-  const onClickRemoveRole = () => {
+  const handleClickRemoveRole = () => {
     payload.removeRow(index);
   };
-  return (
-    <Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
-      <Button
-        icon={<Icon icon="times-circle" iconSize={14} />}
-        iconSize={14}
-        className="ml2"
-        minimal={true}
-        intent={Intent.DANGER}
-        onClick={onClickRemoveRole}
+  const exampleMenu = (
+    <Menu>
+      <MenuItem
+        onClick={handleClickRemoveRole}
+        text={intl.get('make_journal.entries.remove_row')}
       />
-    </Tooltip>
+    </Menu>
+  );
+  return (
+    <Popover2 content={exampleMenu} placement="left-start">
+      <Button
+        icon={<Icon icon={'more-13'} iconSize={13} />}
+        iconSize={14}
+        className="m12"
+        minimal={true}
+      />
+    </Popover2>
   );
 };
+ActionsCellRenderer.cellType = CellType.Button;
 
 /**
  * Retrieve columns of make journal entries table.
  */
 export const useJournalTableEntriesColumns = () => {
+  const { featureCan } = useFeatureCan();
+
   return React.useMemo(
     () => [
-      {
-        Header: '#',
-        accessor: 'index',
-        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
-        className: 'index',
-        width: 40,
-        disableResizing: true,
-        disableSortBy: true,
-        sticky: 'left',
-      },
       {
         Header: intl.get('account'),
         id: 'account_id',
         accessor: 'account_id',
         Cell: AccountsListFieldCell,
-        Footer: AccountFooterCell,
-        className: 'account',
         disableSortBy: true,
         width: 160,
-        fieldProps: { allowCreate: true }
+        fieldProps: { allowCreate: true },
       },
       {
         Header: CreditHeaderCell,
         accessor: 'credit',
         Cell: MoneyFieldCell,
-        Footer: TotalCreditFooterCell,
-        className: 'credit',
         disableSortBy: true,
         width: 100,
+        align: Align.Right,
       },
       {
         Header: DebitHeaderCell,
         accessor: 'debit',
         Cell: MoneyFieldCell,
-        Footer: TotalDebitFooterCell,
-        className: 'debit',
         disableSortBy: true,
         width: 100,
+        align: Align.Right,
       },
       {
         Header: ContactHeaderCell,
         id: 'contact_id',
         accessor: 'contact_id',
         Cell: ContactsListFieldCell,
-        className: 'contact',
         disableSortBy: true,
         width: 120,
       },
+      ...(featureCan(Features.Branches)
+        ? [
+            {
+              Header: intl.get('branch'),
+              id: 'branch_id',
+              accessor: 'branch_id',
+              Cell: BranchesListFieldCell,
+              disableSortBy: true,
+              width: 120,
+            },
+          ]
+        : []),
       {
         Header: intl.get('note'),
         accessor: 'note',
         Cell: InputGroupCell,
         disableSortBy: true,
-        className: 'note',
         width: 200,
       },
       {
         Header: '',
         accessor: 'action',
         Cell: ActionsCellRenderer,
-        className: 'actions',
         disableSortBy: true,
         disableResizing: true,
         width: 45,
+        align: Align.Center,
       },
     ],
     [],
   );
 };
+
+/**
+ * Journal exchange rate input field.
+ * @returns {JSX.Element}
+ */
+export function JournalExchangeRateInputField({ ...props }) {
+  const currentOrganization = useCurrentOrganization();
+  const { values } = useFormikContext();
+
+  const isForeignJouranl = useJournalIsForeign();
+
+  // Can't continue if the customer is not foreign.
+  if (!isForeignJouranl) {
+    return null;
+  }
+  return (
+    <ExchangeRateInputGroup
+      fromCurrency={values.currency_code}
+      toCurrency={currentOrganization.base_currency}
+      {...props}
+    />
+  );
+}

src/containers/Accounting/MakeJournal/utils.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent } from '@blueprintjs/core';
-import { sumBy, setWith, toSafeInteger, get } from 'lodash';
+import { sumBy, setWith, toSafeInteger, get, first } from 'lodash';
 import moment from 'moment';
 import * as R from 'ramda';
 import {
@@ -9,11 +9,15 @@ import {
   repeatValue,
   transformToForm,
   defaultFastFieldShouldUpdate,
-  ensureEntriesHasEmptyLine
+  ensureEntriesHasEmptyLine,
+  formattedAmount,
+  safeSumBy,
 } from 'utils';
 import { AppToaster } from 'components';
 import intl from 'react-intl-universal';
 import { useFormikContext } from 'formik';
+import { useMakeJournalFormContext } from './MakeJournalProvider';
+import { useCurrentOrganization } from 'hooks/state';
 
 const ERROR = {
   JOURNAL_NUMBER_ALREADY_EXISTS: 'JOURNAL.NUMBER.ALREADY.EXISTS',
@@ -26,25 +30,30 @@ const ERROR = {
   ENTRIES_SHOULD_ASSIGN_WITH_CONTACT: 'ENTRIES_SHOULD_ASSIGN_WITH_CONTACT',
 };
 
-export const MIN_LINES_NUMBER = 4;
+export const MIN_LINES_NUMBER = 1;
+export const DEFAULT_LINES_NUMBER = 1;
 
 export const defaultEntry = {
   account_id: '',
   credit: '',
   debit: '',
   contact_id: '',
+  branch_id: '',
   note: '',
 };
 
 export const defaultManualJournal = {
   journal_number: '',
+  journal_number_manually: false,
   journal_type: 'Journal',
   date: moment(new Date()).format('YYYY-MM-DD'),
   description: '',
   reference: '',
   currency_code: '',
   publish: '',
-  entries: [...repeatValue(defaultEntry, 4)],
+  branch_id: '',
+  exchange_rate: 1,
+  entries: [...repeatValue(defaultEntry, DEFAULT_LINES_NUMBER)],
 };
 
 // Transform to edit form.
@@ -179,6 +188,7 @@ export const entriesFieldShouldUpdate = (newProps, oldProps) => {
   return (
     newProps.accounts !== oldProps.accounts ||
     newProps.contacts !== oldProps.contacts ||
+    newProps.branches !== oldProps.branches ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };
@@ -192,3 +202,63 @@ export const currenciesFieldShouldUpdate = (newProps, oldProps) => {
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useMakeJournalFormContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};
+
+/**
+ * Retreives the Journal totals.
+ */
+export const useJournalTotals = () => {
+  const {
+    values: { entries, currency_code: currencyCode },
+  } = useFormikContext();
+
+  // Retrieves the invoice entries total.
+  const totalCredit = safeSumBy(entries, 'credit');
+  const totalDebit = safeSumBy(entries, 'debit');
+
+  const total = Math.max(totalCredit, totalDebit);
+  // Retrieves the formatted total money.
+  const formattedTotal = React.useMemo(
+    () => formattedAmount(total, currencyCode),
+    [total, currencyCode],
+  );
+  // Retrieves the formatted subtotal.
+  const formattedSubtotal = React.useMemo(
+    () => formattedAmount(total, currencyCode, { money: false }),
+    [total, currencyCode],
+  );
+
+  return {
+    formattedTotal,
+    formattedSubtotal,
+  };
+};
+
+/**
+ * Detarmines whether the expenses has foreign .
+ * @returns {boolean}
+ */
+export const useJournalIsForeign = () => {
+  const { values } = useFormikContext();
+  const currentOrganization = useCurrentOrganization();
+
+  const isForeignJournal = React.useMemo(
+    () => values.currency_code !== currentOrganization.base_currency,
+    [values.currency_code, currentOrganization.base_currency],
+  );
+  return isForeignJournal;
+};

src/containers/Accounts/AccountsDataTable.js

@@ -15,6 +15,8 @@ import withSettings from '../Settings/withSettings';
 import { useAccountsChartContext } from './AccountsChartProvider';
 import { useMemorizedColumnsWidths } from '../../hooks';
 
+import { AccountDialogAction } from '../Dialogs/AccountDialog/utils';
+
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -58,7 +60,10 @@ function AccountsDataTable({
 
   // Handle edit account action.
   const handleEditAccount = (account) => {
-    openDialog('account-form', { action: 'edit', id: account.id });
+    openDialog('account-form', {
+      action: AccountDialogAction.Edit,
+      id: account.id,
+    });
   };
 
   // Handle view detail account.
@@ -69,7 +74,7 @@ function AccountsDataTable({
   // Handle new child button click.
   const handleNewChildAccount = (account) => {
     openDialog('account-form', {
-      action: 'new_child',
+      action: AccountDialogAction.NewChild,
       parentAccountId: account.id,
       accountType: account.account_type,
     });

src/containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert.js

@@ -57,9 +57,7 @@ function BillTransactionDeleteAlert({
       loading={isLoading}
     >
       <p>
-        <T
-          id={`Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?`}
-        />
+        <T id={`landed_cost.once_your_delete_this_located_landed_cost`} />
       </p>
     </Alert>
   );

src/containers/Alerts/Branches/BranchDeleteAlert.js

@@ -5,6 +5,7 @@ import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
 import { useDeleteBranch } from 'hooks/query';
+import { handleDeleteErrors } from '../../Preferences/Branches/utils';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -24,7 +25,6 @@ function BranchDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-
   const { mutateAsync: deleteBranch, isLoading } = useDeleteBranch();
 
   // Handle cancel delete alert.
@@ -46,7 +46,9 @@ function BranchDeleteAlert({
           response: {
             data: { errors },
           },
-        }) => {},
+        }) => {
+          handleDeleteErrors(errors);
+        },
       )
       .finally(() => {
         closeAlert(name);

src/containers/Alerts/Branches/BranchMarkPrimaryAlert.js

@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 
-import { useMarkPrimaryBranches } from 'hooks/query';
+import { useMarkBranchAsPrimary } from 'hooks/query';
 import { AppToaster } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -25,7 +25,7 @@ function BranchMarkPrimaryAlert({
   closeAlert,
 }) {
   const { mutateAsync: markPrimaryBranchMutate, isLoading } =
-    useMarkPrimaryBranches();
+  useMarkBranchAsPrimary();
 
   // Handle cancel mark primary alert.
   const handleCancelMarkPrimaryAlert = () => {
@@ -49,8 +49,8 @@ function BranchMarkPrimaryAlert({
 
   return (
     <Alert
-      cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'make_primary'} />}
+      // cancelButtonText={<T id={'cancel'} />}
+      // confirmButtonText={<T id={'make_primary'} />}
       intent={Intent.WARNING}
       isOpen={isOpen}
       onCancel={handleCancelMarkPrimaryAlert}

src/containers/Alerts/Warehouses/WarehouseDeleteAlert.js

@@ -4,6 +4,7 @@ import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { useDeleteWarehouse } from 'hooks/query';
+import { handleDeleteErrors } from '../../Preferences/Warehouses/utils';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -46,7 +47,9 @@ function WarehouseDeleteAlert({
           response: {
             data: { errors },
           },
-        }) => {},
+        }) => {
+          handleDeleteErrors(errors);
+        },
       )
       .finally(() => {
         closeAlert(name);

src/containers/Alerts/WarehousesTransfer/TransferredWarehouseTransferAlert.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useTransferredWarehouseTransfer } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * warehouse transfer transferred alert.
+ * @returns
+ */
+function TransferredWarehouseTransferAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { warehouseTransferId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: transferredWarehouseTransferMutate, isLoading } =
+    useTransferredWarehouseTransfer();
+
+  // handle cancel alert.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm alert.
+  const handleConfirmTransferred = () => {
+    transferredWarehouseTransferMutate(warehouseTransferId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('warehouse_transfer.alert.transferred_warehouse'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'deliver'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmTransferred}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'warehouse_transfer.alert.are_you_sure_you_want_to_deliver'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(TransferredWarehouseTransferAlert);

src/containers/Alerts/WarehousesTransfer/WarehouseMarkPrimaryAlert.js

@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 
-import { useMarkPrimaryWarehouse } from 'hooks/query';
+import { useMarkWarehouseAsPrimary } from 'hooks/query';
 import { AppToaster } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -24,14 +24,14 @@ function WarehouseMarkPrimaryAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { mutateAsync: markPrimaryWarehouseMutate, isLoading } =
-    useMarkPrimaryWarehouse();
+  // const { mutateAsync: markPrimaryWarehouseMutate, isLoading } =
+  // useMarkWarehouseAsPrimary();
 
   // Handle cancel mark primary alert.
   const handleCancelMarkPrimaryAlert = () => {
     closeAlert(name);
   };
-  console.log(warehouseId, 'XX');
+
   // andle cancel mark primary confirm.
   const handleConfirmMarkPrimaryWarehouse = () => {
     markPrimaryWarehouseMutate(warehouseId)

src/containers/Alerts/WarehousesTransfer/WarehouseTransferInitiateAlert.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useInitiateWarehouseTransfer } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * warehouse transfer initiate alert.
+ * @returns
+ */
+function WarehouseTransferInitiateAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { warehouseTransferId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: initialWarehouseTransferMutate, isLoading } =
+    useInitiateWarehouseTransfer();
+
+  // handle cancel alert.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm alert.
+  const handleConfirmInitiated = () => {
+    initialWarehouseTransferMutate(warehouseTransferId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('warehouse_transfer.alert.initiate_warehouse'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'warehouse_transfer.label.initiate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmInitiated}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'warehouse_transfer.alert.are_you_sure_you_want_to_initate'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(WarehouseTransferInitiateAlert);

src/containers/CashFlow/AccountTransactions/utils.js

@@ -79,6 +79,10 @@ export const handleCashFlowTransactionType = (reference, openDrawer) => {
       return openDrawer('refund-vendor-detail-drawer', {
         refundTransactionId: reference.reference_id,
       });
+    case 'InventoryAdjustment':
+      return openDrawer('inventory-adjustment-drawer', {
+        inventoryId: reference.reference_id,
+      });
 
     default:
       return openDrawer('cashflow-transaction-drawer', {

src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js

@@ -16,6 +16,9 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withCashflowAccountsTableActions from '../AccountTransactions/withCashflowAccountsTableActions';
 
+import { AccountDialogAction } from '../../Dialogs/AccountDialog/utils';
+import { ACCOUNT_TYPE } from '../../../common';
+
 import { compose } from 'utils';
 
 /**
@@ -37,15 +40,15 @@ function CashFlowAccountsActionsBar({
   // Handle add bank account.
   const handleAddBankAccount = () => {
     openDialog('account-form', {
-      action: 'NEW_ACCOUNT_DEFINED_TYPE',
-      accountType: 'cash',
+      action: AccountDialogAction.NewDefinedType,
+      accountType: ACCOUNT_TYPE.CASH,
     });
   };
   // Handle add cash account.
   const handleAddCashAccount = () => {
     openDialog('account-form', {
-      action: 'NEW_ACCOUNT_DEFINED_TYPE',
-      accountType: 'bank',
+      action: AccountDialogAction.NewDefinedType,
+      accountType: ACCOUNT_TYPE.BANK,
     });
   };
   // Handle inactive switch changing.

src/containers/Customers/CustomerForm/CustomerFinancialPanel.js

@@ -3,32 +3,33 @@ import classNames from 'classnames';
 import { FormGroup, Position, Classes, ControlGroup } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
+import { FFormGroup } from '../../../components/Forms';
 import moment from 'moment';
+import { Features } from 'common';
 import {
   MoneyInputGroup,
   InputPrependText,
   CurrencySelectList,
+  BranchSelect,
+  BranchSelectButton,
+  FeatureCan,
   Row,
   Col,
 } from 'components';
 import { FormattedMessage as T } from 'components';
 
 import { useCustomerFormContext } from './CustomerFormProvider';
-
-import {
-  momentFormatter,
-  tansformDateValue,
-  inputIntent,
-} from 'utils';
+import { useSetPrimaryBranchToForm } from './utils';
+import { momentFormatter, tansformDateValue, inputIntent } from 'utils';
 
 /**
  * Customer financial panel.
  */
 export default function CustomerFinancialPanel() {
-  const {
-    currencies,
-    customerId
-  } = useCustomerFormContext();
+  const { currencies, customerId, branches } = useCustomerFormContext();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
 
   return (
     <div className={'tab-panel--financial'}>
@@ -62,12 +63,7 @@ export default function CustomerFinancialPanel() {
 
           {/*------------ Opening balance  -----------*/}
           <FastField name={'opening_balance'}>
-            {({
-              form,
-              field,
-              field: { value },
-              meta: { error, touched },
-            }) => (
+            {({ form, field, field: { value }, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'opening_balance'} />}
                 className={classNames(
@@ -92,6 +88,23 @@ export default function CustomerFinancialPanel() {
             )}
           </FastField>
 
+          {/*------------ Opening branch  -----------*/}
+          <FeatureCan feature={Features.Branches}>
+            <FFormGroup
+              label={<T id={'customer.label.opening_branch'} />}
+              name={'opening_balance_branch_id'}
+              inline={true}
+              className={classNames('form-group--select-list', Classes.FILL)}
+            >
+              <BranchSelect
+                name={'opening_balance_branch_id'}
+                branches={branches}
+                input={BranchSelectButton}
+                popoverProps={{ minimal: true }}
+              />
+            </FFormGroup>
+          </FeatureCan>
+
           {/*------------ Currency  -----------*/}
           <FastField name={'currency_code'}>
             {({ form, field: { value }, meta: { error, touched } }) => (

src/containers/Customers/CustomerForm/CustomerForm.schema.js

@@ -42,6 +42,7 @@ const Schema = Yup.object().shape({
   opening_balance: Yup.number().nullable(),
   currency_code: Yup.string(),
   opening_balance_at: Yup.date(),
+  opening_balance_branch_id: Yup.string(),
 });
 
 export const CreateCustomerForm = Schema;

src/containers/Customers/CustomerForm/CustomerFormProvider.js

@@ -6,15 +6,21 @@ import {
   useCreateCustomer,
   useEditCustomer,
   useContact,
+  useBranches,
 } from 'hooks/query';
+import { Features } from 'common';
+import { useFeatureCan } from 'hooks/state';
 
 const CustomerFormContext = createContext();
 
-function CustomerFormProvider({ customerId, ...props }) {
+function CustomerFormProvider({ query, customerId, ...props }) {
   const { state } = useLocation();
-
   const contactId = state?.action;
 
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
   // Handle fetch customer details.
   const { data: customer, isLoading: isCustomerLoading } = useCustomer(
     customerId,
@@ -28,6 +34,13 @@ function CustomerFormProvider({ customerId, ...props }) {
   // Handle fetch Currencies data table
   const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
 
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches(query, { enabled: isBranchFeatureCan });
+
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = useState({});
 
@@ -38,18 +51,20 @@ function CustomerFormProvider({ customerId, ...props }) {
   const isNewMode = contactId || !customerId;
 
   const isFormLoading =
-    isCustomerLoading || isCurrenciesLoading || isContactLoading;
+    isCustomerLoading || isCurrenciesLoading || isBranchesLoading;
 
   const provider = {
     customerId,
     customer,
     currencies,
+    branches,
     contactDuplicate,
     submitPayload,
     isNewMode,
 
     isCustomerLoading,
     isCurrenciesLoading,
+    isBranchesSuccess,
     isFormLoading,
 
     setSubmitPayload,

src/containers/Customers/CustomerForm/utils.js

@@ -1,5 +1,9 @@
+import React from 'react';
 import moment from 'moment';
+import { useFormikContext } from 'formik';
+import { first } from 'lodash';
 
+import { useCustomerFormContext } from './CustomerFormProvider';
 
 export const defaultInitialValues = {
   customer_type: 'business',
@@ -35,4 +39,20 @@ export const defaultInitialValues = {
   opening_balance: '',
   currency_code: '',
   opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
+  opening_balance_branch_id: '',
+};
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useCustomerFormContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('opening_balance_branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
 };

src/containers/Dialogs/AccountDialog/AccountDialogContent.js

@@ -5,21 +5,9 @@ import AccountDialogForm from './AccountDialogForm';
 /**
  * Account dialog content.
  */
-export default function AccountDialogContent({
-  dialogName,
-  accountId,
-  action,
-  parentAccountId,
-  accountType,
-}) {
+export default function AccountDialogContent({ dialogName, payload }) {
   return (
-    <AccountDialogProvider
-      dialogName={dialogName}
-      accountId={accountId}
-      action={action}
-      parentAccountId={parentAccountId}
-      accountType={accountType}
-    >
+    <AccountDialogProvider dialogName={dialogName} payload={payload}>
       <AccountDialogForm />
     </AccountDialogProvider>
   );