feat: release v1.7.6-rc.2 version.

BIG-372: activate branches & warehouses reloading.

CHANGELOG.md

@@ -2,60 +2,95 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+## [1.7.6-rc.2] - 23-04-2022
+
+### Fixed
+
+- `BIG-374` Refactoring sidebar men with ability permissions and feature control on each item.
+
+## [v1.7.5-rc.2] - 20-04-2022
+
+### Fixed.
+
+- `BIG-378` Reports drawers columns css conflict.
+
+## [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.
+
+- `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.
+
+- `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.
+## 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.
+
+- 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.
+
+- `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.
+
+- 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.
@@ -66,10 +101,12 @@ All notable changes to Bigcapital server-side will be in this file.
 ## [1.5.8] - 13-01-2022
 
 ### Added
+
 - Add payment receive PDF print.
 - Add credit note PDF print.
 
 ### Fixed
+
 - fix: Payment receive initial loading state depends on request loading state instead fetching.
 - fix: Balance sheet report alert positioning.
 - fix: Separate customer and vendor inactivate and activate alerts.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "bigcapital-client",
-  "version": "1.5.8",
+  "version": "1.7.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1043,17 +1043,6 @@
         "to-fast-properties": "^2.0.0"
       }
     },
-    "@blueprintjs-formik/core": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.1.5.tgz",
-      "integrity": "sha512-H0aXiNMYC8RwhWR1F2O77dcRcRITijUX5we51G4AK2Vmp1yXCmNb0piN9ftsjL5vVIvIsMKWg+dfbwREmB5VWg==",
-      "requires": {
-        "lodash.get": "^4.4.2",
-        "lodash.keyby": "^4.6.0",
-        "styled-components": "^5.3.3",
-        "web-vitals": "^2.1.4"
-      }
-    },
     "@blueprintjs-formik/select": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@blueprintjs-formik/select/-/select-0.1.4.tgz",
@@ -1980,6 +1969,16 @@
       "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==",
       "dev": true
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/http-proxy": {
       "version": "1.17.3",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.3.tgz",
@@ -2240,6 +2239,25 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
       "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw=="
     },
+    "@types/styled-components": {
+      "version": "5.1.25",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.25.tgz",
+      "integrity": "sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.11",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+          "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
+          "dev": true
+        }
+      }
+    },
     "@types/testing-library__dom": {
       "version": "6.12.1",
       "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.12.1.tgz",

package.json

@@ -38,6 +38,7 @@
     "cross-env": "^7.0.2",
     "css-loader": "3.4.2",
     "deep-map-keys": "^2.0.1",
+    "deepdash": "^5.3.9",
     "dependency-graph": "^0.11.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
@@ -150,6 +151,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.8",
+    "@types/styled-components": "^5.1.25",
     "@types/yup": "^0.29.13",
     "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
     "compression-webpack-plugin": "^6.1.0",

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/Dashboard/Dashboard.js

@@ -3,7 +3,7 @@ import { Switch, Route } from 'react-router';
 
 import 'style/pages/Dashboard/Dashboard.scss';
 
-import Sidebar from 'components/Sidebar/Sidebar';
+import { Sidebar } from 'containers/Dashboard/Sidebar/Sidebar';
 import DashboardContent from 'components/Dashboard/DashboardContent';
 import DialogsContainer from 'components/DialogsContainer';
 import PreferencesPage from 'components/Preferences/PreferencesPage';

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

@@ -10,6 +10,7 @@ import CheckBoxFieldCell from './CheckBoxFieldCell';
 import SwitchFieldCell from './SwitchFieldCell';
 import TextAreaCell from './TextAreaCell';
 import BranchesListFieldCell from './BranchesListFieldCell';
+import { TextOverviewTooltipCell } from './TextOverviewTooltipCell';
 
 export {
   AccountsListFieldCell,
@@ -25,4 +26,5 @@ export {
   SwitchFieldCell,
   TextAreaCell,
   BranchesListFieldCell,
+  TextOverviewTooltipCell,
 };

src/components/FlexGrid/Flex.style.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { FlexProps } from './interfaces';
+
+export const FlexStyled = styled.div<FlexProps>`
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: ${({ align }) => align || 'center'};
+
+  &:after {
+    content: '';
+    max-width: ${({ col, gap = 1 }) =>
+      col && col < 12 ? `${(100 * col) / 12 - gap}%` : '100%'};
+    width: 100%;
+  }
+`;

src/components/FlexGrid/Flex.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { FlexProps } from './interfaces';
+import { FlexItem } from './FlexItem';
+import { FlexStyled } from './Flex.style';
+
+export function Flex({
+  children,
+  col = 12,
+  gap,
+  align,
+  className,
+  style,
+}: FlexProps) {
+  return (
+    <FlexStyled
+      col={col}
+      gap={gap}
+      align={align}
+      className={className}
+      style={style}
+    >
+      {children}
+      <FlexItem col={col} gap={gap} />
+    </FlexStyled>
+  );
+}

src/components/FlexGrid/FlexItem.style.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { ItemProps } from './interfaces';
+
+export const FlexItem = styled.div<ItemProps>`
+  width: 100%;
+  max-width: ${({ col, gap = 1 }) =>
+    col && col < 12 ? `${(100 * col) / 12 - gap}%` : '100%'};
+  ${({ marginBottom }) =>
+    marginBottom &&
+    `
+		margin-bottom: ${marginBottom}px;
+	`}
+  ${({ stretch }) =>
+    stretch &&
+    `
+    display: flex;
+    align-self: stretch;
+  `}
+`;

src/components/FlexGrid/FlexItem.tsx

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

src/components/FlexGrid/index.ts

@@ -0,0 +1,4 @@
+export * from './Flex.style';
+export * from './Flex';
+export * from './FlexItem.style';
+export * from './interfaces';

src/components/FlexGrid/interfaces.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, Component, StyleHTMLAttributes } from 'react';
+
+export type Range = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface ItemProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: number;
+  col: Range;
+  marginBottom?: number;
+  stretch?: boolean;
+  as?: string | Component;
+  className?: string;
+  style?: StyleHTMLAttributes<HTMLDivElement>;
+}
+
+export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: number;
+  align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+  col?: Range;
+  className?: string;
+  style?: StyleHTMLAttributes<HTMLDivElement>;
+  as?: string | Component;
+}

src/components/MenuItem.js

@@ -104,7 +104,7 @@ import {
 //     textClassName?: string;
 // }
 
-export default class MenuItem extends AbstractPureComponent2 {
+export class MenuItem extends AbstractPureComponent2 {
     static get defaultProps() {
       return {
         disabled: false,

src/components/Sidebar/SidebarMenu.js

@@ -1,123 +0,0 @@
-import React from 'react';
-import { Menu, MenuDivider } from '@blueprintjs/core';
-import { useHistory, useLocation } from 'react-router-dom';
-
-import { Choose } from 'components';
-import Icon from 'components/Icon';
-import MenuItem from 'components/MenuItem';
-import { MenuItemLabel } from 'components';
-import classNames from 'classnames';
-import SidebarOverlay from 'components/SidebarOverlay';
-import { compose } from 'redux';
-import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
-
-const DEFAULT_ITEM = {
-  text: '',
-  href: '',
-};
-
-function matchPath(pathname, path, matchExact) {
-  return matchExact ? pathname === path : pathname.indexOf(path) !== -1;
-}
-
-function SidebarMenuItemSpace({ space }) {
-  return <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />;
-}
-
-function SidebarMenu({ menu, isSubscriptionActive }) {
-  const history = useHistory();
-  const location = useLocation();
-
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [currentItem, setCurrentItem] = React.useState(null);
-
-  const menuItemsMapper = (list) => {
-    return list.map((item, index) => {
-      const hasChildren = Array.isArray(item.children);
-
-      const isActive =
-        (item.children
-          ? item.children.some((c) =>
-              matchPath(location.pathname, c.href, item.matchExact),
-            )
-          : item.href &&
-            matchPath(location.pathname, item.href, item.matchExact)) ||
-        currentItem === item;
-
-      const handleItemClick = () => {
-        if (item.href) {
-          history.push(item.href);
-        }
-        if (item.children && item.children.length > 0) {
-          setIsOpen(true);
-          setCurrentItem(item);
-        } else {
-          setIsOpen(false);
-        }
-      };
-
-      return (
-        <Choose>
-          <Choose.When condition={item.spacer}>
-            <SidebarMenuItemSpace space={item.spacer} />
-          </Choose.When>
-
-          <Choose.When condition={item.divider}>
-            <MenuDivider key={index} title={item.title} />
-          </Choose.When>
-
-          <Choose.When condition={item.label}>
-            <MenuItemLabel key={index} text={item.text} />
-          </Choose.When>
-
-          <Choose.Otherwise>
-            <MenuItem
-              key={index}
-              active={isActive}
-              icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
-              text={item.text}
-              disabled={item.disabled}
-              dropdownType={item.dropdownType || 'collapse'}
-              caretIconSize={16}
-              onClick={handleItemClick}
-              callapseActive={!!isActive}
-              itemClassName={classNames({
-                'is-active': isActive,
-                'has-icon': !hasChildren && item.icon,
-              })}
-              hasSubmenu={hasChildren}
-            />
-          </Choose.Otherwise>
-        </Choose>
-      );
-    });
-  };
-
-  const filterItems = menu.filter(
-    (item) => isSubscriptionActive || item.enableBilling,
-  );
-  const items = menuItemsMapper(filterItems);
-
-  const handleSidebarOverlayClose = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <div>
-      <Menu className="sidebar-menu">{items}</Menu>{' '}
-      <SidebarOverlay
-        isOpen={isOpen}
-        label={currentItem?.text || ''}
-        items={currentItem?.children || []}
-        onClose={handleSidebarOverlayClose}
-      />
-    </div>
-  );
-}
-
-export default compose(
-  withSubscriptions(
-    ({ isSubscriptionActive }) => ({ isSubscriptionActive }),
-    'main',
-  ),
-)(SidebarMenu);

src/components/Sidebar/utils.js

@@ -1,48 +0,0 @@
-import sidebarMenuList from 'config/sidebarMenu';
-import { isArray, isEmpty } from 'lodash';
-import { useAbilityContext } from 'hooks/utils';
-
-export function useGetSidebarMenu() {
-  const ability = useAbilityContext();
-
-  return sidebarMenuList
-    .map((item) => {
-      const children = isArray(item.children)
-        ? item.children.filter((childItem) => {
-            return isArray(childItem.permission)
-              ? childItem.permission.some((perm) =>
-                  ability.can(perm.ability, perm.subject),
-                )
-              : childItem?.permission?.ability && childItem?.permission?.subject
-              ? ability.can(
-                  childItem.permission.ability,
-                  childItem.permission.subject,
-                )
-              : true;
-          })
-        : [];
-
-      return {
-        ...item,
-        ...(isArray(item.children)
-          ? {
-              children,
-            }
-          : {}),
-      };
-    })
-    .filter((item) => {
-      return isArray(item.permission)
-        ? item.permission.some((per) =>
-            ability.can(per.ability, per.subject),
-          )
-        : item?.permission?.ability && item?.permission?.subject
-        ? ability.can(item.permission.ability, item.permission.subject)
-        : true;
-    })
-    .filter((item) =>
-      isEmpty(item.children) && !item.href && !item.label && !item.divider
-        ? false
-        : true,
-    );
-}

src/components/SidebarOverlay/index.tsx

@@ -1,146 +0,0 @@
-import React from 'react';
-import { Overlay } from '@blueprintjs/core';
-import { Link } from 'react-router-dom';
-import SidebarOverlayContainer from './SidebarOverlayContainer';
-interface ISidebarOverlayItem {
-  text: string;
-  href: string;
-  divider?: boolean;
-  label?: boolean;
-}
-
-interface ISidebarOverlayProps {
-  isOpen: boolean;
-  items: ISidebarOverlayItem[];
-  label: string;
-  onClose: Function;
-}
-
-interface ISidebarOverlayItemProps {
-  text: string;
-  href: string;
-  onLinkClick: Function;
-}
-
-interface ISidebarOverlayItemDivider {
-  divider: boolean;
-}
-/**
- * Sidebar overlay item.
- */
-function SidebarOverlayItem({
-  text,
-  href,
-  onLinkClick,
-}: ISidebarOverlayItemProps) {
-  const handleLinkClick = () => {
-    onLinkClick && onLinkClick();
-  };
-  return (
-    <div className="sidebar-overlay__item">
-      <Link onClick={handleLinkClick} to={href}>
-        {text}
-      </Link>
-    </div>
-  );
-}
-
-interface ISidebarOverlayItemLabel {
-  text: string;
-}
-
-function SidebarOverlayLabel({ text }: ISidebarOverlayItemLabel) {
-  return <div className="sidebar-overlay__label">{text}</div>;
-}
-
-function SidebarOverlayDivider() {
-  return <div className={'sidebar-overlay__divider'}></div>;
-}
-
-/**
- * Sidebar overlay component.
- */
-export default function SidebarOverlay({
-  label,
-  isOpen: controllerdIsOpen,
-  onClose,
-  items,
-}: ISidebarOverlayProps) {
-  const [isEverOpened, setEverOpened] = React.useState(false);
-  const [isOpen, setIsOpen] = React.useState(controllerdIsOpen);
-
-  React.useEffect(() => {
-    if (
-      typeof controllerdIsOpen !== 'undefined' &&
-      isOpen !== controllerdIsOpen
-    ) {
-      setIsOpen(controllerdIsOpen);
-    }
-  }, [controllerdIsOpen, setIsOpen, isOpen]);
-
-  React.useEffect(() => {
-    if (isOpen && !isEverOpened) {
-      setEverOpened(true);
-    }
-  }, [isEverOpened, isOpen]);
-
-  if (!isEverOpened) {
-    return '';
-  }
-
-  // Handle overlay close event.
-  const handleOverlayClose = () => {
-    setIsOpen(false);
-    onClose && onClose();
-  };
-  // Handle overlay open event.
-  const handleOverlayOpen = () => {
-    setIsOpen(true);
-  };
-  // Handle sidebar item link click.
-  const handleItemClick = () => {
-    setIsOpen(false);
-    onClose && onClose();
-  };
-
-  return (
-    <Overlay
-      isOpen={isOpen}
-      portalContainer={
-        (document.querySelector('.Pane.vertical.Pane2') as HTMLElement) ||
-        document.body
-      }
-      onClose={handleOverlayClose}
-      onOpening={handleOverlayOpen}
-      transitionDuration={100}
-      backdropClassName={'sidebar-overlay-backdrop'}
-    >
-      <div className="sidebar-overlay sidebar-overlay-transition">
-        <SidebarOverlayContainer>
-          <div className="sidebar-overlay__menu">
-            {label && (
-              <>
-                <SidebarOverlayLabel text={label} />
-                <SidebarOverlayDivider />
-              </>
-            )}
-
-            {items.map((item) =>
-              item.divider ? (
-                <SidebarOverlayDivider />
-              ) : item.label ? (
-                <SidebarOverlayLabel text={item.text} />
-              ) : (
-                <SidebarOverlayItem
-                  onLinkClick={handleItemClick}
-                  text={item.text}
-                  href={item.href}
-                />
-              ),
-            )}
-          </div>
-        </SidebarOverlayContainer>
-      </div>
-    </Overlay>
-  );
-}

src/components/index.js

@@ -49,7 +49,6 @@ 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';
@@ -102,9 +101,12 @@ export * from './ExchangeRate';
 export * from './Branches';
 export * from './Warehouses';
 export * from './Currencies';
-export * from './FormTopbar'
+export * from './FormTopbar';
 export * from './Paper';
-export * from './Accounts'
+export * from './Accounts';
+export * from './DataTableCells';
+export * from './FlexGrid';
+export * from './MenuItem';
 
 const Hint = FieldHint;
 
@@ -167,7 +169,6 @@ export {
   Postbox,
   AccountsSuggestField,
   MaterialProgressBar,
-  MoneyFieldCell,
   ItemsMultiSelect,
   AvaterCell,
   MoreMenuItems,

src/containers/Dashboard/Sidebar/Sidebar.js

@@ -1,14 +1,19 @@
 import React from 'react';
 
-import SidebarContainer from 'components/Sidebar/SidebarContainer';
-import SidebarHead from 'components/Sidebar/SidebarHead';
-import SidebarMenu from 'components/Sidebar/SidebarMenu';
-import { useGetSidebarMenu } from './utils';
+import { SidebarContainer } from './SidebarContainer';
+import { SidebarHead } from './SidebarHead';
+import { SidebarMenu } from './SidebarMenu';
+import { useMainSidebarMenu } from './hooks';
+import { SidebarOverlayBinded } from '../SidebarOverlay';
 
 import 'style/containers/Dashboard/Sidebar.scss';
 
-export default function Sidebar({ dashboardContentRef }) {
-  const menu = useGetSidebarMenu();
+/**
+ * Dashboard sidebar.
+ * @returns {JSX.Element}
+ */
+export function Sidebar() {
+  const menu = useMainSidebarMenu();
 
   return (
     <SidebarContainer>
@@ -17,14 +22,14 @@ export default function Sidebar({ dashboardContentRef }) {
       <div className="sidebar__menu">
         <SidebarMenu menu={menu} />
       </div>
-
+      <SidebarOverlayBinded />
       <SidebarFooterVersion />
     </SidebarContainer>
   );
 }
 
 /**
- * Sidebar footer version. 
+ * Sidebar footer version.
  * @returns {React.JSX}
  */
 function SidebarFooterVersion() {

src/containers/Dashboard/Sidebar/SidebarContainer.js

@@ -1,19 +1,21 @@
 import React, { useEffect } from 'react';
 import { Scrollbar } from 'react-scrollbars-custom';
 import classNames from 'classnames';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
 import withDashboard from 'containers/Dashboard/withDashboard';
+import withSubscriptions from 'containers/Subscriptions/withSubscriptions';
 
+import { useObserveSidebarExpendedBodyclass } from './hooks';
 import { compose } from 'utils';
-import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
 
-function SidebarContainer({
+/**
+ * Sidebar container/
+ * @returns {JSX.Element}
+ */
+function SidebarContainerJSX({
   // #ownProps
   children,
 
-  // #withDashboardActions
-  toggleSidebarExpend,
-
   // #withDashboard
   sidebarExpended,
 
@@ -22,9 +24,10 @@ function SidebarContainer({
 }) {
   const sidebarScrollerRef = React.useRef();
 
-  useEffect(() => {
-    document.body.classList.toggle('has-mini-sidebar', !sidebarExpended);
+  // Toggles classname to body once sidebar expend/shrink.
+  useObserveSidebarExpendedBodyclass(sidebarExpended);
 
+  useEffect(() => {
     if (!sidebarExpended && sidebarScrollerRef.current) {
       sidebarScrollerRef.current.scrollTo({
         top: 0,
@@ -39,9 +42,9 @@ function SidebarContainer({
     }
   };
 
-  const scrollerElementRef = (ref) => {
+  const scrollerElementRef = React.useCallback((ref) => {
     sidebarScrollerRef.current = ref;
-  };
+  }, []);
 
   return (
     <div
@@ -64,8 +67,7 @@ function SidebarContainer({
   );
 }
 
-export default compose(
-  withDashboardActions,
+export const SidebarContainer = compose(
   withDashboard(({ sidebarExpended }) => ({
     sidebarExpended,
   })),
@@ -73,4 +75,4 @@ export default compose(
     ({ isSubscriptionActive }) => ({ isSubscriptionActive }),
     'main',
   ),
-)(SidebarContainer);
+)(SidebarContainerJSX);

src/containers/Dashboard/Sidebar/SidebarHead.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Button, Popover, Menu, Position } from '@blueprintjs/core';
-import Icon from 'components/Icon';
+
+import { Icon } from 'components';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { useAuthenticatedAccount } from 'hooks/query';
 import { compose, firstLettersArgs } from 'utils';
-import withCurrentOrganization from '../../containers/Organization/withCurrentOrganization';
-import { useAuthenticatedAccount } from '../../hooks/query';
 
 // Popover modifiers.
 const POPOVER_MODIFIERS = {
@@ -13,7 +15,7 @@ const POPOVER_MODIFIERS = {
 /**
  * Sideabr head.
  */
-function SidebarHead({
+function SidebarHeadJSX({
   // #withCurrentOrganization
   organization,
 }) {
@@ -61,6 +63,6 @@ function SidebarHead({
   );
 }
 
-export default compose(
+export const SidebarHead = compose(
   withCurrentOrganization(({ organization }) => ({ organization })),
-)(SidebarHead);
+)(SidebarHeadJSX);

src/containers/Dashboard/Sidebar/SidebarMenu.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Menu } from '@blueprintjs/core';
+import * as R from 'ramda';
+
+import { MenuItem, MenuItemLabel } from 'components';
+import { ISidebarMenuItemType } from 'containers/Dashboard/Sidebar/interfaces';
+import { useIsSidebarMenuItemActive } from './hooks';
+
+import withSubscriptions from 'containers/Subscriptions/withSubscriptions';
+
+/**
+ * Sidebar menu item.
+ * @returns {JSX.Element}
+ */
+function SidebarMenuItem({ item, index }) {
+  // Detarmine whether the item is active.
+  const isActive = useIsSidebarMenuItemActive(item);
+
+  return (
+    <MenuItem
+      key={index}
+      text={item.text}
+      disabled={item.disabled}
+      dropdownType={item.dropdownType || 'collapse'}
+      caretIconSize={16}
+      onClick={item.onClick}
+      active={isActive}
+      hasSubmenu={item.hasChildren}
+    />
+  );
+}
+
+SidebarMenuItem.ItemTypes = [
+  ISidebarMenuItemType.Link,
+  ISidebarMenuItemType.Overlay,
+  ISidebarMenuItemType.Dialog,
+];
+
+/**
+ * Detarmines which sidebar menu item type should display.
+ * @returns {JSX.Element}
+ */
+function SidebarMenuItemComposer({ item, index }) {
+  // Link item type.
+  return SidebarMenuItem.ItemTypes.indexOf(item.type) !== -1 ? (
+    <SidebarMenuItem item={item} index={index} />
+  ) : // Group item type.
+  item.type === ISidebarMenuItemType.Group ? (
+    <MenuItemLabel text={item.text} />
+  ) : null;
+}
+
+/**
+ * Sidebar menu.
+ * @returns {JSX.Element}
+ */
+function SidebarMenuJSX({ menu }) {
+  return (
+    <div>
+      <Menu className="sidebar-menu">
+        {menu.map((item, index) => (
+          <SidebarMenuItemComposer index={index} item={item} />
+        ))}
+      </Menu>
+    </div>
+  );
+}
+
+export const SidebarMenu = R.compose(
+  withSubscriptions(
+    ({ isSubscriptionActive }) => ({ isSubscriptionActive }),
+    'main',
+  ),
+)(SidebarMenuJSX);

src/containers/Dashboard/Sidebar/hooks.js

@@ -0,0 +1,358 @@
+import _, { isEmpty, includes } from 'lodash';
+import React from 'react';
+import * as R from 'ramda';
+import { useHistory } from 'react-router-dom';
+
+import { useAbilityContext } from 'hooks';
+import { useSidebarSubmenu, useFeatureCan } from 'hooks/state';
+import { SidebarMenu } from 'config/sidebarMenu';
+import {
+  ISidebarMenuItemType,
+  ISidebarSubscriptionAbility,
+} from './interfaces';
+import {
+  useSidebarSubmnuActions,
+  useDialogActions,
+  useSubscription,
+} from 'hooks/state';
+import { filterValuesDeep, deepdash } from 'utils';
+
+const deepDashConfig = {
+  childrenPath: 'children',
+  pathFormat: 'array',
+};
+const ingoreTypesEmpty = [
+  ISidebarMenuItemType.Group,
+  ISidebarMenuItemType.Overlay,
+];
+
+/**
+ * Removes the all overlay items from the menu to the main-sidebar.
+ * @param   {ISidebarMenuItem[]} menu
+ * @returns {ISidebarMenuItem[]}
+ */
+function removeSidebarOverlayChildren(menu) {
+  return deepdash.mapValuesDeep(
+    menu,
+    (item, key, parent, context) => {
+      if (item.type === ISidebarMenuItemType.Overlay) {
+        context.skipChildren(true);
+        return _.omit(item, ['children']);
+      }
+      return item;
+    },
+    deepDashConfig,
+  );
+}
+
+/**
+ * Retrives the main sidebar pre-menu.
+ * @returns {ISidebarMenuItem[]}
+ */
+export function getMainSidebarMenu() {
+  return R.compose(removeSidebarOverlayChildren)(SidebarMenu);
+}
+
+/**
+ * Predicates whether the sidebar item has feature ability.
+ */
+function useFilterSidebarItemFeaturePredicater() {
+  const { featureCan } = useFeatureCan();
+
+  return {
+    // Returns false if the item has `feature` prop and that feature has no ability.
+    predicate: (item) => {
+      if (item.feature && !featureCan(item.feature)) {
+        return false;
+      }
+      return true;
+    },
+  };
+}
+
+/**
+ * Predicates whether the sidebar item has permissio ability.
+ */
+function useFilterSidebarItemAbilityPredicater() {
+  const ability = useAbilityContext();
+
+  return {
+    // Retruns false if the item has `permission` prop and that permission has no ability.
+    predicate: (item) => {
+      if (
+        item.permission &&
+        !ability.can(item.permission.ability, item.permission.subject)
+      ) {
+        return false;
+      }
+      return true;
+    },
+  };
+}
+
+/**
+ * Filters the sidebar item based on the subscription state.
+ */
+function useFilterSidebarItemSubscriptionPredicater() {
+  const { isSubscriptionActive, isSubscriptionInactive } = useSubscription();
+
+  return {
+    predicate: (item) => {
+      const { subscription } = item;
+
+      if (subscription) {
+        const isActive = includes(subscription, [
+          ISidebarSubscriptionAbility.Active,
+        ])
+          ? isSubscriptionActive
+          : true;
+
+        const isInactive = includes(subscription, [
+          ISidebarSubscriptionAbility.Inactive,
+        ])
+          ? isSubscriptionInactive
+          : true;
+
+        return isActive && isInactive;
+      }
+      return true;
+    },
+  };
+}
+
+/**
+ * Filters sidebar menu items based on ability of the item permission.
+ * @param   {} menu
+ * @returns {}
+ */
+function useFilterSidebarMenuAbility(menu) {
+  const { predicate: predFeature } = useFilterSidebarItemFeaturePredicater();
+  const { predicate: predAbility } = useFilterSidebarItemAbilityPredicater();
+  const { predicate: predSubscription } =
+    useFilterSidebarItemSubscriptionPredicater();
+
+  return deepdash.filterDeep(
+    menu,
+    (item) => {
+      return predFeature(item) && predAbility(item) && predSubscription(item);
+    },
+    deepDashConfig,
+  );
+}
+
+/**
+ * Flats the sidebar menu groups.
+ * @param   {*} menu
+ * @returns {}
+ */
+function useFlatSidebarMenu(menu) {
+  return React.useMemo(() => {
+    return deepdash.mapDeep(menu, (item) => item, deepDashConfig);
+  }, [menu]);
+}
+
+/**
+ * Binds sidebar link item click action.
+ * @param   {ISidebarMenuItem} item
+ */
+function useBindSidebarItemLinkClick() {
+  const history = useHistory();
+  const { closeSidebarSubmenu } = useSidebarSubmnuActions();
+
+  // Handle sidebar item click.
+  const onClick = (item) => (event) => {
+    closeSidebarSubmenu();
+    history.push(item.href);
+  };
+  return {
+    bindOnClick: (item) => {
+      return {
+        ...item,
+        onClick: onClick(item),
+      };
+    },
+  };
+}
+
+/**
+ * Bind sidebar dialog item click action.
+ * @param   {ISidebarMenuItem} item
+ */
+function useBindSidebarItemDialogClick() {
+  const { closeSidebarSubmenu } = useSidebarSubmnuActions();
+  const { openDialog } = useDialogActions();
+
+  // Handle sidebar item click.
+  const onClick = (item) => (event) => {
+    closeSidebarSubmenu();
+    openDialog(item.dialogName, item.dialogPayload);
+  };
+  return {
+    bindOnClick: (item) => {
+      return {
+        ...item,
+        onClick: onClick(item),
+      };
+    },
+  };
+}
+
+/**
+ * Binds click action for the sidebar overlay item.
+ */
+function useBindSidebarItemOverlayClick() {
+  const { toggleSidebarSubmenu, closeSidebarSubmenu } =
+    useSidebarSubmnuActions();
+
+  // Handle sidebar item click.
+  const onClick = (item) => (event) => {
+    closeSidebarSubmenu();
+    toggleSidebarSubmenu({ submenuId: item.overlayId });
+  };
+  return {
+    bindOnClick: (item) => {
+      return {
+        ...item,
+        onClick: onClick(item),
+      };
+    },
+  };
+}
+
+/**
+ * Binds click action of the given sidebar menu for each item based on item type.
+ */
+function useBindSidebarItemClick(menu) {
+  const { bindOnClick: bindLinkClickEvt } = useBindSidebarItemLinkClick();
+  const { bindOnClick: bindOverlayClickEvt } = useBindSidebarItemOverlayClick();
+  const { bindOnClick: bindItemDialogEvt } = useBindSidebarItemDialogClick();
+
+  return React.useMemo(() => {
+    return deepdash.mapValuesDeep(
+      menu,
+      (item) => {
+        return R.compose(
+          R.when(
+            R.propSatisfies(R.equals(ISidebarMenuItemType.Link), 'type'),
+            bindLinkClickEvt,
+          ),
+          R.when(
+            R.propSatisfies(R.equals(ISidebarMenuItemType.Overlay), 'type'),
+            bindOverlayClickEvt,
+          ),
+          R.when(
+            R.propSatisfies(R.equals(ISidebarMenuItemType.Dialog), 'type'),
+            bindItemDialogEvt,
+          ),
+        )(item);
+      },
+      deepDashConfig,
+    );
+  }, [menu]);
+}
+
+/**
+ * Finds the given overlay submenu id from the menu graph.
+ * @param   {ISidebarMenuOverlayIds}
+ * @param   {ISidebarMenuItem[]} menu -
+ * @returns {ISidebarMenuItem[]}
+ */
+const findSubmenuBySubmenuId = R.curry((submenuId, menu) => {
+  const groupItem = deepdash.findDeep(
+    menu,
+    (item) => {
+      return (
+        item.type === ISidebarMenuItemType.Overlay &&
+        item.overlayId === submenuId
+      );
+    },
+    deepDashConfig,
+  );
+  return groupItem?.value?.children || [];
+});
+
+/**
+ * Retrieves the main sidebar post-menu.
+ * @returns {ISidebarMenuItem[]}
+ */
+export function useMainSidebarMenu() {
+  return R.compose(
+    useBindSidebarItemClick,
+    useFlatSidebarMenu,
+    removeSidebarOverlayChildren,
+    useAssocSidebarItemHasChildren,
+    filterSidebarItemHasNoChildren,
+    useFilterSidebarMenuAbility,
+  )(SidebarMenu);
+}
+
+/**
+ * Assoc `hasChildren` prop to sidebar menu items.
+ * @param   {ISidebarMenuItem[]} items
+ * @returns {ISidebarMenuItem[]}
+ */
+function useAssocSidebarItemHasChildren(items) {
+  return deepdash.mapValuesDeep(
+    items,
+    (item) => {
+      return {
+        ...item,
+        hasChildren: !isEmpty(item.children),
+      };
+    },
+    deepDashConfig,
+  );
+}
+
+/**
+ * Retrieves the sub-sidebar post-menu.
+ * @param   {ISidebarMenuOverlayIds} submenuId
+ * @returns {ISidebarMenuItem[]}
+ */
+export function useSubSidebarMenu(submenuId) {
+  if (!submenuId) return [];
+
+  return R.compose(
+    useBindSidebarItemClick,
+    useFlatSidebarMenu,
+    filterSidebarItemHasNoChildren,
+    useFilterSidebarMenuAbility,
+    findSubmenuBySubmenuId(submenuId),
+  )(SidebarMenu);
+}
+
+/**
+ * Observes the sidebar expending with body class.
+ * @param {boolean} sidebarExpended
+ */
+export function useObserveSidebarExpendedBodyclass(sidebarExpended) {
+  React.useEffect(() => {
+    document.body.classList.toggle('has-mini-sidebar', !sidebarExpended);
+  }, [sidebarExpended]);
+}
+
+/**
+ * Detamrines whether the given sidebar menu item is active.
+ * @returns {boolean}
+ */
+export function useIsSidebarMenuItemActive(item) {
+  const { submenuId } = useSidebarSubmenu();
+  return (
+    item.type === ISidebarMenuItemType.Overlay && submenuId === item.overlayId
+  );
+}
+
+/**
+ * Filter sidebar specific items types that have no types.
+ * @param   {ISidebarMenuItem[]} items -
+ * @returns {ISidebarMenuItem[]}
+ */
+export function filterSidebarItemHasNoChildren(items) {
+  return filterValuesDeep((item) => {
+    // If it was group item and has no children items so discard that item.
+    if (ingoreTypesEmpty.indexOf(item.type) !== -1 && isEmpty(item.children)) {
+      return false;
+    }
+    return true;
+  }, items);
+}

src/containers/Dashboard/Sidebar/interfaces.ts

@@ -0,0 +1,77 @@
+export enum ISidebarMenuItemType {
+  Label = 'label',
+  Link = 'link',
+  Group = 'group',
+  Overlay = 'overlay',
+  Dialog = 'dialog',
+  Drawer = 'drawer',
+}
+
+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 ISidebarMenuItemDialog extends ISidebarMenuItemCommon {
+  type: ISidebarMenuItemType.Dialog;
+  dialogName: string;
+  dialogPayload: any;
+}
+
+export interface ISidebarMenuItemDrawer extends ISidebarMenuItemCommon {
+  type: ISidebarMenuItemType.Drawer;
+  drawerName: string;
+  drawerPayload: any;
+}
+
+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
+  | ISidebarMenuItemDialog
+  | ISidebarMenuItemDrawer;
+
+export enum ISidebarMenuOverlayIds {
+  Items = 'Items',
+  Reports = 'Reports',
+  Sales = 'Sales',
+  Purchases = 'Purchases',
+  Financial = 'Financial',
+  Contacts = 'Contacts',
+  Cashflow = 'Cashflow',
+  Expenses = 'Expenses',
+}
+
+export enum ISidebarSubscriptionAbility {
+  Expired = 'SubscriptionExpired',
+  Active = 'SubscriptionActive',
+}

src/containers/Dashboard/Sidebar/withDashboardSidebar.js

@@ -0,0 +1,13 @@
+
+import { connect } from 'react-redux';
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      sidebarSubmenuOpen: state.dashboard.sidebarSubmenu.isOpen,
+      sidebarSubmenuId: state.dashboard.sidebarSubmenu.submenuId,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+}

src/containers/Dashboard/Sidebar/withDashboardSidebarActions.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import {
+  closeSidebarSubmenu,
+  openSidebarSubmenu,
+} from 'store/dashboard/dashboard.actions';
+
+const mapActionsToProps = (dispatch) => ({
+  // Opens the dashboard submenu sidebar.
+  openDashboardSidebarSubmenu: (submenuId) =>
+    dispatch(openSidebarSubmenu(submenuId)),
+
+  // Closes the dashboard submenu sidebar.
+  closeDashboardSidebarSubmenu: () => dispatch(closeSidebarSubmenu()),
+});
+
+export default connect(null, mapActionsToProps);

src/containers/Dashboard/SidebarOverlay/SidebarOverlay.tsx

@@ -0,0 +1,142 @@
+//@ts-nocheck
+import React from 'react';
+import { Overlay, OverlayProps } from '@blueprintjs/core';
+import { Link } from 'react-router-dom';
+import { SidebarOverlayContainer } from './SidebarOverlayContainer';
+import { ISidebarMenuItem, ISidebarMenuItemType } from '../Sidebar/interfaces';
+
+export interface ISidebarOverlayItem {
+  text: string;
+  href: string;
+  divider?: boolean;
+  label?: boolean;
+}
+
+export interface ISidebarOverlayProps {
+  items: ISidebarMenuItem[];
+}
+
+export interface ISidebarOverlayItemProps {
+  text: string | JSX.Element;
+  href?: string;
+  onClick?: any;
+}
+
+export interface ISidebarOverlayItemDivider {
+  divider: boolean;
+}
+
+/**
+ * Sidebar overlay item.
+ * @param   {ISidebarOverlayItemProps}
+ * @returns {JSX.Element}
+ */
+export function SidebarOverlayItemLink({
+  text,
+  href,
+  onClick,
+}: ISidebarOverlayItemProps) {
+  return (
+    <div className="sidebar-overlay__item">
+      <Link to={href} onClick={onClick}>
+        {text}
+      </Link>
+    </div>
+  );
+}
+
+export interface ISidebarOverlayItemLabel {
+  text: string;
+}
+
+/**
+ * Sidebar overlay label item.
+ * @param   {ISidebarOverlayItemLabel}
+ * @returns {JSX.Element}
+ */
+export function SidebarOverlayLabel({
+  text,
+}: ISidebarOverlayItemLabel): JSX.Element {
+  return <div className="sidebar-overlay__label">{text}</div>;
+}
+
+/**
+ * Sidebar overlay divider item.
+ * @returns {JSX.Element}
+ */
+export function SidebarOverlayDivider() {
+  return <div className={'sidebar-overlay__divider'}></div>;
+}
+
+interface SidebarOverlayItemProps {
+  item: ISidebarMenuItem;
+}
+
+/**
+ * Sidebar overlay item.
+ * @param   {SidebarOverlayItemProps} props -
+ * @returns {JSX.Element}
+ */
+function SidebarOverlayItem({ item }: SidebarOverlayItemProps) {
+  //
+  return item.type === ISidebarMenuItemType.Group ? (
+    <SidebarOverlayLabel text={item.text} />
+  ) : //
+  item.type === ISidebarMenuItemType.Link ||
+    item.type === ISidebarMenuItemType.Dialog ? (
+    <SidebarOverlayItemLink text={item.text} onClick={item.onClick} />
+  ) : null;
+}
+
+/**
+ *
+ */
+export interface ISidebarOverlayMenu {
+  items: ISidebarMenuItem[];
+}
+
+/**
+ * Sidebar overlay menu.
+ * @param   {ISidebarOverlayMenu}
+ * @returns {JSX.Element}
+ */
+function SidebarOverlayMenu({ items }: ISidebarOverlayMenu) {
+  return (
+    <div className="sidebar-overlay__menu">
+      {items.map((item) => (
+        <SidebarOverlayItem item={item} />
+      ))}
+    </div>
+  );
+}
+
+export interface SidebarOverlayProps extends OverlayProps {
+  items: ISidebarMenuItem[];
+}
+
+/**
+ * Sidebar overlay component.
+ * @param   {SidebarOverlayProps}
+ * @returns {JSX.Element}
+ */
+export function SidebarOverlay({ items, label, ...rest }: SidebarOverlayProps) {
+  return (
+    <Overlay
+      portalContainer={
+        (document.querySelector('.Pane.vertical.Pane2') as HTMLElement) ||
+        document.body
+      }
+      transitionDuration={100}
+      backdropClassName={'sidebar-overlay-backdrop'}
+      {...rest}
+    >
+      <div className="sidebar-overlay sidebar-overlay-transition">
+        <SidebarOverlayContainer>
+          {label && <SidebarOverlayLabel text={label} />}
+
+          <SidebarOverlayMenu items={items} />
+        </SidebarOverlayContainer>
+      </div>
+    </Overlay>
+  );
+}

src/containers/Dashboard/SidebarOverlay/SidebarOverlayBinded.tsx

@@ -0,0 +1,54 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import { SidebarOverlay } from './SidebarOverlay';
+import withDashboardSidebarActions from 'containers/Dashboard/Sidebar/withDashboardSidebarActions';
+import withDashboardSidebar from 'containers/Dashboard/Sidebar/withDashboardSidebar';
+
+import { useSubSidebarMenu } from '../Sidebar/hooks';
+
+/**
+ * Dashboard sidebar menu.
+ * @returns {JSX.Element}
+ */
+function SidebarOverlayBindedRoot({
+  // #withDashboardSidebar
+  sidebarSubmenuOpen,
+  sidebarSubmenuId,
+
+  // #withDashboardSidebarActions
+  closeDashboardSidebarSubmenu,
+}) {
+  const handleSidebarClosing = React.useCallback(() => {
+    closeDashboardSidebarSubmenu();
+  }, []);
+
+  return (
+    <SidebarOverlayBindedRouter
+      sidebarSubmenuId={sidebarSubmenuId}
+      isOpen={sidebarSubmenuOpen}
+      onClose={handleSidebarClosing}
+    />
+  );
+}
+
+/**
+ * Dashboard sidebar submenu router.
+ */
+function SidebarOverlayBindedRouter({ sidebarSubmenuId, ...rest }) {
+  const sidebarItems = useSubSidebarMenu(sidebarSubmenuId);
+
+  return <SidebarOverlay items={sidebarItems} {...rest} />;
+}
+
+/**
+ * Sidebar overlay binded with redux.
+ */
+export const SidebarOverlayBinded = R.compose(
+  withDashboardSidebar(({ sidebarSubmenuOpen, sidebarSubmenuId }) => ({
+    sidebarSubmenuOpen,
+    sidebarSubmenuId,
+  })),
+  withDashboardSidebarActions,
+)(SidebarOverlayBindedRoot);

src/containers/Dashboard/SidebarOverlay/SidebarOverlayContainer.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import { Scrollbar } from 'react-scrollbars-custom';
 
-interface ISidebarOverlayContainerProps {
-    children: JSX.Element | JSX.Element[],
+export interface ISidebarOverlayContainerProps {
+  children: JSX.Element | JSX.Element[];
 }
 
 /**
  * Sidebar overlay container.
  */
-export default function SidebarOverlayContainer({ children }: ISidebarOverlayContainerProps) {
+export function SidebarOverlayContainer({
+  children,
+}: ISidebarOverlayContainerProps) {
   return (
     <div className={'sidebar-overlay__scroll-wrapper'}>
       <Scrollbar noDefaultStyles={true}>

src/containers/Dashboard/SidebarOverlay/index.ts

@@ -0,0 +1,3 @@
+export * from './SidebarOverlay';
+export * from './SidebarOverlayContainer';
+export * from './SidebarOverlayBinded'

src/containers/Dialogs/BranchActivateDialog/BranchActivateFormProvider.js

@@ -9,7 +9,7 @@ const BranchActivateContext = React.createContext();
  * Branch activate form provider.
  */
 function BranchActivateFormProvider({ dialogName, ...props }) {
-  const { mutateAsync: activateBranches, isLoading } = useActivateBranches();
+  const { mutateAsync: activateBranches } = useActivateBranches();
 
   // State provider.
   const provider = {
@@ -18,7 +18,7 @@ function BranchActivateFormProvider({ dialogName, ...props }) {
   };
 
   return (
-    <DialogContent isLoading={isLoading}>
+    <DialogContent>
       <BranchActivateContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherDialogContent.js

@@ -36,7 +36,7 @@ function PaymentViaLicenseDialogContent({
     setSubmitting(true);
 
     const mutateValues = {
-      plan_slug: `${values.plan_slug}-${values.period}ly`,
+      plan_slug: `essentials-monthly`,
       license_code: values.license_code,
     };
     // Payment via voucher mutate.

src/containers/Dialogs/WarehouseActivateDialog/WarehouseActivateFormProvider.js

@@ -9,8 +9,7 @@ const WarehouseActivateContext = React.createContext();
  * warehouse activate form provider.
  */
 function WarehouseActivateFormProvider({ dialogName, ...props }) {
-  const { mutateAsync: activateWarehouses, isLoading } =
-    useActivateWarehouses();
+  const { mutateAsync: activateWarehouses } = useActivateWarehouses();
 
   // State provider.
   const provider = {
@@ -19,7 +18,7 @@ function WarehouseActivateFormProvider({ dialogName, ...props }) {
   };
 
   return (
-    <DialogContent isLoading={isLoading}>
+    <DialogContent>
       <WarehouseActivateContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Drawers/BillDrawer/utils.js

@@ -13,57 +13,81 @@ import {
 } from '@blueprintjs/core';
 import {
   FormatNumberCell,
+  TextOverviewTooltipCell,
   FormattedMessage as T,
   Choose,
   Icon,
 } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { useBillDrawerContext } from './BillDrawerProvider';
 
 /**
  * Retrieve bill readonly details entries table columns.
  */
-export const useBillReadonlyEntriesTableColumns = () =>
-  React.useMemo(
+export const useBillReadonlyEntriesTableColumns = () => {
+  const {
+    bill: { entries },
+  } = useBillDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('product_and_service'),
         accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
         width: 150,
         className: 'item',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
+        Cell: TextOverviewTooltipCell,
         className: 'description',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('rate'),
         accessor: 'rate',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};
 
 /**
  * Bill details status.

src/containers/Drawers/CreditNoteDetailDrawer/utils.js

@@ -10,56 +10,81 @@ import {
   Tag,
   Intent,
 } from '@blueprintjs/core';
+import { getColumnWidth } from 'utils';
 import {
   Icon,
   FormattedMessage as T,
+  TextOverviewTooltipCell,
   FormatNumberCell,
   Choose,
 } from '../../../components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 
-export const useCreditNoteReadOnlyEntriesColumns = () =>
-  React.useMemo(
+export const useCreditNoteReadOnlyEntriesColumns = () => {
+  // credit note details drawer context.
+  const {
+    creditNote: { entries },
+  } = useCreditNoteDetailDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('product_and_service'),
         accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
         width: 150,
         className: 'name',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
+        Cell: TextOverviewTooltipCell,
         className: 'description',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('rate'),
         accessor: 'rate',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};
 
 /**
  * Credit note more actions mneu.

src/containers/Drawers/EstimateDetailDrawer/utils.js

@@ -1,47 +1,74 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormatNumberCell } from '../../../components';
+import { FormatNumberCell, TextOverviewTooltipCell } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 /**
  * Retrieve table columns of estimate readonly entries details.
  */
-export const useEstimateReadonlyEntriesColumns = () =>
-  React.useMemo(() => [
-    {
-      Header: intl.get('product_and_service'),
-      accessor: 'item.name',
-      width: 150,
-      className: 'name',
-      disableSortBy: true,
-    },
-    {
-      Header: intl.get('description'),
-      accessor: 'description',
-      className: 'description',
-      disableSortBy: true,
-    },
-    {
-      Header: intl.get('quantity'),
-      accessor: 'quantity',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true,
-    },
-    {
-      Header: intl.get('rate'),
-      accessor: 'rate',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true,
-    },
-    {
-      Header: intl.get('amount'),
-      accessor: 'amount',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true,
-    },
-  ], []);
+export const useEstimateReadonlyEntriesColumns = () => {
+  // estimate details drawer context.
+  const {
+    estimate: { entries },
+  } = useEstimateDetailDrawerContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
+        width: 150,
+        className: 'name',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        Cell: TextOverviewTooltipCell,
+        className: 'description',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};

src/containers/Drawers/ExpenseDrawer/utils.js

@@ -1,33 +1,46 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import { FormatNumberCell } from '../../../components';
+import { FormatNumberCell, TextOverviewTooltipCell } from '../../../components';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+import { getColumnWidth } from 'utils';
 
 /**
  * Retrieve expense readonly details entries table columns.
  */
-export const useExpenseReadEntriesColumns = () =>
-  React.useMemo(
+export const useExpenseReadEntriesColumns = () => {
+  // Expense drawer context.
+  const {
+    expense: { categories },
+  } = useExpenseDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('expense_account'),
         accessor: 'expense_account.name',
+        Cell: TextOverviewTooltipCell,
         width: 110,
         disableSortBy: true,
+        textOverview: true,
         className: 'account',
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
-        width: 110,
-        disableSortBy: true,
+        Cell: TextOverviewTooltipCell,
         className: 'description',
+        disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(categories, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         disableSortBy: true,
         className: 'amount',
         align: 'right',
@@ -35,3 +48,4 @@ export const useExpenseReadEntriesColumns = () =>
     ],
     [],
   );
+};

src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js

@@ -1,37 +1,60 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import { getColumnWidth } from 'utils';
+import { TextOverviewTooltipCell } from 'components';
+import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
 
-export const useInventoryAdjustmentEntriesColumns = () =>
-  React.useMemo(
+export const useInventoryAdjustmentEntriesColumns = () => {
+  // Inventory adjustment details drawer context.
+  const {
+    inventoryAdjustment: { entries },
+  } = useInventoryAdjustmentDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('inventory_adjustment.column.product'),
         accessor: 'item.name',
-        width: 150,
+        Cell: TextOverviewTooltipCell,
+        width: 100,
         className: 'name',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
-        width: 100,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('cost'),
         accessor: 'cost',
-        width: 100,
+        width: getColumnWidth(entries, 'cost', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('value'),
         accessor: 'value',
-        width: 100,
+        width: getColumnWidth(entries, 'value', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};

src/containers/Drawers/InvoiceDetailDrawer/utils.js

@@ -11,12 +11,14 @@ import {
   Intent,
   Tag,
 } from '@blueprintjs/core';
+import { getColumnWidth } from 'utils';
 import {
   FormatNumberCell,
   Icon,
   FormattedMessage as T,
   Choose,
   Can,
+  TextOverviewTooltipCell,
 } from 'components';
 import {
   SaleInvoiceAction,
@@ -27,49 +29,69 @@ import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 /**
  * Retrieve invoice readonly details table columns.
  */
-export const useInvoiceReadonlyEntriesColumns = () =>
-  React.useMemo(
+export const useInvoiceReadonlyEntriesColumns = () => {
+  // Invoice details drawer context.
+  const {
+    invoice: { entries },
+  } = useInvoiceDetailDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('product_and_service'),
         accessor: 'item.name',
-        width: 150,
-        className: 'name',
+        Cell: TextOverviewTooltipCell,
         disableSortBy: true,
+        textOverview: true,
+        width: 150,
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
-        className: 'description',
+        Cell: TextOverviewTooltipCell,
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
       },
       {
         Header: intl.get('rate'),
         accessor: 'rate',
         Cell: FormatNumberCell,
-        width: 100,
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
       },
     ],
     [],
   );
+};
 
 /**
  * Invoice details more actions menu.

src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js

@@ -10,7 +10,10 @@ import { TableStyle } from '../../../common';
  * Manual journal drawer table.
  */
 export default function ManualJournalDrawerTable() {
+  // Retrieves the readonly manual journal entries columns.
   const columns = useManualJournalEntriesColumns();
+
+  // Manual journal drawer context.
   const { manualJournal } = useManualJournalDrawerContext();
 
   return (

src/containers/Drawers/ManualJournalDrawer/utils.js

@@ -1,28 +1,17 @@
 import intl from 'react-intl-universal';
 import React from 'react';
-import { Tag, Intent, Classes, Tooltip, Position } from '@blueprintjs/core';
+import { Tag, Intent } from '@blueprintjs/core';
 
-import { T, Choose, FormatNumberCell, If, Icon } from '../../../components';
+import {
+  T,
+  Choose,
+  FormatNumberCell,
+  TextOverviewTooltipCell,
+} from '../../../components';
 import { Features } from 'common';
+import { getColumnWidth } from 'utils';
 import { useFeatureCan } from 'hooks/state';
-
-/**
- * Note column accessor.
- */
-export function NoteAccessor(row) {
-  return (
-    <If condition={row.note}>
-      <Tooltip
-        className={Classes.TOOLTIP_INDICATOR}
-        content={row.note}
-        position={Position.LEFT_TOP}
-        hoverOpenDelay={50}
-      >
-        <Icon icon={'file-alt'} iconSize={16} />
-      </Tooltip>
-    </If>
-  );
-}
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 
 /**
  * Publish column accessor.
@@ -50,37 +39,45 @@ export function ManualJournalDetailsStatus({ manualJournal }) {
  */
 export const useManualJournalEntriesColumns = () => {
   const { featureCan } = useFeatureCan();
+
+  // manual journal details drawer context.
+  const {
+    manualJournal: { entries },
+  } = useManualJournalDrawerContext();
+
   return React.useMemo(
     () => [
       {
         Header: intl.get('account_name'),
+        Cell: TextOverviewTooltipCell,
         accessor: 'account.name',
         width: 130,
         disableSortBy: true,
-        className: 'account',
+        textOverview: true,
       },
       {
         Header: intl.get('contact'),
         accessor: 'contact.display_name',
-        width: 130,
+        Cell: TextOverviewTooltipCell,
+        width: 100,
         disableSortBy: true,
-        className: 'contact',
+        textOverview: true,
       },
       {
         Header: intl.get('note'),
-        accessor: NoteAccessor,
-        width: 80,
+        accessor: 'note',
+        Cell: TextOverviewTooltipCell,
         disableSortBy: true,
-        className: 'note',
+        textOverview: true,
+        width: 100,
       },
       ...(featureCan(Features.Branches)
         ? [
             {
               Header: intl.get('branch'),
-              width: 130,
+              width: 100,
               accessor: 'branch.name',
               disableSortBy: true,
-              className: 'branch',
             },
           ]
         : []),
@@ -88,25 +85,31 @@ export const useManualJournalEntriesColumns = () => {
         Header: intl.get('credit'),
         accessor: 'credit',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'credit', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         disableResizable: true,
         disableSortBy: true,
+        textOverview: true,
         formatNumber: { noZero: true },
-        className: 'credit',
         align: 'right',
       },
       {
         Header: intl.get('debit'),
         accessor: 'debit',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'debit', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         disableResizable: true,
+        textOverview: true,
         disableSortBy: true,
         formatNumber: { noZero: true },
-        className: 'debit',
         align: 'right',
       },
     ],
-    [featureCan],
+    [],
   );
 };

src/containers/Drawers/PaymentMadeDetailDrawer/utils.js

@@ -3,43 +3,65 @@ import intl from 'react-intl-universal';
 import moment from 'moment';
 
 import { FormatNumberCell } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
-export const usePaymentMadeEntriesColumns = () =>
-  React.useMemo(() => [
-    {
-      Header: intl.get('date'),
-      accessor: (row) => moment(row.date).format('YYYY MMM DD'),
-      width: 100,
-      disableSortBy: true,
-      className: 'date',
-    },
-    {
-      Header: intl.get('bill_number'),
-      accessor: 'bill_no',
-      width: 150,
-      disableSortBy: true,
-      className: 'bill_number',
-    },
-    {
-      Header: intl.get('bill_amount'),
-      accessor: 'bill.amount',
-      Cell: FormatNumberCell,
-      align: 'right',
-    },
-    {
-      Header: intl.get('due_amount'),
-      accessor: 'bill.due_amount',
-      Cell: FormatNumberCell,
-      width: 100,
-      disableSortBy: true,
-      align: 'right',
-    },
-    {
-      Header: intl.get('payment_amount'),
-      accessor: 'payment_amount',
-      Cell: FormatNumberCell,
-      width: 100,
-      disableSortBy: true,
-      align: 'right',
-    },
-  ], []);
+export const usePaymentMadeEntriesColumns = () => {
+  // Payment made details context.
+  const {
+    paymentMade: { entries },
+  } = usePaymentMadeDetailContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: (row) => moment(row.date).format('YYYY MMM DD'),
+        width: 100,
+        disableSortBy: true,
+        className: 'date',
+      },
+      {
+        Header: intl.get('bill_number'),
+        accessor: 'bill_no',
+        width: 150,
+        disableSortBy: true,
+        className: 'bill_number',
+      },
+      {
+        Header: intl.get('bill_amount'),
+        accessor: 'bill.amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'bill.amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+      },
+      {
+        Header: intl.get('due_amount'),
+        accessor: 'bill.due_amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'bill.due_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        disableSortBy: true,
+        align: 'right',
+      },
+      {
+        Header: intl.get('payment_amount'),
+        accessor: 'payment_amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'payment_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        disableSortBy: true,
+        textOverview: true,
+        align: 'right',
+      },
+    ],
+    [],
+  );
+};

src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js

@@ -2,12 +2,18 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
 import { FormatNumberCell } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
 /**
  * Retrieve payment entries table columns.
  */
-export const usePaymentReceiveEntriesColumns = () =>
-  React.useMemo(
+export const usePaymentReceiveEntriesColumns = () => {
+  const {
+    paymentReceive: { entries },
+  } = usePaymentReceiveDetailContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('date'),
@@ -27,24 +33,38 @@ export const usePaymentReceiveEntriesColumns = () =>
         Header: intl.get('invoice_amount'),
         accessor: 'invoice.balance',
         Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'invoice.balance', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
+        textOverview: true,
       },
       {
         Header: intl.get('amount_due'),
         accessor: 'invoice.due_amount',
         Cell: FormatNumberCell,
         align: 'right',
-        width: 100,
+        width: getColumnWidth(entries, 'invoice.due_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('payment_amount'),
         accessor: 'invoice.payment_amount',
         Cell: FormatNumberCell,
         align: 'right',
-        width: 100,
+        width: getColumnWidth(entries, 'invoice.payment_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};

src/containers/Drawers/ReceiptDetailDrawer/utils.js

@@ -1,44 +1,69 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormatNumberCell } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { FormatNumberCell, TextOverviewTooltipCell } from '../../../components';
+import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider.js';
 
-export const useReceiptReadonlyEntriesTableColumns = () => React.useMemo(() => [
-    {
-      Header: intl.get('product_and_service'),
-      accessor: 'item.name',
-      width: 150,
-      className: 'name',
-      disableSortBy: true
-    },
-    {
-      Header: intl.get('description'),
-      accessor: 'description',
-      className: 'description',
-      disableSortBy: true
-    },
-    {
-      Header: intl.get('quantity'),
-      accessor: 'quantity',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true
-    },
-    {
-      Header: intl.get('rate'),
-      accessor: 'rate',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true
-    },
-    {
-      Header: intl.get('amount'),
-      accessor: 'amount',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true
-    },
-  ], []);
-  
+export const useReceiptReadonlyEntriesTableColumns = () => {
+  // Receipt details drawer context.
+  const {
+    receipt: { entries },
+  } = useReceiptDetailDrawerContext();
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
+        width: 150,
+        className: 'name',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        Cell: TextOverviewTooltipCell,
+        className: 'description',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};

src/containers/Drawers/VendorCreditDetailDrawer/utils.js

@@ -10,59 +10,82 @@ import {
   Tag,
   Intent,
 } from '@blueprintjs/core';
+import { getColumnWidth } from 'utils';
 import {
   Icon,
   FormattedMessage as T,
+  TextOverviewTooltipCell,
   FormatNumberCell,
   Choose,
 } from '../../../components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
 
 /**
  * Retrieve vendor credit readonly details entries table columns.
  */
-export const useVendorCreditReadonlyEntriesTableColumns = () =>
-  React.useMemo(
+export const useVendorCreditReadonlyEntriesTableColumns = () => {
+  const {
+    vendorCredit: { entries },
+  } = useVendorCreditDetailDrawerContext();
+  return React.useMemo(
     () => [
       {
         Header: intl.get('product_and_service'),
         accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
         width: 150,
         className: 'item',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
+        Cell: TextOverviewTooltipCell,
         className: 'description',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('rate'),
         accessor: 'rate',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};
 
 /**
  * Vendor note more actions menu.

src/containers/Drawers/WarehouseTransferDetailDrawer/utils.js

@@ -1,40 +1,58 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { Intent, Tag } from '@blueprintjs/core';
+import { getColumnWidth } from 'utils';
+import { useWarehouseDetailDrawerContext } from './WarehouseTransferDetailDrawerProvider';
 
 import {
   FormattedMessage as T,
   FormatNumberCell,
+  TextOverviewTooltipCell,
   Choose,
 } from '../../../components';
 
-export const useWarehouseTransferReadOnlyEntriesColumns = () =>
-  React.useMemo(
+/**
+ * Retrieves the readonly warehouse transfer entries columns.
+ */
+export const useWarehouseTransferReadOnlyEntriesColumns = () => {
+  const {
+    warehouseTransfer: { entries },
+  } = useWarehouseDetailDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('warehouse_transfer.column.item_name'),
         accessor: 'item.name',
-        width: 150,
+        Cell: TextOverviewTooltipCell,
+        width: 100,
         className: 'name',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('warehouse_transfer.column.description'),
         accessor: 'description',
+        Cell: TextOverviewTooltipCell,
         className: 'description',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('warehouse_transfer.column.transfer_quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
       },
     ],
     [],
   );
+};
 
 /**
  * Warehouses transfer details status.

src/containers/Entries/components.js

@@ -43,7 +43,10 @@ export function ActionsCellRenderer({
 
   const exampleMenu = (
     <Menu>
-      <MenuItem onClick={onRemoveRole} text={'item_entries.remove_row'} />
+      <MenuItem
+        onClick={onRemoveRole}
+        text={<T id={'item_entries.remove_row'} />}
+      />
     </Menu>
   );
 

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.js

@@ -4,7 +4,7 @@ import { FastField, Field } from 'formik';
 import { FormGroup, Checkbox } from '@blueprintjs/core';
 import styled from 'styled-components';
 
-import { Row, Col, FieldHint, FormattedMessage as T } from 'components';
+import { Flex, FlexItem, FieldHint, FormattedMessage as T } from 'components';
 import {
   handlePreviousYearCheckBoxChange,
   handlePreviousYearChangeCheckboxChange,
@@ -15,11 +15,11 @@ import {
 } from './utils';
 
 /**
- * Balance sheet header - Comparison panal.
+ * Balance sheet header - Comparison panal - Comparisons fields.
  */
-export default function BalanceSheetHeaderComparisonPanal() {
+function BalanceSheetHeaderComparisonPanalFields() {
   return (
-    <BalanceSheetComparisonWrap>
+    <>
       {/**----------- Previous Year -----------*/}
       <Field name={'previousYear'} type={'checkbox'}>
         {({ form, field }) => (
@@ -33,8 +33,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
           </FormGroup>
         )}
       </Field>
-      <Row>
-        <Col xs={3}>
+
+      <FlexSubFields align={'left'}>
+        <FlexItem col={6}>
           <Field name={'previousYearAmountChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -48,8 +49,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
               </FormGroup>
             )}
           </Field>
-        </Col>
-        <Col xs={3}>
+        </FlexItem>
+
+        <FlexItem col={6}>
           <FastField name={'previousYearPercentageChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -62,8 +64,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-      </Row>
+        </FlexItem>
+      </FlexSubFields>
+
       {/*------------ Previous Period -----------*/}
       <FastField name={'previousPeriod'} type={'checkbox'}>
         {({ form, field }) => (
@@ -78,8 +81,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
           </FormGroup>
         )}
       </FastField>
-      <Row>
-        <Col xs={3}>
+
+      <FlexSubFields>
+        <FlexItem col={6}>
           <FastField name={'previousPeriodAmountChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -93,8 +97,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-        <Col xs={3}>
+        </FlexItem>
+
+        <FlexItem col={6}>
           <FastField name={'previousPeriodPercentageChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -107,8 +112,8 @@ export default function BalanceSheetHeaderComparisonPanal() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-      </Row>
+        </FlexItem>
+      </FlexSubFields>
 
       {/**----------- % of Column -----------*/}
       <FastField name={'percentageOfColumn'} type={'checkbox'}>
@@ -137,19 +142,33 @@ export default function BalanceSheetHeaderComparisonPanal() {
           </FormGroup>
         )}
       </FastField>
+    </>
+  );
+}
+
+/**
+ * Balance sheet header - Comparison panal.
+ */
+export default function BalanceSheetHeaderComparisonPanal() {
+  return (
+    <BalanceSheetComparisonWrap>
+      <BalanceSheetComparisonFieldsWrap>
+        <BalanceSheetHeaderComparisonPanalFields />
+      </BalanceSheetComparisonFieldsWrap>
     </BalanceSheetComparisonWrap>
   );
 }
 
 const BalanceSheetComparisonWrap = styled.div`
