Merge branch 'develop' into main

fix(MoneyOutForm): BIG-270 publish & draft cashflow.
fix(MoneyInForm): BIG-270 publish & draft cashflow.
2022-01-08 18:20:08 +02:00 · 2022-01-08 18:14:39 +02:00 · 2022-01-08 18:14:17 +02:00 · 2022-01-08 18:06:54 +02:00 · 2022-01-08 17:59:30 +02:00 · 2022-01-08 17:02:54 +02:00
996 changed files with 38344 additions and 5305 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1 @@
+APP_VERSION=$npm_package_version
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@

 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
+@bigcapitalhq:registry=https://npm.pkg.github.com
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,52 @@

 All notable changes to Bigcapital server-side will be in this file.

+## [1.5.3] - 03-01-2020
+
+### Fixed
+
+- Localize the global errors.
+- Expand account name column on trial balance sheet.
+
+## [1.5.0] - 20-12-2021
+
+### Added
+
+- Add credit note on sales module.
+- Add vendor credit on purchases module.
+- Optimize landed costs on purchase invoices.
+- Display associated payment transactions on sale invoice drawer.
+- Display associated pamyment transactions on purchase invoice drawer.
+- Display item associate invoice, bill, estimate and receipt transactions.
+- Transactions locking on all transactions or individual modules.
+- Roles and permissions access control module.
+- Optimize readonly details style of invoice, receipt, estimate, payment receive,
+  purchase invoice, expense, manual journal, inventory adjustment and cashflow transaction.
+
+### Changed
+
+- Dashboard meta boot and authenticated user request query.
+- Optimize Arabic localization.
+
+## [1.4.0] - 11-09-2021
+
+### Added
+
+- Add SMS notification on sale invoice, receipt, customers payments modules.
+- Customer quick create in customers list.
+- Item quick create in items list.
+
+### Changes
+
+change: BIG-171 alerts in global scope and lazy loading.
+
+### Fixed
+
+fix: BIG-140 - Reordering sell, cost and inventory account on item details.
+fix: BIG-144 - Typo adjustment dialog success message.
+fix: BIG-148 - Items entries ordered by index.
+fix: BIG-132 AR/AP aging summary report filter by none transactions/zero contacts.
+
 ## [1.2.0-RC] - 03-09-2021

 Here we write upgrading notes for brands. It's a team effort to make them as
@@ -32,7 +78,7 @@ straightforward as possible.
 - Inventory adjustment publish action.
 - Customers and vendors activate and inactivate action.
 - Add refresh button on dashboard actions bar to all datatables resources.
- Add clickable datatable rows to display each row details. 
+- Add clickable datatable rows to display each row details.

 ### Changed

--- a/2
+++ b/2
@@ -17,4 +17,4 @@ FROM nginx

 COPY ./nginx/sites/default.conf /etc/nginx/conf.d/default.conf

-COPY --from=build /app/build /usr/share/nginx/html
+COPY --from=build /app/build /usr/share/nginx/html
--- a/config/env.js
+++ b/config/env.js
@@ -85,6 +85,9 @@ function getClientEnvironment(publicUrl) {
        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+
+        // Application version.
+        VERSION: paths.appVersion
      }
    );
  // Stringify all values so we can feed into webpack DefinePlugin
--- a/config/paths.js
+++ b/config/paths.js
@@ -48,6 +48,8 @@ const resolveModule = (resolveFn, filePath) => {
  return resolveFn(`${filePath}.js`);
 };

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


--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "client",
+  "name": "bigcapital-client",
  "version": "1.2.0",
  "lockfileVersion": 1,
  "requires": true,
@@ -282,9 +282,9 @@
      }
    },
    "@babel/helper-validator-identifier": {
-      "version": "7.15.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz",
-      "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w=="
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
+      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw=="
    },
    "@babel/helper-wrap-function": {
      "version": "7.8.3",
@@ -1043,12 +1043,18 @@
        "to-fast-properties": "^2.0.0"
      }
    },
+    "@blueprintjs/colors": {
+      "version": "4.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/colors/-/colors-4.0.0-alpha.0.tgz",
+      "integrity": "sha512-E5taSTt5gHQcj85W6ln5lpxRVuKIA64nlJZJ9lQ3HjzwSCAF0V3Bmjn+HhfrP312yIMkZQJAutArlNATjz7qlw=="
+    },
    "@blueprintjs/core": {
-      "version": "3.38.1",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-3.38.1.tgz",
-      "integrity": "sha512-ZBqVfMgeIrXiuprsRxBnLM/MPgPSCRf27uckyhMFHRocyEtFS7zrOGmQeJb1Va0nZ/ufNsYk7EiHVxulb1KkSg==",
+      "version": "3.50.3",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-3.50.3.tgz",
+      "integrity": "sha512-wCVmIXqrjmgY3uVC2VFxNTssl5eVVHmyJWfEj+d3msDOqDrFyItJ0G1sVo73e7x4XrBV3K8ElFuybAcAHaxFtA==",
      "requires": {
-        "@blueprintjs/icons": "^3.24.0",
+        "@blueprintjs/colors": "^4.0.0-alpha.0",
+        "@blueprintjs/icons": "^3.30.2",
        "@types/dom4": "^2.0.1",
        "classnames": "^2.2",
        "dom4": "^2.1.5",
@@ -1088,27 +1094,28 @@
      }
    },
    "@blueprintjs/datetime": {
-      "version": "3.15.2",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime/-/datetime-3.15.2.tgz",
-      "integrity": "sha512-FQw1BqbO9RBKzLWiXHkSVFxyGFRXHaugG5ST4go+p2IibrxuRDjD6YvrFXo+FLEzi+MsftMo6FkPNm2xApfmHw==",
+      "version": "3.23.13",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/datetime/-/datetime-3.23.13.tgz",
+      "integrity": "sha512-GjQAhZz/Lk1GA1Q2gEg51uqgv0JgiqQUjgwfze/HBvZe6Jj7Q0/WLTgk8hjOXcYJoPLYyAlFi+oyt97IxzzpNQ==",
      "requires": {
-        "@blueprintjs/core": "^3.23.0",
+        "@blueprintjs/core": "^3.50.3",
        "classnames": "^2.2",
-        "react-day-picker": "7.3.2",
-        "tslib": "~1.9.0"
+        "react-day-picker": "7.4.9",
+        "react-lifecycles-compat": "^3.0.4",
+        "tslib": "~1.13.0"
      },
      "dependencies": {
        "tslib": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
-          "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
        }
      }
    },
    "@blueprintjs/icons": {
-      "version": "3.24.0",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-3.24.0.tgz",
-      "integrity": "sha512-OvDDI5EUueS1Y3t594iS8LAGoHhLhYjC2GuN/01a85n+ASLSp0jf0/+uix2JeCOj41iTdRRCINbWuRwVQNNGPw==",
+      "version": "3.30.2",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-3.30.2.tgz",
+      "integrity": "sha512-t0coke9JWLtAt4eQuGfTD2KQSjD+Q5V9JLnRwt1sEyV9/CHXgeoTvsEEqpiXe6gWOW72Rok6Uo86yLyICRW7wQ==",
      "requires": {
        "classnames": "^2.2",
        "tslib": "~1.13.0"
@@ -1122,11 +1129,11 @@
      }
    },
    "@blueprintjs/popover2": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-0.11.1.tgz",
-      "integrity": "sha512-Uo3oEydB/XoxZ1rzyehgnI0hd7r4bAOiNHbuqrNssASzujTm86Y6o5WvCx3TrsOGqs+YyqS+KtLMm2BioHSKyw==",
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-0.11.4.tgz",
+      "integrity": "sha512-KTietd+thBzeen9yP0WWzHJDAaqoey1H3AXvjaF94ypQQKdUaIzSmIop9Z3lJK44ynlYiI+dSzFYQbRdbpd0/w==",
      "requires": {
-        "@blueprintjs/core": "^3.47.0",
+        "@blueprintjs/core": "^3.49.1",
        "@popperjs/core": "^2.5.4",
        "classnames": "^2.2",
        "dom4": "^2.1.5",
@@ -1135,57 +1142,6 @@
        "tslib": "~1.13.0"
      },
      "dependencies": {
-        "@blueprintjs/core": {
-          "version": "3.47.0",
-          "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-3.47.0.tgz",
-          "integrity": "sha512-u+bfmCyPXwKZMnwY4+e/iWjO2vDUvr8hA8ydmV0afyvcEe7Sh85UPEorIgQ/CBuRIbVMNm8FpLsFzDxgkfrCNA==",
-          "requires": {
-            "@blueprintjs/icons": "^3.27.0",
-            "@types/dom4": "^2.0.1",
-            "classnames": "^2.2",
-            "dom4": "^2.1.5",
-            "normalize.css": "^8.0.1",
-            "popper.js": "^1.16.1",
-            "react-lifecycles-compat": "^3.0.4",
-            "react-popper": "^1.3.7",
-            "react-transition-group": "^2.9.0",
-            "resize-observer-polyfill": "^1.5.1",
-            "tslib": "~1.13.0"
-          },
-          "dependencies": {
-            "react-popper": {
-              "version": "1.3.11",
-              "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
-              "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
-              "requires": {
-                "@babel/runtime": "^7.1.2",
-                "@hypnosphi/create-react-context": "^0.3.1",
-                "deep-equal": "^1.1.1",
-                "popper.js": "^1.14.4",
-                "prop-types": "^15.6.1",
-                "typed-styles": "^0.0.7",
-                "warning": "^4.0.2"
-              }
-            }
-          }
-        },
-        "@blueprintjs/icons": {
-          "version": "3.27.0",
-          "resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-3.27.0.tgz",
-          "integrity": "sha512-ItRioyrr2s70chclj5q38HS9omKOa15b3JZXv9JcMIFz+6w6rAcoAH7DA+5xIs27bFjax/SdAZp/eYXSw0+QpA==",
-          "requires": {
-            "classnames": "^2.2",
-            "tslib": "~1.13.0"
-          }
-        },
-        "dom-helpers": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
-          "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
-          "requires": {
-            "@babel/runtime": "^7.1.2"
-          }
-        },
        "react-fast-compare": {
          "version": "3.2.0",
          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
@@ -1200,17 +1156,6 @@
            "warning": "^4.0.2"
          }
        },
-        "react-transition-group": {
-          "version": "2.9.0",
-          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
-          "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
-          "requires": {
-            "dom-helpers": "^3.4.0",
-            "loose-envify": "^1.4.0",
-            "prop-types": "^15.6.2",
-            "react-lifecycles-compat": "^3.0.4"
-          }
-        },
        "tslib": {
          "version": "1.13.0",
          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
@@ -1219,114 +1164,80 @@
      }
    },
    "@blueprintjs/select": {
-      "version": "3.11.2",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-3.11.2.tgz",
-      "integrity": "sha512-fU0Km6QI/ayWhzYeu9N1gTj0+L0XUO4KB3u2LfJXgj648UGY8F4HX2ETdJ+XPdtsu6TesrIL7ghMQhtLcvafBg==",
+      "version": "3.18.5",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-3.18.5.tgz",
+      "integrity": "sha512-KlAzrKRO58DDxd/9TMJX70Sy92qh1LXVh3H8nwPMm9D54VYE2vO+ANj15cswe28eLVTsEx9PYHo+RrMlEnewAw==",
      "requires": {
-        "@blueprintjs/core": "^3.20.0",
+        "@blueprintjs/core": "^3.50.3",
        "classnames": "^2.2",
-        "tslib": "~1.9.0"
+        "tslib": "~1.13.0"
      },
      "dependencies": {
        "tslib": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
-          "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
        }
      }
    },
    "@blueprintjs/table": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/table/-/table-3.8.3.tgz",
-      "integrity": "sha512-ppyXy/8USvTe+HHl6VGJk+GqJalwzutTJNAiZMgpTJh8UglH8/245IpDpIlAYlyNW98RhMtloB+5UuBWHpxmhA==",
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/table/-/table-3.9.7.tgz",
+      "integrity": "sha512-jXk6yYv+oab64zJtuapGOtBfLIpZqA0YSC+9BGFGkfc+xa/YLpyYiLnjxbyrmtlliOFt8dodyuamhKFyvTiisA==",
      "requires": {
-        "@blueprintjs/core": "^3.23.1",
+        "@blueprintjs/core": "^3.50.3",
        "classnames": "^2.2",
-        "prop-types": "^15.6.0",
+        "prop-types": "^15.7.2",
        "react-lifecycles-compat": "^3.0.4",
-        "tslib": "~1.9.0"
+        "tslib": "~1.13.0"
      },
      "dependencies": {
        "tslib": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
-          "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
        }
      }
    },
    "@blueprintjs/timezone": {
-      "version": "3.6.4",
-      "resolved": "https://registry.npmjs.org/@blueprintjs/timezone/-/timezone-3.6.4.tgz",
-      "integrity": "sha512-plgz27yR9xxxqy926iFUCHW/wjjDabxG5Kg7DzvzMR2QyKT1P0mtIFJTIo+51+I9OCZxwGrEcfRv/M0iMqN4yw==",
+      "version": "3.9.13",
+      "resolved": "https://registry.npmjs.org/@blueprintjs/timezone/-/timezone-3.9.13.tgz",
+      "integrity": "sha512-2Tz/InyNOSDELVKw1HA6RgUOtC0rUGydROnStqv099gv3lBsQvSQBMbMtqTZHQf27aGc1Dovty2OumwEu5ZBxQ==",
      "requires": {
-        "@blueprintjs/core": "^3.27.0",
-        "@blueprintjs/select": "^3.13.0",
+        "@blueprintjs/core": "^3.50.3",
+        "@blueprintjs/select": "^3.18.5",
        "classnames": "^2.2",
-        "moment": "^2.24.0",
-        "moment-timezone": "^0.5.27",
-        "tslib": "~1.10.0"
+        "moment": "^2.29.0",
+        "moment-timezone": "^0.5.31",
+        "react-lifecycles-compat": "^3.0.4",
+        "tslib": "~1.13.0"
      },
      "dependencies": {
-        "@blueprintjs/core": {
-          "version": "3.27.0",
-          "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-3.27.0.tgz",
-          "integrity": "sha512-ZzwXENczeC9FnzTJ2XiDR+6YNzb68u1fj2HstKarvfrepW/C+0g4Eojo5vi2KWlNw5+RUu/MG7sZc8i7698pQw==",
-          "requires": {
-            "@blueprintjs/icons": "^3.17.0",
-            "@types/dom4": "^2.0.1",
-            "classnames": "^2.2",
-            "dom4": "^2.1.5",
-            "normalize.css": "^8.0.1",
-            "popper.js": "^1.15.0",
-            "react-lifecycles-compat": "^3.0.4",
-            "react-popper": "^1.3.7",
-            "react-transition-group": "^2.9.0",
-            "resize-observer-polyfill": "^1.5.1",
-            "tslib": "~1.10.0"
-          },
-          "dependencies": {
-            "react-transition-group": {
-              "version": "2.9.0",
-              "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
-              "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
-              "requires": {
-                "dom-helpers": "^3.4.0",
-                "loose-envify": "^1.4.0",
-                "prop-types": "^15.6.2",
-                "react-lifecycles-compat": "^3.0.4"
-              }
-            }
-          }
+        "moment": {
+          "version": "2.29.1",
+          "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+          "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
        },
-        "@blueprintjs/icons": {
-          "version": "3.17.0",
-          "resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-3.17.0.tgz",
-          "integrity": "sha512-DRUIxVe0V7eeKYxKFl9bEmQvdpqmMbSUsJjKl9ACgXUQ1wksd2oaFTNLBQEToui/RAWpybWLCl39AG3rlJQeYQ==",
-          "requires": {
-            "classnames": "^2.2",
-            "tslib": "~1.10.0"
-          }
-        },
-        "@blueprintjs/select": {
-          "version": "3.13.0",
-          "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-3.13.0.tgz",
-          "integrity": "sha512-DwLEpZee95xeO1tyCs8SLgP6yb9mp2l/B34N2MOsRL7eXZb+EiILR8fxnCzwx6/D7JL+WKsPP9UHhCOLaTbYug==",
-          "requires": {
-            "@blueprintjs/core": "^3.27.0",
-            "classnames": "^2.2",
-            "tslib": "~1.10.0"
-          }
-        },
-        "dom-helpers": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
-          "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
-          "requires": {
-            "@babel/runtime": "^7.1.2"
-          }
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
        }
      }
    },
+    "@casl/ability": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/@casl/ability/-/ability-5.4.3.tgz",
+      "integrity": "sha512-X6U79udKkfS7459Y3DCkw58ZQno7BD9VJa5GnTL1rcKRACqERMVDs7qjVMW+JlLUZcT5DB2/GF5uvu0KsudEcA==",
+      "requires": {
+        "@ucast/mongo2js": "^1.3.0"
+      }
+    },
+    "@casl/react": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@casl/react/-/react-2.3.0.tgz",
+      "integrity": "sha512-xP5G9ShXviE56IrU4mPpj1K7bl8KmNOjz3e4YgwrirmRdtZ38rF70a5AkFotWX9hgdH2mqZK/VHiYDGAIlYu1Q=="
+    },
    "@cnakazawa/watch": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
@@ -1346,6 +1257,29 @@
      "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
      "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
    },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
    "@formatjs/intl-unified-numberformat": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/@formatjs/intl-unified-numberformat/-/intl-unified-numberformat-3.2.0.tgz",
@@ -1393,15 +1327,6 @@
        "@hapi/hoek": "^8.3.0"
      }
    },
-    "@hypnosphi/create-react-context": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
-      "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
-      "requires": {
-        "gud": "^1.0.0",
-        "warning": "^4.0.3"
-      }
-    },
    "@jest/console": {
      "version": "24.9.0",
      "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
@@ -1668,6 +1593,88 @@
        }
      }
    },
