Merge branch 'develop' into main

refactor(InventoryValuation)

.env.example

@@ -0,0 +1 @@
+APP_VERSION=$npm_package_version

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

CHANGELOG.md

@@ -2,6 +2,66 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+## [1.5.8] - 13-01-2022
+
+### Added
+- Add payment receive PDF print.
+- Add credit note PDF print.
+
+### Fixed
+- fix: Payment receive initial loading state depends on request loading state instead fetching.
+- fix: Balance sheet report alert positioning.
+- fix: Separate customer and vendor inactivate and activate alerts.
+- fix: Hide convert to invoice button if the invoice is already converted.
+- fix: Customer and vendor balance summary percentage of column option.
+- fix: Remove duplicated details in sales and purchases details drawers.
+
+## [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 +92,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
 

config/env.js

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

config/paths.js

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bigcapital-client",
-  "version": "1.2.0",
+  "version": "1.5.8",
   "private": true,
   "dependencies": {
     "@babel/core": "7.8.4",
@@ -10,6 +10,8 @@
     "@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",
@@ -34,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",
@@ -44,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",
@@ -68,6 +72,7 @@
     "postcss-preset-env": "6.7.0",
     "postcss-rtl": "^1.7.3",
     "postcss-safe-parser": "4.0.1",
+    "query-string": "^7.1.1",
     "ramda": "^0.27.1",
     "react": "^16.12.0",
     "react-app-polyfill": "^1.0.6",
@@ -89,7 +94,7 @@
     "react-sortablejs": "^2.0.11",
     "react-split-pane": "^0.1.91",
     "react-table": "^7.6.3",
-    "react-table-sticky": "^1.1.2",
+    "react-table-sticky": "^1.1.3",
     "react-transition-group": "^4.4.1",
     "react-use": "^13.26.1",
     "react-use-context-menu": "^0.1.4",
@@ -104,6 +109,7 @@
     "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",

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,25 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <% if (process.env.NODE_ENV === 'production') { %>
+    <!-- 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 +64,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>

src/common/TableStyle.js

@@ -0,0 +1,6 @@
+
+
+export const TableStyle = {
+  Constrant: 'constrant',
+  Regular: 'regular'
+}

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',
+};

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',
 
@@ -67,6 +69,7 @@ const CLASSES = {
   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',
 

src/common/drawers.js

@@ -14,4 +14,8 @@ export const DRAWERS = {
   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'
 };

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,
       },
     ],
   },

src/common/index.js

@@ -0,0 +1,3 @@
+export * from './TableStyle';
+
+export const Align = { Left: 'left', Right: 'right', Center: 'center' };

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);
+};

src/common/keyboardShortcutsOptions.js

@@ -1,110 +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 + / ',

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();
+}

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);
+};

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'
 };

src/common/tables.js

@@ -14,6 +14,8 @@ export const TABLES = {
   EXPENSES: 'expenses',
   CASHFLOW_ACCOUNTS: 'cashflow_accounts',
   CASHFLOW_Transactions: 'cashflow_transactions',
+  CREDIT_NOTES: 'credit_notes',
+  VENDOR_CREDITS: 'vendor_credits',
 };
 
 export const TABLE_SIZE = {

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;
+`;

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;
-}

src/components/BankAccounts/index.js

@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
 import clsx from 'classnames';
 import Icon from '../Icon';
-import { whenRtl, whenLtr } from 'utils/styled-components';
 
 const ACCOUNT_TYPE = {
   CASH: 'cash',
@@ -185,9 +184,7 @@ const MetaLineValue = styled.div`
   text-align: center;
   color: rgb(23, 43, 77);
   font-size: 11px;
-
-  ${whenLtr(`margin-left: auto;`)}
-  ${whenRtl(`margin-right: auto;`)}
+  margin-left: auto;
 `;
 
 const BankAccountMeta = styled.div`
@@ -204,7 +201,5 @@ const AccountIconWrap = styled.div`
   position: absolute;
   top: 14px;
   color: #abb3bb;
-
-  ${whenLtr(`right: 12px;`)}
-  ${whenRtl(`left: 12px;`)}
+  right: 12px;
 `;

src/components/Button/ButtonLink.js

@@ -5,6 +5,7 @@ export const ButtonLink = styled.button`
   border: 0;
   background: transparent;
   cursor: pointer;
+  text-align: inherit;
 
   &:hover,
   &:active {

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>;
-}

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;
+    }
+  }
+`;

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: 28px;
+`;

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,
+);

src/components/Customers/index.js

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

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);

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>
+  );
+}

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>
   );
 }

src/components/Dashboard/DashboardBoot.js

@@ -1,18 +1,53 @@
 import React from 'react';
-import * as R from 'ramda';
-
-import { useUser, useCurrentOrganization } from '../../hooks/query';
+import {
+  useAuthenticatedAccount,
+  useCurrentOrganization,
+  useDashboardMeta,
+} from '../../hooks/query';
 import { useSplashLoading } from '../../hooks/state';
 import { useWatch, useWatchImmediate, useWhen } from '../../hooks';
-
-import withAuthentication from '../../containers/Authentication/withAuthentication';
-
 import { setCookie, getCookie } from '../../utils';
 
 /**
- * Dashboard async booting.
+ * Dashboard meta async booting.
  */
-function DashboardBootJSX({ 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,
@@ -22,7 +57,7 @@ function DashboardBootJSX({ authenticatedUserId }) {
 
   // Authenticated user.
   const { isSuccess: isAuthUserSuccess, isLoading: isAuthUserLoading } =
-    useUser(authenticatedUserId);
+    useAuthenticatedAccount();
 
   // Initial locale cookie value.
   const localeCookie = getCookie('locale');
@@ -86,11 +121,8 @@ function DashboardBootJSX({ authenticatedUserId }) {
       isBooted.current = true;
     },
   );
-  return null;
-}
 
-export const DashboardBoot = R.compose(
-  withAuthentication(({ authenticatedUserId }) => ({
-    authenticatedUserId,
-  })),
-)(DashboardBootJSX);
+  return {
+    isLoading: isOrgLoading || isAuthUserLoading,
+  };
+}

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>;
 }

src/components/Dashboard/DashboardThemeProvider.js

@@ -1,9 +1,16 @@
 import React from 'react';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider, StyleSheetManager } from 'styled-components';
+import rtlcss from 'stylis-rtlcss';
 import { useAppIntlContext } from '../AppIntlProvider';
 
 export function DashboardThemeProvider({ children }) {
   const { direction } = useAppIntlContext();
 
-  return <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>;
+  return (
+    <StyleSheetManager
+      {...(direction === 'rtl' ? { stylisPlugins: [rtlcss] } : {})}
+    >
+      <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>
+    </StyleSheetManager>
+  );
 }

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}
+    />
+  );
+}

src/components/Dashboard/PrivatePagesProvider.js

@@ -1,31 +1,15 @@
 import React from 'react';
-import * as R from 'ramda';
 
-import { AuthenticatedUser } from './AuthenticatedUser';
-import { DashboardBoot } from '../../components';
-
-import withDashboard from '../../containers/Dashboard/withDashboard';
+import { useApplicationBoot } from '../../components';
 
 /**
  * Private pages provider.
  */
-function PrivatePagesProviderComponent({
-  splashScreenCompleted,
-
+export function PrivatePagesProvider({
   // #ownProps
   children,
 }) {
-  return (
-    <AuthenticatedUser>
-      <DashboardBoot />
+  const { isLoading } = useApplicationBoot();
 
-      {splashScreenCompleted ? children : null}
-    </AuthenticatedUser>
-  );
+  return <React.Fragment>{!isLoading ? children : null}</React.Fragment>;
 }
-
-export const PrivatePagesProvider = R.compose(
-  withDashboard(({ splashScreenCompleted }) => ({
-    splashScreenCompleted,
-  })),
-)(PrivatePagesProviderComponent);

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();

src/components/Dashboard/index.js

@@ -1,3 +1,4 @@
 export * from './SplashScreen';
 export * from './DashboardBoot';
 export * from './DashboardThemeProvider';
+export * from './DashboardAbilityProvider';

src/components/Datatable/TableHeader.js

@@ -15,7 +15,7 @@ function TableHeaderCell({ column, index }) {
     <div
       {...column.getHeaderProps({
         className: classNames(column.className || '', 'th', {
-          'align-right': column.align === 'right',
+          [`align-${column.align}`]: column.align,
         }),
       })}
     >
@@ -89,12 +89,14 @@ export default function TableHeader() {
   return (
     <ScrollSyncPane>
       <div className="thead">
-        {headerGroups.map((headerGroup, index) => (
-          <TableHeaderGroup key={index} headerGroup={headerGroup} />
-        ))}
-        <If condition={progressBarLoading}>
-          <MaterialProgressBar />
-        </If>
+        <div className={'thead-inner'}>
+          {headerGroups.map((headerGroup, index) => (
+            <TableHeaderGroup key={index} headerGroup={headerGroup} />
+          ))}
+          <If condition={progressBarLoading}>
+            <MaterialProgressBar />
+          </If>
+        </div>
       </div>
     </ScrollSyncPane>
   );

src/components/Datatable/TableHeaderSkeleton.js

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import clsx from 'classnames';
 import TableContext from './TableContext';
 import { Skeleton } from 'components';
 
@@ -8,7 +9,13 @@ function TableHeaderCell({ column }) {
   return (
     <div
       {...column.getHeaderProps({
-        className: 'th',
+        className: clsx(
+          'th',
+          {
+            [`align-${column.align}`]: column.align,
+          },
+          column.className,
+        ),
       })}
     >
       <Skeleton minWidth={skeletonWidthMin} maxWidth={skeletonWidthMax} />

src/components/Datatable/TableSkeletonRows.js

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import clsx from 'classnames';
 import TableContext from './TableContext';
 import { Skeleton } from 'components';
 
@@ -11,7 +12,13 @@ function TableHeaderCell({ column }) {
   return (
     <div
       {...column.getHeaderProps({
-        className: 'td',
+        className: clsx(
+          'td',
+          {
+            [`align-${column.align}`]: column.align,
+          },
+          column.className,
+        ),
       })}
     >
       <Skeleton minWidth={skeletonWidthMin} maxWidth={skeletonWidthMax} />

src/components/Datatable/TableWrapper.js

@@ -16,6 +16,7 @@ export default function TableWrapper({ children }) {
       expandable,
       virtualizedRows,
       className,
+      styleName,
       size,
     },
   } = useContext(TableContext);
@@ -28,6 +29,7 @@ export default function TableWrapper({ children }) {
         'is-expandable': expandable,
         'is-loading': loading,
         'has-virtualized-rows': virtualizedRows,
+        [`table--${styleName}`]: styleName,
       })}
     >
       <ScrollSync>

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,
       )}

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;
+`;

src/components/Dialog/DialogFooterActions.js

@@ -2,6 +2,10 @@ 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
@@ -13,14 +17,25 @@ export function DialogFooterActions({ alignment = 'right', children }) {
   );
 }
 