-  .row {
-    margin-left: 0.15rem;
-    .col {
-      min-width: 150px !important;
-      max-width: 190px !important;
-    }
-  }
   .bp3-form-group {
     margin-bottom: 3px;
   }
 `;
+
+const FlexSubFields = styled(Flex)`
+  padding-left: 20px;
+`;
+
+const BalanceSheetComparisonFieldsWrap = styled.div`
+  width: 400px;
+`;

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { FormGroup, Classes } from '@blueprintjs/core';
+import { Classes } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
-import classNames from 'classnames';
 
 import { AccountMultiSelect, Row, Col } from 'components';
 import { FFormGroup } from '../../../components/Forms';
@@ -47,10 +46,10 @@ function GLHeaderGeneralPaneContent() {
         <Col xs={4}>
           <FFormGroup
             label={<T id={'specific_accounts'} />}
-            name={'accounts'}
+            name={'accountsIds'}
             className={Classes.FILL}
           >
-            <AccountMultiSelect name="accounts" accounts={accounts} />
+            <AccountMultiSelect name="accountsIds" accounts={accounts} />
           </FFormGroup>
         </Col>
       </Row>

src/containers/FinancialStatements/GeneralLedger/common.js

@@ -32,7 +32,7 @@ export const getDefaultGeneralLedgerQuery = () => {
     basis: 'accural',
     filterByOption: 'with-transactions',
     branchesIds: [],
-    accounts: [],
+    accountsIds: [],
   };
 };
 
@@ -49,8 +49,9 @@ const parseGeneralLedgerQuery = (locationQuery) => {
   return {
     ...transformed,
 
-    // Ensures the branches ids is always array.
+    // Ensures the branches, accounts ids is always array.
     branchesIds: castArray(transformed.branchesIds),
+    accountsIds: castArray(transformed.accountsIds),
   };
 };
 

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { FastField, Field } from 'formik';
+import { FastField } from 'formik';
 import { FormGroup, Checkbox } from '@blueprintjs/core';
 import styled from 'styled-components';
 
-import { FormattedMessage as T } from 'components';
+import { Flex, FlexItem, FormattedMessage as T } from 'components';
 
-import { Row, Col, FieldHint } from '../../../components';
+import { FieldHint } from '../../../components';
 import {
   handlePreviousYearCheckBoxChange,
   handlePreviousPeriodCheckBoxChange,
@@ -16,11 +16,12 @@ import {
 } from './utils';
 
 /**
- * ProfitLoss sheet header -comparison panel.
+ * Profit/loss comparisons panel fields.
+ * @returns {JSX.Element}
  */
-export default function ProfitLossSheetHeaderComparisonPanel() {
+function ProfitLossComaprsionPanelFields() {
   return (
-    <ProfitLossSheetComparisonWrap>
+    <>
       {/**----------- Previous Year -----------*/}
       <FastField name={'previousYear'} type={'checkbox'}>
         {({ form, field }) => (
@@ -35,8 +36,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
           </FormGroup>
         )}
       </FastField>
-      <Row>
-        <Col xs={3}>
+
+      <FlexSubFields>
+        <FlexItem col={6}>
           <FastField name={'previousYearAmountChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -50,8 +52,8 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-        <Col xs={3}>
+        </FlexItem>
+        <FlexItem col={6}>
           <FastField name={'previousYearPercentageChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -65,8 +67,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-      </Row>
+        </FlexItem>
+      </FlexSubFields>
+
       {/**----------- Previous Period (PP) -----------*/}
       <FastField name={'previousPeriod'} type={'checkbox'}>
         {({ form, field }) => (
@@ -81,8 +84,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
           </FormGroup>
         )}
       </FastField>
-      <Row>
-        <Col xs={3}>
+
+      <FlexSubFields>
+        <FlexItem col={6}>
           <FastField name={'previousPeriodAmountChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -96,8 +100,8 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-        <Col xs={3}>
+        </FlexItem>
+        <FlexItem col={6}>
           <FastField name={'previousPeriodPercentageChange'} type={'checkbox'}>
             {({ form, field }) => (
               <FormGroup labelInfo={<FieldHint />}>
@@ -111,8 +115,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
               </FormGroup>
             )}
           </FastField>
-        </Col>
-      </Row>
+        </FlexItem>
+      </FlexSubFields>
+
       {/**----------- % of Column -----------*/}
       <FastField name={'percentageColumn'} type={'checkbox'}>
         {({ field }) => (
@@ -126,6 +131,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
           </FormGroup>
         )}
       </FastField>
+
       {/**----------- % of Row -----------*/}
       <FastField name={'percentageRow'} type={'checkbox'}>
         {({ field }) => (
@@ -139,6 +145,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
           </FormGroup>
         )}
       </FastField>
+
       {/**----------- % of Expense -----------*/}
       <FastField name={'percentageExpense'} type={'checkbox'}>
         {({ field }) => (
@@ -152,6 +159,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
           </FormGroup>
         )}
       </FastField>
+
       {/**----------- % of Income -----------*/}
       <FastField name={'percentageIncome'} type={'checkbox'}>
         {({ field }) => (
@@ -165,19 +173,33 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
           </FormGroup>
         )}
       </FastField>
+    </>
+  );
+}
+
+/**
+ * ProfitLoss sheet header -comparison panel.
+ */
+export default function ProfitLossSheetHeaderComparisonPanel() {
+  return (
+    <ProfitLossSheetComparisonWrap>
+      <ProfitLossComaprsionFieldsWrap>
+        <ProfitLossComaprsionPanelFields />
+      </ProfitLossComaprsionFieldsWrap>
     </ProfitLossSheetComparisonWrap>
   );
 }
 
 const ProfitLossSheetComparisonWrap = styled.div`