+    "@sentry/browser": {
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.13.2.tgz",
+      "integrity": "sha512-bkFXK4vAp2UX/4rQY0pj2Iky55Gnwr79CtveoeeMshoLy5iDgZ8gvnLNAz7om4B9OQk1u7NzLEa4IXAmHTUyag==",
+      "requires": {
+        "@sentry/core": "6.13.2",
+        "@sentry/types": "6.13.2",
+        "@sentry/utils": "6.13.2",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@sentry/core": {
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.13.2.tgz",
+      "integrity": "sha512-snXNNFLwlS7yYxKTX4DBXebvJK+6ikBWN6noQ1CHowvM3ReFBlrdrs0Z0SsSFEzXm2S4q7f6HHbm66GSQZ/8FQ==",
+      "requires": {
+        "@sentry/hub": "6.13.2",
+        "@sentry/minimal": "6.13.2",
+        "@sentry/types": "6.13.2",
+        "@sentry/utils": "6.13.2",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@sentry/hub": {
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.13.2.tgz",
+      "integrity": "sha512-sppSuJdNMiMC/vFm/dQowCBh11uTrmvks00fc190YWgxHshodJwXMdpc+pN61VSOmy2QA4MbQ5aMAgHzPzel3A==",
+      "requires": {
+        "@sentry/types": "6.13.2",
+        "@sentry/utils": "6.13.2",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@sentry/minimal": {
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.13.2.tgz",
+      "integrity": "sha512-6iJfEvHzzpGBHDfLxSHcGObh73XU1OSQKWjuhDOe7UQDyI4BQmTfcXAC+Fr8sm8C/tIsmpVi/XJhs8cubFdSMw==",
+      "requires": {
+        "@sentry/hub": "6.13.2",
+        "@sentry/types": "6.13.2",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@sentry/react": {
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-6.13.2.tgz",
+      "integrity": "sha512-aLkWyn697LTcmK1PPnUg5UJcyBUPoI68motqgBY53SIYDAwOeYNUQt2aanDuOTY5aE2PdnJwU48klA8vuYkoRQ==",
+      "requires": {
+        "@sentry/browser": "6.13.2",
+        "@sentry/minimal": "6.13.2",
+        "@sentry/types": "6.13.2",
+        "@sentry/utils": "6.13.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@sentry/tracing": {
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-6.13.2.tgz",
+      "integrity": "sha512-bHJz+C/nd6biWTNcYAu91JeRilsvVgaye4POkdzWSmD0XoLWHVMrpCQobGpXe7onkp2noU3YQjhqgtBqPHtnpw==",
+      "requires": {
+        "@sentry/hub": "6.13.2",
+        "@sentry/minimal": "6.13.2",
+        "@sentry/types": "6.13.2",
+        "@sentry/utils": "6.13.2",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@sentry/types": {
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.13.2.tgz",
+      "integrity": "sha512-6WjGj/VjjN8LZDtqJH5ikeB1o39rO1gYS6anBxiS3d0sXNBb3Ux0pNNDFoBxQpOhmdDHXYS57MEptX9EV82gmg=="
+    },
+    "@sentry/utils": {
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.13.2.tgz",
+      "integrity": "sha512-foF4PbxqPMWNbuqdXkdoOmKm3quu3PP7Q7j/0pXkri4DtCuvF/lKY92mbY0V9rHS/phCoj+3/Se5JvM2ymh2/w==",
+      "requires": {
+        "@sentry/types": "6.13.2",
+        "tslib": "^1.9.3"
+      }
+    },
    "@sheerun/mutationobserver-shim": {
      "version": "0.3.2",
      "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz",
@@ -2294,6 +2301,37 @@
        "tsutils": "^3.17.1"
      }
    },
+    "@ucast/core": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@ucast/core/-/core-1.10.1.tgz",
+      "integrity": "sha512-sXKbvQiagjFh2JCpaHUa64P4UdJbOxYeC5xiZFn8y6iYdb0WkismduE+RmiJrIjw/eLDYmIEXiQeIYYowmkcAw=="
+    },
+    "@ucast/js": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@ucast/js/-/js-3.0.2.tgz",
+      "integrity": "sha512-zxNkdIPVvqJjHI7D/iK8Aai1+59yqU+N7bpHFodVmiTN7ukeNiGGpNmmSjQgsUw7eNcEBnPrZHNzp5UBxwmaPw==",
+      "requires": {
+        "@ucast/core": "^1.0.0"
+      }
+    },
+    "@ucast/mongo": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@ucast/mongo/-/mongo-2.4.2.tgz",
+      "integrity": "sha512-/zH1TdBJlYGKKD+Wh0oyD+aBvDSWrwHcD8b4tUL9UgHLhzHtkEnMVFuxbw3SRIRsAa01wmy06+LWt+WoZdj1Bw==",
+      "requires": {
+        "@ucast/core": "^1.4.1"
+      }
+    },
+    "@ucast/mongo2js": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@ucast/mongo2js/-/mongo2js-1.3.3.tgz",
+      "integrity": "sha512-sBPtMUYg+hRnYeVYKL+ATm8FaRPdlU9PijMhGYKgsPGjV9J4Ks41ytIjGayvKUnBOEhiCaKUUnY4qPeifdqATw==",
+      "requires": {
+        "@ucast/core": "^1.6.1",
+        "@ucast/js": "^3.0.0",
+        "@ucast/mongo": "^2.4.0"
+      }
+    },
    "@webassemblyjs/ast": {
      "version": "1.8.5",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@@ -2876,17 +2914,17 @@
      "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
    },
    "axios": {
-      "version": "0.21.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.2.tgz",
-      "integrity": "sha512-87otirqUw3e8CzHTMO+/9kh/FSgXt/eVDvipijwDtEuwbkySWZ9SBm6VEubmJ/kLKEoLQV/POhxXFb66bfekfg==",
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
      "requires": {
        "follow-redirects": "^1.14.0"
      },
      "dependencies": {
        "follow-redirects": {
-          "version": "1.14.4",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz",
-          "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g=="
+          "version": "1.14.6",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
+          "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
        }
      }
    },
@@ -3034,6 +3072,49 @@
      "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz",
      "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA=="
    },
+    "babel-plugin-styled-components": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.2.tgz",
+      "integrity": "sha512-7eG5NE8rChnNTDxa6LQfynwgHTVOYYaHJbUYSlOhk8QBXIQiMBKq4gyfHBBKPrxUcVBXVJL61ihduCpCQbuNbw==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      },
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.16.7",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
+          "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
+          "requires": {
+            "@babel/types": "^7.16.7"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.16.7",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
+          "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
+          "requires": {
+            "@babel/types": "^7.16.7"
+          }
+        },
+        "@babel/types": {
+          "version": "7.16.7",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz",
+          "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.16.7",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
    "babel-plugin-syntax-object-rest-spread": {
      "version": "6.13.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3637,6 +3718,11 @@
        }
      }
    },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
    "caniuse-api": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -4494,6 +4580,11 @@
        "postcss": "^7.0.5"
      }
    },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
    "css-color-names": {
      "version": "0.0.4",
      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4593,6 +4684,16 @@
      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
    },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
    "css-tree": {
      "version": "1.0.0-alpha.37",
      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -4957,6 +5058,11 @@
      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
    },
+    "dependency-graph": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
+      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg=="
+    },
    "des.js": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -6186,9 +6292,9 @@
      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
    },
    "fast-deep-equal": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
-      "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
    },
    "fast-glob": {
      "version": "3.2.7",
@@ -6241,9 +6347,9 @@
          }
        },
        "picomatch": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-          "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw=="
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+          "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
        },
        "to-regex-range": {
          "version": "5.0.1",
@@ -6873,9 +6979,9 @@
          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
        },
        "ignore": {
-          "version": "5.1.8",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+          "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ=="
        },
        "slash": {
          "version": "3.0.0",
@@ -12268,9 +12374,9 @@
      "integrity": "sha512-djJUgGNze7YdWzJA1kYO1eKXAMpP+Z4sMulmEuTVi6vEXzfuQCJs6yD8hhgWj23vvJPZL5b8NyabxteyF8Hq/g=="
    },
    "react-day-picker": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-7.3.2.tgz",
-      "integrity": "sha512-mij2j2Un/v2V2ow+hf/hFBMdl6Eis/C/YhBtlI6Xpbvh3Q6WMix78zEkCdw6i9GldafOrpnupWKofv/h5oSI4g==",
+      "version": "7.4.9",
+      "resolved": "http://176.58.99.106:4873/react-day-picker/-/react-day-picker-7.4.9.tgz",
+      "integrity": "sha512-CcXf0p7p6gTYnG0+n/4wNGljZuQDXl4HhgcxsXB0nX+8D4LnRho9EclPA/aLz4WlvvVpfY+AEgj2ylgPj4nm/g==",
      "requires": {
        "prop-types": "^15.6.2"
      }
@@ -12315,11 +12421,11 @@
          }
        },
        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+          "version": "7.16.7",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.7.tgz",
+          "integrity": "sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==",
          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
+            "@babel/helper-validator-identifier": "^7.16.7",
            "chalk": "^2.0.0",
            "js-tokens": "^4.0.0"
          }
@@ -12336,9 +12442,9 @@
          }
        },
        "caniuse-lite": {
-          "version": "1.0.30001261",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001261.tgz",
-          "integrity": "sha512-vM8D9Uvp7bHIN0fZ2KQ4wnmYFpJo/Etb4Vwsuc+ka0tfGDHvOPrFm6S/7CCNLSOkAUjenT2HnUPESdOIL91FaA=="
+          "version": "1.0.30001295",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001295.tgz",
+          "integrity": "sha512-lSP16vcyC0FEy0R4ECc9duSPoKoZy+YkpGkue9G4D81OfPnliopaZrU10+qtPdT8PbGXad/PNx43TIQrOmJZSQ=="
        },
        "cross-spawn": {
          "version": "7.0.3",
@@ -12351,9 +12457,9 @@
          }
        },
        "electron-to-chromium": {
-          "version": "1.3.853",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.853.tgz",
-          "integrity": "sha512-W4U8n+U8I5/SUaFcqZgbKRmYZwcyEIQVBDf+j5QQK6xChjXnQD+wj248eGR9X4u+dDmDR//8vIfbu4PrdBBIoQ=="
+          "version": "1.4.31",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.31.tgz",
+          "integrity": "sha512-t3XVQtk+Frkv6aTD4RRk0OqosU+VLe1dQFW83MDer78ZD6a52frgXuYOIsLYTQiH2Lm+JB2OKYcn7zrX+YGAiQ=="
        },
        "emojis-list": {
          "version": "3.0.0",
@@ -12406,9 +12512,9 @@
          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
        },
        "node-releases": {
-          "version": "1.1.76",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.76.tgz",
-          "integrity": "sha512-9/IECtNr8dXNmPWmFXepT0/7o5eolGesHUa3mtr0KlgnCvnZxwh2qensKL42JJY2vQKC3nIBXetFAqR+PW1CmA=="
+          "version": "1.1.77",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz",
+          "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ=="
        },
        "p-locate": {
          "version": "4.1.0",
@@ -12527,9 +12633,9 @@
      }
    },
    "react-error-overlay": {
-      "version": "6.0.9",
-      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
-      "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
+      "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
    },
    "react-fast-compare": {
      "version": "2.0.4",
@@ -13963,6 +14069,11 @@
        }
      }
    },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
    "shebang-command": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -14680,6 +14791,23 @@
        }
      }
    },
+    "styled-components": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
+      "integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
    "stylehacks": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -14707,6 +14835,56 @@
      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.0.tgz",
      "integrity": "sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw=="
    },
+    "stylis-rtlcss": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/stylis-rtlcss/-/stylis-rtlcss-2.1.1.tgz",
+      "integrity": "sha512-xkX24OO/U0hLGW9m2SUpz3yPDQBX+ltV0mkQLfj3SwcCzm3NZe5spONHpZU2uTQ01MuDQzfOx/5GQWZ6APjmHw==",
+      "requires": {
+        "rtlcss": "^2.6.0"
+      },
+      "dependencies": {
+        "@choojs/findup": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/@choojs/findup/-/findup-0.2.1.tgz",
+          "integrity": "sha512-YstAqNb0MCN8PjdLCDfRsBcGVRN41f3vgLvaI0IrIcBp4AqILRSS0DeWNGkicC+f/zRIPJLc+9RURVSepwvfBw==",
+          "requires": {
+            "commander": "^2.15.1"
+          }
+        },
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "rtlcss": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.6.2.tgz",
+          "integrity": "sha512-06LFAr+GAPo+BvaynsXRfoYTJvSaWRyOhURCQ7aeI1MKph9meM222F+Zkt3bDamyHHJuGi3VPtiRkpyswmQbGA==",
+          "requires": {
+            "@choojs/findup": "^0.2.1",
+            "chalk": "^2.4.2",
+            "mkdirp": "^0.5.1",
+            "postcss": "^6.0.23",
+            "strip-json-comments": "^2.0.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+        }
+      }
+    },
    "supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
--- a/package.json
+++ b/package.json
@@ -1,16 +1,20 @@
 {
  "name": "bigcapital-client",
-  "version": "1.2.0",
+  "version": "1.5.3",
  "private": true,
  "dependencies": {
    "@babel/core": "7.8.4",
-    "@blueprintjs/core": "^3.38.1",
-    "@blueprintjs/datetime": "^3.15.2",
+    "@blueprintjs/core": "^3.50.2",
+    "@blueprintjs/datetime": "^3.23.12",
    "@blueprintjs/popover2": "^0.11.1",
    "@blueprintjs/select": "^3.11.2",
    "@blueprintjs/table": "^3.8.3",
    "@blueprintjs/timezone": "^3.6.2",
+    "@casl/ability": "^5.4.3",
+    "@casl/react": "^2.3.0",
    "@reduxjs/toolkit": "^1.2.5",
+    "@sentry/react": "^6.13.2",
+    "@sentry/tracing": "^6.13.2",
    "@svgr/webpack": "4.3.3",
    "@tanem/react-nprogress": "^3.0.24",
    "@testing-library/jest-dom": "^4.2.4",
@@ -32,6 +36,7 @@
    "cross-env": "^7.0.2",
    "css-loader": "3.4.2",
    "deep-map-keys": "^2.0.1",
+    "dependency-graph": "^0.11.0",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "eslint": "^6.6.0",
@@ -42,6 +47,7 @@
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.18.0",
    "eslint-plugin-react-hooks": "^1.6.1",
+    "fast-deep-equal": "^3.1.3",
    "file-loader": "4.3.0",
    "flow-bin": "^0.123.0",
    "formik": "^2.2.5",
@@ -101,6 +107,8 @@
    "sass-loader": "8.0.2",
    "semver": "6.3.0",
    "style-loader": "0.23.1",
+    "styled-components": "^5.3.1",
+    "stylis-rtlcss": "^2.1.1",
    "terser-webpack-plugin": "2.3.4",
    "ts-pnp": "1.1.5",
    "url-loader": "2.3.0",
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,11 @@
 <html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicons/favicon-32.ico" sizes="32x32">
+    <link
+      rel="icon"
+      href="%PUBLIC_URL%/favicons/favicon-32.ico"
+      sizes="32x32"
+    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
@@ -15,6 +19,22 @@
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- Hotjar Tracking Code for https://app.bigcapital.ly/ -->
+    <script>
+      (function (h, o, t, j, a, r) {
+        h.hj =
+          h.hj ||
+          function () {
+            (h.hj.q = h.hj.q || []).push(arguments);
+          };
+        h._hjSettings = { hjid: 2774528, hjsv: 6 };
+        a = o.getElementsByTagName('head')[0];
+        r = o.createElement('script');
+        r.async = 1;
+        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+        a.appendChild(r);
+      })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
+    </script>
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
@@ -41,7 +61,11 @@
      To create a production bundle, use `npm run build` or `yarn build`.
    -->

-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css"
+      type="text/css"
+    />
    <!-- <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet"> -->
    <!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> -->
  </body>
--- a/src/common/TableStyle.js
+++ b/src/common/TableStyle.js
@@ -0,0 +1,6 @@
+
+
+export const TableStyle = {
+  Constrant: 'constrant',
+  Regular: 'regular'
+}
--- a/src/common/abilityOption.js
+++ b/src/common/abilityOption.js
@@ -0,0 +1,178 @@
+export const AbilitySubject = {
+  Item: 'Item',
+  InventoryAdjustment: 'InventoryAdjustment',
+  Estimate: 'SaleEstimate',
+  Invoice: 'SaleInvoice',
+  Receipt: 'SaleReceipt',
+  PaymentReceive: 'PaymentReceive',
+  Bill: 'Bill',
+  PaymentMade: 'PaymentMade',
+  Customer: 'Customer',
+  Vendor: 'Vendor',
+  Account: 'Account',
+  ManualJournal: 'ManualJournal',
+  Expense: 'Expense',
+  Cashflow: 'Cashflow',
+  Report: 'Report',
+  Preferences: 'Preferences',
+  ExchangeRate: 'ExchangeRate',
+  SubscriptionBilling: 'SubscriptionBilling',
+  CreditNote: 'CreditNote',
+  VendorCredit: 'VendorCredit',
+};
+
+export const ItemAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const InventoryAdjustmentAction = {
+  Create: 'Create',
+  Edit: 'Edit',
+  View: 'View',
+  Delete: 'Delete',
+};
+
+export const SaleEstimateAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const SaleInvoiceAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  Writeoff: 'bad-debt',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const SaleReceiptAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const PaymentReceiveAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const CreditNoteAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  Refund: 'Refund'
+};
+
+export const VendorCreditAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  Refund: 'Refund'
+};
+export const BillAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  NotifyBySms: 'NotifyBySms',
+};
+
+export const PaymentMadeAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const CustomerAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const VendorAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const AccountAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  TransactionsLocking: 'TransactionsLocking',
+};
+
+export const ManualJournalAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+  TransactionLocking: 'TransactionLocking',
+};
+
+export const ExpenseAction = {
+  View: 'View',
+  Create: 'Create',
+  Edit: 'Edit',
+  Delete: 'Delete',
+};
+
+export const CashflowAction = {
+  View: 'View',
+  Create: 'Create',
+  Delete: 'Delete',
+};
+
+export const ReportsAction = {
+  ALL: 'all',
+  READ_BALANCE_SHEET: 'read-balance-sheet',
+  READ_TRIAL_BALANCE_SHEET: 'read-trial-balance-sheet',
+  READ_PROFIT_LOSS: 'read-profit-loss',
+  READ_JOURNAL: 'read-journal',
+  READ_GENERAL_LEDGET: 'read-general-ledger',
+  READ_CASHFLOW: 'read-cashflow',
+  READ_AR_AGING_SUMMARY: 'read-ar-aging-summary',
+  READ_AP_AGING_SUMMARY: 'read-ap-aging-summary',
+  READ_PURCHASES_BY_ITEMS: 'read-purchases-by-items',
+  READ_SALES_BY_ITEMS: 'read-sales-by-items',
+  READ_CUSTOMERS_TRANSACTIONS: 'read-customers-transactions',
+  READ_VENDORS_TRANSACTIONS: 'read-vendors-transactions',
+  READ_CUSTOMERS_SUMMARY_BALANCE: 'read-customers-summary-balance',
+  READ_VENDORS_SUMMARY_BALANCE: 'read-vendors-summary-balance',
+  READ_INVENTORY_VALUATION_SUMMARY: 'read-inventory-valuation-summary',
+  READ_INVENTORY_ITEM_DETAILS: 'read-inventory-item-details',
+  READ_CASHFLOW_ACCOUNT_TRANSACTION: 'read-cashflow-account-transactions',
+};
+
+export const PreferencesAbility = {
+  Mutate: 'Mutate',
+};
+
+export const ExchangeRateAbility = {
+  View: 'view',
+  Create: 'create',
+  Delete: 'delete',
+};
+
+export const SubscriptionBillingAbility = {
+  View: 'view',
+  Payment: 'payment',
+};
--- a/src/common/cashflowOptions.js
+++ b/src/common/cashflowOptions.js
@@ -0,0 +1,40 @@
+import intl from 'react-intl-universal';
+
+export const addMoneyIn = [
+  {
+    name: intl.get('cash_flow.owner_contribution'),
+    value: 'owner_contribution',
+  },
+  {
+    name: intl.get('cash_flow.other_income'),
+    value: 'other_income',
+  },
+  {
+    name: intl.get('cash_flow.transfer_form_account'),
+    value: 'transfer_from_account',
+  },
+];
+
+export const addMoneyOut = [
+  {
+    name: intl.get('cash_flow.owner_drawings'),
+    value: 'OwnerDrawing',
+  },
+  {
+    name: intl.get('cash_flow.expenses'),
+    value: 'other_expense',
+  },
+  {
+    name: intl.get('cash_flow.transfer_to_account'),
+    value: 'transfer_to_account',
+  },
+];
+
+export const TRANSACRIONS_TYPE = [
+  'OwnerContribution',
+  'OtherIncome',
+  'TransferFromAccount',
+  'OnwersDrawing',
+  'OtherExpense',
+  'TransferToAccount',
+];
--- a/src/common/classes.js
+++ b/src/common/classes.js
@@ -39,6 +39,8 @@ const CLASSES = {
  PAGE_FORM_ITEM: 'page-form--item',
  PAGE_FORM_MAKE_JOURNAL: 'page-form--make-journal-entries',
  PAGE_FORM_EXPENSE: 'page-form--expense',
+  PAGE_FORM_CREDIT_NOTE:'page-form--credit-note',
+  PAGE_FORM_VENDOR_CREDIT_NOTE:'page-form--vendor-credit-note',

  FORM_GROUP_LIST_SELECT: 'form-group--select-list',

@@ -66,6 +68,8 @@ const CLASSES = {
  PREFERENCES_PAGE_INSIDE_CONTENT_USERS: 'preferences-page__inside-content--users',
  PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES: 'preferences-page__inside-content--currencies',
  PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT: 'preferences-page__inside-content--accountant',
+  PREFERENCES_PAGE_INSIDE_CONTENT_SMS_INTEGRATION: 'preferences-page__inside-content--sms-integration',
+  PREFERENCES_PAGE_INSIDE_CONTENT_ROLES_FORM: 'preferences-page__inside-content--roles-form',

  FINANCIAL_REPORT_INSIDER: 'dashboard__insider--financial-report',

--- a/src/common/drawers.js
+++ b/src/common/drawers.js
@@ -9,4 +9,13 @@ export const DRAWERS = {
  EXPENSE_DRAWER: 'expense-drawer',
  BILL_DRAWER: 'bill-drawer',
  INVENTORY_ADJUSTMENT_DRAWER: 'inventory-adjustment-drawer',
+  CASHFLOW_TRNASACTION_DRAWER: 'cashflow-transaction-drawer',
+
+  QUICK_WRITE_VENDOR: 'quick-write-vendor',
+  QUICK_CREATE_CUSTOMER: 'quick-create-customer',
+  QUICK_CREATE_ITEM: 'quick-create-item',
+  CREDIT_NOTE_DETAIL_DRAWER: 'credit-note-detail-drawer',
+  VENDOR_CREDIT_DETAIL_DRAWER: 'vendor-credit-detail-drawer',
+  REFUND_CREDIT_NOTE_DETAIL_DRAWER:'refund-credit-detail-drawer',
+  REFUND_VENDOR_CREDIT_DETAIL_DRAWER:'refund-vendor-detail-drawer'
 };
--- a/src/common/homepageOptions.js
+++ b/src/common/homepageOptions.js
@@ -1,5 +1,21 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
+import {
+  SaleInvoiceAction,
+  SaleEstimateAction,
+  AbilitySubject,
+  SaleReceiptAction,
+  CustomerAction,
+  PaymentReceiveAction,
+  BillAction,
+  VendorAction,
+  PaymentMadeAction,
+  AccountAction,
+  ManualJournalAction,
+  ExpenseAction,
+  ItemAction,
+  ReportsAction,
+} from '../common/abilityOption';

 export const accountsReceivable = [
  {
@@ -9,21 +25,29 @@ export const accountsReceivable = [
        title: <T id={'sales_invoices'} />,
        description: <T id={'tracking_sales_invoices_with_your_customers'} />,
        link: '/invoices',
+        subject: AbilitySubject.Invoice,
+        ability: SaleInvoiceAction.View,
      },
      {
        title: <T id={'sales_estimates'} />,
        description: <T id={'manage_your_sales_estimates_to_create_quotes'} />,
        link: '/estimates',
+        subject: AbilitySubject.Estimate,
+        ability: SaleEstimateAction.View,
      },
      {
        title: <T id={'sales_receipts'} />,
        description: <T id={'manage_sales_receipts_for_sales_that_get_paid'} />,
        link: '/receipts',
+        subject: AbilitySubject.Receipt,
+        ability: SaleReceiptAction.View,
      },
      {
        title: <T id={'customers'} />,
        description: <T id={'manage_the_customers_relations_with_customer'} />,
        link: '/customers',
+        subject: AbilitySubject.Customer,
+        ability: CustomerAction.View,
      },
      {
        title: <T id={'customers_payments'} />,
@@ -31,6 +55,8 @@ export const accountsReceivable = [
          <T id={'manage_payment_transactions_from_your_customers'} />
        ),
        link: '/payment-receives',
+        subject: AbilitySubject.PaymentReceive,
+        ability: PaymentReceiveAction.View,
      },
    ],
  },
@@ -46,6 +72,8 @@ export const accountsPayable = [
          <T id={'manage_the_purchase_invoices_with_your_vendors'} />
        ),
        link: '/bills',
+        subject: AbilitySubject.Bill,
+        ability: BillAction.View,
      },
      {
        title: <T id={'vendors'} />,
@@ -53,11 +81,15 @@ export const accountsPayable = [
          <T id={'manage_the_vendors_relations_with_vendor_relations'} />
        ),
        link: '/vendors',
+        subject: AbilitySubject.Vendor,
+        ability: VendorAction.View,
      },
      {
        title: <T id={'vendors_payments'} />,
        description: <T id={'manage_payments_transactions_to_your_vendors'} />,
        link: '/payment-mades',
+        subject: AbilitySubject.PaymentMade,
+        ability: PaymentMadeAction.View,
      },
    ],
  },