+/**
+ * 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`
-  margin-left: -10px;
-  margin-right: -10px;
-  justify-content: ${(props) =>
-    props.alignment === 'right' ? 'flex-end' : 'flex-start'};
+  ${(props) =>
+    props.alignment === 'right' ? 'margin-left: auto;' : 'margin-right: auto;'};
 
   .bp3-button {
-    margin-left: 10px;
-    margin-left: 10px;
+    margin-left: 5px;
+    margin-left: 5px;
   }
 `;

src/components/Dialog/index.js

@@ -3,4 +3,5 @@
 export * from './Dialog';
 export * from './DialogFooterActions';
 export * from './DialogSuspense';
-export * from './DialogContent';
+export * from './DialogContent';
+export * from './DialogFooter';

src/components/DialogsContainer.js

@@ -23,8 +23,17 @@ 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 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';
+import CreditNotePdfPreviewDialog from '../containers/Dialogs/CreditNotePdfPreviewDialog';
+import PaymentReceivePdfPreviewDialog from '../containers/Dialogs/PaymentReceivePdfPreviewDialog';
 
 /**
  * Dialogs container.
@@ -58,6 +67,17 @@ export default function DialogsContainer() {
 
       <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'}
+      />
+      <CreditNotePdfPreviewDialog dialogName={'credit-note-pdf-preview'} />
+      <PaymentReceivePdfPreviewDialog dialogName={'payment-pdf-preview'} />
     </div>
   );
 }

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;
+`;

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;
+      }
+    }
+  }
+`;

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';

src/components/DrawersContainer.js

@@ -17,6 +17,10 @@ import CashflowTransactionDetailDrawer from '../containers/Drawers/CashflowTrans
 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';
 
@@ -47,6 +51,14 @@ export default function DrawersContainer() {
       <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>
   );
 }

src/components/FinancialReport/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const FinancialStatementRoot = styled.div``;
+const FinancialStatementBodyRoot = styled.div``;
+
+/**
+ * 
+ * @returns {React.JSX}
+ */
+export function FinancialReport({ children, className }) {
+  return <FinancialStatementRoot children={children} className={className} />;
+}
+
+/**
+ *
+ * @param {React.JSX}
+ */
+export function FinancialReportBody({ children, className }) {
+  return (
+    <FinancialStatementBodyRoot children={children} className={className} />
+  );
+}

src/components/FinancialSheet.js