-  .row {
-    margin-left: 0.15rem;
-    .col {
-      min-width: 150px !important;
-      max-width: 190px !important;
-    }
-  }
   .bp3-form-group {
     margin-bottom: 3px;
   }
 `;
+
+const FlexSubFields = styled(Flex)`
+  padding-left: 20px;
+`;
+
+const ProfitLossComaprsionFieldsWrap = styled.div`
+  max-width: 400px;
+`;

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js

@@ -12,7 +12,6 @@ function VendorsBalanceSummaryProvider({ filter, ...props }) {
   const query = React.useMemo(() => transformFilterFormToQuery(filter), [
     filter,
   ]);
-
   // Fetching vendors balance summary report based on the given query.
   const {
     data: VendorBalanceSummary,

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js

@@ -147,7 +147,7 @@ function InvoiceFormHeaderFields({
           </FastField>
         </Col>
 
-        <Col className={'col--due-date'}>
+        <Col xs={6}>
           {/* ----------- Due date ----------- */}
           <FastField name={'due_date'}>
             {({ form, field: { value }, meta: { error, touched } }) => (

src/hooks/state/dashboard.js

@@ -1,9 +1,14 @@
 import { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
 import {
   splashStopLoading,
   splashStartLoading,
   dashboardPageTitle,
+  openSidebarSubmenu,
+  closeSidebarSubmenu,
+  openDialog,
+  closeDialog,
 } from '../../store/dashboard/dashboard.actions';
 
 export const useDispatchAction = (action) => {
@@ -30,3 +35,44 @@ export const useSplashLoading = () => {
     useDispatchAction(splashStopLoading),
   ];
 };
+
+/**
+ * Sidebar submenu actions.
+ */
+export const useSidebarSubmnuActions = () => {
+  return {
+    openSidebarSubmenu: useDispatchAction(openSidebarSubmenu),
+    closeSidebarSubmenu: useDispatchAction(closeSidebarSubmenu),
+    toggleSidebarSubmenu: useDispatchAction(openSidebarSubmenu),
+  };
+};
+
+/**
+ * Retrieves the sidebar submenu selector.
+ */
+const sidebarSubmenuSelector = createSelector(
+  (state) => state.dashboard.sidebarSubmenu,
+  (sidebarSubmenu) => sidebarSubmenu,
+);
+
+/**
+ * Retrieves the sidebar submenu selector.
+ */
+export const useSidebarSubmenu = () => {
+  const sidebarSubmenu = useSelector(sidebarSubmenuSelector);
+
+  return {
+    isOpen: sidebarSubmenu?.isOpen || false,
+    submenuId: sidebarSubmenu?.submenuId || null,
+  };
+};
+
+/**
+ * Dialogs actions.
+ */
+export const useDialogActions = () => {
+  return {
+    openDialog: useDispatchAction(openDialog),
+    closeDialog: useDispatchAction(closeDialog),
+  };
+};

src/lang/ar/index.json

@@ -1918,7 +1918,7 @@
   "branches_multi_select.placeholder": "تصفية حسب الفروع…",
   "warehouses_multi_select.label": "مخازن",
   "warehouses_multi_select.placeholder": "تصفية حسب المخازن…",
-  "dimensions": "Dimensions",
+  "dimensions": "الأبعاد",
   "warehouse_transfer.save_initiate_transfer": "حفظ وبدء النقل",
   "warehouse_transfer.save_mark_as_transferred": "حفظ وتم النقل",
   "warehouse_transfer.label.transfer_initiated": "بدء النقل",
@@ -1947,7 +1947,7 @@
   "view_customer_details": "عرض تفاصيل العميل ",
   "view_vendor_details": "عرض تفاصيل المورد ",
   "thanks_for_your_business_and_have_a_great_day": "Thanks for your business and have a great day!",
-  "terms_and_conditions.placeholder": "Enter the terms and conditions of your business to be displayed in your transaction",
+  "terms_and_conditions.placeholder": "أدخل شروط وأحكام عملك ليتم عرضها في المعاملة.",
   "expenses.decscrption.placeholder": "Enter the description of your business to be displayed in your transaction",
   "make_jorunal.decscrption.placeholder": "Enter the description of your business to be displayed in your transaction",
   "estimate_form.label.total": "إجمالي",
@@ -1955,14 +1955,15 @@
   "estimate_form.label.customer_note": "ملاحظة الزبون",
   "estimate_form.label.terms_conditions": "الشروط والأحكام",
   "estimate_form.customer_note.placeholder": "Thanks for your business and have a great day!",
-  "estimate_form.terms_and_conditions.placeholder": "Enter the terms and conditions of your business to be displayed in your transaction",
+  "estimate_form.terms_and_conditions.placeholder": "أدخل شروط وأحكام عملك ليتم عرضها في المعاملة.",
   "invoice_form.label.total": "إجمالي",
   "invoice_form.label.subtotal": "المجموع",
   "invoice_form.label.due_amount": "مبلغ المستحق",
   "invoice_form.label.payment_amount": "مبلغ المدفوع",
   "invoice_form.label.invoice_message": "رسالة الفاتورة",
   "invoice_form.invoice_message.placeholder": "Thanks for your business and have a great day!",
-  "invoice_form.terms_and_conditions.placeholder": "Enter the terms and conditions of your business to be displayed in your transaction",
+  "invoice_form.label.terms_conditions": "الشروط والأحكام",
+  "invoice_form.terms_and_conditions.placeholder": "أدخل شروط وأحكام عملك ليتم عرضها في المعاملة.",
   "receipt_form.label.total": "إجمالي",
   "receipt_form.label.subtotal": "المجموع",
   "receipt_form.label.due_amount": "مبلغ المستحق",
@@ -1976,13 +1977,13 @@
   "payment_receive_form.label.subtotal": "المجموع",
   "payment_receive_form.label.total": "إجمالي",
   "bill_form.label.note": "ملاحظة",
-  "bill_form.label.note.placeholder": "Enter the terms and conditions of your business to be displayed in your transaction",
+  "bill_form.label.note.placeholder": "أدخل شروط وأحكام عملك ليتم عرضها في المعاملة.",
   "bill_form.label.subtotal": "المجموع",
   "bill_form.label.total": "إجمالي",
   "bill_form.label.due_amount": "مبلغ المستحق",
   "bill_form.label.payment_amount": "مبلغ المدفوع",
   "vendor_credit_form.label.note": "ملاحظة",
-  "vendor_credit_form.note.placeholder": "Enter the terms and conditions of your business to be displayed in your transaction",
+  "vendor_credit_form.note.placeholder": "أدخل شروط وأحكام عملك ليتم عرضها في المعاملة.",
   "vendor_credit_form.label.subtotal": "المجموع",
   "vendor_credit_form.label.total": "إجمالي",
   "payment_made_form.label.statement": "بيان",
@@ -2010,7 +2011,7 @@
   "warehouse_transfer.empty_status.title": "إدارة عمليات النقل بين المخازن",
   "warehouse_transfer.empty_status.description": "غالبًا ماتحتاج الاعمال ذات مخازن متعددة لطلبات نقل البضائع من مخزن إلى آخر عندما تكون في حاجة ماسة إلى البائعين.",
   "warehouse_transfer.form.reason.label": "أسباب النقل",
-  "warehouse_transfer.form.reason.placeholder": "Enter the reason behind the transfer order.",
+  "warehouse_transfer.form.reason.placeholder": "أدخل السبب وراء طلب النقل.",
   "item.error.you_could_not_delete_item_has_associated": "لا يمكنك حذف العنصر لديه معاملات مرتبطة به ",
   "warehouse_transfer.quantity_cannot_be_zero_or_empty": "لا يمكن أن تكون الكمية صفراً أو فارغة.",
   "invoice.validation.due_date": "يجب أن يكون حقل {path} في وقت لاحق من {min}",

src/lang/en/index.json

@@ -1258,12 +1258,41 @@
   "setup.initializing.please_refresh_the_page": "Please refresh the page",
   "setup.organization.title": "Let’s Get Started",
   "setup.organization.description": "Tell the system a little bit about your organization.",
+  "plan.capital_basic.title": "Capital Basic",
+  "plan.feature.sales_invoices": "Sales Invoices.",
+  "plan.feature.sales_estimates": "Sales Estimates.",
+  "plan.feature.customers": "Customers.",
+  "plan.feature.credit_notes": "Credit notes.",
+  "plan.feature.manual_journals": "Manual Journals.",
+  "plan.feature.expenses_tracking": "Expenses Tracking",
+  "plan.feature.basic_financial_reports": "Basic Financial Reports.",
+  "plan.capital_plus.title": "Capital Plus",
+  "plan.feature.all_capital_basic": "All Capital Basic features.",
+  "plan.feature.predefined_user_roles": "Predefined User Roles.",
+  "plan.feature.custom_tables_views": "Custom Tables Views.",
+  "plan.feature.transactions_locking": "Transactions Locking.",
+  "plan.feature.plus_financial_reports": "Plus Financial Reports.",
+  "plan.feature.custom_fields_resources": "Custom Fields & Resources.",
+  "plan.essential.title": "Capital Essential",
+  "plan.feature.all_capital_plus": "All Capital Basic features.",
+  "plan.feature.sales_purchases_order": "Sales & Purchases Order.",
+  "plan.feature.purchase_invoices": "Purchase Invoices.",
+  "plan.feature.inventory_tracking": "Inventory Tracking.",
+  "plan.feature.custom_roles": "Custom Roles.",
+  "plan.feature.multiply_currency_transcations": "Multiply Currency Transcations.",
+  "plan.feature.inventory_reports": "Inventory Reports.",
+  "plan.feature.landed_cost": "Landed cost.",
+  "plan.capital_enterprise.title": "Capital Enterprise",
+  "plan.feature.all_capital_essential": "All Capital Essential features.",
+  "plan.feature.multiply_branches": "Multiply Branches.",
+  "plan.feature.multiply_warehouses": "Multiply Warehouses.",
+  "plan.feature.accounting_dimensions": "Accounting Dimensions.",
+  "plan.feature.warehouses_reports": "Warehouses Reports.",
+  "plan.feature.branches_reports": "Branches Reports.",
   "plan.professional.title": "Pro",
-  "plan.essential.title": "Essential",
   "plan.plus.title": "Plus+",
   "plan.feature.sale_purchase_invoice": "Sale and purchase invoices.",
   "plan.feature.receivable_payable_accounts": "Customers/vendors accounts.",
-  "plan.feature.expenses_tracking": "Expenses tracking",
   "plan.feature.manual_journal": "Manual journals.",
   "plan.feature.financial_reports": "Financial reports.",
   "plan.feature.one_user_with_accountant": "For one user and accountant",
@@ -1274,9 +1303,7 @@
   "plan.feature.three_users": "Three users with your accountant",
   "plan.feature.advanced_financial_reports": "Advanced financial reports",
   "plan.feature.tracking_multi_locations": "Track multi-branches and locations",
-  "plan.feature.all_capital_essential": "All Capital Essential features.",
   "plan.feature.projects_accounting": "Projects accounting and timesheets",
-  "plan.feature.accounting_dimensions": "Accounting dimensions.",
   "plan.monthly": "Monthly",
   "plan.yearly": "Yearly",
   "payment_via_voucher.success_message": "Payment has been done successfully.",
@@ -1941,7 +1968,6 @@
   "payment_made.error.withdrawal_account_currency_invalid": "The withdrawal account currency should be same vendor currency or organization base currency.",
   "view_customer_details": "View Customer Details",
   "view_vendor_details": "View Vendor Details",
-  "thanks_for_your_business_and_have_a_great_day": "Thanks for your business and have a great day!",
   "terms_and_conditions.placeholder": "Enter the terms and conditions of your business to be displayed in your transaction",
   "expenses.decscrption.placeholder": "Enter the description of your business to be displayed in your transaction",
   "make_jorunal.decscrption.placeholder": "Enter the description of your business to be displayed in your transaction",

src/store/dashboard/dashboard.actions.js

@@ -111,3 +111,16 @@ export const setFeatureDashboardMeta = ({ features }) => {
     },
   };
 };
+
+export function openSidebarSubmenu({ submenuId }) {
+  return {
+    type: t.SIDEBAR_SUBMENU_OPEN,
+    payload: { submenuId },
+  };
+}
+
+export function closeSidebarSubmenu() {
+  return {
+    type: t.SIDEBAR_SUBMENU_CLOSE,
+  };
+}

src/store/dashboard/dashboard.reducer.js

@@ -20,10 +20,8 @@ const initialState = {
   splashScreenLoading: null,
   appIsLoading: true,
   appIntlIsLoading: true,
-  features: {
-    // branches: true,
-    // warehouses: true,
-  },
+  sidebarSubmenu: { isOpen: false, submenuId: null },
+  features: {},
 };
 
 const STORAGE_KEY = 'bigcapital:dashboard';
@@ -131,6 +129,16 @@ const reducerInstance = createReducer(initialState, {
     state.splashScreenLoading = Math.max(state.splashScreenLoading, 0);
   },
 
+  [t.SIDEBAR_SUBMENU_OPEN]: (state, action) => {
+    state.sidebarSubmenu.isOpen = true;
+    state.sidebarSubmenu.submenuId = action.payload.submenuId;
+  },
+
+  [t.SIDEBAR_SUBMENU_CLOSE]: (state, action) => {
+    state.sidebarSubmenu.isOpen = false;
+    state.sidebarSubmenu.submenuId = null;
+  },
+
   [t.RESET]: () => {
     purgeStoredState(CONFIG);
   },

src/store/dashboard/dashboard.types.js

@@ -13,6 +13,9 @@ export default {
   ALTER_DASHBOARD_PAGE_SUBTITLE: 'ALTER_DASHBOARD_PAGE_SUBTITLE',
   SET_TOPBAR_EDIT_VIEW: 'SET_TOPBAR_EDIT_VIEW',
   SIDEBAR_EXPEND_TOGGLE: 'SIDEBAR_EXPEND_TOGGLE',
+  SIDEBAR_SUBMENU_OPEN: 'SIDEBAR_SUBMENU_OPEN',
+  SIDEBAR_SUBMENU_CLOSE: 'SIDEBAR_SUBMENU_CLOSE',
+  SIDEBAR_SUBMENU_TOGGLE: 'SIDEBAR_SUBMENU_TOGGLE',
   SET_DASHBOARD_BACK_LINK: 'SET_DASHBOARD_BACK_LINK',
   SPLASH_START_LOADING: 'SPLASH_START_LOADING',
   SPLASH_STOP_LOADING: 'SPLASH_STOP_LOADING',

src/store/plans/plans.reducer.js

@@ -2,7 +2,6 @@ import { createReducer } from '@reduxjs/toolkit';
 import intl from 'react-intl-universal';
 import t from 'store/types';
 
-
 const getSubscriptionPeriods = () => [
   {
     slug: 'month',
@@ -15,79 +14,110 @@ const getSubscriptionPeriods = () => [
 ];
 
 const getSubscriptionPlans = () => [
+  {
+    name: intl.get('plan.capital_basic.title'),
+    slug: 'capital_basic',
+    description: [
+      intl.get('plan.feature.sales_invoices'),
+      intl.get('plan.feature.sales_estimates'),
+      intl.get('plan.feature.customers'),
+      intl.get('plan.feature.credit_notes'),
+      intl.get('plan.feature.manual_journals'),
+      intl.get('plan.feature.expenses_tracking'),
+      intl.get('plan.feature.basic_financial_reports'),
+    ],
+    price: '55',
+    periods: [
+      {
+        slug: 'month',
+        label: intl.get('plan.monthly'),
+        price: '55',
+      },
+      {
+        slug: 'year',
+        label: intl.get('plan.yearly'),
+        price: '595',
+      },
+    ],
+    currencyCode: 'LYD',
+  },
+  {
+    name: intl.get('plan.capital_plus.title'),
+    slug: 'capital_plus',
+    description: [
+      intl.get('plan.feature.all_capital_basic'),
+      intl.get('plan.feature.predefined_user_roles'),
+      intl.get('plan.feature.custom_tables_views'),
+      intl.get('plan.feature.transactions_locking'),
+      intl.get('plan.feature.plus_financial_reports'),
+      intl.get('plan.feature.custom_fields_resources'),
+    ],
+    price: '75',
+    periods: [
+      {
+        slug: 'month',
+        label: intl.get('plan.monthly'),
+        price: '75',
+      },
+      {
+        slug: 'year',
+        label: intl.get('plan.yearly'),
+        price: '795',
+      },
+    ],
+    currencyCode: 'LYD',
+  },
   {
     name: intl.get('plan.essential.title'),
     slug: 'essentials',
     description: [
-      intl.get('plan.feature.sale_purchase_invoice'),
-      intl.get('plan.feature.receivable_payable_accounts'),
-      intl.get('plan.feature.expenses_tracking'),
-      intl.get('plan.feature.manual_journal'),
-      intl.get('plan.feature.financial_reports'),
-      intl.get('plan.feature.one_user_with_accountant'),
+      intl.get('plan.feature.all_capital_plus'),
+      intl.get('plan.feature.sales_purchases_order'),
+      intl.get('plan.feature.purchase_invoices'),
+      intl.get('plan.feature.inventory_tracking'),
+      intl.get('plan.feature.custom_roles'),
+      intl.get('plan.feature.multiply_currency_transcations'),
+      intl.get('plan.feature.inventory_reports'),
+      intl.get('plan.feature.landed_cost'),
     ],
-    price: '100',
+    price: '95',
     periods: [
       {
         slug: 'month',
         label: intl.get('plan.monthly'),
-        price: '100'
+        price: '95',
       },
       {
         slug: 'year',
         label: intl.get('plan.yearly'),
-        price: '1,200',
+        price: '995',
       },
     ],
     currencyCode: 'LYD',
   },
   {
-    name: intl.get('plan.professional.title'),
-    slug: 'plus',
-    description: [
-      intl.get('plan.feature.all_capital_essential'),
-      intl.get('plan.feature.multi_currency'),
-      intl.get('plan.feature.purchase_sell_orders'),
-      intl.get('plan.feature.multi_inventory_managment'),
-      intl.get('plan.feature.three_users'),
-      intl.get('plan.feature.advanced_financial_reports'),
-    ],
-    price: '200',
-    currencyCode: 'LYD',
-    periods: [
-      {
-        slug: 'month',
-        label: intl.get('plan.monthly'),
-        price: '200'
-      },
-      {
-        slug: 'year',
-        label: intl.get('plan.yearly'),
-        price: '1,200',
-      },
-    ],
-  },
-  {
-    name: intl.get('plan.plus.title'),
+    name: intl.get('plan.capital_enterprise.title'),
     slug: 'enterprise',
     description: [
-      intl.get('plan.feture.all_capital_professional_features'),
-      intl.get('plan.feature.tracking_multi_locations'),
-      intl.get('plan.feature.projects_accounting'),
+      intl.get('plan.feature.all_capital_essential'),
+      intl.get('plan.feature.multiply_branches'),
+      intl.get('plan.feature.multiply_warehouses'),
       intl.get('plan.feature.accounting_dimensions'),
+      intl.get('plan.feature.warehouses_reports'),
+      intl.get('plan.feature.branches_reports'),
     ],
-    price: '300',
+    price: '120',
     currencyCode: 'LYD',
     periods: [
       {
         slug: 'month',
         label: intl.get('plan.monthly'),
-        price: '300'
+        price: '120',
       },
       {
         slug: 'year',
         label: intl.get('plan.yearly'),
-        price: '1,200',
+        price: '1,195',
       },
     ],
   },

src/style/App.scss

@@ -290,3 +290,8 @@ html[lang^='ar'] {
 .font-bold {
   font-weight: 600;
 }
+
+
+span.table-tooltip-overview-target{
+  display: inline;
+}

src/style/components/SidebarOverlay.scss

@@ -75,6 +75,8 @@
     padding: 14px 20px 10px;
     letter-spacing: 1px;
     color: #707a85;
+    border-bottom: 1px solid #e2e5ec;
+    margin-bottom: 6px;
 
     html[lang^="ar"] & {
       font-size: 13px;

src/style/pages/Subscription/BillingPlans.scss

@@ -1,6 +1,6 @@
 
 .billing-plans{
-  
+  max-width: 753px;
   .paragraph{
     font-size: 15px;
   }

src/utils/deep.js

@@ -0,0 +1,33 @@
+import _ from 'lodash';
+import Deepdash from 'deepdash';
+
+export const deepdash = Deepdash(_);
+
+export const filterValuesDeep = (predicate, nodes) => {
+  return deepdash.condense(
+    deepdash.reduceDeep(
+      nodes,
+      (accumulator, value, key, parent, context) => {
+        const newValue = { ...value };
+
+        if (newValue.children) {
+          _.set(newValue, 'children', deepdash.condense(value.children));
+        }
+        const isTrue = predicate(newValue, key, parent, context);
+
+        if (isTrue === true) {
+          _.set(accumulator, context.path, newValue);
+        } else if (isTrue === false) {
+          _.unset(accumulator, context.path);
+        }
+        return accumulator;
+      },
+      [],
+      {
+        childrenPath: 'children',
+        pathFormat: 'array',
+        callbackAfterIterate: true,
+      },
+    ),
+  );
+};

src/utils/index.js

@@ -14,6 +14,8 @@ import { isEqual } from 'lodash';
 
 import jsCookie from 'js-cookie';
 
+export * from './deep';
+
 export const getCookie = (name, defaultValue) =>
   _.defaultTo(jsCookie.get(name), defaultValue);