@@ -77,21 +109,35 @@ export const financialAccounting = [
          />
        ),
        link: '/accounts',
+        subject: AbilitySubject.Account,
+        ability: AccountAction.View,
      },
      {
-        title: <T id={'manual_journal'}/>,
-        description:<T id={'manage_manual_journal_transactions_on_accounts'}/>,
+        title: <T id={'manual_journal'} />,
+        description: (
+          <T id={'manage_manual_journal_transactions_on_accounts'} />
+        ),
        link: '/manual-journals',
+        subject: AbilitySubject.ManualJournal,
+        ability: ManualJournalAction.View,
      },
      {
-        title: <T id={'expenses'}/>,
-        description:<T id={'track_your_indirect_expenses_under_specific_categories'}/>,
+        title: <T id={'expenses'} />,
+        description: (
+          <T id={'track_your_indirect_expenses_under_specific_categories'} />
+        ),
        link: '/expenses',
+        subject: AbilitySubject.Expense,
+        ability: ExpenseAction.View,
      },
      {
-        title: <T id={'financial_statements'}/>,
-        description:<T id={'show_financial_reports_about_your_organization'}/>,
+        title: <T id={'financial_statements'} />,
+        description: (
+          <T id={'show_financial_reports_about_your_organization'} />
+        ),
        link: '/financial-reports',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.ALL,
      },
    ],
  },
@@ -102,19 +148,27 @@ export const productsServices = [
    sectionTitle: <T id={'products_services_inventory'} />,
    shortcuts: [
      {
-        title: <T id={'products_services'}/>,
-        description:<T id={'manage_your_products_inventory_or_non_inventory'}/>,
+        title: <T id={'products_services'} />,
+        description: (
+          <T id={'manage_your_products_inventory_or_non_inventory'} />
+        ),
        link: '/items',
+        subject: AbilitySubject.Item,
+        ability: ItemAction.View,
      },
      {
-        title: <T id={'products_services_categories'}/>,
-        description:<T id={'group_your_products_and_service'}/>,
+        title: <T id={'products_services_categories'} />,
+        description: <T id={'group_your_products_and_service'} />,
        link: 'items/categories',
      },
      {
-        title: <T id={'inventory_adjustments'}/>,
-        description: <T id={'manage_your_inventory_adjustment_of_inventory_items'}/>,
+        title: <T id={'inventory_adjustments'} />,
+        description: (
+          <T id={'manage_your_inventory_adjustment_of_inventory_items'} />
+        ),
        link: '/inventory-adjustments',
+        subject: AbilitySubject.InventoryAdjustment,
+        ability: SaleInvoiceAction.View,
      },
    ],
  },
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -0,0 +1,4 @@
+
+
+
+export * from './TableStyle';
--- a/src/common/itemPaymentTranactionsOption.js
+++ b/src/common/itemPaymentTranactionsOption.js
@@ -0,0 +1,51 @@
+import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  SaleEstimateAction,
+  SaleReceiptAction,
+  SaleInvoiceAction,
+  BillAction,
+} from '../common/abilityOption';
+import { useAbilitiesFilter } from '../hooks';
+
+export const getItemPaymentTransactions = () => [
+  {
+    name: 'invoices',
+    label: intl.get('invoices'),
+    permission: {
+      subject: AbilitySubject.Invoice,
+      ability: SaleInvoiceAction.View,
+    },
+  },
+  {
+    name: 'estimates',
+    label: intl.get('estimates'),
+    permission: {
+      subject: AbilitySubject.Estimate,
+      ability: SaleEstimateAction.View,
+    },
+  },
+  {
+    name: 'receipts',
+    label: intl.get('receipts'),
+    permission: {
+      subject: AbilitySubject.Receipt,
+      ability: SaleReceiptAction.View,
+    },
+  },
+  {
+    name: 'bills',
+    label: intl.get('bills'),
+    permission: {
+      subject: AbilitySubject.Bill,
+      ability: BillAction.View,
+    },
+  },
+];
+
+export const useGetItemPaymentTransactionsMenu = () => {
+  const itemTransactionMenu = getItemPaymentTransactions();
+  const abilitiesFilter = useAbilitiesFilter();
+
+  return abilitiesFilter(itemTransactionMenu);
+};
--- a/src/common/keyboardShortcutsOptions.js
+++ b/src/common/keyboardShortcutsOptions.js
@@ -1,102 +1,228 @@
-import React from 'react';
 import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  AccountAction,