@@ -1,103 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import moment from 'moment';
-import classnames from 'classnames';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-
-import 'style/pages/FinancialStatements/FinancialSheet.scss';
-
-import { If, LoadingIndicator, MODIFIER } from 'components';
-
-export default function FinancialSheet({
-  companyName,
-  sheetType,
-  fromDate,
-  toDate,
-  asDate,
-  children,
-  accountingBasis,
-  name,
-  loading,
-  className,
-  basis,
-  minimal = false,
-  fullWidth = false,
-  currentDate = true,
-}) {
-  
-  const format = 'DD MMMM YYYY';
-  const formattedFromDate = useMemo(() => moment(fromDate).format(format), [
-    fromDate,
-  ]);
-  const formattedToDate = useMemo(() => moment(toDate).format(format), [
-    toDate,
-  ]);
-  const formattedAsDate = useMemo(() => moment(asDate).format(format), [
-    asDate,
-  ]);
-
-  const nameModifer = name ? `financial-sheet--${name}` : '';
-  const methodsLabels = useMemo(
-    () => ({
-      cash: intl.get('cash'),
-      accrual: intl.get('accrual'),
-    }),
-    [],
-  );
-  const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]);
-  const basisLabel = useMemo(() => getBasisLabel(basis), [
-    getBasisLabel,
-    basis,
-  ]);
-
-  return (
-    <div
-      className={classnames('financial-sheet', nameModifer, className, {
-        [MODIFIER.FINANCIAL_SHEET_MINIMAL]: minimal,
-        'is-full-width': fullWidth,
-      })}
-    >
-      {loading ? (
-        <LoadingIndicator loading={loading} spinnerSize={34} />
-      ) : (
-        <div className={classnames('financial-sheet__inner')}>
-          <If condition={!!companyName}>
-            <h1 class="financial-sheet__title">{companyName}</h1>
-          </If>
-
-          <If condition={!!sheetType}>
-            <h6 class="financial-sheet__sheet-type">{sheetType}</h6>
-          </If>
-
-          <div class="financial-sheet__date">
-            <If condition={asDate}>
-              <T id={'as'} /> {formattedAsDate}
-            </If>
-
-            <If condition={fromDate && toDate}>
-              <T id={'from'} /> {formattedFromDate} | <T id={'to'} />{' '}
-              {formattedToDate}
-            </If>
-          </div>
-
-          <div class="financial-sheet__table">{children}</div>
-          <div class="financial-sheet__accounting-basis">{accountingBasis}</div>
-
-          <div class="financial-sheet__footer">
-            <If condition={basisLabel}>
-              <span class="financial-sheet__basis">
-                <T id={'accounting_basis'} /> {basisLabel}
-              </span>
-            </If>
-
-            <If condition={currentDate}>
-              <span class="financial-sheet__current-date">
-                {moment().format('YYYY MMM DD  HH:MM')}
-              </span>
-            </If>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

src/components/FinancialSheet/FinancialSheet.js

@@ -0,0 +1,100 @@
+import React, { useMemo, useCallback } from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+
+import { If, FormattedMessage as T } from 'components';
+import {
+  FinancialSheetRoot,
+  FinancialSheetFooterCurrentTime,
+  FinancialSheetFooterBasis,
+  FinancialSheetFooter,
+  FinancialSheetAccountingBasis,
+  FinancialSheetTable,
+  FinancialSheetDate,
+  FinancialSheetType,
+  FinancialSheetTitle,
+} from './StyledFinancialSheet';
+
+/**
+ * Financial sheet.
+ * @returns {React.JSX}
+ */
+export function FinancialSheet({
+  companyName,
+  sheetType,
+  fromDate,
+  toDate,
+  asDate,
+  children,
+  accountingBasis,
+  basis,
+  minimal = false,
+  fullWidth = false,
+  currentDate = true,
+  className,
+}) {
+  const format = 'DD MMMM YYYY';
+  const formattedFromDate = useMemo(
+    () => moment(fromDate).format(format),
+    [fromDate],
+  );
+  const formattedToDate = useMemo(
+    () => moment(toDate).format(format),
+    [toDate],
+  );
+  const formattedAsDate = useMemo(
+    () => moment(asDate).format(format),
+    [asDate],
+  );
+  const methodsLabels = useMemo(
+    () => ({
+      cash: intl.get('cash'),
+      accrual: intl.get('accrual'),
+    }),
+    [],
+  );
+  const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]);
+  const basisLabel = useMemo(
+    () => getBasisLabel(basis),
+    [getBasisLabel, basis],
+  );
+
+  return (
+    <FinancialSheetRoot
+      minimal={minimal}
+      fullWidth={fullWidth}
+      className={className}
+    >
+      {companyName && <FinancialSheetTitle>{companyName}</FinancialSheetTitle>}
+      {sheetType && <FinancialSheetType>{sheetType}</FinancialSheetType>}
+
+      <FinancialSheetDate>
+        <If condition={asDate}>
+          <T id={'as'} /> {formattedAsDate}
+        </If>
+        <If condition={fromDate && toDate}>
+          <T id={'from'} /> {formattedFromDate} | <T id={'to'} />{' '}
+          {formattedToDate}
+        </If>
+      </FinancialSheetDate>
+
+      <FinancialSheetTable>{children}</FinancialSheetTable>
+      <FinancialSheetAccountingBasis>
+        {accountingBasis}
+      </FinancialSheetAccountingBasis>
+
+      <FinancialSheetFooter>
+        {basisLabel && (
+          <FinancialSheetFooterBasis>
+            <T id={'accounting_basis'} /> {basisLabel}
+          </FinancialSheetFooterBasis>
+        )}
+        {currentDate && (
+          <FinancialSheetFooterCurrentTime>
+            {moment().format('YYYY MMM DD  HH:MM')}
+          </FinancialSheetFooterCurrentTime>
+        )}
+      </FinancialSheetFooter>
+    </FinancialSheetRoot>
+  );
+}

src/components/FinancialSheet/FinancialSheetSkeleton.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Align } from 'common';
+import { SkeletonText, DataTable } from 'components';
+
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import { TableStyle } from 'common';
+import {
+  FinancialSheetRoot,
+  FinancialSheetTitle,
+  FinancialSheetType,
+  FinancialSheetDate,
+  FinancialSheetTable,
+} from './StyledFinancialSheet';
+
+/**
+ * Financial sheet paper skeleton.
+ * @returns {React.JSX}
+ */
+export function FinancialSheetSkeleton({
+  minimal,
+  fullWidth,
+  titleCharsLength,
+  typeCharsLength,
+  dateCharsLength,
+  skeletonTableColumns,
+}) {
+  return (
+    <FinancialSheetRoot minimal={minimal} fullWidth={fullWidth}>
+      <FinancialSheetTitle>
+        <SkeletonText charsLength={titleCharsLength} />
+      </FinancialSheetTitle>
+
+      <FinancialSheetType>
+        <SkeletonText charsLength={typeCharsLength} />
+      </FinancialSheetType>
+
+      <FinancialSheetDate>
+        <SkeletonText charsLength={dateCharsLength} />
+      </FinancialSheetDate>
+
+      <FinancialSheetTable>
+        <FinancialSkeletonTable
+          columns={skeletonTableColumns}
+          data={[]}
+          noInitialFetch={true}
+          expandable={true}
+          styleName={TableStyle.Constrant}
+          TableLoadingRenderer={TableSkeletonRows}
+          TableHeaderSkeletonRenderer={TableSkeletonHeader}
+          headerLoading={true}
+          loading={true}
+        />
+      </FinancialSheetTable>
+    </FinancialSheetRoot>
+  );
+}
+
+FinancialSheetSkeleton.defaultProps = {
+  titleCharsLength: 20,
+  typeCharsLength: 40,
+  dateCharsLength: 20,
+  skeletonTableColumns: [
+    {
+      id: 'skeleton-1',
+      className: 'skeleton-1',
+    },
+    {
+      id: 'skeleton-2',
+      className: 'skeleton-2',
+      align: Align.Right,
+    },
+  ],
+};
+
+const FinancialSkeletonTable = styled(DataTable)`
+  .table .th .skeleton,
+  .table .td .skeleton {
+    margin-top: 4px;
+    margin-bottom: 4px;
+  }
+`;

src/components/FinancialSheet/ReportDataTable.js

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

src/components/FinancialSheet/StyledFinancialSheet.js

@@ -0,0 +1,82 @@
+import styled from 'styled-components';
+
+export const FinancialSheetRoot = styled.div`
+  border: 2px solid #f0f0f0;
+  border-radius: 10px;
+  min-width: 640px;
+  width: auto;
+  padding: 30px 18px;
+  max-width: 100%;
+  margin: 35px auto;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+
+  ${(props) =>
+    props.fullWidth &&
+    `
+    width: 100%;
+    margin-top: 25px;`}
+
+  ${(props) =>
+    props.minimal &&
+    `
+    border: 0;
+    padding: 0;
+    margin-top: 20px;
+
+  ${FinancialSheetTitle} {
+    font-size: 18px;
+    color: #333;
+  }
+  ${FinancialSheetTitle} + ${FinancialSheetDate} {
+    margin-top: 8px;
+  }
+  ${FinancialSheetDate} {
+    margin-top: 20px;
+  }  
+`}
+`;
+
+export const FinancialSheetTitle = styled.h1`
+  margin: 0;
+  font-weight: 400;
+  font-size: 20px;
+  color: #464646;
+  text-align: center;
+`;
+
+export const FinancialSheetType = styled.h6`
+  text-align: center;
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  color: #666;
+  margin-top: 6px;
+`;
+
+export const FinancialSheetDate = styled.div`
+  text-align: center;
+  color: #666;
+  margin-top: 6px;
+`;
+
+export const FinancialSheetFooter = styled.div`
+  color: #888;
+  text-align: center;
+  margin-top: auto;
+  padding-top: 18px;
+  font-size: 13px;
+
+  > span + span {
+    padding-left: 10px;
+  }
+`;
+export const FinancialSheetTable = styled.div`
+  margin-top: 24px;
+`;
+export const FinancialSheetFooterBasis = styled.span``;
+export const FinancialSheetFooterCurrentTime = styled.span``;
+
+export const FinancialSheetAccountingBasis = styled.div``;

src/components/FinancialSheet/index.js

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

src/components/FinancialStatement.js

@@ -1,15 +1,24 @@
 import React from 'react';
-import className from 'classnames';
-import 'style/containers/FinancialStatements/FinancialSheet.scss';
+import styled from 'styled-components';
 
-export default function FinancialStatements({ name, children }) {
+const FinancialStatementRoot = styled.div``;
+const FinancialStatementBodyRoot = styled.div``;
+
+/**
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+export function FinancialStatement({ children, className }) {
+  return <FinancialStatementRoot children={children} className={className} />;
+}
+
+/**
+ *
+ * @param {React.JSX}
+ */
+export function FinancialStatementBody({ children, className }) {
   return (
-    <div
-      className={className('financial-statement', {
-        [`financial-statement--${name}`]: name,
-      })}
-    >
-      {children}
-    </div>
+    <FinancialStatementBodyRoot children={children} className={className} />
   );
 }

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,
+};

src/components/Forms/index.js

@@ -1 +1,2 @@
-export * from './FormObserver';
+export * from './FormObserver';
+export * from './FormikObserver';

src/components/Preferences/PreferencesPage.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import classNames from 'classnames';
+import * as R from 'ramda';
+
 import { CLASSES } from 'common/classes';
 
 import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
@@ -8,18 +10,28 @@ import PreferencesContentRoute from 'components/Preferences/PreferencesContentRo
 import DashboardErrorBoundary from 'components/Dashboard/DashboardErrorBoundary';
 import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
 import 'style/pages/Preferences/Page.scss';
 
 /**
  * Preferences page.
  */