+  BillAction,
+  CashflowAction,
+  CustomerAction,
+  ExpenseAction,
+  ItemAction,
+  ManualJournalAction,
+  ReportsAction,
+  SaleEstimateAction,
+  SaleInvoiceAction,
+  SaleReceiptAction,
+  VendorAction,
+} from './abilityOption';

 export default [
  {
    shortcut_key: 'Shift + I',
    description: intl.get('jump_to_the_invoices'),
+    permission: {
+      ability: SaleInvoiceAction.View,
+      subject: AbilitySubject.Invoice,
+    },
  },
  {
    shortcut_key: 'Shift + E',
    description: intl.get('jump_to_the_estimates'),
+    permission: {
+      ability: SaleEstimateAction.View,
+      subject: AbilitySubject.Estimate,
+    },
  },
  {
    shortcut_key: 'Shift + R',
    description: intl.get('jump_to_the_receipts'),
+    permission: {
+      ability: SaleReceiptAction.View,
+      subject: AbilitySubject.Receipt,
+    },
  },
  {
    shortcut_key: 'Shift + X',
    description: intl.get('jump_to_the_expenses'),
+    permission: {
+      ability: ExpenseAction.View,
+      subject: AbilitySubject.Expense,
+    },
  },
  {
    shortcut_key: 'Shift + C',
    description: intl.get('jump_to_the_customers'),
+    permission: {
+      ability: CustomerAction.View,
+      subject: AbilitySubject.Customer,
+    },
  },
  {
    shortcut_key: 'Shift + V',
    description: intl.get('jump_to_the_vendors'),
+    permission: {
+      ability: VendorAction.View,
+      subject: AbilitySubject.Vendor,
+    },
  },
  {
    shortcut_key: 'Shift + A',
    description: intl.get('jump_to_the_chart_of_accounts'),
+    permission: {
+      ability: AccountAction.View,
+      subject: AbilitySubject.Account,
+    },
  },
  {
    shortcut_key: 'Shift + B',
    description: intl.get('jump_to_the_bills'),
+    permission: {
+      ability: BillAction.View,
+      subject: AbilitySubject.Bill,
+    },
  },
  {
    shortcut_key: 'Shift + M',
    description: intl.get('jump_to_the_manual_journals'),
+    permission: {
+      ability: ManualJournalAction.View,
+      subject: AbilitySubject.ManualJournal,
+    },
  },
  {
    shortcut_key: 'Shift + W',
    description: intl.get('jump_to_the_items'),
+    permission: {
+      ability: ItemAction.View,
+      subject: AbilitySubject.Item,
+    },
+  },
+  {
+    shortcut_key: 'Shift + D',
+    description: intl.get('jump_to_the_add_money_in'),
+    permission: {
+      ability: CashflowAction.Create,
+      subject: AbilitySubject.Cashflow,
+    },
+  },
+  {
+    shortcut_key: 'Shift + Q',
+    description: intl.get('jump_to_the_add_money_out'),
+    permission: {
+      ability: CashflowAction.Create,
+      subject: AbilitySubject.Cashflow,
+    },
  },
  {
    shortcut_key: 'Shift + 1',
    description: intl.get('jump_to_the_balance_sheet'),
+    permission: {
+      ability: ReportsAction.READ_BALANCE_SHEET,
+      subject: AbilitySubject.Report,
+    },
  },
  {
    shortcut_key: 'Shift + 2',
    description: intl.get('jump_to_the_profit_loss_sheet'),
+    permission: {
+      ability: ReportsAction.READ_PROFIT_LOSS,
+      subject: AbilitySubject.Report,
+    },
  },
  {
    shortcut_key: 'Shift + 3',
    description: intl.get('jump_to_the_journal_sheet'),
+    permission: {
+      ability: ReportsAction.READ_JOURNAL,
+      subject: AbilitySubject.Report,
+    },
  },
  {
    shortcut_key: 'Shift + 4',
    description: intl.get('jump_to_the_general_ledger_sheet'),
+    permission: {
+      ability: ReportsAction.READ_GENERAL_LEDGET,
+      subject: AbilitySubject.Report,
+    },
  },
  {
    shortcut_key: 'Shift + 5',
    description: intl.get('jump_to_the_trial_balance_sheet'),
+    permission: {
+      ability: ReportsAction.READ_TRIAL_BALANCE_SHEET,
+      subject: AbilitySubject.Report,
+    },
  },
  {
    shortcut_key: 'Ctrl + Shift  + I ',
    description: intl.get('create_a_new_invoice'),
+    permission: {
+      ability: SaleInvoiceAction.Create,
+      subject: AbilitySubject.Invoice,
+    },
  },
  {
    shortcut_key: 'Ctrl + Shift  + E ',
    description: intl.get('create_a_new_estimate'),
+    permission: {
+      ability: SaleEstimateAction.Create,
+      subject: AbilitySubject.Estimate,
+    },
  },
  {
    shortcut_key: 'Ctrl + Shift  + R ',
    description: intl.get('create_a_new_receipt'),
+    permission: {
+      ability: SaleReceiptAction.Create,
+      subject: AbilitySubject.Receipt,
+    },
  },
  {
    shortcut_key: 'Ctrl + Shift  + X ',
    description: intl.get('create_a_new_expense'),
+    permission: {
+      ability: ExpenseAction.Create,
+      subject: AbilitySubject.Expense,
+    },
  },
  {
    shortcut_key: 'Ctrl + Shift  + C ',
    description: intl.get('create_a_new_customer'),
+    permission: {
+      ability: CustomerAction.Create,
+      subject: AbilitySubject.Customer,
+    },
  },
  {
    shortcut_key: 'Ctrl + Shift  + V ',
    description: intl.get('create_a_new_vendor'),
+    permission: {
+      ability: VendorAction.Create,
+      subject: AbilitySubject.Vendor,
+    },
  },
  {
    shortcut_key: 'Ctrl + Shift  + B ',
    description: intl.get('create_a_new_bill'),
+    permission: {
+      ability: BillAction.Create,
+      subject: AbilitySubject.Bill,
+    },
  },
  {
    shortcut_key: 'Ctrl + Shift  + M ',
    description: intl.get('create_a_new_journal'),
+    permission: {
+      ability: ManualJournalAction.Create,
+      subject: AbilitySubject.ManualJournal,
+    },
  },
  {
    shortcut_key: 'Ctrl + Shift  + W ',
    description: intl.get('create_a_new_item'),
+    permission: {
+      ability: ItemAction.Create,
+      subject: AbilitySubject.Item,
+    },
  },
  {
    shortcut_key: 'Ctrl + / ',
--- a/src/common/moreVertOptions.js
+++ b/src/common/moreVertOptions.js
@@ -0,0 +1,12 @@
+import intl from 'react-intl-universal';
+
+export const moreVertOptions = [
+  {
+    name: intl.get('bad_debt.dialog.bad_debt'),
+    value: 'bad debt',
+  },
+  {
+    name: intl.get('bad_debt.dialog.cancel_bad_debt'),
+    value: 'cancel bad debt',
+  },
+];
--- a/src/common/permissionsSchema.js
+++ b/src/common/permissionsSchema.js
@@ -0,0 +1,659 @@
+import { chain } from 'lodash';
+import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  AccountAction,
+  BillAction,
+  CreditNoteAction,
+  CustomerAction,
+  ExpenseAction,
+  ItemAction,
+  ManualJournalAction,
+  PaymentMadeAction,
+  PaymentReceiveAction,
+  ReportsAction,
+  SaleEstimateAction,
+  SaleInvoiceAction,
+  SaleReceiptAction,
+  VendorAction,
+  VendorCreditAction,
+} from './abilityOption';
+
+export const ModulePermissionsStyle = {
+  Columns: 'columns',
+  Vertical: 'vertical',
+};
+
+const PermissionColumn = {
+  View: 'view',
+  Create: 'create',
+  Delete: 'delete',
+  Edit: 'edit',
+};
+
+export const getPermissionsSchema = () => [
+  {
+    label: intl.get('permissions.items_inventory'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.items'),
+        subject: AbilitySubject.Item,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: ItemAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: ItemAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: ItemAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: ItemAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: ItemAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: ItemAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: ItemAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.inventory_adjustment'),
+        subject: AbilitySubject.InventoryAdjustment,
+        permissions: [
+          {
+            label: 'View',
+            key: ItemAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: ItemAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: ItemAction.View }],
+          },
+          {
+            label: 'Edit',
+            key: ItemAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: ItemAction.Create }],
+          },
+          {
+            label: 'Delete',
+            key: ItemAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: ItemAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.contacts'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.customers'),
+        subject: AbilitySubject.Customer,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: CustomerAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: CustomerAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: CustomerAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: CustomerAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: CustomerAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: CustomerAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: CustomerAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.vendors'),
+        subject: AbilitySubject.Vendor,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: VendorAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: VendorAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: VendorAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: VendorAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: VendorAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: VendorAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: VendorAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.sales'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.sale_invoice'),
+        subject: AbilitySubject.Invoice,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: SaleInvoiceAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: SaleInvoiceAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: SaleInvoiceAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: SaleInvoiceAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: SaleInvoiceAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: SaleInvoiceAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: SaleInvoiceAction.Edit }],
+          },
+          {
+            label: intl.get('permissions.column.written_off_invoice'),
+            key: SaleInvoiceAction.Writeoff,
+            depend: [{ key: SaleInvoiceAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.sale_estimate'),
+        subject: AbilitySubject.Estimate,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: SaleEstimateAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: SaleEstimateAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: SaleEstimateAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: SaleEstimateAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: SaleEstimateAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: SaleEstimateAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: SaleEstimateAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.sale_receipt'),
+        subject: AbilitySubject.Receipt,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: SaleReceiptAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: SaleReceiptAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: SaleReceiptAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: SaleReceiptAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: SaleReceiptAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: SaleReceiptAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: SaleReceiptAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.credit_note'),
+        subject: AbilitySubject.CreditNote,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: CreditNoteAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: CreditNoteAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: CreditNoteAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: CreditNoteAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: CreditNoteAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: CreditNoteAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: CreditNoteAction.Edit }],
+          },
+          {
+            label: intl.get('permissions.column.refund_credit_note'),
+            key: CreditNoteAction.Refund,
+            depend: [{ key: CreditNoteAction.View }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.payment_receive'),
+        subject: AbilitySubject.PaymentReceive,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: PaymentReceiveAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: PaymentReceiveAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: PaymentReceiveAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: PaymentReceiveAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: PaymentReceiveAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: PaymentReceiveAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: PaymentReceiveAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.purchases'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.bills'),
+        subject: AbilitySubject.Bill,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: BillAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: BillAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: BillAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: BillAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: BillAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: BillAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: BillAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.vendor_credits'),
+        subject: AbilitySubject.VendorCredit,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: VendorCreditAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: VendorCreditAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: VendorCreditAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: VendorCreditAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: VendorCreditAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: VendorCreditAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: VendorCreditAction.Edit }],
+          },
+          {
+            label: intl.get('permissions.column.refund_vendor_credit'),
+            key: VendorCreditAction.Refund,
+            depend: [{ key: VendorCreditAction.View }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.payment_made'),
+        subject: AbilitySubject.PaymentMade,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: PaymentMadeAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: PaymentMadeAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: PaymentMadeAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: PaymentMadeAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: PaymentMadeAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: PaymentMadeAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: PaymentMadeAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.financial_accounting'),
+    type: ModulePermissionsStyle.Columns,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    columns: [
+      { label: intl.get('permissions.column.view'), key: 'view' },
+      { label: intl.get('permissions.column.create'), key: 'create' },
+      { label: intl.get('permissions.column.edit'), key: 'edit' },
+      { label: intl.get('permissions.column.delete'), key: 'delete' },
+    ],
+    services: [
+      {
+        label: intl.get('permissions.manual_journals'),
+        subject: AbilitySubject.ManualJournal,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: ManualJournalAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: ManualJournalAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: ManualJournalAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: ManualJournalAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: ManualJournalAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: ManualJournalAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: ManualJournalAction.Edit }],
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.chart_of_accounts'),
+        subject: AbilitySubject.Account,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: AccountAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: AccountAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: AccountAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: AccountAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: AccountAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: AccountAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: AccountAction.Edit }],
+          },
+          {
+            label: intl.get('permissions.column.transactions_locking'),
+            key: AccountAction.TransactionsLocking,
+          },
+        ],
+      },
+      {
+        label: intl.get('permissions.expenses'),
+        subject: AbilitySubject.Expense,
+        permissions: [
+          {
+            label: intl.get('permissions.column.view'),
+            key: ExpenseAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: intl.get('permissions.column.create'),
+            key: ExpenseAction.Create,
+            relatedColumn: PermissionColumn.Create,
+            depend: [{ key: ExpenseAction.View }],
+          },
+          {
+            label: intl.get('permissions.column.edit'),
+            key: ExpenseAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+            depend: [{ key: ExpenseAction.Create }],
+          },
+          {
+            label: intl.get('permissions.column.delete'),
+            key: ExpenseAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+            depend: [{ key: ExpenseAction.Edit }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: intl.get('permissions.reports'),
+    type: ModulePermissionsStyle.Vertical,
+    serviceFullAccess: true,
+    moduleFullAccess: true,
+    services: [
+      {
+        label: intl.get('permissions.financial_reports'),
+        subject: AbilitySubject.Report,
+        permissions: [
+          {
+            label: intl.get('permissions.balance_sheet'),
+            key: ReportsAction.READ_BALANCE_SHEET,
+          },
+          {
+            label: intl.get('permissions.trial_balance_sheet'),
+            key: ReportsAction.READ_TRIAL_BALANCE_SHEET,
+          },
+          {
+            label: intl.get('permissions.profit_loss_sheet'),
+            key: ReportsAction.READ_PROFIT_LOSS,
+          },
+          {
+            label: intl.get('permissions.cash_flow_sheet'),
+            key: ReportsAction.READ_CASHFLOW,
+          },
+          {
+            label: intl.get('permissions.journal_sheet'),
+            key: ReportsAction.READ_JOURNAL,
+          },
+          {
+            label: intl.get('permissions.general_ledger'),
+            key: ReportsAction.READ_GENERAL_LEDGET,
+          },
+          {
+            label: intl.get('permissions.a_r_aging_summary_report'),
+            key: ReportsAction.READ_AR_AGING_SUMMARY,
+          },
+          {
+            label: intl.get('permissions.a_r_aging_summary_report'),
+            key: ReportsAction.READ_AP_AGING_SUMMARY,
+          },
+          {
+            label: intl.get('permissions.purchases_by_items'),
+            key: ReportsAction.READ_PURCHASES_BY_ITEMS,
+          },
+          {
+            label: intl.get('permissions.sales_by_items'),
+            key: ReportsAction.READ_SALES_BY_ITEMS,
+          },
+          {
+            label: intl.get('permissions.customers_transactions'),
+            key: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
+          },
+          {
+            label: intl.get('permissions.vendors_transactions'),
+            key: ReportsAction.READ_VENDORS_TRANSACTIONS,
+          },
+          {
+            label: intl.get('permissions.customers_summary_balance'),
+            key: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
+          },
+          {
+            label: intl.get('permissions.vendors_summary_balance'),
+            key: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
+          },
+          {
+            label: intl.get('permissions.inventory_valuation_summary'),
+            key: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+          },
+          {
+            label: intl.get('permissions.inventory_items_details'),
+            key: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
+          },
+          {
+            label: intl.get('permissions.cashflow_account_transactions'),
+            key: ReportsAction.READ_CASHFLOW_ACCOUNT_TRANSACTION,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export function getPermissionsSchemaService(subject) {
+  const permissions = getPermissionsSchema();
+
+  return chain(permissions)
+    .map((perm) => perm.services)
+    .flatten()
+    .find((service) => service.subject === subject)
+    .value();
+}
+
+export function getPermissionsSchemaServices() {
+  const permissions = getPermissionsSchema();
+
+  return chain(permissions)
+    .map((module) => module.services)
+    .flatten()
+    .value();
+}
--- a/src/common/quickNewOptions.js
+++ b/src/common/quickNewOptions.js
@@ -1,10 +1,71 @@
 import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  SaleInvoiceAction,
+  CustomerAction,
+  VendorAction,
+  ManualJournalAction,
+  ExpenseAction,
+} from '../common/abilityOption';
+import { useAbilitiesFilter } from '../hooks';

 export const getQuickNewActions = () => [
-  { path: 'invoices/new', name: intl.get('sale_invoice') },
-  { path: 'bills/new', name: intl.get('purchase_invoice') },
-  { path: 'make-journal-entry', name: intl.get('manual_journal') },
-  { path: 'expenses/new', name: intl.get('expense') },
-  { path: 'customers/new', name: intl.get('customer') },
-  { path: 'vendors/new', name: intl.get('vendor') },
+  {
+    path: 'invoices/new',
+    name: intl.get('sale_invoice'),
+    permission: {
+      subject: AbilitySubject.Invoice,
+      ability: SaleInvoiceAction.Create,
+    },
+  },
+  {
+    path: 'bills/new',
+    name: intl.get('purchase_invoice'),
+    permission: {
+      subject: AbilitySubject.Invoice,
+      ability: SaleInvoiceAction.Create,
+    },
+  },
+  {
+    path: 'make-journal-entry',
+    name: intl.get('manual_journal'),
+    permission: {
+      subject: AbilitySubject.ManualJournal,
+      ability: ManualJournalAction.Create,
+    },
+  },
+  {
+    path: 'expenses/new',
+    name: intl.get('expense'),
+    permission: {
+      subject: AbilitySubject.Expense,
+      ability: ExpenseAction.Create,
+    },
+  },
+  {
+    path: 'customers/new',
+    name: intl.get('customer'),
+    permission: {
+      subject: AbilitySubject.Customer,
+      ability: CustomerAction.Create,
+    },
+  },
+  {
+    path: 'vendors/new',
+    name: intl.get('vendor'),
+    permission: {
+      subject: AbilitySubject.Vendor,
+      ability: VendorAction.Vendor,
+    },
+  },
 ];
+
+/**
+ * Retrieve the dashboard quick new menu items.
+ */
+export const useGetQuickNewMenu = () => {
+  const quickNewMenu = getQuickNewActions();
+  const abilitiesFilter = useAbilitiesFilter();
+
+  return abilitiesFilter(quickNewMenu);
+};
--- a/src/common/resourcesTypes.js
+++ b/src/common/resourcesTypes.js
@@ -11,4 +11,6 @@ export const RESOURCES_TYPES = {
  EXPENSE: 'expense',
  MANUAL_JOURNAL: 'manual_journal',
  ACCOUNT: 'account',
+  CREDIT_NOTE: 'credit_note',
+  VENDOR_CREDIT:'vendor_credit'
 };
--- a/src/common/tables.js
+++ b/src/common/tables.js
@@ -12,4 +12,14 @@ export const TABLES = {
  ACCOUNTS: 'accounts',
  MANUAL_JOURNALS: 'manual_journal',
  EXPENSES: 'expenses',
+  CASHFLOW_ACCOUNTS: 'cashflow_accounts',
+  CASHFLOW_Transactions: 'cashflow_transactions',
+  CREDIT_NOTES: 'credit_notes',
+  VENDOR_CREDITS: 'vendor_credits',
+};
+
+export const TABLE_SIZE = {
+  COMPACT: 'compact',
+  SMALL: 'small',
+  MEDIUM: 'medium',
 };
--- a/src/components/AccountsSelectList.js
+++ b/src/components/AccountsSelectList.js
@@ -1,13 +1,56 @@
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { MenuItem, Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
-import { MenuItemNestedText, FormattedMessage as T } from 'components';
+import * as R from 'ramda';
 import classNames from 'classnames';
+import intl from 'react-intl-universal'
+
+import { MenuItemNestedText, FormattedMessage as T } from 'components';
 import { filterAccountsByQuery } from './utils';
 import { nestedArrayToflatten } from 'utils';
 import { CLASSES } from 'common/classes';

-export default function AccountsSelectList({
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+// Create new account renderer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={intl.get('list.create', { value: `"${query}"` })}
+      active={active}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Create new item from the given query string.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Filters accounts items.
+const filterAccountsPredicater = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ * Accounts select list.
+ */
+function AccountsSelectList({
+  // #withDialogActions
+  openDialog,
+
+  // #ownProps
  accounts,
  initialAccountId,
  selectedAccountId,
@@ -21,6 +64,8 @@ export default function AccountsSelectList({
  filterByNormal,
  filterByRootTypes,

+  allowCreate,
+
  buttonProps = {},
 }) {
  const flattenAccounts = useMemo(
@@ -51,6 +96,7 @@ export default function AccountsSelectList({
    [initialAccountId, filteredAccounts],
  );

+  // Select account item.
  const [selectedAccount, setSelectedAccount] = useState(
    initialAccount || null,
  );
@@ -76,31 +122,25 @@ export default function AccountsSelectList({
    );
  }, []);

-  const onAccountSelect = useCallback(
+  // Handle the account item select.
+  const handleAccountSelect = useCallback(
    (account) => {
-      setSelectedAccount({ ...account });
-      onAccountSelected && onAccountSelected(account);
-    },
-    [setSelectedAccount, onAccountSelected],
-  );
-
-  // Filters accounts items.
-  const filterAccountsPredicater = useCallback(
-    (query, account, _index, exactMatch) => {
-      const normalizedTitle = account.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
-
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
+      if (account.id) {
+        setSelectedAccount({ ...account });
+        onAccountSelected && onAccountSelected(account);
      } else {
-        return (
-          `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
-        );
+        openDialog('account-form');
      }
    },
-    [],
+    [setSelectedAccount, onAccountSelected, openDialog],
  );

+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
  return (
    <Select
      items={filteredAccounts}
@@ -113,11 +153,13 @@ export default function AccountsSelectList({
        inline: popoverFill,
      }}
      filterable={true}
-      onItemSelect={onAccountSelect}
+      onItemSelect={handleAccountSelect}
      disabled={disabled}
      className={classNames('form-group--select-list', {
        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
      })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
    >
      <Button
        disabled={disabled}
@@ -127,3 +169,5 @@ export default function AccountsSelectList({
    </Select>
  );
 }
+
+export default R.compose(withDialogActions)(AccountsSelectList);
--- a/src/components/AccountsSuggestField.js
+++ b/src/components/AccountsSuggestField.js
@@ -2,6 +2,7 @@ import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import { Suggest } from '@blueprintjs/select';
 import intl from 'react-intl-universal';
+import * as R from 'ramda';

 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
@@ -10,10 +11,55 @@ import { MenuItemNestedText, FormattedMessage as T } from 'components';
 import { filterAccountsByQuery } from './utils';
 import { nestedArrayToflatten } from 'utils';

+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+// Create new account renderer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={intl.get('list.create', { value: `"${query}"` })}
+      active={active}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Create new item from the given query string.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Handle input value renderer.
+const handleInputValueRenderer = (inputValue) => {
+  if (inputValue) {
+    return inputValue.name.toString();
+  }
+  return '';
+};
+
+// Filters accounts items.
+const filterAccountsPredicater = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
 /**
 * Accounts suggest field.
 */
-export default function AccountsSuggestField({
+function AccountsSuggestField({
+  // #withDialogActions
+  openDialog,
+
+  // #ownProps
  accounts,
  initialAccountId,
  selectedAccountId,
@@ -26,6 +72,8 @@ export default function AccountsSuggestField({
  filterByNormal,
  filterByRootTypes = [],

+  allowCreate,
+
  ...suggestProps
 }) {
  const flattenAccounts = useMemo(
@@ -69,23 +117,6 @@ export default function AccountsSuggestField({
    }
  }, [selectedAccountId, filteredAccounts, setSelectedAccount]);

-  // Filters accounts items.
-  const filterAccountsPredicater = useCallback(
-    (query, account, _index, exactMatch) => {
-      const normalizedTitle = account.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
-
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
-      } else {
-        return (
-          `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
-        );
-      }
-    },
-    [],
-  );
-
  // Account item of select accounts field.
  const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
    return (
@@ -98,28 +129,31 @@ export default function AccountsSuggestField({
    );
  }, []);

-  const handleInputValueRenderer = (inputValue) => {
-    if (inputValue) {
-      return inputValue.name.toString();
-    }
-    return '';
-  };
-
-  const onAccountSelect = useCallback(
+  const handleAccountSelect = useCallback(
    (account) => {
-      setSelectedAccount({ ...account });
-      onAccountSelected && onAccountSelected(account);
+      if (account.id) {
+        setSelectedAccount({ ...account });
+        onAccountSelected && onAccountSelected(account);
+      } else {
+        openDialog('account-form');
+      }
    },
-    [setSelectedAccount, onAccountSelected],
+    [setSelectedAccount, onAccountSelected, openDialog],
  );

+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
  return (
    <Suggest
      items={filteredAccounts}
      noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
      itemRenderer={accountItem}
      itemPredicate={filterAccountsPredicater}
-      onItemSelect={onAccountSelect}
+      onItemSelect={handleAccountSelect}
      selectedItem={selectedAccount}
      inputProps={{ placeholder: defaultSelectText }}
      resetOnClose={true}
@@ -129,7 +163,11 @@ export default function AccountsSuggestField({
      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
      })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
      {...suggestProps}
    />
  );
 }
+
+export default R.compose(withDialogActions)(AccountsSuggestField);
--- a/src/components/AdvancedFilter/AdvancedFilterValueField.js
+++ b/src/components/AdvancedFilter/AdvancedFilterValueField.js
@@ -4,8 +4,9 @@ import { DateInput } from '@blueprintjs/datetime';
 import moment from 'moment';
 import intl from 'react-intl-universal';
 import { isUndefined } from 'lodash';
+
 import { useAutofocus } from 'hooks';
-import { Choose, ListSelect } from 'components';
+import { T, Choose, ListSelect } from 'components';
 import { momentFormatter } from 'utils';

 function AdvancedFilterEnumerationField({ options, value, ...rest }) {
@@ -19,7 +20,7 @@ function AdvancedFilterEnumerationField({ options, value, ...rest }) {
        minimal: true,
        captureDismiss: true,
      }}
-      defaultText={`Select an option`}
+      defaultText={<T id={'filter.select_option'} />}
      textProp={'label'}
      selectedItemProp={'key'}
      {...rest}
@@ -32,8 +33,7 @@ const IFieldType = {
  BOOLEAN: 'boolean',
  NUMBER: 'number',
  DATE: 'date',
-}
-
+};

 function tansformDateValue(date, defaultValue = null) {
  return date ? moment(date).toDate() : defaultValue;
@@ -46,13 +46,13 @@ export default function AdvancedFilterValueField2({
  fieldType,
  options,
  onChange,
-  isFocus
+  isFocus,
 }) {
  const [localValue, setLocalValue] = React.useState(value);

  React.useEffect(() => {
    if (localValue !== value && !isUndefined(value)) {
-      setLocalValue(value)
+      setLocalValue(value);
    }
  }, [localValue, value]);

@@ -106,10 +106,10 @@ export default function AdvancedFilterValueField2({
            position: Position.BOTTOM,
          }}
          shortcuts={true}
-          placeholder={'Enter date'}
+          placeholder={intl.get('filter.enter_date')}
          fill={true}
          inputProps={{
-            fill: true
+            fill: true,
          }}
        />
      </Choose.When>
@@ -120,7 +120,7 @@ export default function AdvancedFilterValueField2({

      <Choose.Otherwise>
        <InputGroup
-          placeholder={intl.get('value')}
+          placeholder={intl.get('filter.value')}
          onChange={handleInputChange}
          value={localValue}
          inputRef={valueRef}
@@ -128,4 +128,4 @@ export default function AdvancedFilterValueField2({
      </Choose.Otherwise>
    </Choose>
  );
-}
+}
--- a/src/components/Alert/index.js
+++ b/src/components/Alert/index.js
@@ -1,17 +1,60 @@
 import React from 'react';
 import clsx from 'classnames';
+import styled from 'styled-components';

-import Style from './style.module.scss';
-
-export function Alert({ title, description, intent }) {
+export function Alert({ title, description, children, intent, className }) {
  return (
-    <div
-      className={clsx(Style.root, {
-        [`${Style['root_' + intent]}`]: intent,
-      })}
-    >
-      {title && <h3 className={clsx(Style.title)}>{title}</h3>}
-      {description && <p class={clsx(Style.description)}>{description}</p>}
-    </div>
+    <AlertRoot className={clsx(className)} intent={intent}>
+      {title && <AlertTitle>{title}</AlertTitle>}
+      {description && <AlertDesc>{description}</AlertDesc>}
+      {children && <AlertDesc>{children}</AlertDesc>}
+    </AlertRoot>
  );
 }
+
+const AlertRoot = styled.div`
+  border: 1px solid rgb(223, 227, 230);
+  padding: 12px;
+  border-radius: 6px;
+  margin-bottom: 20px;
+
+  ${(props) =>
+    props.intent === 'danger' &&
+    `
+    border-color: rgb(249, 198, 198);
+    background: rgb(255, 248, 248);
+
+    ${AlertDesc} {
+      color: #d95759;
+    }
+    ${AlertTitle} {
+      color: rgb(205, 43, 49);
+    }
+  `}
+
+  ${(props) =>
+    props.intent === 'primary' &&
+    `
+    background: #fff;
+    border-color: #98a8ee;
+
+    ${AlertTitle} {
+      color: #1a3bd4;
+    }
+    ${AlertDesc} {
+      color: #455883;
+    }
+  `}
+`;
+
+export const AlertTitle = styled.h3`
+  color: rgb(17, 24, 28);
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 600;
+`;
+
+export const AlertDesc = styled.p`
+  color: rgb(104, 112, 118);
+  margin: 0;
+`;
--- a/src/components/Alert/style.module.scss
+++ b/src/components/Alert/style.module.scss
@@ -1,32 +0,0 @@
-.root {
-  border: 1px solid rgb(223, 227, 230);
-  padding: 12px;
-  border-radius: 6px;
-  margin-bottom: 20px;
-
-  &_danger {
-    border-color: rgb(249, 198, 198);
-    background: rgb(255, 248, 248);
-
-    .description {
-      color: #d95759;
-    }
-
-    .title {
-      color: rgb(205, 43, 49);
-    }
-  }
-}
-
-
-.title {
-  color: rgb(17, 24, 28);
-  margin-bottom: 4px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.description {
-  color: rgb(104, 112, 118);
-  margin: 0;
-}
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -6,15 +6,38 @@ import { ReactQueryDevtools } from 'react-query/devtools';

 import 'style/App.scss';
 import 'moment/locale/ar-ly';
-import 'moment/locale/es-us'
+import 'moment/locale/es-us';

 import AppIntlLoader from './AppIntlLoader';
 import PrivateRoute from 'components/Guards/PrivateRoute';
 import GlobalErrors from 'containers/GlobalErrors/GlobalErrors';
 import DashboardPrivatePages from 'components/Dashboard/PrivatePages';
 import Authentication from 'components/Authentication';
-import { SplashScreen } from '../components';
-import { queryConfig } from '../hooks/query/base'
+
+import { SplashScreen, DashboardThemeProvider } from '../components';
+import { queryConfig } from '../hooks/query/base';
+
+/**
+ * App inner.
+ */
+function AppInsider({ history }) {
+  return (
+    <div className="App">
+      <DashboardThemeProvider>
+        <Router history={history}>
+          <Switch>
+            <Route path={'/auth'} component={Authentication} />
+            <Route path={'/'}>
+              <PrivateRoute component={DashboardPrivatePages} />
+            </Route>
+          </Switch>
+        </Router>
+
+        <GlobalErrors />
+      </DashboardThemeProvider>
+    </div>
+  );
+}

 /**
 * Core application.
@@ -31,21 +54,10 @@ export default function App() {
      <SplashScreen />

      <AppIntlLoader>
-        <div className="App">
-          <Router history={history}>
-            <Switch>
-              <Route path={'/auth'} component={Authentication} />
-              <Route path={'/'}>
-                <PrivateRoute component={DashboardPrivatePages} />
-              </Route>
-            </Switch>
-          </Router>
-
-          <GlobalErrors />
-        </div>
+        <AppInsider history={history} />
      </AppIntlLoader>

      <ReactQueryDevtools initialIsOpen />
    </QueryClientProvider>
  );
-}
+}
--- a/src/components/AppIntlLoader.js
+++ b/src/components/AppIntlLoader.js
@@ -7,9 +7,10 @@ import rtlDetect from 'rtl-detect';
 import * as R from 'ramda';

 import { AppIntlProvider } from './AppIntlProvider';
+import { useSplashLoading } from '../hooks/state';

+import { useWatchImmediate } from '../hooks';
 import withDashboardActions from '../containers/Dashboard/withDashboardActions';
-import withDashboard from '../containers/Dashboard/withDashboard';

 const SUPPORTED_LOCALES = [
  { name: 'English', value: 'en' },
@@ -63,20 +64,13 @@ function transformMomentLocale(currentLocale) {
 }

 /**
- * Application Intl loader.
+ * Loads application locales of the given current locale.
+ * @param {string} currentLocale
+ * @returns {{ isLoading: boolean }}
 */
-function AppIntlLoader({ appIntlIsLoading, setAppIntlIsLoading, children }) {
-  const [isLocalsLoading, setIsLocalsLoading] = React.useState(true);
-  const [isYupLoading, setIsYupLoading] = React.useState(true);
-
-  // Retrieve the current locale.
-  const currentLocale = getCurrentLocal();
-
-  // Detarmines the document direction based on the given locale.
-  const isRTL = rtlDetect.isRtlLang(currentLocale);
-
-  // Modifies the html document direction
-  useDocumentDirectionModifier(currentLocale, isRTL);
+function useAppLoadLocales(currentLocale) {
+  const [startLoading, stopLoading] = useSplashLoading();
+  const [isLoading, setIsLoading] = React.useState(true);

  React.useEffect(() => {
    // Lodas the locales data file.
@@ -91,33 +85,72 @@ function AppIntlLoader({ appIntlIsLoading, setAppIntlIsLoading, children }) {
      })
      .then(() => {
        moment.locale(transformMomentLocale(currentLocale));
-        setIsLocalsLoading(false);
+        setIsLoading(false);
      });
-  }, [currentLocale, setIsLocalsLoading]);
+  }, [currentLocale, stopLoading]);
+
+  // Watches the value to start/stop splash screen.
+  useWatchImmediate(
+    (value) => (value ? startLoading() : stopLoading()),
+    isLoading,
+  );
+  return { isLoading };
+}
+
+/**
+ * Loads application yup locales based on the given current locale.
+ * @param {string} currentLocale
+ * @returns {{ isLoading: boolean }}
+ */
+function useAppYupLoadLocales(currentLocale) {
+  const [startLoading, stopLoading] = useSplashLoading();
+  const [isLoading, setIsLoading] = React.useState(true);

  React.useEffect(() => {
    loadYupLocales(currentLocale)
      .then(({ locale }) => {
        setLocale(locale);
-        setIsYupLoading(false);
+        setIsLoading(false);
      })
      .then(() => {});
-  }, [currentLocale]);
+  }, [currentLocale, stopLoading]);

-  React.useEffect(() => {
-    if (!isLocalsLoading && !isYupLoading) {
-      setAppIntlIsLoading(false);
-    }
-  });
+  // Watches the valiue to start/stop splash screen.
+  useWatchImmediate(
+    (value) => (value ? startLoading() : stopLoading()),
+    isLoading,
+  );
+  return { isLoading };
+}
+
+/**
+ * Application Intl loader.
+ */
+function AppIntlLoader({ children }) {
+  // Retrieve the current locale.
+  const currentLocale = getCurrentLocal();
+
+  // Detarmines the document direction based on the given locale.
+  const isRTL = rtlDetect.isRtlLang(currentLocale);
+
+  // Modifies the html document direction
+  useDocumentDirectionModifier(currentLocale, isRTL);
+
+  // Loads yup localization of the given locale.
+  const { isLoading: isAppYupLocalesLoading } =
+    useAppYupLoadLocales(currentLocale);
+
+  // Loads application locales of the given locale.
+  const { isLoading: isAppLocalesLoading } = useAppLoadLocales(currentLocale);
+
+  // Detarmines whether the app locales loading.
+  const isLoading = isAppYupLocalesLoading || isAppLocalesLoading;

  return (
    <AppIntlProvider currentLocale={currentLocale} isRTL={isRTL}>
-      {appIntlIsLoading ? null : children}
+      {isLoading ? null : children}
    </AppIntlProvider>
  );
 }

-export default R.compose(
-  withDashboardActions,
-  withDashboard(({ appIntlIsLoading }) => ({ appIntlIsLoading })),
-)(AppIntlLoader);
+export default R.compose(withDashboardActions)(AppIntlLoader);
--- a/src/components/AppIntlProvider.js
+++ b/src/components/AppIntlProvider.js
@@ -10,6 +10,7 @@ function AppIntlProvider({ currentLocale, isRTL, children }) {
    currentLocale,
    isRTL,
    isLTR: !isRTL,
+    direction: isRTL ? 'rtl' : 'ltr',
  };

  return (
--- a/src/components/Authentication.js
+++ b/src/components/Authentication.js
@@ -6,7 +6,6 @@ import authenticationRoutes from 'routes/authentication';
 import { FormattedMessage as T } from 'components';
 import Icon from 'components/Icon';
 import { useIsAuthenticated } from 'hooks/state';
-import {AuthenticationBoot} from '../containers/Authentication/AuthenticationBoot';
 import 'style/pages/Authentication/Auth.scss';

 function PageFade(props) {
@@ -26,7 +25,6 @@ export default function AuthenticationWrapper({ ...rest }) {
      ) : (
        <BodyClassName className={'authentication'}>
          <div class="authentication-page">
-          <AuthenticationBoot />
            <a
              href={'http://bigcapital.ly'}
              className={'authentication-page__goto-bigcapital'}
--- a/src/components/AvaterCell.js
+++ b/src/components/AvaterCell.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { firstLettersArgs } from 'utils';
+
+export default function AvatarCell({ row: { original }, size }) {
+  return (
+    <span className="avatar" data-size={size}>
+      {firstLettersArgs(original?.display_name)}
+    </span>
+  );
+}
--- a/src/components/BankAccounts/index.js
+++ b/src/components/BankAccounts/index.js
@@ -0,0 +1,205 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
+import clsx from 'classnames';
+import Icon from '../Icon';
+
+const ACCOUNT_TYPE = {
+  CASH: 'cash',
+  BANK: 'bank',
+  CREDIT_CARD: 'credit-card',
+};
+
+const ACCOUNT_TYPE_PAIR_ICON = {
+  [ACCOUNT_TYPE.CASH]: 'payments',
+  [ACCOUNT_TYPE.CREDIT_CARD]: 'credit-card',
+  [ACCOUNT_TYPE.BANK]: 'account-balance',
+};
+
+function BankAccountMetaLine({ title, value, className }) {
+  return (
+    <MetaLineWrap className={className}>
+      <MetaLineTitle>{title}</MetaLineTitle>
+      {value && <MetaLineValue>{value}</MetaLineValue>}
+    </MetaLineWrap>
+  );
+}
+
+function BankAccountBalance({ amount, loading }) {
+  return (
+    <BankAccountBalanceWrap>
+      <BankAccountBalanceAmount
+        className={clsx({
+          [Classes.SKELETON]: loading,
+        })}
+      >
+        {amount}
+      </BankAccountBalanceAmount>
+      <BankAccountBalanceLabel>{intl.get('balance')}</BankAccountBalanceLabel>
+    </BankAccountBalanceWrap>
+  );
+}
+
+function BankAccountTypeIcon({ type }) {
+  const icon = ACCOUNT_TYPE_PAIR_ICON[type];
+
+  if (!icon) {
+    return;
+  }
+  return (
+    <AccountIconWrap>
+      <Icon icon={icon} iconSize={18} />
+    </AccountIconWrap>
+  );
+}
+
+export function BankAccount({
+  title,
+  code,
+  type,
+  balance,
+  loading = false,
+  updatedBeforeText,
+  ...restProps
+}) {
+  return (
+    <BankAccountWrap {...restProps}>
+      <BankAccountHeader>
+        <BankAccountTitle className={clsx({ [Classes.SKELETON]: loading })}>
+          {title}
+        </BankAccountTitle>
+        <BnakAccountCode className={clsx({ [Classes.SKELETON]: loading })}>
+          {code}
+        </BnakAccountCode>
+        {!loading && <BankAccountTypeIcon type={type} />}
+      </BankAccountHeader>
+
+      <BankAccountMeta>
+        <BankAccountMetaLine
+          title={intl.get('cash_flow.label_account_transcations')}
+          value={2}
+          className={clsx({ [Classes.SKELETON]: loading })}
+        />
+        <BankAccountMetaLine
+          title={updatedBeforeText}
+          className={clsx({ [Classes.SKELETON]: loading })}
+        />
+      </BankAccountMeta>
+
+      <BankAccountBalance amount={balance} loading={loading} />
+    </BankAccountWrap>
+  );
+}
+
+const BankAccountWrap = styled.div`
+  width: 225px;
+  height: 180px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 3px;
+  background: #fff;
+  margin: 8px;
+  border: 1px solid #c8cad0;
+  transition: all 0.1s ease-in-out;
+
+  &:hover {
+    border-color: #0153cc;
+  }
+`;
+
+const BankAccountHeader = styled.div`
+  padding: 10px 12px;
+  padding-top: 16px;
+  position: relative;
+`;
+
+const BankAccountTitle = styled.div`
+  font-size: 15px;
+  font-style: inherit;
+  letter-spacing: -0.003em;
+  color: rgb(23, 43, 77);
+  white-space: nowrap;
+  font-weight: 600;
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0px;
+`;
+
+const BnakAccountCode = styled.div`
+  font-size: 11px;
+  margin-top: 4px;
+  color: rgb(23, 43, 77);
+  display: inline-block;
+`;
+
+const BankAccountBalanceWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: auto;
+  border-top: 1px solid #dfdfdf;
+  padding: 10px 12px;
+`;
+
+const BankAccountBalanceAmount = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1;
+  color: #57657e;
+`;
+
+const BankAccountBalanceLabel = styled.div`
+  text-transform: uppercase;
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  margin-top: 3px;
+  opacity: 0.6;
+`;
+
+const MetaLineWrap = styled.div`
+  font-size: 11px;
+  display: flex;
+  color: #2f3c58;
+
+  &:not(:first-of-type) {
+    margin-top: 6px;
+  }
+`;
+const MetaLineTitle = styled.div``;
+
+const MetaLineValue = styled.div`
+  box-sizing: border-box;
+  font-style: inherit;
+  background: rgb(223, 225, 230);
+  line-height: initial;
+  align-content: center;
+  padding: 0px 2px;
+  border-radius: 9.6px;
+  font-weight: normal;
+  text-transform: none;
+  width: 30px;
+  min-width: 30px;
+  height: 16px;
+  text-align: center;
+  color: rgb(23, 43, 77);
+  font-size: 11px;
+  margin-left: auto;
+`;
+
+const BankAccountMeta = styled.div`
+  padding: 0 12px 10px;
+`;
+
+export const BankAccountsList = styled.div`
+  display: flex;
+  margin: -8px;
+  flex-wrap: wrap;
+`;
+
+const AccountIconWrap = styled.div`
+  position: absolute;
+  top: 14px;
+  color: #abb3bb;
+  right: 12px;
+`;
--- a/src/components/Button/ButtonLink.js
+++ b/src/components/Button/ButtonLink.js
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const ButtonLink = styled.button`
+  color: #0052cc;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  text-align: inherit;
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+  }
+`;
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -0,0 +1,3 @@
+
+
+export * from './ButtonLink';
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,6 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-export default function Card({ className, children }) {
-  return <div className={classNames('card', className)}>{children}</div>;
-}
--- a/src/components/Card/index.js
+++ b/src/components/Card/index.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export function Card({ className, children }) {
+  return <CardRoot className={className}>{children}</CardRoot>;
+}
+
+const CardRoot = styled.div`
+  padding: 15px;
+  margin: 15px;
+  background: #fff;
+  border: 1px solid #d2dce2;
+`;
+
+export const CardFooterActions = styled.div`
+  padding-top: 16px;
+  border-top: 1px solid #e0e7ea;
+  margin-top: 30px;
+
+  .bp3-button {
+    min-width: 70px;
+
+    + .bp3-button {
+      margin-left: 10px;
+    }
+  }
+`;
--- a/src/components/CommercialDoc/index.js
+++ b/src/components/CommercialDoc/index.js
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { Card } from '../Card';
+import DataTable from '../DataTable';
+
+export const CommercialDocBox = styled(Card)`
+  padding: 22px 20px;
+`;
+
+export const CommercialDocHeader = styled.div`
+  margin-bottom: 25px;
+`;
+
+export const CommercialDocTopHeader = styled.div`
+  margin-bottom: 25px;
+`;
+
+export const CommercialDocEntriesTable = styled(DataTable)`
+  .tbody .tr:last-child .td {
+    border-bottom: 1px solid #d2dce2;
+  }
+`;
+
+export const CommercialDocFooter = styled.div`
+  margin-top: 25px;
+`;
--- a/src/components/ContactSelecetList.js
+++ b/src/components/ContactSelecetList.js
@@ -11,12 +11,14 @@ export default function ContactSelecetList({
  contactsList,
  initialContactId,
  selectedContactId,
-  selectedContactType,
+  createNewItemFrom,
  defaultSelectText = <T id={'select_contact'} />,
  onContactSelected,
  popoverFill = false,
  disabled = false,
  buttonProps,
+
+  ...restProps
 }) {
  const contacts = useMemo(
    () =>
@@ -65,7 +67,7 @@ export default function ContactSelecetList({
  );

  // Filter Contact List
-  const filterContacts = (query, contact, index, exactMatch) => {
+  const itemPredicate = (query, contact, index, exactMatch) => {
    const normalizedTitle = contact.display_name.toLowerCase();
    const normalizedQuery = query.toLowerCase();
    if (exactMatch) {
@@ -83,7 +85,7 @@ export default function ContactSelecetList({
      items={contacts}
      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
      itemRenderer={handleContactRenderer}
-      itemPredicate={filterContacts}
+      itemPredicate={itemPredicate}
      filterable={true}
      disabled={disabled}
      onItemSelect={onContactSelect}
@@ -92,8 +94,9 @@ export default function ContactSelecetList({
        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
      })}
      inputProps={{
-        placeholder: intl.get('filter_')
+        placeholder: intl.get('filter_'),
      }}
+      {...restProps}
    >
      <Button
        disabled={disabled}
--- a/src/components/Contacts/ContactSelectField.js
+++ b/src/components/Contacts/ContactSelectField.js
@@ -0,0 +1,86 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import { itemPredicate, handleContactRenderer } from './utils';
+
+export default function ContactSelectField({
+  contacts,
+  initialContactId,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  popoverFill = false,
+  disabled = false,
+  buttonProps,
+
+  ...restProps
+}) {
+  const localContacts = useMemo(
+    () =>
+      contacts.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contacts],
+  );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
+  const handleContactSelect = useCallback(
+    (contact) => {
+      setSelectedContact({ ...contact });
+      onContactSelected && onContactSelected(contact);
+    },
+    [setSelectedContact, onContactSelected],
+  );
+
+  return (
+    <Select
+      items={localContacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={handleContactRenderer}
+      itemPredicate={itemPredicate}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={handleContactSelect}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      inputProps={{
+        placeholder: intl.get('filter_'),
+      }}
+      {...restProps}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
+        {...buttonProps}
+      />
+    </Select>
+  );
+}
--- a/src/components/Contacts/CustomerSelectField.js
+++ b/src/components/Contacts/CustomerSelectField.js
@@ -0,0 +1,116 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import {
+  itemPredicate,
+  handleContactRenderer,
+  createNewItemRenderer,
+  createNewItemFromQuery,
+} from './utils';
+
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { DRAWERS } from 'common/drawers';
+
+function CustomerSelectField({
+  // #withDrawerActions
+  openDrawer,
+
+  // #ownProps
+  contacts,
+  initialContactId,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  popoverFill = false,
+  disabled = false,
+  allowCreate,
+  buttonProps,
+
+  ...restProps
+}) {
+  const localContacts = useMemo(
+    () =>
+      contacts.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contacts],
+  );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
+  const handleContactSelect = useCallback(
+    (contact) => {
+      if (contact.id) {
+        setSelectedContact({ ...contact });
+        onContactSelected && onContactSelected(contact);
+      } else {
+        openDrawer(DRAWERS.QUICK_CREATE_CUSTOMER);
+      }
+    },
+    [setSelectedContact, onContactSelected, openDrawer],
+  );
+
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  return (
+    <Select
+      items={localContacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={handleContactRenderer}
+      itemPredicate={itemPredicate}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={handleContactSelect}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      inputProps={{
+        placeholder: intl.get('filter_'),
+      }}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      createNewItemPosition={'top'}
+      {...restProps}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
+        {...buttonProps}
+      />
+    </Select>
+  );
+}
+
+export default R.compose(withDrawerActions)(CustomerSelectField);
--- a/src/components/Contacts/VendorSelectField.js
+++ b/src/components/Contacts/VendorSelectField.js
@@ -0,0 +1,115 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import {
+  itemPredicate,
+  handleContactRenderer,
+  createNewItemFromQuery,
+  createNewItemRenderer,
+} from './utils';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { DRAWERS } from 'common/drawers';
+
+function VendorSelectField({
+  // #withDrawerActions
+  openDrawer,
+
+  // #ownProps
+  contacts,
+  initialContactId,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  popoverFill = false,
+  disabled = false,
+  allowCreate,
+  buttonProps,
+
+  ...restProps
+}) {
+  const localContacts = useMemo(
+    () =>
+      contacts.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contacts],
+  );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
+  const handleContactSelect = useCallback(
+    (contact) => {
+      if (contact.id) {
+        setSelectedContact({ ...contact });
+        onContactSelected && onContactSelected(contact);
+      } else {
+        openDrawer(DRAWERS.QUICK_WRITE_VENDOR);
+      }
+    },
+    [setSelectedContact, onContactSelected, openDrawer],
+  );
+
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  return (
+    <Select
+      items={localContacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={handleContactRenderer}
+      itemPredicate={itemPredicate}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={handleContactSelect}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      inputProps={{
+        placeholder: intl.get('filter_'),
+      }}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      createNewItemPosition={'top'}
+      {...restProps}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
+        {...buttonProps}
+      />
+    </Select>
+  );
+}
+
+export default R.compose(withDrawerActions)(VendorSelectField);
--- a/src/components/Contacts/index.js
+++ b/src/components/Contacts/index.js
@@ -0,0 +1,5 @@
+import ContactSelectField from './ContactSelectField';
+import CustomerSelectField from './CustomerSelectField';
+import VendorSelectField from './VendorSelectField';
+
+export { ContactSelectField, CustomerSelectField, VendorSelectField };
--- a/src/components/Contacts/utils.js
+++ b/src/components/Contacts/utils.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem } from '@blueprintjs/core';
+
+// Filter Contact List
+export const itemPredicate = (query, contact, index, exactMatch) => {
+  const normalizedTitle = contact.display_name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return (
+      `${contact.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
+    );
+  }
+};
+
+export const handleContactRenderer = (contact, { handleClick }) => (
+  <MenuItem
+    key={contact.id}
+    text={contact.display_name}
+    onClick={handleClick}
+  />
+);
+
+// Creates a new item from query.
+export const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Handle quick create new customer.
+export const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={intl.get('list.create', { value: `"${query}"` })}
+      active={active}
+      shouldDismissPopover={false}
+      onClick={handleClick}
+    />
+  );
+};
--- a/src/components/Customers/CustomerDrawerLink.js
+++ b/src/components/Customers/CustomerDrawerLink.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { ButtonLink } from 'components';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+function CustomerDrawerLinkComponent({
+  // #ownProps
+  children,
+  customerId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Handle view customer drawer.
+  const handleCustomerDrawer = () => {
+    openDrawer('customer-details-drawer', { customerId });
+  };
+
+  return <ButtonLink onClick={handleCustomerDrawer}>{children}</ButtonLink>;
+}
+
+export const CustomerDrawerLink = R.compose(withDrawerActions)(
+  CustomerDrawerLinkComponent,
+);
--- a/src/components/Customers/index.js
+++ b/src/components/Customers/index.js
@@ -0,0 +1 @@
+export * from './CustomerDrawerLink';
--- a/src/components/Dashboard/AuthenticatedUser.js
+++ b/src/components/Dashboard/AuthenticatedUser.js
@@ -1,28 +0,0 @@
-import React from 'react';
-import { useUser } from 'hooks/query';
-import withAuthentication from '../../containers/Authentication/withAuthentication';
-
-const AuthenticatedUserContext = React.createContext();
-
-function AuthenticatedUserComponent({ authenticatedUserId, children }) {
-  const { data: user, ...restProps } = useUser(authenticatedUserId);
-
-  return (
-    <AuthenticatedUserContext.Provider
-      value={{
-        user,
-        ...restProps,
-      }}
-      children={children}
-    />
-  );
-}
-
-export const AuthenticatedUser = withAuthentication(
-  ({ authenticatedUserId }) => ({
-    authenticatedUserId,
-  }),
-)(AuthenticatedUserComponent);
-
-export const useAuthenticatedUser = () =>
-  React.useContext(AuthenticatedUserContext);
--- a/src/components/Dashboard/Dashboard.js
+++ b/src/components/Dashboard/Dashboard.js
@@ -12,6 +12,7 @@ import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
 import GlobalHotkeys from './GlobalHotkeys';
 import DashboardProvider from './DashboardProvider';
 import DrawersContainer from 'components/DrawersContainer';
+import AlertsContainer from 'containers/AlertsContainer';
 import EnsureSubscriptionIsActive from '../Guards/EnsureSubscriptionIsActive';

 /**
@@ -55,6 +56,7 @@ export default function Dashboard() {
      <DialogsContainer />
      <GlobalHotkeys />
      <DrawersContainer />
+      <AlertsContainer />
    </DashboardProvider>
  );
 }
--- a/src/components/Dashboard/DashboardAbilityProvider.js
+++ b/src/components/Dashboard/DashboardAbilityProvider.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Ability } from '@casl/ability';
+import { createContextualCan } from '@casl/react';
+import { useDashboardMeta } from '../../hooks/query';
+
+export const AbilityContext = React.createContext();
+export const Can = createContextualCan(AbilityContext.Consumer);
+
+/**
+ * Dashboard ability provider.
+ */
+export function DashboardAbilityProvider({ children }) {
+  const {
+    data: { abilities },
+  } = useDashboardMeta();
+
+  // Ability instance.
+  const ability = new Ability(abilities);
+
+  return (
+    <AbilityContext.Provider value={ability}>
+      {children}
+    </AbilityContext.Provider>
+  );
+}
--- a/src/components/Dashboard/DashboardActionsBar.js
+++ b/src/components/Dashboard/DashboardActionsBar.js
@@ -1,16 +1,19 @@
 import React from 'react';
-import classnames from 'classnames';
+import clsx from 'classnames';
 import { Navbar } from '@blueprintjs/core';

-export default function DashboardActionsBar({ children, name }) {
+export default function DashboardActionsBar({ className, children, name }) {
  return (
    <div
-      className={classnames({
-        'dashboard__actions-bar': true,
-        [`dashboard__actions-bar--${name}`]: !!name
-      })}
+      className={clsx(
+        {
+          'dashboard__actions-bar': true,
+          [`dashboard__actions-bar--${name}`]: !!name,
+        },
+        className,
+      )}
    >
-      <Navbar className='navbar--dashboard-actions-bar'>{children}</Navbar>
+      <Navbar className="navbar--dashboard-actions-bar">{children}</Navbar>
    </div>
  );
 }
--- a/src/components/Dashboard/DashboardBoot.js
+++ b/src/components/Dashboard/DashboardBoot.js
@@ -1,23 +1,63 @@
 import React from 'react';
-import * as R from 'ramda';
-
-import { useUser, useCurrentOrganization } from 'hooks/query';
-import withAuthentication from '../../containers/Authentication/withAuthentication';
-import withDashboardActions from '../../containers/Dashboard/withDashboardActions';
-
+import {
+  useAuthenticatedAccount,
+  useCurrentOrganization,
+  useDashboardMeta,
+} from '../../hooks/query';
+import { useSplashLoading } from '../../hooks/state';
+import { useWatch, useWatchImmediate, useWhen } from '../../hooks';
 import { setCookie, getCookie } from '../../utils';

 /**
- * Dashboard async booting.
+ * Dashboard meta async booting.
 */
-function DashboardBootJSX({ setAppIsLoading, authenticatedUserId }) {
+export function useDashboardMetaBoot() {
+  const {
+    data: dashboardMeta,
+    isLoading: isDashboardMetaLoading,
+    isSuccess: isDashboardMetaSuccess,
+  } = useDashboardMeta({
+    keepPreviousData: true,
+  });
+  const [startLoading, stopLoading] = useSplashLoading();
+
+  useWatchImmediate((value) => {
+    value && startLoading();
+  }, isDashboardMetaLoading);
+
+  useWatchImmediate(() => {
+    isDashboardMetaSuccess && stopLoading();
+  }, isDashboardMetaSuccess);
+
+  return {
+    isLoading: isDashboardMetaLoading,
+  };
+}
+
+/**
+ * Dashboard async booting.
+ * @returns {{ isLoading: boolean }}
+ */
+export function useDashboardBoot() {
+  const { isLoading } = useDashboardMetaBoot();
+
+  return { isLoading };
+}
+
+/**
+ * Application async booting.
+ */
+export function useApplicationBoot() {
  // Fetches the current user's organization.
-  const { isSuccess: isCurrentOrganizationSuccess, data: organization } =
-    useCurrentOrganization();
+  const {
+    isSuccess: isCurrentOrganizationSuccess,
+    isLoading: isOrgLoading,
+    data: organization,
+  } = useCurrentOrganization();

  // Authenticated user.
-  const { isSuccess: isAuthUserSuccess, data: authUser } =
-    useUser(authenticatedUserId);
+  const { isSuccess: isAuthUserSuccess, isLoading: isAuthUserLoading } =
+    useAuthenticatedAccount();

  // Initial locale cookie value.
  const localeCookie = getCookie('locale');
@@ -48,29 +88,41 @@ function DashboardBootJSX({ setAppIsLoading, authenticatedUserId }) {
    }
  }, [localeCookie, organization]);

-  React.useEffect(() => {
-    // Once the all requests complete change the app loading state.
-    if (
-      isAuthUserSuccess &&
-      isCurrentOrganizationSuccess &&
-      localeCookie === organization?.metadata?.language
-    ) {
-      setAppIsLoading(false);
-      isBooted.current = true;
-    }
-  }, [
-    isAuthUserSuccess,
-    isCurrentOrganizationSuccess,
-    organization,
-    setAppIsLoading,
-    localeCookie,
-  ]);
-  return null;
-}
+  const [startLoading, stopLoading] = useSplashLoading();

-export const DashboardBoot = R.compose(
-  withAuthentication(({ authenticatedUserId }) => ({
-    authenticatedUserId,
-  })),
-  withDashboardActions,
-)(DashboardBootJSX);
+  // Splash loading when organization request loading and
+  // applicaiton still not booted.
+  useWatchImmediate((value) => {
+    value && !isBooted.current && startLoading();
+  }, isOrgLoading);
+
+  // Splash loading when request authenticated user loading and
+  // application still not booted yet.
+  useWatchImmediate((value) => {
+    value && !isBooted.current && startLoading();
+  }, isAuthUserLoading);
+
+  // Stop splash loading once organization request success.
+  useWatch((value) => {
+    value && stopLoading();
+  }, isCurrentOrganizationSuccess);
+
+  // Stop splash loading once authenticated user request success.
+  useWatch((value) => {
+    value && stopLoading();
+  }, isAuthUserSuccess);
+
+  // Once the all requests complete change the app loading state.
+  useWhen(
+    isAuthUserSuccess &&
+      isCurrentOrganizationSuccess &&
+      localeCookie === organization?.metadata?.language,
+    () => {
+      isBooted.current = true;
+    },
+  );
+
+  return {
+    isLoading: isOrgLoading || isAuthUserLoading,
+  };
+}
--- a/src/components/Dashboard/DashboardContent.js
+++ b/src/components/Dashboard/DashboardContent.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import DashboardTopbar from 'components/Dashboard/DashboardTopbar';
 import DashboardContentRoutes from 'components/Dashboard/DashboardContentRoute';
-import DashboardFooter from 'components/Dashboard/DashboardFooter';
 import DashboardErrorBoundary from './DashboardErrorBoundary';

 export default React.forwardRef(({}, ref) => {
@@ -11,7 +10,6 @@ export default React.forwardRef(({}, ref) => {
      <div className="dashboard-content" id="dashboard" ref={ref}>
        <DashboardTopbar />
        <DashboardContentRoutes />
-        <DashboardFooter />
      </div>
    </ErrorBoundary>
  );
--- a/src/components/Dashboard/DashboardProvider.js
+++ b/src/components/Dashboard/DashboardProvider.js
@@ -1,8 +1,16 @@
 import React from 'react';
+import { DashboardAbilityProvider } from '../../components';
+import { useDashboardBoot } from './DashboardBoot';

 /**
 * Dashboard provider.
 */
 export default function DashboardProvider({ children }) {
-  return children;
+  const { isLoading } = useDashboardBoot();
+
+  // Avoid display any dashboard component before complete booting.
+  if (isLoading) {
+    return null;
+  }
+  return <DashboardAbilityProvider>{children}</DashboardAbilityProvider>;
 }
--- a/src/components/Dashboard/DashboardRowsHeightButton.js
+++ b/src/components/Dashboard/DashboardRowsHeightButton.js
@@ -1,36 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  PopoverInteractionKind,
-  Popover,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Classes
-} from '@blueprintjs/core';
-import { Icon } from 'components';
-
-export function DashboardRowsHeightButton() {
-  return (
-    <Popover
-      minimal={true}
-      content={
-        <Menu>
-          <MenuDivider title={'Rows height'} />
-          <MenuItem text="Compact" />
-          <MenuItem text="Medium" />
-        </Menu>
-      }
-      placement="bottom-start"
-      modifiers={{
-        offset: { offset: '0, 4' },
-      }}
-      interactionKind={PopoverInteractionKind.CLICK}
-    >
-      <Button
-        className={Classes.MINIMAL}
-        icon={<Icon icon="rows-height" iconSize={16} />}
-      />
-    </Popover>
-  );
-}
--- a/src/components/Dashboard/DashboardRowsHeightButton/index.js
+++ b/src/components/Dashboard/DashboardRowsHeightButton/index.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import {
+  Button,
+  PopoverInteractionKind,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Classes,
+  Tooltip,
+  Position,
+} from '@blueprintjs/core';
+import clsx from 'classnames';
+import { Icon, T } from 'components';
+
+import Style from './style.module.scss';
+
+/**
+ * Dashboard rows height button control.
+ */
+export function DashboardRowsHeightButton({ initialValue, value, onChange }) {
+  const [localSize, setLocalSize] = React.useState(initialValue);
+
+  // Handle menu item click.
+  const handleItemClick = (size) => (event) => {
+    setLocalSize(size);
+    onChange && onChange(size, event);
+  };
+  // Button icon name.
+  const btnIcon = `table-row-${localSize}`;
+
+  return (
+    <Popover
+      minimal={true}
+      content={
+        <Menu className={Style.menu}>
+          <MenuDivider title={<T id={'dashboard.rows_height'} />} />
+          <MenuItem
+            onClick={handleItemClick('small')}
+            text={<T id={'dashboard.row_small'} />}
+          />
+          <MenuItem
+            onClick={handleItemClick('medium')}
+            text={<T id={'dashboard.row_medium'} />}
+          />
+        </Menu>
+      }
+      placement="bottom-start"
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      interactionKind={PopoverInteractionKind.CLICK}
+    >
+      <Tooltip
+        content={<T id={'dashboard.rows_height'} />}
+        minimal={true}
+        position={Position.BOTTOM}
+      >
+        <Button
+          className={clsx(Classes.MINIMAL, Style.button)}
+          icon={<Icon icon={btnIcon} iconSize={16} />}
+        />
+      </Tooltip>
+    </Popover>
+  );
+}
+
+DashboardRowsHeightButton.defaultProps = {
+  initialValue: 'medium',
+};
--- a/src/components/Dashboard/DashboardRowsHeightButton/style.module.scss
+++ b/src/components/Dashboard/DashboardRowsHeightButton/style.module.scss
@@ -0,0 +1,12 @@
+
+.menu{
+  :global .bp3-heading{
+    font-weight: 400;
+    opacity: 0.5;
+    font-size: 12px;
+  }
+}
+
+.button{
+  min-width: 34px;
+}
--- a/src/components/Dashboard/DashboardThemeProvider.js
+++ b/src/components/Dashboard/DashboardThemeProvider.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { ThemeProvider, StyleSheetManager } from 'styled-components';
+import rtlcss from 'stylis-rtlcss';
+import { useAppIntlContext } from '../AppIntlProvider';
+
+export function DashboardThemeProvider({ children }) {
+  const { direction } = useAppIntlContext();
+
+  return (
+    <StyleSheetManager
+      {...(direction === 'rtl' ? { stylisPlugins: [rtlcss] } : {})}
+    >
+      <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>
+    </StyleSheetManager>
+  );
+}
--- a/src/components/Dashboard/DashboardTopbar.js
+++ b/src/components/Dashboard/DashboardTopbar.js
@@ -23,6 +23,7 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import QuickNewDropdown from 'containers/QuickNewDropdown/QuickNewDropdown';
 import { compose } from 'utils';
 import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
+import { useGetUniversalSearchTypeOptions } from '../../containers/UniversalSearch/utils';

 function DashboardTopbarSubscriptionMessage() {
  return (
@@ -142,11 +143,8 @@ function DashboardTopbar({
        <Navbar class="dashboard__topbar-navbar">
          <NavbarGroup>
            <If condition={isSubscriptionActive}>
-              <Button
+              <DashboardQuickSearchButton
                onClick={() => openGlobalSearch(true)}
-                className={Classes.MINIMAL}
-                icon={<Icon icon={'search-24'} iconSize={20} />}
-                text={<T id={'quick_find'} />}
              />
              <QuickNewDropdown />

@@ -195,3 +193,23 @@ export default compose(
    'main',
  ),
 )(DashboardTopbar);
+
+/**
+ * Dashboard quick search button.
+ */
+function DashboardQuickSearchButton({ ...rest }) {
+  const searchTypeOptions = useGetUniversalSearchTypeOptions();
+
+  // Can't continue if there is no any search type option.
+  if (searchTypeOptions.length <= 0) {
+    return null;
+  }
+  return (
+    <Button
+      className={Classes.MINIMAL}
+      icon={<Icon icon={'search-24'} iconSize={20} />}
+      text={<T id={'quick_find'} />}
+      {...rest}
+    />
+  );
+}
--- a/src/components/Dashboard/GlobalHotkeys.js
+++ b/src/components/Dashboard/GlobalHotkeys.js
@@ -3,11 +3,16 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useHistory } from 'react-router-dom';
 import { getDashboardRoutes } from 'routes/dashboard';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
 import { compose } from 'utils';

 function GlobalHotkeys({
  // #withDashboardActions
  toggleSidebarExpend,
+
+  // #withDialogActions
+  openDialog,
 }) {
  const history = useHistory();
  const routes = getDashboardRoutes();
@@ -16,8 +21,8 @@ function GlobalHotkeys({
    .filter(({ hotkey }) => hotkey)
    .map(({ hotkey }) => hotkey)
    .toString();
-  
-    const handleSidebarToggleBtn = () => {
+
+  const handleSidebarToggleBtn = () => {
    toggleSidebarExpend();
  };
  useHotkeys(
@@ -32,7 +37,9 @@ function GlobalHotkeys({
    [history],
  );
  useHotkeys('ctrl+/', (event, handle) => handleSidebarToggleBtn());
+  useHotkeys('shift+d', (event, handle) => openDialog('money-in', {}));
+  useHotkeys('shift+q', (event, handle) => openDialog('money-out', {}));
  return <div></div>;
 }

-export default compose(withDashboardActions)(GlobalHotkeys);
+export default compose(withDashboardActions, withDialogActions)(GlobalHotkeys);
--- a/src/components/Dashboard/PrivatePages.js
+++ b/src/components/Dashboard/PrivatePages.js
@@ -4,10 +4,9 @@ import { Switch, Route } from 'react-router';
 import Dashboard from 'components/Dashboard/Dashboard';
 import SetupWizardPage from 'containers/Setup/WizardSetupPage';

-import EnsureOrganizationIsReady from 'components/Guards/EnsureOrganizationIsReady';
-import EnsureOrganizationIsNotReady from 'components/Guards/EnsureOrganizationIsNotReady';
+import EnsureOrganizationIsReady from '../../components/Guards/EnsureOrganizationIsReady';
+import EnsureOrganizationIsNotReady from '../../components/Guards/EnsureOrganizationIsNotReady';
 import { PrivatePagesProvider } from './PrivatePagesProvider';
-import { DashboardBoot } from '../../components';

 import 'style/pages/Dashboard/Dashboard.scss';

@@ -17,8 +16,6 @@ import 'style/pages/Dashboard/Dashboard.scss';
 export default function DashboardPrivatePages() {
  return (
    <PrivatePagesProvider>
-      <DashboardBoot />
-
      <Switch>
        <Route path={'/setup'}>
          <EnsureOrganizationIsNotReady>
--- a/src/components/Dashboard/PrivatePagesProvider.js
+++ b/src/components/Dashboard/PrivatePagesProvider.js
@@ -1,9 +1,15 @@
 import React from 'react';
-import { AuthenticatedUser } from './AuthenticatedUser';
+
+import { useApplicationBoot } from '../../components';

 /**
 * Private pages provider.
 */
-export function PrivatePagesProvider({ children }) {
-  return <AuthenticatedUser>{children}</AuthenticatedUser>;
+export function PrivatePagesProvider({
+  // #ownProps
+  children,
+}) {
+  const { isLoading } = useApplicationBoot();
+
+  return <React.Fragment>{!isLoading ? children : null}</React.Fragment>;
 }
--- a/src/components/Dashboard/SplashScreen.js
+++ b/src/components/Dashboard/SplashScreen.js
@@ -3,13 +3,12 @@ import * as R from 'ramda';
 import BigcapitalLoading from './BigcapitalLoading';
 import withDashboard from '../../containers/Dashboard/withDashboard';

-function SplashScreenComponent({ appIsLoading, appIntlIsLoading }) {
-  return appIsLoading || appIntlIsLoading ? <BigcapitalLoading /> : null;
+function SplashScreenComponent({ splashScreenLoading }) {
+  return splashScreenLoading ? <BigcapitalLoading /> : null;
 }

 export const SplashScreen = R.compose(
-  withDashboard(({ appIsLoading, appIntlIsLoading }) => ({
-    appIsLoading,
-    appIntlIsLoading,
+  withDashboard(({ splashScreenLoading }) => ({
+    splashScreenLoading,
  })),
 )(SplashScreenComponent);
--- a/src/components/Dashboard/TopbarUser.js
+++ b/src/components/Dashboard/TopbarUser.js
@@ -14,10 +14,14 @@ import { firstLettersArgs } from 'utils';
 import { useAuthActions } from 'hooks/state';

 import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
 import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
-import { useAuthenticatedUser } from './AuthenticatedUser';

+import { useAuthenticatedAccount } from 'hooks/query'
+import { compose } from 'utils';
+
+/**
+ * Dashboard topbar user.
+ */
 function DashboardTopbarUser({
  openDialog,

@@ -28,7 +32,7 @@ function DashboardTopbarUser({
  const { setLogout } = useAuthActions();

  // Retrieve authenticated user information.
-  const { user } = useAuthenticatedUser();
+  const { data: user } = useAuthenticatedAccount();

  const onClickLogout = () => {
    setLogout();
--- a/src/components/Dashboard/index.js
+++ b/src/components/Dashboard/index.js
@@ -1,4 +1,4 @@
-
-
 export * from './SplashScreen';
-export * from './DashboardBoot';
+export * from './DashboardBoot';
+export * from './DashboardThemeProvider';
+export * from './DashboardAbilityProvider';
--- a/src/components/DataTable.js
+++ b/src/components/DataTable.js
@@ -196,6 +196,9 @@ export default function DataTable(props) {

 DataTable.defaultProps = {
  pagination: false,
+  hidePaginationNoPages: true,
+
+  size: null,
  spinnerProps: { size: 30 },

  expandToggleColumn: 1,
--- a/src/components/DataTableCells/AccountsListFieldCell.js
+++ b/src/components/DataTableCells/AccountsListFieldCell.js
@@ -17,6 +17,8 @@ export default function AccountCellRenderer({
    accountsDataProp,
    filterAccountsByRootTypes,
    filterAccountsByTypes,
+    fieldProps,
+    formGroupProps,
  },
  row: { index, original },
  cell: { value: initialValue },
@@ -53,6 +55,7 @@ export default function AccountCellRenderer({
        'form-group--account',
        Classes.FILL,
      )}
+      {...formGroupProps}
    >
      <AccountsSuggestField
        accounts={accounts}
@@ -66,6 +69,7 @@ export default function AccountCellRenderer({
        }}
        openOnKeyDown={true}
        blurOnSelectClose={false}
+        {...fieldProps}
      />
    </FormGroup>
  );
--- a/src/components/DataTableCells/ItemsListCell.js
+++ b/src/components/DataTableCells/ItemsListCell.js
@@ -1,15 +1,17 @@
 import React, { useCallback, useRef } from 'react';
-// import ItemsListField from 'components/ItemsListField';
-import ItemsSuggestField from 'components/ItemsSuggestField';
 import classNames from 'classnames';
-
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';

+import ItemsSuggestField from 'components/ItemsSuggestField';
+
 import { useCellAutoFocus } from 'hooks';

+/**
+ * Items list cell.
+ */
 export default function ItemsListCell({
-  column: { id, filterSellable, filterPurchasable },
+  column: { id, filterSellable, filterPurchasable, fieldProps, formGroupProps },
  row: { index },
  cell: { value: initialValue },
  payload: { items, updateData, errors, autoFocus },
@@ -19,6 +21,7 @@ export default function ItemsListCell({
  // Auto-focus the items list input field.
  useCellAutoFocus(fieldRef, autoFocus, id, index);

+  // Handle the item selected.
  const handleItemSelected = useCallback(
    (item) => {
      updateData(index, id, item.id);
@@ -32,6 +35,7 @@ export default function ItemsListCell({
    <FormGroup
      intent={error ? Intent.DANGER : null}
      className={classNames('form-group--select-list', Classes.FILL)}
+      {...formGroupProps}
    >
      <ItemsSuggestField
        items={items}
@@ -45,6 +49,7 @@ export default function ItemsListCell({
        }}
        openOnKeyDown={true}
        blurOnSelectClose={false}
+        {...fieldProps}
      />
    </FormGroup>
  );
--- a/src/components/DataTableCells/SwitchFieldCell.js
+++ b/src/components/DataTableCells/SwitchFieldCell.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Classes, Switch, FormGroup, Intent } from '@blueprintjs/core';
+
+import { safeInvoke } from 'utils';
+
+/**
+ * Switch editable cell.
+ */
+const SwitchEditableCell = ({
+  row: { index, original },
+  column: { id, switchProps, onSwitchChange },
+  cell: { value: initialValue },
+  payload,
+}) => {
+  const [value, setValue] = React.useState(initialValue);
+
+  // Handle the switch change.
+  const onChange = (e) => {
+    const newValue = e.target.checked;
+
+    setValue(newValue);
+
+    safeInvoke(payload.updateData, index, id, newValue);
+    safeInvoke(onSwitchChange, e, newValue, original);
+  };
+
+  React.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = payload.errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(Classes.FILL)}
+    >
+      <Switch
+        value={value}
+        onChange={onChange}
+        checked={initialValue}
+        minimal={true}
+        className="ml2"
+        {...switchProps}
+      />
+    </FormGroup>
+  );
+};
+
+export default SwitchEditableCell;
--- a/src/components/DataTableCells/TextAreaCell.js
+++ b/src/components/DataTableCells/TextAreaCell.js
@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { Classes, TextArea, FormGroup, Intent } from '@blueprintjs/core';
+
+const TextAreaEditableCell = ({
+  row: { index },
+  column: { id },
+  cell: { value: initialValue },
+  payload,
+}) => {
+  const [value, setValue] = useState(initialValue);
+
+  const onChange = (e) => {
+    setValue(e.target.value);
+  };
+  const onBlur = () => {
+    payload.updateData(index, id, value);
+  };
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = payload.errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(Classes.FILL)}
+    >
+      <TextArea
+        growVertically={true}
+        large={true}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        fill={true}
+      />
+    </FormGroup>
+  );
+};
+
+export default TextAreaEditableCell;
--- a/src/components/DataTableCells/index.js
+++ b/src/components/DataTableCells/index.js
@@ -6,7 +6,9 @@ import ItemsListCell from './ItemsListCell';
 import PercentFieldCell from './PercentFieldCell';
 import { DivFieldCell, EmptyDiv } from './DivFieldCell';
 import NumericInputCell from './NumericInputCell';
-import CheckBoxFieldCell from './CheckBoxFieldCell'
+import CheckBoxFieldCell from './CheckBoxFieldCell';
+import SwitchFieldCell from './SwitchFieldCell';
+import TextAreaCell from './TextAreaCell';

 export {
  AccountsListFieldCell,
@@ -18,5 +20,7 @@ export {
  DivFieldCell,
  EmptyDiv,
  NumericInputCell,
-  CheckBoxFieldCell
+  CheckBoxFieldCell,
+  SwitchFieldCell,
+  TextAreaCell,
 };
--- a/src/components/Datatable/CellForceWidth.js
+++ b/src/components/Datatable/CellForceWidth.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { get } from 'lodash';
+
+import { getForceWidth } from 'utils';
+
+export function CellForceWidth({
+  value,
+  column: { forceWidthAccess },
+  row: { original },
+}) {
+  const forceWidthValue = forceWidthAccess
+    ? get(original, forceWidthAccess)
+    : value;
+
+  return <ForceWidth forceValue={forceWidthValue}>{value}</ForceWidth>;
+}
+
+export function ForceWidth({ children, forceValue }) {
+  const forceWidthValue = forceValue || children;
+
+  return (
+    <span
+      className={'force-width'}
+      style={{ minWidth: getForceWidth(forceWidthValue) }}
+    >
+      {children}
+    </span>
+  );
+}
--- a/src/components/Datatable/TableCell.js
+++ b/src/components/Datatable/TableCell.js
@@ -4,9 +4,11 @@ import { If } from 'components';
 import { Skeleton } from 'components';
 import { useAppIntlContext } from 'components/AppIntlProvider';
 import TableContext from './TableContext';
-import { saveInvoke } from 'utils';
+import { saveInvoke, ignoreEventFromSelectors } from 'utils';
 import { isCellLoading } from './utils';

+const ROW_CLICK_SELECTORS_INGORED = ['.expand-toggle', '.selection-checkbox'];
+
 /**
 * Table cell.
 */
@@ -50,6 +52,9 @@ export default function TableCell({ cell, row, index }) {
  }
  // Handle cell click action.
  const handleCellClick = (event) => {
+    if (ignoreEventFromSelectors(event, ROW_CLICK_SELECTORS_INGORED)) {
+      return;
+    }
    saveInvoke(onCellClick, cell, event);
  };

@@ -58,7 +63,7 @@ export default function TableCell({ cell, row, index }) {
      {...cell.getCellProps({
        className: classNames(cell.column.className, 'td', {
          'is-text-overview': cell.column.textOverview,
-          'clickable': cell.column.clickable,
+          clickable: cell.column.clickable,
          'align-right': cell.column.align === 'right',
        }),
        onClick: handleCellClick,
@@ -83,11 +88,15 @@ export default function TableCell({ cell, row, index }) {
          // to build the toggle for expanding a row
        }
        <If condition={cell.row.canExpand && expandable && isExpandColumn}>
-          <span {...getToggleRowExpandedProps({ className: 'expand-toggle' })}>
+          <span
+            {...getToggleRowExpandedProps({
+              className: 'expand-toggle',
+            })}
+            style={{}}
+          >
            <span
-              className={classNames({
-                'arrow-down': isExpanded,
-                'arrow-right': !isExpanded,
+              className={classNames('expand-arrow', {
+                'is-expanded': isExpanded,
              })}
            />
          </span>
--- a/src/components/Datatable/TableIndeterminateCheckboxRow.js
+++ b/src/components/Datatable/TableIndeterminateCheckboxRow.js
@@ -3,7 +3,7 @@ import { Checkbox } from '@blueprintjs/core';

 export default function TableIndeterminateCheckboxRow({ row }) {
  return (
-    <div>
+    <div class="selection-checkbox">
      <Checkbox {...row.getToggleRowSelectedProps()} />
    </div>
  );
--- a/src/components/Datatable/TablePagination.js
+++ b/src/components/Datatable/TablePagination.js
@@ -14,12 +14,15 @@ export default function TablePagination() {
      pageCount,
      state: { pageIndex, pageSize },
    },
-    props: { pagination, loading, onPaginationChange },
+    props: { pagination, loading, onPaginationChange, hidePaginationNoPages },
  } = useContext(TableContext);

-  const triggerOnPaginationChange = useCallback((payload) => {
-    saveInvoke(onPaginationChange, payload)
-  }, [onPaginationChange]);
+  const triggerOnPaginationChange = useCallback(
+    (payload) => {
+      saveInvoke(onPaginationChange, payload);
+    },
+    [onPaginationChange],
+  );

  // Handles the page changing.
  const handlePageChange = useCallback(
@@ -45,8 +48,14 @@ export default function TablePagination() {
    [gotoPage, setPageSize, triggerOnPaginationChange],
  );

+  // Detarmines when display the pagination.
+  const showPagination =
+    pagination &&
+    ((hidePaginationNoPages && pageCount > 1) || !hidePaginationNoPages) &&
+    !loading;
+
  return (
-    <If condition={pagination && !loading}>
+    showPagination && (
      <Pagination
        currentPage={pageIndex + 1}
        total={pageSize * pageCount}
@@ -54,6 +63,6 @@ export default function TablePagination() {
        onPageChange={handlePageChange}
        onPageSizeChange={handlePageSizeChange}
      />
-    </If>
+    )
  );
 }
--- a/src/components/Datatable/TableWrapper.js
+++ b/src/components/Datatable/TableWrapper.js
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import classNames from 'classnames';
+import clsx from 'classnames';
 import { ScrollSync } from 'react-scroll-sync';
 import TableContext from './TableContext';

@@ -9,23 +9,35 @@ import TableContext from './TableContext';
 export default function TableWrapper({ children }) {
  const {
    table: { getTableProps },
-    props: { sticky, pagination, loading, expandable, virtualizedRows, className },
+    props: {
+      sticky,
+      pagination,
+      loading,
+      expandable,
+      virtualizedRows,
+      className,
+      styleName,
+      size,
+    },
  } = useContext(TableContext);

  return (
    <div
-      className={classNames('bigcapital-datatable', className, {
+      className={clsx('bigcapital-datatable', className, {
        'has-sticky': sticky,
        'has-pagination': pagination,
        'is-expandable': expandable,
        'is-loading': loading,
        'has-virtualized-rows': virtualizedRows,
+        [`table--${styleName}`]: styleName,
      })}
    >
      <ScrollSync>
        <div
          {...getTableProps({ style: { minWidth: 'none' } })}
-          className="table"
+          className={clsx('table', {
+            [`table-size--${size}`]: size,
+          })}
        >
          {children}
        </div>
--- a/src/components/Datatable/index.js
+++ b/src/components/Datatable/index.js
@@ -0,0 +1,4 @@
+
+
+
+export * from './CellForceWidth';
--- a/src/components/Details/index.js
+++ b/src/components/Details/index.js
@@ -17,6 +17,7 @@ const useDetailsMenuContext = () => React.useContext(DetailsMenuContext);
 export function DetailsMenu({
  children,
  direction = DIRECTION.VERTICAL,
+  textAlign,
  minLabelSize,
  className,
 }) {
@@ -27,6 +28,7 @@ export function DetailsMenu({
        {
          'details-menu--vertical': direction === DIRECTION.VERTICAL,
          'details-menu--horizantal': direction === DIRECTION.HORIZANTAL,
+          [`align-${textAlign}`]: textAlign,
        },
        className,
      )}
--- a/src/components/Dialog/Dialog.js
+++ b/src/components/Dialog/Dialog.js
@@ -9,16 +9,16 @@ function DialogComponent(props) {
  const { name, children, closeDialog, onClose } = props;

  const handleClose = (event) => {
-    closeDialog(name)
+    closeDialog(name);
    onClose && onClose(event);
  };
  return (
    <Dialog {...props} onClose={handleClose}>
-      { children }
+      {children}
    </Dialog>
  );
 }

-export default compose(
-  withDialogActions,
-)(DialogComponent);
+const DialogRoot = compose(withDialogActions)(DialogComponent);
+
+export { DialogRoot as Dialog };
--- a/src/components/Dialog/DialogContent.js
+++ b/src/components/Dialog/DialogContent.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Spinner, Classes } from '@blueprintjs/core';
 import classNames from 'classnames';

-export default function DialogContent(props) {
+export function DialogContent(props) {
  const { isLoading, children } = props;

  const loadingContent = (
--- a/src/components/Dialog/DialogFooter.js
+++ b/src/components/Dialog/DialogFooter.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
+
+export function DialogFooter({ children }) {
+  return (
+    <DialogFooterRoot className={Classes.DIALOG_FOOTER}>
+      {children}
+    </DialogFooterRoot>
+  );
+}
+
+const DialogFooterRoot = styled.div`
+  display: flex;
+`;
--- a/src/components/Dialog/DialogFooterActions.js
+++ b/src/components/Dialog/DialogFooterActions.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
+
+/**
+ * Dialog footer actions.
+ * @returns {React.JSX}
+ */
+export function DialogFooterActions({ alignment = 'right', children }) {
+  return (
+    <DialogFooterActionsRoot
+      className={Classes.DIALOG_FOOTER_ACTIONS}
+      alignment={alignment}
+    >
+      {children}
+    </DialogFooterActionsRoot>
+  );
+}
+
+/**
+ * Dialog footer.
+ * @returns {React.JSX}
+ */
+export function DialogFooter({ ...props }) {
+  return <DialogFooterRoot {...props} />;
+}
+
+const DialogFooterRoot = styled.div`
+  flex: 0 0 auto;
+  margin: 0 20px;
+`;
+
+const DialogFooterActionsRoot = styled.div`
+  ${(props) =>
+    props.alignment === 'right' ? 'margin-left: auto;' : 'margin-right: auto;'};
+
+  .bp3-button {
+    margin-left: 5px;
+    margin-left: 5px;
+  }
+`;
--- a/src/components/Dialog/DialogSuspense.js
+++ b/src/components/Dialog/DialogSuspense.js
@@ -5,7 +5,7 @@ function LoadingContent() {
  return (<div className={Classes.DIALOG_BODY}><Spinner size={30} /></div>);
 }

-export default function DialogSuspense({
+export function DialogSuspense({
  children
 }) {
  return (
--- a/src/components/Dialog/index.js
+++ b/src/components/Dialog/index.js
@@ -0,0 +1,7 @@
+
+
+export * from './Dialog';
+export * from './DialogFooterActions';
+export * from './DialogSuspense';
+export * from './DialogContent';
+export * from './DialogFooter';
--- a/src/components/DialogsContainer.js
+++ b/src/components/DialogsContainer.js
@@ -17,6 +17,21 @@ import AllocateLandedCostDialog from 'containers/Dialogs/AllocateLandedCostDialo
 import InvoicePdfPreviewDialog from 'containers/Dialogs/InvoicePdfPreviewDialog';
 import EstimatePdfPreviewDialog from 'containers/Dialogs/EstimatePdfPreviewDialog';
 import ReceiptPdfPreviewDialog from '../containers/Dialogs/ReceiptPdfPreviewDialog';
+import MoneyInDialog from '../containers/Dialogs/MoneyInDialog';
+import MoneyOutDialog from '../containers/Dialogs/MoneyOutDialog';
+import BadDebtDialog from '../containers/Dialogs/BadDebtDialog';
+import NotifyInvoiceViaSMSDialog from '../containers/Dialogs/NotifyInvoiceViaSMSDialog';
+import NotifyReceiptViaSMSDialog from '../containers/Dialogs/NotifyReceiptViaSMSDialog';
+import NotifyEstimateViaSMSDialog from '../containers/Dialogs/NotifyEstimateViaSMSDialog';
+import NotifyPaymentReceiveViaSMSDialog from '../containers/Dialogs/NotifyPaymentReceiveViaSMSDialog';
+import SMSMessageDialog from '../containers/Dialogs/SMSMessageDialog';
+import RefundCreditNoteDialog from '../containers/Dialogs/RefundCreditNoteDialog';
+import RefundVendorCreditDialog from '../containers/Dialogs/RefundVendorCreditDialog';
+import ReconcileCreditNoteDialog from '../containers/Dialogs/ReconcileCreditNoteDialog';
+import ReconcileVendorCreditDialog from '../containers/Dialogs/ReconcileVendorCreditDialog';
+import LockingTransactionsDialog from '../containers/Dialogs/LockingTransactionsDialog';
+import UnlockingTransactionsDialog from '../containers/Dialogs/UnlockingTransactionsDialog';
+import UnlockingPartialTransactionsDialog from '../containers/Dialogs/UnlockingPartialTransactionsDialog';

 /**
 * Dialogs container.
@@ -40,6 +55,25 @@ export default function DialogsContainer() {
      <InvoicePdfPreviewDialog dialogName={'invoice-pdf-preview'} />
      <EstimatePdfPreviewDialog dialogName={'estimate-pdf-preview'} />
      <ReceiptPdfPreviewDialog dialogName={'receipt-pdf-preview'} />
+      <MoneyInDialog dialogName={'money-in'} />
+      <MoneyOutDialog dialogName={'money-out'} />
+
+      <NotifyInvoiceViaSMSDialog dialogName={'notify-invoice-via-sms'} />
+      <NotifyReceiptViaSMSDialog dialogName={'notify-receipt-via-sms'} />
+      <NotifyEstimateViaSMSDialog dialogName={'notify-estimate-via-sms'} />
+      <NotifyPaymentReceiveViaSMSDialog dialogName={'notify-payment-via-sms'} />
+
+      <BadDebtDialog dialogName={'write-off-bad-debt'} />
+      <SMSMessageDialog dialogName={'sms-message-form'} />
+      <RefundCreditNoteDialog dialogName={'refund-credit-note'} />
+      <RefundVendorCreditDialog dialogName={'refund-vendor-credit'} />
+      <ReconcileCreditNoteDialog dialogName={'reconcile-credit-note'} />
+      <ReconcileVendorCreditDialog dialogName={'reconcile-vendor-credit'} />
+      <LockingTransactionsDialog dialogName={'locking-transactions'} />
+      <UnlockingTransactionsDialog dialogName={'unlocking-transactions'} />
+      <UnlockingPartialTransactionsDialog
+        dialogName={'unlocking-partial-transactions'}
+      />
    </div>
  );
 }
--- a/src/components/DisplayNameList.js
+++ b/src/components/DisplayNameList.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import ListSelect from "./ListSelect";
+import intl from 'react-intl-universal';
+import ListSelect from './ListSelect';

 export default function DisplayNameList({
  salutation,
@@ -9,25 +10,32 @@ export default function DisplayNameList({
  ...restProps
 }) {
  const formats = [
-    { format: '{1} {2} {3}', values: [salutation, firstName, lastName], required: [1] },
+    {
+      format: '{1} {2} {3}',
+      values: [salutation, firstName, lastName],
+      required: [1],
+    },
    { format: '{1} {2}', values: [firstName, lastName], required: [] },
    { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
-    { format: '{1}', values: [company], required: [1] }
+    { format: '{1}', values: [company], required: [1] },
  ];

  const formatOptions = formats
-    .filter((format) => !format.values.some((value, index) => {
-      return !value && format.required.indexOf(index + 1) !== -1;
-    }))
+    .filter(
+      (format) =>
+        !format.values.some((value, index) => {
+          return !value && format.required.indexOf(index + 1) !== -1;
+        }),
+    )
    .map((formatOption) => {
      const { format, values } = formatOption;
      let label = format;

      values.forEach((value, index) => {
-        const replaceWith = (value || '');
+        const replaceWith = value || '';
        label = label.replace(`{${index + 1}}`, replaceWith).trim();
      });
-      return { label: label.replace(/\s+/g, " ") };
+      return { label: label.replace(/\s+/g, ' ') };
    });

  return (
@@ -35,9 +43,9 @@ export default function DisplayNameList({
      items={formatOptions}
      selectedItemProp={'label'}
      textProp={'label'}
-      defaultText={'Select display name as'}
+      defaultText={intl.get('select_display_name_as')}
      filterable={false}
-      { ...restProps }
+      {...restProps}
    />
  );
-}
+}
--- a/src/components/Drawer/Drawer.js
+++ b/src/components/Drawer/Drawer.js
@@ -3,6 +3,7 @@ import { Position, Drawer } from '@blueprintjs/core';

 import 'style/components/Drawer.scss';

+import { DrawerProvider } from './DrawerProvider';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import { compose } from 'utils';

@@ -27,7 +28,7 @@ function DrawerComponent(props) {
      portalClassName={'drawer-portal'}
      {...props}
    >
-      {children}
+      <DrawerProvider {...props}>{children}</DrawerProvider>
    </Drawer>
  );
 }
--- a/src/components/Drawer/DrawerActionsBar.js
+++ b/src/components/Drawer/DrawerActionsBar.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+export function DrawerActionsBar({ ...props }) {
+  return <DrawerActionsBarRoot {...props} />;
+}
+
+const DrawerActionsBarRoot = styled(DashboardActionsBar)`
+  border-bottom: 1px solid #d9d9da;
+`;
--- a/src/components/Drawer/DrawerMainTabs.js
+++ b/src/components/Drawer/DrawerMainTabs.js
@@ -1,15 +1,54 @@
 import React from 'react';
 import { Tabs } from '@blueprintjs/core';
+import styled from 'styled-components';

 /**
 * Drawer main tabs.
 */
 export function DrawerMainTabs({ children, ...restProps }) {
  return (
-    <div class="drawer__main-tabs">
+    <DrawerMainTabsRoot>
      <Tabs animate={true} large={true} {...restProps}>
        {children}
      </Tabs>
-    </div>
+    </DrawerMainTabsRoot>
  );
 }
+
+const DrawerMainTabsRoot = styled.div`
+  .bp3-tabs {
+    .bp3-tab-list {
+      position: relative;
+      background-color: #fff;
+      padding: 0 15px;
+      border-bottom: 2px solid #e1e2e8;
+
+      > *:not(:last-child) {
+        margin-right: 25px;
+      }
+
+      &.bp3-large > .bp3-tab {
+        font-size: 15px;
+        color: #7f8596;
+        margin: 0 1rem;
+
+        &[aria-selected='true'],
+        &:not([aria-disabled='true']):hover {
+          color: #0052cc;
+        }
+      }
+      .bp3-tab-indicator-wrapper .bp3-tab-indicator {
+        height: 2px;
+        bottom: -2px;
+      }
+    }
+
+    .bp3-tab-panel {
+      margin-top: 0;
+
+      .card {
+        margin: 15px;
+      }
+    }
+  }
+`;
--- a/src/components/Drawer/DrawerProvider.js
+++ b/src/components/Drawer/DrawerProvider.js
@@ -0,0 +1,16 @@
+import React, { createContext, useContext } from 'react';
+
+const DrawerContext = createContext();
+
+/**
+ * Account form provider.
+ */
+function DrawerProvider({ ...props }) {
+  const provider = { ...props };
+
+  return <DrawerContext.Provider value={provider} {...props} />;
+}
+
+const useDrawerContext = () => useContext(DrawerContext);
+
+export { DrawerProvider, useDrawerContext };
--- a/src/components/Drawer/index.js
+++ b/src/components/Drawer/index.js
@@ -13,3 +13,5 @@ export function DrawerLoading({ loading, mount = false, children }) {
 export function DrawerBody({ children }) {
  return <div className={Classes.DRAWER_BODY}>{children}</div>;
 }
+
+export * from './DrawerActionsBar';
--- a/src/components/DrawersContainer.js
+++ b/src/components/DrawersContainer.js
@@ -13,6 +13,14 @@ import ItemDetailDrawer from '../containers/Drawers/ItemDetailDrawer';
 import CustomerDetailsDrawer from '../containers/Drawers/CustomerDetailsDrawer';
 import VendorDetailsDrawer from '../containers/Drawers/VendorDetailsDrawer';
 import InventoryAdjustmentDetailDrawer from '../containers/Drawers/InventoryAdjustmentDetailDrawer';
+import CashflowTransactionDetailDrawer from '../containers/Drawers/CashflowTransactionDetailDrawer';
+import QuickCreateCustomerDrawer from '../containers/Drawers/QuickCreateCustomerDrawer';
+import QuickCreateItemDrawer from '../containers/Drawers/QuickCreateItemDrawer';
+import QuickWriteVendorDrawer from '../containers/Drawers/QuickWriteVendorDrawer';
+import CreditNoteDetailDrawer from '../containers/Drawers/CreditNoteDetailDrawer';
+import VendorCreditDetailDrawer from '../containers/Drawers/VendorCreditDetailDrawer';
+import RefundCreditNoteDetailDrawer from '../containers/Drawers/RefundCreditNoteDetailDrawer';
+import RefundVendorCreditDetailDrawer from '../containers/Drawers/RefundVendorCreditDetailDrawer';

 import { DRAWERS } from 'common/drawers';

@@ -37,6 +45,20 @@ export default function DrawersContainer() {
      <InventoryAdjustmentDetailDrawer
        name={DRAWERS.INVENTORY_ADJUSTMENT_DRAWER}
      />
+      <CashflowTransactionDetailDrawer
+        name={DRAWERS.CASHFLOW_TRNASACTION_DRAWER}
+      />
+      <QuickCreateCustomerDrawer name={DRAWERS.QUICK_CREATE_CUSTOMER} />
+      <QuickCreateItemDrawer name={DRAWERS.QUICK_CREATE_ITEM} />
+      <QuickWriteVendorDrawer name={DRAWERS.QUICK_WRITE_VENDOR} />
+      <CreditNoteDetailDrawer name={DRAWERS.CREDIT_NOTE_DETAIL_DRAWER} />
+      <VendorCreditDetailDrawer name={DRAWERS.VENDOR_CREDIT_DETAIL_DRAWER} />
+      <RefundCreditNoteDetailDrawer
+        name={DRAWERS.REFUND_CREDIT_NOTE_DETAIL_DRAWER}
+      />
+      <RefundVendorCreditDetailDrawer
+        name={DRAWERS.REFUND_VENDOR_CREDIT_DETAIL_DRAWER}
+      />
    </div>
  );
 }
--- a/src/components/FormattedMessage.js
+++ b/src/components/FormattedMessage.js
@@ -1,7 +1,7 @@
 import intl from 'react-intl-universal';

-export function FormattedMessage({ id }) {
-  return intl.get(id);
+export function FormattedMessage({ id, values }) {
+  return intl.get(id, values);
 }

 export function FormattedHTMLMessage({ ...args }) {
--- a/src/components/Forms/FormikObserver.js
+++ b/src/components/Forms/FormikObserver.js
@@ -0,0 +1,14 @@
+
+import { useDeepCompareEffect } from 'hooks/utils';
+
+export function FormikObserver({ onChange, values }) {
+  useDeepCompareEffect(() => {
+    onChange(values);
+  }, [values]);
+
+  return null;
+}
+
+FormikObserver.defaultProps = {
+  onChange: () => null,
+};
--- a/src/components/Forms/index.js
+++ b/src/components/Forms/index.js
@@ -1 +1,2 @@
-export * from './FormObserver';
+export * from './FormObserver';
+export * from './FormikObserver';
--- a/src/components/Guards/EnsureOrganizationIsReady.js
+++ b/src/components/Guards/EnsureOrganizationIsReady.js
@@ -6,7 +6,6 @@ import { compose } from 'utils';
 import withAuthentication from 'containers/Authentication/withAuthentication';
 import withOrganization from 'containers/Organization/withOrganization';

-
 function EnsureOrganizationIsReady({
  // #ownProps
  children,
@@ -15,10 +14,10 @@ function EnsureOrganizationIsReady({
  // #withOrganizationByOrgId
  isOrganizationReady,
 }) {
-  return (isOrganizationReady) ? children : (
-    <Redirect
-      to={{ pathname: redirectTo }}
-    />
+  return isOrganizationReady ? (
+    children
+  ) : (
+    <Redirect to={{ pathname: redirectTo }} />
  );
 }

@@ -28,4 +27,4 @@ export default compose(
    organizationId: props.currentOrganizationId,
  })),
  withOrganization(({ isOrganizationReady }) => ({ isOrganizationReady })),
-)(EnsureOrganizationIsReady);
+)(EnsureOrganizationIsReady);
--- a/src/components/IntersectionObserver/index.js
+++ b/src/components/IntersectionObserver/index.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { useIntersectionObserver } from 'hooks/utils';
+
+/**
+ * Intersection observer.
+ */
+export function IntersectionObserver({ onIntersect }) {
+  const loadMoreButtonRef = React.useRef();
+
+  useIntersectionObserver({
+    // enabled: !isItemsLoading && !isResourceLoading,
+    target: loadMoreButtonRef,
+    onIntersect: () => {
+      onIntersect && onIntersect();
+    },
+  });
+
+  return (
+    <div
+      ref={loadMoreButtonRef}
+      style={{ opacity: 0, height: 0, width: 0, padding: 0, margin: 0 }}
+    >
+      Load Newer
+    </div>
+  );
+}
--- a/src/components/ItemsSuggestField.js
+++ b/src/components/ItemsSuggestField.js
@@ -1,13 +1,68 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { MenuItem } from '@blueprintjs/core';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-
 import { Suggest } from '@blueprintjs/select';
+import classNames from 'classnames';
+import * as R from 'ramda';
+import intl from 'react-intl-universal';
+import { CLASSES } from 'common/classes';

 import { FormattedMessage as T } from 'components';

-export default function ItemsSuggestField({
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { DRAWERS } from 'common/drawers';
+
+// Creates a new item from query.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Handle quick create new customer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={intl.get('list.create', { value: `"${query}"` })}
+      active={active}
+      shouldDismissPopover={false}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Item renderer.
+const itemRenderer = (item, { modifiers, handleClick }) => (
+  <MenuItem
+    key={item.id}
+    text={item.name}
+    label={item.code}
+    onClick={handleClick}
+  />
+);
+
+// Filters items.
+const filterItemsPredicater = (query, item, _index, exactMatch) => {
+  const normalizedTitle = item.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${normalizedTitle} ${item.code}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+// Handle input value renderer.
+const handleInputValueRenderer = (inputValue) => {
+  if (inputValue) {
+    return inputValue.name.toString();
+  }
+  return '';
+};
+
+function ItemsSuggestField({
  items,
  initialItemId,
  selectedItemId,
@@ -18,6 +73,10 @@ export default function ItemsSuggestField({
  sellable = false,
  purchasable = false,
  popoverFill = false,
+
+  allowCreate = true,
+
+  openDrawer,
  ...suggestProps
 }) {
  // Filters items based on filter props.
@@ -36,28 +95,23 @@ export default function ItemsSuggestField({
  // Find initial item object.
  const initialItem = useMemo(
    () => filteredItems.some((a) => a.id === initialItemId),
-    [initialItemId],
+    [initialItemId, filteredItems],
  );

  const [selectedItem, setSelectedItem] = useState(initialItem || null);

  const onItemSelect = useCallback(
    (item) => {
-      setSelectedItem({ ...item });
-      onItemSelected && onItemSelected(item);
+      if (item.id) {
+        setSelectedItem({ ...item });
+        onItemSelected && onItemSelected(item);
+      } else {
+        openDrawer(DRAWERS.QUICK_CREATE_ITEM);
+      }
    },
-    [setSelectedItem, onItemSelected],
+    [setSelectedItem, onItemSelected, openDrawer],
  );

-  const itemRenderer = useCallback((item, { modifiers, handleClick }) => (
-    <MenuItem
-      key={item.id}
-      text={item.name}
-      label={item.code}
-      onClick={handleClick}
-    />
-  ));
-
  useEffect(() => {
    if (typeof selectedItemId !== 'undefined') {
      const item = selectedItemId
@@ -67,27 +121,12 @@ export default function ItemsSuggestField({
    }
  }, [selectedItemId, filteredItems, setSelectedItem]);

-  const handleInputValueRenderer = (inputValue) => {
-    if (inputValue) {
-      return inputValue.name.toString();
-    }
-    return '';
-  };
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;

-  // Filters items.
-  const filterItemsPredicater = useCallback(
-    (query, item, _index, exactMatch) => {
-      const normalizedTitle = item.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
-
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
-      } else {
-        return `${normalizedTitle} ${item.code}`.indexOf(normalizedQuery) >= 0;
-      }
-    },
-    [],
-  );
  return (
    <Suggest
      items={filteredItems}
@@ -104,7 +143,12 @@ export default function ItemsSuggestField({
      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
      })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      createNewItemPosition={'top'}
      {...suggestProps}
    />
  );
 }
+
+export default R.compose(withDrawerActions)(ItemsSuggestField);
--- a/src/components/MoreMenutItems.js
+++ b/src/components/MoreMenutItems.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+} from '@blueprintjs/core';
+
+import { Icon, FormattedMessage as T } from 'components';
+
+function MoreMenuItems({ payload: { onNotifyViaSMS } }) {
+  return (
+    <Popover
+      minimal={true}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onNotifyViaSMS}
+            text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
+          />
+        </Menu>
+      }
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+}
+
+export default MoreMenuItems;
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`@bigcapitalhq:registry=https://npm.pkg.github.com`