-export default function PreferencesPage() {
+function PreferencesPage({ toggleSidebarExpand }) {
+  // Shrink the dashboard sidebar once open application preferences page.
+  React.useEffect(() => {
+    toggleSidebarExpand(false);
+  }, [toggleSidebarExpand]);
+
   return (
     <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
-      <div id={'dashboard'} className={classNames(
-        CLASSES.DASHBOARD_CONTENT,
-        CLASSES.DASHBOARD_CONTENT_PREFERENCES,
-      )}>
+      <div
+        id={'dashboard'}
+        className={classNames(
+          CLASSES.DASHBOARD_CONTENT,
+          CLASSES.DASHBOARD_CONTENT_PREFERENCES,
+        )}
+      >
         <div className={classNames(CLASSES.PREFERENCES_PAGE)}>
           <PreferencesSidebar />
 
@@ -32,3 +44,5 @@ export default function PreferencesPage() {
     </ErrorBoundary>
   );
 }
+
+export default R.compose(withDashboardActions)(PreferencesPage);

src/components/Sidebar/Sidebar.js

@@ -1,20 +1,37 @@
 import React from 'react';
+
 import SidebarContainer from 'components/Sidebar/SidebarContainer';
 import SidebarHead from 'components/Sidebar/SidebarHead';
 import SidebarMenu from 'components/Sidebar/SidebarMenu';
+import { useGetSidebarMenu } from './utils';
 
 import 'style/containers/Dashboard/Sidebar.scss';
 
 export default function Sidebar({ dashboardContentRef }) {
+  const menu = useGetSidebarMenu();
+
   return (
     <SidebarContainer>
       <SidebarHead />
 
       <div className="sidebar__menu">
-        <SidebarMenu />
+        <SidebarMenu menu={menu} />
       </div>
 
-      <div class="sidebar__version">0.0.1-beta version.</div>
+      <SidebarFooterVersion />
     </SidebarContainer>
   );
 }
+
+/**
+ * Sidebar footer version. 
+ * @returns {React.JSX}
+ */
+function SidebarFooterVersion() {
+  const { VERSION } = process.env;
+
+  if (!VERSION) {
+    return null;
+  }
+  return <div class="sidebar__version">v{VERSION}</div>;
+}

src/components/Sidebar/SidebarHead.js

@@ -3,7 +3,7 @@ import { Button, Popover, Menu, Position } from '@blueprintjs/core';
 import Icon from 'components/Icon';
 import { compose, firstLettersArgs } from 'utils';
 import withCurrentOrganization from '../../containers/Organization/withCurrentOrganization';
-import { useAuthenticatedUser } from '../Dashboard/AuthenticatedUser';
+import { useAuthenticatedAccount } from '../../hooks/query';
 
 // Popover modifiers.
 const POPOVER_MODIFIERS = {
@@ -18,7 +18,7 @@ function SidebarHead({
   organization,
 }) {
   // Retrieve authenticated user information.
-  const { user } = useAuthenticatedUser();
+  const { data: user } = useAuthenticatedAccount();
 
   return (
     <div className="sidebar__head">

src/components/Sidebar/SidebarMenu.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Menu, MenuDivider } from '@blueprintjs/core';
 import { useHistory, useLocation } from 'react-router-dom';
-import sidebarMenuList from 'config/sidebarMenu';
+
 import { Choose } from 'components';
 import Icon from 'components/Icon';
 import MenuItem from 'components/MenuItem';
@@ -24,7 +24,7 @@ function SidebarMenuItemSpace({ space }) {
   return <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />;
 }
 
-function SidebarMenu({ isSubscriptionActive }) {
+function SidebarMenu({ menu, isSubscriptionActive }) {
   const history = useHistory();
   const location = useLocation();
 
@@ -93,7 +93,7 @@ function SidebarMenu({ isSubscriptionActive }) {
     });
   };
 
-  const filterItems = sidebarMenuList.filter(
+  const filterItems = menu.filter(
     (item) => isSubscriptionActive || item.enableBilling,
   );
   const items = menuItemsMapper(filterItems);

src/components/Sidebar/utils.js

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

src/components/Skeleton.js

@@ -6,14 +6,36 @@ import { randomNumber } from 'utils';
 /**
  * Skeleton component.
  */
-export default function Skeleton({
+export function Skeleton({
   Tag = 'span',
   minWidth = 40,
   maxWidth = 100,
+  children,
 }) {
-  const randomWidth = useMemo(() => randomNumber(minWidth, maxWidth), [
-    minWidth,
-    maxWidth,
-  ]);
-  return <Tag className={'skeleton'} style={{ width: `${randomWidth}%` }} />;
+  const randomWidth = useMemo(
+    () => randomNumber(minWidth, maxWidth),
+    [minWidth, maxWidth],
+  );
+  return (
+    <Tag
+      className={'skeleton'}
+      style={{ width: `${randomWidth}%` }}
+      children={children}
+    />
+  );
+}
+
+export function SkeletonText({
+  Tag = 'span',
+  charsLength,
+  minChars = 40,
+  maxChars = 100,
+}) {
+  const computedCharLength = useMemo(
+    () => (charsLength ? charsLength : randomNumber(minChars, maxChars)),
+    [charsLength, minChars, maxChars],
+  );
+  const randamText = 'X'.repeat(computedCharLength);
+
+  return <Tag className={'skeleton'}>{randamText}</Tag>;
 }

src/components/Table/index.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const Table = styled.table`
+  width: 100%;
+  vertical-align: top;
+  border-color: #dee2e6;
+  border-spacing: 0;
+`;
+export const TBody = styled.tbody``;
+export const TR = styled.tr``;
+export const TD = styled.td`
+  padding: 0.5rem 0.5rem;
+  border-bottom-width: 1px;
+  border-bottom-color: inherit;
+  border-bottom-style: solid;
+
+  ${(props) =>
+    props.textAlign === 'right' &&
+    `
+  text-align: right;`}
+`;
+
+export const TRDarkSingleLine = styled(TR)`
+  ${TD} {
+    border-bottom: 1px solid #000;
+  }
+`;
+
+export const TRDarkDoubleLines = styled(TR)`
+  ${TD} {
+    border-bottom: 3px double #000;
+  }
+`;

src/components/Tags/CurrencyTag.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const CurrencyTag = styled.span`
+  background: #3e9215;
+  color: #fff;
+  display: inline-block;
+  border-radius: 3px;
+  padding: 2px 4px;
+  line-height: 1;
+  margin-left: 4px;
+`;

src/components/Tags/index.js

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

src/components/TextStatus/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export function TextStatus({ intent, children }) {
+  return <TextStatusRoot intent={intent}>{children}</TextStatusRoot>;
+}
+
+const TextStatusRoot = styled.span`
+  ${(props) =>
+    props.intent === 'warning' &&
+    `
+  color: #ec5b0a;`}
+
+  ${(props) =>
+    props.intent === 'success' &&
+    `
+  color: #2ba01d;`}
+
+  ${(props) =>
+    props.intent === 'none' &&
+    `
+  color: #777;`}
+
+  ${(props) =>
+    props.intent === 'primary' &&
+    `
+  color: #1652c8;`}
+`;

src/components/TotalLines/TotalLines.module.scss

@@ -1,12 +0,0 @@
-.total_lines {}
-
-
-.total_line {
-    display: flex;
-    border-bottom: 1px solid #d2dde2;
-    
-    :global .amount,
-    :global .title{
-        padding: 8px;
-    }
-}

src/components/TotalLines/index.js

@@ -1,23 +1,93 @@
 import React from 'react';
-import clsx from 'classnames';
+import styled from 'styled-components';
 
-import TotalLinesCls from './TotalLines.module.scss';
+export const TotalLineBorderStyle = {
+  SingleDark: 'SingleDark',
+  DoubleDark: 'DoubleDark',
+};
 
-export function TotalLines({ children, className }) {
+export const TotalLineTextStyle = {
+  Regular: 'Regular',
+  Bold: 'Bold',
+};
+
+export function TotalLines({
+  children,
+  amountColWidth,
+  labelColWidth,
+  className,
+}) {
   return (
-    <div className={clsx('total_lines', TotalLinesCls.total_lines, className)}>
+    <TotalLinesRoot
+      className={className}
+      amountColWidth={amountColWidth}
+      labelColWidth={labelColWidth}
+    >
       {children}
-    </div>
+    </TotalLinesRoot>
   );
 }
 
-export function TotalLine({ title, value, className }) {
+export function TotalLine({ title, value, borderStyle, textStyle, className }) {
   return (
-    <div
-      className={clsx('total_lines_line', TotalLinesCls.total_line, className)}
+    <TotalLineRoot
+      borderStyle={borderStyle}
+      textStyle={textStyle}
+      className={className}
     >
       <div class="title">{title}</div>
       <div class="amount">{value}</div>
-    </div>
+    </TotalLineRoot>
   );
 }
+
+export const TotalLinesRoot = styled.div`
+  display: table;
+
+  ${(props) =>
+    props.amountColWidth &&
+    `
+    .amount{
+      width: ${props.amountColWidth}
+    }
+  `}
+
+  ${(props) =>
+    props.labelColWidth &&
+    `
+    .title{
+      width: ${props.labelColWidth}
+    }
+  `}
+`;
+
+export const TotalLineRoot = styled.div`
+  display: table-row;
+
+  .amount,
+  .title {
+    display: table-cell;
+    padding: 8px;
+    border-bottom: 1px solid #d2dde2;
+
+    ${(props) =>
+      props.borderStyle === TotalLineBorderStyle.DoubleDark &&
+      `
+      border-bottom: 3px double #000;
+    `}
+    ${(props) =>
+      props.borderStyle === TotalLineBorderStyle.SingleDark &&
+      `
+      border-bottom: 1px double #000;
+    `}
+    ${(props) =>
+      props.textStyle === TotalLineTextStyle.Bold &&
+      `
+      font-weight: 600;
+    `}
+  }
+
+  .amount {
+    text-align: right;
+  }
+`;

src/components/Typo/Paragraph.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import clsx from 'classnames';
+
+export function Paragraph({ className, children }) {
+  return <p className={clsx('paragraph', className)}>{children}</p>;
+}

src/components/Typo/index.js

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

src/components/Utils/Join.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export function Join({ items, sep }) {
+  return items.length > 0
+    ? items.reduce((result, item) => (
+        <>
+          {result}
+          {sep}
+          {item}
+        </>
+      ))
+    : null;
+}

src/components/Utils/index.js

@@ -1,4 +1,5 @@
 
 
 export * from './FormatNumber';
-export * from './FormatDate';
+export * from './FormatDate';
+export * from './Join';

src/components/Vendors/VendorDrawerLink.js

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

src/components/Vendors/index.js

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

src/components/index.js

@@ -5,9 +5,6 @@ import Choose from './Utils/Choose';
 import For from './Utils/For';
 import { FormattedMessage, FormattedHTMLMessage } from './FormattedMessage';
 import ListSelect from './ListSelect';
-import FinancialStatement from './FinancialStatement';
-// import DynamicFilterValueField from './DynamicFilter/DynamicFilterValueField';
-// import DynamicFilterCompatatorField from './DynamicFilter/DynamicFilterCompatatorField';
 import ErrorMessage from './ErrorMessage';
 import MODIFIER from './modifiers';
 import FieldHint from './FieldHint';
@@ -41,7 +38,6 @@ import InputPrependText from './Forms/InputPrependText';
 import PageFormBigNumber from './PageFormBigNumber';
 import AccountsMultiSelect from './AccountsMultiSelect';
 import ContactsMultiSelect from './ContactsMultiSelect';
-import Skeleton from './Skeleton';
 import ContextMenu from './ContextMenu';
 import TableFastCell from './Datatable/TableFastCell';
 import DashboardContentTable from './Dashboard/DashboardContentTable';
@@ -54,7 +50,6 @@ import Postbox from './Postbox';
 import AccountsSuggestField from './AccountsSuggestField';
 import MaterialProgressBar from './MaterialProgressBar';
 import { MoneyFieldCell } from './DataTableCells';
-import Card from './Card';
 import AvaterCell from './AvaterCell';
 
 import { ItemsMultiSelect } from './Items';
@@ -87,6 +82,19 @@ export * from './Button';
 export * from './IntersectionObserver';
 export * from './SMSPreview';
 export * from './Contacts';
+export * from './Utils/Join';
+export * from './Typo';
+export * from './TextStatus';
+export * from './Tags';
+export * from './CommercialDoc';
+export * from './Card';
+export * from './Customers'
+export * from './Vendors'
+export * from './Table';
+export * from './Skeleton';
+export * from './FinancialStatement';
+export * from './FinancialReport';
+export * from './FinancialSheet';
 
 const Hint = FieldHint;
 
@@ -102,7 +110,6 @@ export {
   T,
   Money,
   ListSelect,
-  FinancialStatement,
   // DynamicFilterValueField,
   // DynamicFilterCompatatorField,
   MODIFIER,
@@ -140,7 +147,6 @@ export {
   DataTableEditable,
   ContactsMultiSelect,
   TableFastCell,
-  Skeleton,
   ContextMenu,
   DashboardContentTable,
   DashboardPageContent,
@@ -153,7 +159,6 @@ export {
   MaterialProgressBar,
   MoneyFieldCell,
   ItemsMultiSelect,
-  Card,
   AvaterCell,
   MoreMenuItems,
 };

src/config/financialReportsMenu.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
+import { ReportsAction, AbilitySubject } from '../common/abilityOption';
 
 export const financialReportMenus = [
   {
@@ -11,6 +12,8 @@ export const financialReportMenus = [
           <T id={'reports_a_company_s_assets_liabilities_and_shareholders'} />
         ),
         link: '/financial-reports/balance-sheet',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_BALANCE_SHEET,
       },
       {
         title: <T id={'trial_balance_sheet'} />,
@@ -18,11 +21,15 @@ export const financialReportMenus = [
           <T id={'summarizes_the_credit_and_debit_balance_of_each_account'} />
         ),
         link: '/financial-reports/trial-balance-sheet',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_TRIAL_BALANCE_SHEET,
       },
       {
         title: <T id={'profit_loss_report'} />,
         desc: <T id={'reports_the_revenues_costs_and_expenses'} />,
         link: '/financial-reports/profit-loss-sheet',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_PROFIT_LOSS,
       },
       {
         title: <T id={'cash_flow_statement'} />,
@@ -30,16 +37,22 @@ export const financialReportMenus = [
           <T id={'reports_inflow_and_outflow_of_cash_and_cash_equivalents'} />
         ),
         link: '/financial-reports/cash-flow',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_CASHFLOW,
       },
       {
         title: <T id={'journal_report'} />,
         desc: <T id={'the_debit_and_credit_entries_of_system_transactions'} />,
         link: '/financial-reports/journal-sheet',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_JOURNAL,
       },
       {
         title: <T id={'general_ledger_report'} />,
         desc: <T id={'reports_every_transaction_going_in_and_out_of_your'} />,
         link: '/financial-reports/general-ledger',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_GENERAL_LEDGET,
       },
       {
         title: <T id={'receivable_aging_summary'} />,
@@ -47,11 +60,29 @@ export const financialReportMenus = [
           <T id={'summarize_total_unpaid_balances_of_customers_invoices'} />
         ),
         link: '/financial-reports/receivable-aging-summary',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_AR_AGING_SUMMARY,
       },
       {
         title: <T id={'payable_aging_summary'} />,
         desc: <T id={'summarize_total_unpaid_balances_of_vendors_purchase'} />,
         link: '/financial-reports/payable-aging-summary',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_AP_AGING_SUMMARY,
+      },
+      {
+        title: <T id={'report.balance_sheet_comparison.title'} />,
+        desc: <T id={'report.balance_sheet_comparison.desc'} />,
+        link: 'financial-reports/balance-sheet?previousYear=true&previousYearAmountChange=true&previousYearPercentageChange=true',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_BALANCE_SHEET,
+      },
+      {
+        title: <T id={'report.profit_loss_sheet_comparison.title'} />,
+        desc: <T id={'report.profit_loss_sheet_comparison.desc'} />,
+        link: '/financial-reports/profit-loss-sheet?previousYear=true&previousYearAmountChange=true&previousYearPercentageChange=true',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_PROFIT_LOSS,
       },
     ],
   },
@@ -71,6 +102,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/purchases-by-items',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
       },
       {
         title: <T id={'sales_by_items'} />,
@@ -82,6 +115,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/sales-by-items',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_SALES_BY_ITEMS,
       },
       {
         title: <T id={'inventory_valuation'} />,
@@ -93,6 +128,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/inventory-valuation',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
       },
       {
         title: <T id={'customers_balance_summary'} />,
@@ -104,6 +141,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/customers-balance-summary',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
       },
       {
         title: <T id={'vendors_balance_summary'} />,
@@ -111,6 +150,8 @@ export const SalesAndPurchasesReportMenus = [
           <T id={'summerize_the_total_amount_your_business_owes_each_vendor'} />
         ),
         link: '/financial-reports/vendors-balance-summary',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
       },
       {
         title: <T id={'customers_transactions'} />,
@@ -120,6 +161,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/transactions-by-customers',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
       },
       {
         title: <T id={'vendors_transactions'} />,
@@ -131,6 +174,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/transactions-by-vendors',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
       },
       {
         title: <T id={'inventory_item_details'} />,
@@ -138,6 +183,8 @@ export const SalesAndPurchasesReportMenus = [
           <T id={'reports_every_transaction_going_in_and_out_of_your_items'} />
         ),
         link: '/financial-reports/inventory-item-details',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
       },
     ],
   },

src/config/sidebarMenu.js

@@ -1,5 +1,26 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
+import {
+  ReportsAction,
+  AbilitySubject,
+  ItemAction,
+  InventoryAdjustmentAction,
+  SaleEstimateAction,
+  SaleInvoiceAction,
+  SaleReceiptAction,
+  PaymentReceiveAction,
+  BillAction,
+  PaymentMadeAction,
+  CustomerAction,
+  VendorAction,
+  AccountAction,
+  ManualJournalAction,
+  ExpenseAction,
+  CashflowAction,
+  PreferencesAbility,
+  ExchangeRateAbility,
+  SubscriptionBillingAbility,
+} from '../common/abilityOption';
 
 export default [
   {
@@ -11,6 +32,32 @@ export default [
   {
     text: <T id={'sales_inventory'} />,
     label: true,
+    permission: [
+      {
+        subject: AbilitySubject.Item,
+        ability: ItemAction.View,
+      },
+      {
+        subject: AbilitySubject.InventoryAdjustment,
+        ability: InventoryAdjustmentAction.View,
+      },
+      {
+        subject: AbilitySubject.Estimate,
+        ability: SaleEstimateAction.View,
+      },
+      {
+        subject: AbilitySubject.Invoice,
+        ability: SaleInvoiceAction.View,
+      },
+      {
+        subject: AbilitySubject.Receipt,
+        ability: SaleReceiptAction.View,
+      },
+      {
+        subject: AbilitySubject.PaymentReceive,
+        ability: PaymentReceiveAction.View,
+      },
+    ],
   },
   {
     text: <T id={'items'} />,
@@ -18,37 +65,70 @@ export default [
       {
         text: <T id={'items'} />,
         href: '/items',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.View,
+        },
       },
       {
         text: <T id={'inventory_adjustments'} />,
         href: '/inventory-adjustments',
+        permission: {
+          subject: AbilitySubject.InventoryAdjustment,
+          ability: InventoryAdjustmentAction.View,
+        },
       },
       {
         text: <T id={'category_list'} />,
         href: '/items/categories',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Item,
+            ability: ItemAction.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Item,
+            ability: ItemAction.Create,
+          },
+        ],
       },
       {
         text: <T id={'New inventory item'} />,
         href: '/items/new',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.Create,
+        },
       },
       {
         text: <T id={'New service'} />,
         href: '/items/new',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.Create,
+        },
       },
       {
         text: <T id={'New item category'} />,
         href: '/items/categories/new',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: ItemAction.Create,
+        },
       },
-      // {
-      //   text: <T id={'New inventory adjustment'} />,
-      // },
     ],
   },
   {
@@ -57,43 +137,117 @@ export default [
       {
         text: <T id={'estimates'} />,
         href: '/estimates',
-        newTabHref: '/estimates/new',
+        permission: {
+          subject: AbilitySubject.Estimate,
+          ability: SaleEstimateAction.View,
+        },
       },
       {
         text: <T id={'invoices'} />,
         href: '/invoices',
-        newTabHref: '/invoices/new',
+        permission: {
+          subject: AbilitySubject.Invoice,
+          ability: SaleInvoiceAction.View,
+        },
       },
       {
         text: <T id={'receipts'} />,
         href: '/receipts',
+        permission: {
+          subject: AbilitySubject.Receipt,
+          ability: SaleReceiptAction.View,
+        },
+      },
+      {
+        text: <T id={'sidebar_credit_note'} />,
+        href: '/credit-notes',
       },
       {
         text: <T id={'payment_receives'} />,
         href: '/payment-receives',
+        permission: {
+          subject: AbilitySubject.PaymentReceive,
+          ability: PaymentReceiveAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Estimate,
+            ability: SaleEstimateAction.Create,
+          },
+          {
+            subject: AbilitySubject.Invoice,
+            ability: SaleInvoiceAction.Create,
+          },
+          {
+            subject: AbilitySubject.Receipt,
+            ability: SaleReceiptAction.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentReceive,
+            ability: PaymentReceiveAction.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Estimate,
+            ability: SaleEstimateAction.Create,
+          },
+          {
+            subject: AbilitySubject.Invoice,
+            ability: SaleInvoiceAction.Create,
+          },
+          {
+            subject: AbilitySubject.Receipt,
+            ability: SaleReceiptAction.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentReceive,
+            ability: PaymentReceiveAction.Create,
+          },
+        ],
       },
       {
         text: <T id={'new_estimate'} />,
         href: '/estimates/new',
+        permission: {
+          subject: AbilitySubject.Estimate,
+          ability: SaleEstimateAction.Create,
+        },
       },
       {
         text: <T id={'new_invoice'} />,
         href: '/invoices/new',
+        permission: {
+          subject: AbilitySubject.Invoice,
+          ability: SaleInvoiceAction.Create,
+        },
       },
       {
         text: <T id={'new_receipt'} />,
         href: '/receipts/new',
+        permission: {
+          subject: AbilitySubject.Receipt,
+          ability: SaleReceiptAction.Create,
+        },
+      },
+      {
+        text: <T id={'credit_note.label.new_credit_note'} />,
+        href: '/credit-notes/new',
       },
       {
         text: <T id={'new_payment_receive'} />,
         href: '/payment-receives/new',
+        permission: {
+          subject: AbilitySubject.PaymentReceive,
+          ability: PaymentReceiveAction.Create,
+        },
       },
     ],
   },
@@ -103,27 +257,74 @@ export default [
       {
         text: <T id={'bills'} />,
         href: '/bills',
-        newTabHref: '/bills/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: BillAction.View,
+        },
+      },
+      {
+        text: <T id={'sidebar_vendor_credits'} />,
+        href: '/vendor-credits',
       },
       {
         text: <T id={'payment_mades'} />,
         href: '/payment-mades',
         newTabHref: '/payment-mades/new',
+        permission: {
+          subject: AbilitySubject.PaymentMade,
+          ability: PaymentMadeAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Bill,
+            ability: BillAction.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentMade,
+            ability: PaymentMadeAction.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Bill,
+            ability: BillAction.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentMade,
+            ability: PaymentMadeAction.Create,
+          },
+        ],
       },
       {
         text: <T id={'New purchase invoice'} />,
         href: '/bills/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: BillAction.Create,
+        },
+      },
+      {
+        text: <T id={'vendor_credits.label.new_vendor_credit'} />,
+        href: '/vendor-credits/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: BillAction.Create,
+        },
       },
       {
         text: <T id={'new_payment_made'} />,
         href: '/payment-mades/new',
+        permission: {
+          subject: AbilitySubject.PaymentMade,
+          ability: PaymentMadeAction.Create,
+        },
       },
     ],
   },
@@ -133,33 +334,77 @@ export default [
       {
         text: <T id={'customers'} />,
         href: '/customers',
-        newTabHref: '/customers/new',
+        permission: {
+          subject: AbilitySubject.Customer,
+          ability: CustomerAction.View,
+        },
       },
       {
         text: <T id={'vendors'} />,
         href: '/vendors',
-        newTabHref: '/vendors/new',
+        permission: {
+          subject: AbilitySubject.Vendor,
+          ability: VendorAction.Create,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Customer,
+            ability: CustomerAction.View,
+          },
+          {
+            subject: AbilitySubject.Vendor,
+            ability: VendorAction.View,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Customer,
+            ability: CustomerAction.View,
+          },
+          {
+            subject: AbilitySubject.Vendor,
+            ability: VendorAction.View,
+          },
+        ],
       },
       {
         text: <T id={'new_customer'} />,
         href: '/customers/new',
+        permission: {
+          subject: AbilitySubject.Customer,
+          ability: CustomerAction.View,
+        },
       },
       {
         text: <T id={'new_vendor'} />,
         href: '/vendors/new',
+        permission: {
+          subject: AbilitySubject.Vendor,
+          ability: VendorAction.View,
+        },
       },
     ],
   },
   {
     text: <T id={'accounting'} />,
     label: true,
+    permission: [
+      {
+        subject: AbilitySubject.Account,
+        ability: AccountAction.View,
+      },
+      {
+        subject: AbilitySubject.ManualJournal,
+        ability: ManualJournalAction.View,
+      },
+    ],
   },
   {
     text: <T id={'financial'} />,
@@ -167,25 +412,57 @@ export default [
       {
         text: <T id={'accounts_chart'} />,
         href: '/accounts',
+        permission: {
+          subject: AbilitySubject.Account,
+          ability: AccountAction.View,
+        },
       },
       {
         text: <T id={'manual_journals'} />,
         href: '/manual-journals',
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: ManualJournalAction.View,
+        },
+      },
+      {
+        text: <T id={'sidebar.transactions_locaking'} />,
+        href: '/transactions-locking',
+        // permission: {
+        //   subject: AbilitySubject.ManualJournal,
+        //   ability: ManualJournalAction.TransactionLocking,
+        // },
       },
       {
         text: <T id={'exchange_rate'} />,
         href: '/exchange-rates',
+        permission: {
+          subject: AbilitySubject.ExchangeRate,
+          ability: ExchangeRateAbility.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: ManualJournalAction.Create,
+        },
       },
       {
         divider: true,
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: ManualJournalAction.Create,
+        },
       },
       {
         text: <T id={'make_journal_entry'} />,
         href: '/make-journal-entry',
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: ManualJournalAction.Create,
+        },
       },
     ],
   },
@@ -195,29 +472,61 @@ export default [
       {
         text: <T id={'siebar.cashflow.label_cash_and_bank_accounts'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Cashflow,
+            ability: CashflowAction.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Cashflow,
+            ability: CashflowAction.Create,
+          },
+        ],
       },
       {
         text: <T id={'cash_flow.label.add_money_in'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.Create,
+        },
       },
       {
         text: <T id={'cash_flow.label.add_money_out'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.Create,
+        },
       },
       {
         text: <T id={'cash_flow.label.add_cash_account'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.Create,
+        },
       },
       {
         text: <T id={'cash_flow.label.add_bank_account'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: CashflowAction.Create,
+        },
       },
     ],
   },
@@ -227,17 +536,33 @@ export default [
       {
         text: <T id={'expenses'} />,
         href: '/expenses',
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: ExpenseAction.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: ExpenseAction.Create,
+        },
       },
       {
         divider: true,
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: ExpenseAction.Create,
+        },
       },
       {
         text: <T id={'new_expense'} />,
         href: '/expenses/new',
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: ExpenseAction.Create,
+        },
       },
     ],
   },
@@ -247,80 +572,216 @@ export default [
       {
         text: <T id={'balance_sheet'} />,
         href: '/financial-reports/balance-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_BALANCE_SHEET,
+        },
       },
       {
         text: <T id={'trial_balance_sheet'} />,
         href: '/financial-reports/trial-balance-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_TRIAL_BALANCE_SHEET,
+        },
       },
       {
         text: <T id={'journal'} />,
         href: '/financial-reports/journal-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_JOURNAL,
+        },
       },
       {
         text: <T id={'general_ledger'} />,
         href: '/financial-reports/general-ledger',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_GENERAL_LEDGET,
+        },
       },
       {
         text: <T id={'profit_loss_sheet'} />,
         href: '/financial-reports/profit-loss-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_PROFIT_LOSS,
+        },
       },
       {
         text: <T id={'cash_flow_statement'} />,
         href: '/financial-reports/cash-flow',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_CASHFLOW_ACCOUNT_TRANSACTION,
+        },
       },
       {
         text: <T id={'AR_Aging_Summary'} />,
         href: '/financial-reports/receivable-aging-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_AR_AGING_SUMMARY,
+        },
       },
       {
         text: <T id={'AP_Aging_Summary'} />,
         href: '/financial-reports/payable-aging-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_AP_AGING_SUMMARY,
+        },
       },
       {
         text: <T id={'Sales/Purchases'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_SALES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_SALES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
+          },
+        ],
       },
       {
         text: <T id={'purchases_by_items'} />,
         href: '/financial-reports/purchases-by-items',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
+        },
       },
       {
         text: <T id={'sales_by_items'} />,
         href: '/financial-reports/sales-by-items',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_SALES_BY_ITEMS,
+        },
       },
       {
         text: <T id={'customers_transactions'} />,
         href: '/financial-reports/transactions-by-customers',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
+        },
       },
       {
         text: <T id={'vendors_transactions'} />,
         href: '/financial-reports/transactions-by-vendors',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
+        },
       },
       {
         text: <T id={'customers_balance_summary'} />,
         href: '/financial-reports/customers-balance-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
+        },
       },
       {
         text: <T id={'vendors_balance_summary'} />,
         href: '/financial-reports/vendors-balance-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
+        },
       },
       {
         text: <T id={'inventory'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+          },
+        ],
       },
       {
         text: <T id={'inventory_item_details'} />,
         href: '/financial-reports/inventory-item-details',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
+        },
       },
       {
         text: <T id={'inventory_valuation'} />,
         href: '/financial-reports/inventory-valuation',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+        },
       },
     ],
   },
@@ -328,14 +789,32 @@ export default [
     text: <T id={'system'} />,
     enableBilling: true,
     label: true,
+    permission: [
+      {
+        subject: AbilitySubject.Preferences,
+        ability: PreferencesAbility.Mutate,
+      },
+      {
+        subject: AbilitySubject.SubscriptionBilling,
+        ability: SubscriptionBillingAbility.View,
+      },
+    ],
   },
   {
     text: <T id={'preferences'} />,
     href: '/preferences',
+    permission: {
+      subject: AbilitySubject.Preferences,
+      ability: PreferencesAbility.Mutate,
+    },
   },
   {
     text: <T id={'billing'} />,
     href: '/billing',
     enableBilling: true,
+    permission: {
+      subject: AbilitySubject.SubscriptionBilling,
+      ability: SubscriptionBillingAbility.View,
+    },
   },
 ];

src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js

@@ -26,8 +26,11 @@ import withManualJournals from './withManualJournals';
 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
 
-import { If, DashboardActionViewsList } from 'components';
-
+import { Can, If, DashboardActionViewsList } from 'components';
+import {
+  ManualJournalAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -86,13 +89,14 @@ function ManualJournalActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="plus" />}
-          text={<T id={'journal_entry'} />}
-          onClick={onClickNewManualJournal}
-        />
+        <Can I={ManualJournalAction.Create} a={AbilitySubject.ManualJournal}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="plus" />}
+            text={<T id={'journal_entry'} />}
+            onClick={onClickNewManualJournal}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: manualJournalsFilterConditions,

src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js

@@ -2,7 +2,11 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
+import {
+  AbilitySubject,
+  ManualJournalAction,
+} from '../../../common/abilityOption';
 
 export default function ManualJournalsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,21 @@ export default function ManualJournalsEmptyStatus() {
       }
       action={
         <>
-          <Button
-            intent={Intent.PRIMARY}
-            large={true}
-            onClick={() => {
-              history.push('/make-journal-entry');
-            }}
-          >
-            <T id={'make_journal'} />
-          </Button>
+          <Can I={ManualJournalAction.Create} a={AbilitySubject.ManualJournal}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/make-journal-entry');
+              }}
+            >
+              <T id={'make_journal'} />
+            </Button>
 
-          <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
-          </Button>
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
         </>
       }
     />

src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js

@@ -46,8 +46,7 @@ function ManualJournalsListProvider({ query, tableStateChanged, ...props }) {
     isEmptyStatus,
   };
 
-  const isPageLoading =
-    isManualJournalsLoading || isViewsLoading || isResourceMetaLoading;
+  const isPageLoading = isViewsLoading || isResourceMetaLoading;
 
   return (
     <DashboardInsider loading={isPageLoading} name={'manual-journals'}>

src/containers/Accounting/JournalsLanding/components.js

@@ -13,7 +13,18 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { FormattedMessage as T, Choose, Money, If, Icon } from 'components';
+import {
+  Can,
+  FormattedMessage as T,
+  Choose,
+  Money,
+  If,
+  Icon,
+} from 'components';
+import {
+  ManualJournalAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { safeCallback } from 'utils';
 
 /**
@@ -90,13 +101,13 @@ export const StatusAccessor = (row) => {
   return (
     <Choose>
       <Choose.When condition={!!row.is_published}>
-        <Tag minimal={true}>
+        <Tag minimal={true} round={true}>
           <T id={'published'} />
         </Tag>
       </Choose.When>
 
       <Choose.Otherwise>
-        <Tag minimal={true} intent={Intent.WARNING}>
+        <Tag minimal={true} intent={Intent.WARNING} round={true}>
           <T id={'draft'} />
         </Tag>
       </Choose.Otherwise>
@@ -150,25 +161,32 @@ export const ActionsMenu = ({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <If condition={!original.is_published}>
+      <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
+        <MenuDivider />
+        <If condition={!original.is_published}>
+          <MenuItem
+            icon={<Icon icon="arrow-to-top" />}
+            text={intl.get('publish_journal')}
+            onClick={safeCallback(onPublish, original)}
+          />
+        </If>
+      </Can>
+      <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
         <MenuItem
-          icon={<Icon icon="arrow-to-top" />}
-          text={intl.get('publish_journal')}
-          onClick={safeCallback(onPublish, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_journal')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_journal')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        text={intl.get('delete_journal')}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+      </Can>
+      <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('delete_journal')}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 };

src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js

@@ -151,6 +151,7 @@ export default function MakeJournalFloatingAction() {
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitPublishBtnClick}
+            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover

src/containers/Accounting/MakeJournal/MakeJournalProvider.js

@@ -7,7 +7,8 @@ import {
   useJournal,
   useCreateJournal,
   useEditJournal,
-  useSettings
+  useSettings,
+  useSettingsManualJournals
 } from 'hooks/query';
 
 const MakeJournalFormContext = createContext();
@@ -40,7 +41,7 @@ function MakeJournalProvider({ journalId, ...props }) {
   const { mutateAsync: editJournalMutate } = useEditJournal();
 
   // Loading the journal settings.
-  const { isLoading: isSettingsLoading } = useSettings();
+  const { isLoading: isSettingsLoading } = useSettingsManualJournals();
 
   // Submit form payload.
   const [submitPayload, setSubmitPayload] = useState({});

src/containers/Accounting/ManualJournalUniversalSearch.js

@@ -1,6 +1,10 @@
 import intl from 'react-intl-universal';
 import { RESOURCES_TYPES } from 'common/resourcesTypes';
 import withDrawerActions from '../Drawer/withDrawerActions';
+import {
+  AbilitySubject,
+  ManualJournalAction,
+} from '../../common/abilityOption';
 
 /**
  * Universal search manual journal item select action.
@@ -44,4 +48,8 @@ export const universalSearchJournalBind = () => ({
   optionItemLabel: intl.get('manual_journals'),
   selectItemAction: JournalUniversalSearchSelectAction,
   itemSelect: manualJournalsToSearch,
+  permission: {
+    ability: ManualJournalAction.View,
+    subject: AbilitySubject.ManualJournal,
+  },
 });

src/containers/Accounts/AccountUniversalSearch.js

@@ -1,7 +1,10 @@
 import intl from 'react-intl-universal';
-import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+
 import withDrawerActions from '../Drawer/withDrawerActions';
 
+import { AbilitySubject, AccountAction } from '../../common/abilityOption';
+import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+
 function AccountUniversalSearchItemSelectComponent({
   // #ownProps
   resourceType,
@@ -42,4 +45,8 @@ export const universalSearchAccountBind = () => ({
   optionItemLabel: intl.get('accounts'),
   selectItemAction: AccountUniversalSearchItemSelect,
   itemSelect: accountToSearch,
+  permission: {
+    ability: AccountAction.View,
+    subject: AbilitySubject.Account,
+  },
 });

src/containers/Accounts/AccountsActionsBar.js

@@ -15,6 +15,7 @@ import { FormattedMessage as T } from 'components';
 import {
   AdvancedFilterPopover,
   If,
+  Can,
   DashboardActionViewsList,
   DashboardFilterButton,
   DashboardRowsHeightButton,
@@ -30,6 +31,8 @@ import withAlertActions from 'containers/Alert/withAlertActions';
 import withAccountsTableActions from './withAccountsTableActions';
 import withSettings from '../Settings/withSettings';
 import withSettingsActions from '../Settings/withSettingsActions';
+import { AccountAction, AbilitySubject } from '../../common/abilityOption';
+
 import { compose } from 'utils';
 
 /**
@@ -116,13 +119,14 @@ function AccountsActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="plus" />}
-          text={<T id={'new_account'} />}
-          onClick={onClickNewAccount}
-        />
+        <Can I={AccountAction.Create} a={AbilitySubject.Account}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="plus" />}
+            text={<T id={'new_account'} />}
+            onClick={onClickNewAccount}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: accountsFilterConditions,
@@ -183,11 +187,13 @@ function AccountsActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Switch
-          labelElement={<T id={'inactive'} />}
-          defaultChecked={accountsInactiveMode}
-          onChange={handleInactiveSwitchChange}
-        />
+        <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+          <Switch
+            labelElement={<T id={'inactive'} />}
+            defaultChecked={accountsInactiveMode}
+            onChange={handleInactiveSwitchChange}
+          />
+        </Can>
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button

src/containers/Accounts/components.js

@@ -8,9 +8,10 @@ import {
   MenuDivider,
   Intent,
 } from '@blueprintjs/core';
-import { Icon, Money, If } from 'components';
+import { Can, Icon, Money, If } from 'components';
 import intl from 'react-intl-universal';
 import { safeCallback } from 'utils';
+import { AbilitySubject, AccountAction } from '../../common/abilityOption';
 
 /**
  * Accounts table actions menu.
@@ -34,38 +35,45 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_account')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="plus" />}
-        text={intl.get('new_child_account')}
-        onClick={safeCallback(onNewChild, original)}
-      />
-      <MenuDivider />
-      <If condition={original.active}>
+      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+        <MenuDivider />
         <MenuItem
-          text={intl.get('inactivate_account')}
-          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onInactivate, original)}
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_account')}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
-      <If condition={!original.active}>
+
         <MenuItem
-          text={intl.get('activate_account')}
-          icon={<Icon icon="play-16" iconSize={16} />}
-          onClick={safeCallback(onActivate, original)}
+          icon={<Icon icon="plus" />}
+          text={intl.get('new_child_account')}
+          onClick={safeCallback(onNewChild, original)}
         />
-      </If>
-      <MenuItem
-        text={intl.get('delete_account')}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
+        <MenuDivider />
+      </Can>
+      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+        <If condition={original.active}>
+          <MenuItem
+            text={intl.get('inactivate_account')}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={safeCallback(onInactivate, original)}
+          />
+        </If>
+        <If condition={!original.active}>
+          <MenuItem
+            text={intl.get('activate_account')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivate, original)}
+          />
+        </If>
+      </Can>
+      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+        <MenuItem
+          text={intl.get('delete_account')}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert.js

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

src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { useDeleteCreditNote } from 'hooks/query';
+import { handleDeleteErrors } from '../../Sales/CreditNotes/CreditNotesLanding/utils';
+import { compose } from 'utils';
+
+/**
+ * Credit note delete alert.
+ */
+function CreditNoteDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteCreditNoteMutate } =
+    useDeleteCreditNote();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+  const handleConfirmCreditNoteDelete = () => {
+    deleteCreditNoteMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('credit_note.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('credit-note-detail-drawer');
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          handleDeleteErrors(errors);
+        },
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmCreditNoteDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage id={'credit_note.once_delete_this_credit_note'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(CreditNoteDeleteAlert);

src/containers/Alerts/CreditNotes/CreditNoteOpenedAlert.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useOpenCreditNote } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Credit note opened alert.
+ */
+function CreditNoteOpenedAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: openCreditNoteMutate, isLoading } = useOpenCreditNote();
+
+  // Handle cancel opened credit note alert.
+  const handleAlertCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm credit note opened.
+  const handleAlertConfirm = () => {
+    openCreditNoteMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('credit_note_opened.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'open'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleAlertCancel}
+      onConfirm={handleAlertConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'credit_note_opened.are_sure_to_open_this_credit'} />
+      </p>
+    </Alert>
+  );
+}
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CreditNoteOpenedAlert);

src/containers/Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { useDeleteReconcileCredit } from 'hooks/query';
+import { handleDeleteErrors } from '../../Sales/CreditNotes/CreditNotesLanding/utils';
+import { compose } from 'utils';
+
+/**
+ * Reconcile credit note delete alert.
+ */
+function ReconcileCreditNoteDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteReconcileCreditMutate } =
+    useDeleteReconcileCredit();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmVendorCreditDelete = () => {
+    deleteReconcileCreditMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('reconcile_credit_note.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          // handleDeleteErrors(errors);
+        },
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmVendorCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'reconcile_credit_note.once_you_delete_this_reconcile_credit_note'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(ReconcileCreditNoteDeleteAlert);

src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import { useDeleteRefundCreditNote } from 'hooks/query';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Refund credit transactions delete alert
+ */
+function RefundCreditNoteDeleteAlert({
+  name,
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteRefundCreditMutate, isLoading } =
+    useDeleteRefundCreditNote();
+
+  // Handle cancel delete.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete .
+  const handleConfirmRefundCreditDelete = () => {
+    deleteRefundCreditMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('refund_credit_transactions.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('refund-credit-detail-drawer');
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmRefundCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T
+          id={`refund_credit_transactions.once_your_delete_this_refund_credit_note`}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(RefundCreditNoteDeleteAlert);

src/containers/Alerts/Customers/CustomerActivateAlert.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import { useActivateContact } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Customer activate alert.
+ */
+function CustomerActivateAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { customerId, service },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: activateContact, isLoading } = useActivateContact();
+
+  // Handle activate constomer alert cancel.
+  const handleCancelActivateCustomer = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm customer activated.
+  const handleConfirmCustomerActivate = () => {
+    activateContact(customerId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('customer.alert.activated_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'activate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelActivateCustomer}
+      loading={isLoading}
+      onConfirm={handleConfirmCustomerActivate}
+    >
+      <p>{intl.get('customer.alert.are_you_sure_want_to_activate_this_customer')}</p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CustomerActivateAlert);