Merge branch 'develop'

package.json

@@ -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",

src/common/abilityOption.js

@@ -0,0 +1,161 @@
+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',
+};
+
+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: 'Writeoff',
+  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 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/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'}/>,
+        title: <T id={'manual_journal'} />,
-        description:<T id={'manage_manual_journal_transactions_on_accounts'}/>,
+        description: (
+          <T id={'manage_manual_journal_transactions_on_accounts'} />
+        ),
         link: '/manual-journals',
+        subject: AbilitySubject.ManualJournal,
+        ability: ManualJournalAction.View,
       },
       {
-        title: <T id={'expenses'}/>,
+        title: <T id={'expenses'} />,
-        description:<T id={'track_your_indirect_expenses_under_specific_categories'}/>,
+        description: (
+          <T id={'track_your_indirect_expenses_under_specific_categories'} />
+        ),
         link: '/expenses',
+        subject: AbilitySubject.Expense,
+        ability: ExpenseAction.View,
       },
       {
-        title: <T id={'financial_statements'}/>,
+        title: <T id={'financial_statements'} />,
-        description:<T id={'show_financial_reports_about_your_organization'}/>,
+        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'}/>,
+        title: <T id={'products_services'} />,
-        description:<T id={'manage_your_products_inventory_or_non_inventory'}/>,
+        description: (
+          <T id={'manage_your_products_inventory_or_non_inventory'} />
+        ),
         link: '/items',
+        subject: AbilitySubject.Item,
+        ability: ItemAction.View,
       },
       {
-        title: <T id={'products_services_categories'}/>,
+        title: <T id={'products_services_categories'} />,
-        description:<T id={'group_your_products_and_service'}/>,
+        description: <T id={'group_your_products_and_service'} />,
         link: 'items/categories',
       },
       {
-        title: <T id={'inventory_adjustments'}/>,
+        title: <T id={'inventory_adjustments'} />,
-        description: <T id={'manage_your_inventory_adjustment_of_inventory_items'}/>,
+        description: (
+          <T id={'manage_your_inventory_adjustment_of_inventory_items'} />
+        ),
         link: '/inventory-adjustments',
+        subject: AbilitySubject.InventoryAdjustment,
+        ability: SaleInvoiceAction.View,
       },
     ],
   },

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/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: 'invoices/new',
-  { path: 'make-journal-entry', name: intl.get('manual_journal') },
+    name: intl.get('sale_invoice'),
-  { path: 'expenses/new', name: intl.get('expense') },
+    permission: {
-  { path: 'customers/new', name: intl.get('customer') },
+      subject: AbilitySubject.Invoice,
-  { path: 'vendors/new', name: intl.get('vendor') },
+      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/components/Abilities.js

@@ -1,10 +0,0 @@
-import { AbilityBuilder, defineAbility } from '@casl/ability';
-import { createContextualCan } from '@casl/react';
-import { createContext } from 'react';
-
-export const AbilityContext = createContext();
-export const Can = createContextualCan(AbilityContext.Consumer);
-
-export const ability = defineAbility((can, cannot) => {
-  cannot('Item', 'create');
-});

src/components/Can.js

@@ -1,4 +0,0 @@
-import { createCanBoundTo } from '@casl/react';
-import ability from '../components/Config/ability';
-
-export default createCanBoundTo(ability);

src/components/Config/ability.js

@@ -1,10 +0,0 @@
-import { AbilityBuilder } from '@casl/ability';
-// import { AbilitySubject, ItemAbility } from '../../common/abilityOption';
-
-export function defineAbilitiesFor(role) {
-  const { rules, can } = new AbilityBuilder();
-
-  can('create', 'Item');
-
-  return new Ability(rules);
-}

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

@@ -1,18 +1,53 @@
 import React from 'react';
-import * as R from 'ramda';
+import {
-
+  useAuthenticatedAccount,
-import { useUser, useCurrentOrganization } from '../../hooks/query';
+  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(
+  return {
-  withAuthentication(({ authenticatedUserId }) => ({
+    isLoading: isOrgLoading || isAuthUserLoading,
-    authenticatedUserId,
+  };
-  })),
+}
-)(DashboardBootJSX);

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/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 { useApplicationBoot } from '../../components';
-import { DashboardBoot } from '../../components';
-
-import withDashboard from '../../containers/Dashboard/withDashboard';
 
 /**
  * Private pages provider.
  */
-function PrivatePagesProviderComponent({
+export function PrivatePagesProvider({
-  splashScreenCompleted,
-
   // #ownProps
   children,
 }) {
-  return (
+  const { isLoading } = useApplicationBoot();
-    <AuthenticatedUser>
-      <DashboardBoot />
 
-      {splashScreenCompleted ? children : null}
+  return <React.Fragment>{!isLoading ? children : null}</React.Fragment>;
-    </AuthenticatedUser>
-  );
 }
-
-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/Sidebar/Sidebar.js

@@ -2,16 +2,19 @@ import React from 'react';
 import SidebarContainer from 'components/Sidebar/SidebarContainer';
 import SidebarHead from 'components/Sidebar/SidebarHead';
 import SidebarMenu from 'components/Sidebar/SidebarMenu';
+import { useGetSidebarMenu } from './utils';
 
 import '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>

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/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,15 @@ 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,
       },
     ],
   },
@@ -71,6 +88,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 +101,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 +114,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 +127,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 +136,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 +147,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 +160,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 +169,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,109 @@ 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={'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={'new_payment_receive'} />,
         href: '/payment-receives/new',
+        permission: {
+          subject: AbilitySubject.PaymentReceive,
+          ability: PaymentReceiveAction.Create,
+        },
       },
     ],
   },
@@ -103,27 +249,62 @@ export default [
       {
         text: <T id={'bills'} />,
         href: '/bills',
-        newTabHref: '/bills/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: BillAction.View,
+        },
       },
       {
         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={'new_payment_made'} />,
         href: '/payment-mades/new',
+        permission: {
+          subject: AbilitySubject.PaymentMade,
+          ability: PaymentMadeAction.Create,
+        },
       },
     ],
   },
@@ -133,33 +314,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,29 +392,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,
+        },
       },
     ],
   },
@@ -199,29 +452,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,
+        },
       },
     ],
   },
@@ -231,17 +516,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,
+        },
       },
     ],
   },
@@ -251,80 +552,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,
+        },
       },
     ],
   },
@@ -332,14 +769,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 />
-
+        <Can I={ManualJournalAction.Create} a={AbilitySubject.ManualJournal}>
-        <Button
+          <Button
-          className={Classes.MINIMAL}
+            className={Classes.MINIMAL}
-          icon={<Icon icon="plus" />}
+            icon={<Icon icon="plus" />}
-          text={<T id={'journal_entry'} />}
+            text={<T id={'journal_entry'} />}
-          onClick={onClickNewManualJournal}
+            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
+          <Can I={ManualJournalAction.Create} a={AbilitySubject.ManualJournal}>
-            intent={Intent.PRIMARY}
+            <Button
-            large={true}
+              intent={Intent.PRIMARY}
-            onClick={() => {
+              large={true}
-              history.push('/make-journal-entry');
+              onClick={() => {
-            }}
+                history.push('/make-journal-entry');
-          >
+              }}
-            <T id={'make_journal'} />
+            >
-          </Button>
+              <T id={'make_journal'} />
+            </Button>
 
-          <Button intent={Intent.NONE} large={true}>
+            <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
+              <T id={'learn_more'} />
-          </Button>
+            </Button>
+          </Can>
         </>
       }
     />

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';
 
 /**
@@ -150,25 +161,31 @@ export const ActionsMenu = ({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
+      <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
-      <If condition={!original.is_published}>
+        <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" />}
+          icon={<Icon icon="pen-18" />}
-          text={intl.get('publish_journal')}
+          text={intl.get('edit_journal')}
-          onClick={safeCallback(onPublish, original)}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
+      </Can>
-      <MenuItem
+      <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
-        icon={<Icon icon="pen-18" />}
+        <MenuItem
-        text={intl.get('edit_journal')}
+          text={intl.get('delete_journal')}
-        onClick={safeCallback(onEdit, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
-      />
+          intent={Intent.DANGER}
-      <MenuItem
+          onClick={safeCallback(onDelete, original)}
-        text={intl.get('delete_journal')}
+        />
-        icon={<Icon icon="trash-16" iconSize={16} />}
+      </Can>
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
     </Menu>
   );
 };

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 />
-
+        <Can I={AccountAction.Create} a={AbilitySubject.Account}>
-        <Button
+          <Button
-          className={Classes.MINIMAL}
+            className={Classes.MINIMAL}
-          icon={<Icon icon="plus" />}
+            icon={<Icon icon="plus" />}
-          text={<T id={'new_account'} />}
+            text={<T id={'new_account'} />}
-          onClick={onClickNewAccount}
+            onClick={onClickNewAccount}
-        />
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: accountsFilterConditions,
@@ -183,11 +187,13 @@ function AccountsActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Switch
+        <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
-          labelElement={<T id={'inactive'} />}
+          <Switch
-          defaultChecked={accountsInactiveMode}
+            labelElement={<T id={'inactive'} />}
-          onChange={handleInactiveSwitchChange}
+            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 />
+      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
-      <MenuItem
+        <MenuDivider />
-        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}>
         <MenuItem
-          text={intl.get('inactivate_account')}
+          icon={<Icon icon="pen-18" />}
-          icon={<Icon icon="pause-16" iconSize={16} />}
+          text={intl.get('edit_account')}
-          onClick={safeCallback(onInactivate, original)}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
+
-      <If condition={!original.active}>
         <MenuItem
-          text={intl.get('activate_account')}
+          icon={<Icon icon="plus" />}
-          icon={<Icon icon="play-16" iconSize={16} />}
+          text={intl.get('new_child_account')}
-          onClick={safeCallback(onActivate, original)}
+          onClick={safeCallback(onNewChild, original)}
         />
-      </If>
+        <MenuDivider />
-      <MenuItem
+      </Can>
-        text={intl.get('delete_account')}
+      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
-        icon={<Icon icon="trash-16" iconSize={16} />}
+        <If condition={original.active}>
-        intent={Intent.DANGER}
+          <MenuItem
-        onClick={safeCallback(onDelete, original)}
+            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/Roles/RoleDeleteAlert.js

@@ -5,6 +5,7 @@ import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
 import { useDeleteRole } from 'hooks/query';
+import { handleDeleteErrors } from '../../Preferences/Users/Roles/utils';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -45,7 +46,9 @@ function RoleDeleteAlert({
           response: {
             data: { errors },
           },
-        }) => {},
+        }) => {
+          handleDeleteErrors(errors);
+        },
       )
       .finally(() => {
         closeAlert(name);

src/containers/CashFlow/AccountTransactions/components.js

@@ -4,9 +4,10 @@ import intl from 'react-intl-universal';
 import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 
 import { MaterialProgressBar } from 'components';
-import { FormatDateCell, If, Icon } from 'components';
+import { Can, FormatDateCell, If, Icon } from 'components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { TRANSACRIONS_TYPE } from 'common/cashflowOptions';
+import { AbilitySubject, CashflowAction } from '../../../common/abilityOption';
 import { safeCallback } from 'utils';
 
 export function ActionsMenu({
@@ -20,15 +21,17 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <If condition={TRANSACRIONS_TYPE.includes(original.reference_type)}>
+      <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
-        <MenuDivider />
+        <If condition={TRANSACRIONS_TYPE.includes(original.reference_type)}>
-        <MenuItem
+          <MenuDivider />
-          text={intl.get('delete_transaction')}
+          <MenuItem
-          intent={Intent.DANGER}
+            text={intl.get('delete_transaction')}
-          onClick={safeCallback(onDelete, original)}
+            intent={Intent.DANGER}
-          icon={<Icon icon="trash-16" iconSize={16} />}
+            onClick={safeCallback(onDelete, original)}
-        />
+            icon={<Icon icon="trash-16" iconSize={16} />}
-      </If>
+          />
+        </If>
+      </Can>
     </Menu>
   );
 }
@@ -83,7 +86,7 @@ export function useAccountTransactionsColumns() {
         className: 'deposit',
         textOverview: true,
         align: 'right',
-        clickable: true
+        clickable: true,
       },
       {
         id: 'withdrawal',
@@ -93,7 +96,7 @@ export function useAccountTransactionsColumns() {
         width: 150,
         textOverview: true,
         align: 'right',
-        clickable: true
+        clickable: true,
       },
       {
         id: 'running_balance',
@@ -103,7 +106,7 @@ export function useAccountTransactionsColumns() {
         width: 150,
         textOverview: true,
         align: 'right',
-        clickable: true
+        clickable: true,
       },
       {
         id: 'balance',

src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js

@@ -7,8 +7,9 @@ import {
   Alignment,
   Switch,
 } from '@blueprintjs/core';
-import { Icon, FormattedMessage as T } from 'components';
+import { Can, Icon, FormattedMessage as T } from 'components';
 import { useRefreshCashflowAccounts } from 'hooks/query';
+import { CashflowAction, AbilitySubject } from '../../../common/abilityOption';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
@@ -56,19 +57,22 @@ function CashFlowAccountsActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={CashflowAction.Create} a={AbilitySubject.Cashflow}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon={'plus-24'} iconSize={20} />}
+            className={Classes.MINIMAL}
-          text={<T id={'cash_flow.label.add_cash_account'} />}
+            icon={<Icon icon={'plus-24'} iconSize={20} />}
-          onClick={handleAddBankAccount}
+            text={<T id={'cash_flow.label.add_cash_account'} />}
-        />
+            onClick={handleAddBankAccount}
-        <Button
+          />
-          className={Classes.MINIMAL}
+
-          icon={<Icon icon={'plus-24'} iconSize={20} />}
+          <Button
-          text={<T id={'cash_flow.label.add_bank_account'} />}
+            className={Classes.MINIMAL}
-          onClick={handleAddCashAccount}
+            icon={<Icon icon={'plus-24'} iconSize={20} />}
-        />
+            text={<T id={'cash_flow.label.add_bank_account'} />}
-        <NavbarDivider />
+            onClick={handleAddCashAccount}
+          />
+          <NavbarDivider />
+        </Can>
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
@@ -85,13 +89,15 @@ function CashFlowAccountsActionsBar({
           text={<T id={'import'} />}
         />
         <NavbarDivider />
-
+        <Can I={CashflowAction.Edit} a={AbilitySubject.Cashflow}>
-        <Switch
+          <Switch
-          labelElement={<T id={'inactive'} />}
+            labelElement={<T id={'inactive'} />}
-          defaultChecked={false}
+            defaultChecked={false}
-          onChange={handleInactiveSwitchChange}
+            onChange={handleInactiveSwitchChange}
-        />
+          />
+        </Can>
       </NavbarGroup>
+
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
           className={Classes.MINIMAL}

src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js

@@ -13,7 +13,13 @@ import {
   If,
   Icon,
   T,
+  Can,
 } from '../../../components';
+import {
+  AccountAction,
+  CashflowAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { useCashFlowAccountsContext } from './CashFlowAccountsProvider';
 
@@ -222,48 +228,56 @@ function CashflowAccountContextMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewClick)}
       />
-      <MenuDivider />
+      <Can I={CashflowAction.Create} a={AbilitySubject.Cashflow}>
-      <MenuItem
+        <MenuDivider />
-        text={<T id={'cash_flow_money_in'} />}
-        icon={<Icon icon={'arrow-downward'} iconSize={16} />}
-      >
-        <CashflowAccountMoneyInContextMenu onClick={onMoneyInClick} />
-      </MenuItem>
-
-      <MenuItem
-        text={<T id={'cash_flow_money_out'} />}
-        icon={<Icon icon={'arrow-upward'} iconSize={16} />}
-      >
-        <CashflowAccountMoneyOutContextMenu onClick={onMoneyOutClick} />
-      </MenuItem>
-      <MenuDivider />
-
-      <MenuItem
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_account')}
-        onClick={safeCallback(onEditClick)}
-      />
-      <MenuDivider />
-      <If condition={account.active}>
         <MenuItem
-          text={intl.get('inactivate_account')}
+          text={<T id={'cash_flow_money_in'} />}
-          icon={<Icon icon="pause-16" iconSize={16} />}
+          icon={<Icon icon={'arrow-downward'} iconSize={16} />}
-          onClick={safeCallback(onInactivateClick)}
+        >
-        />
+          <CashflowAccountMoneyInContextMenu onClick={onMoneyInClick} />
-      </If>
+        </MenuItem>
-      <If condition={!account.active}>
+
         <MenuItem
-          text={intl.get('activate_account')}
+          text={<T id={'cash_flow_money_out'} />}
-          icon={<Icon icon="play-16" iconSize={16} />}
+          icon={<Icon icon={'arrow-upward'} iconSize={16} />}
-          onClick={safeCallback(onActivateClick)}
+        >
+          <CashflowAccountMoneyOutContextMenu onClick={onMoneyOutClick} />
+        </MenuItem>
+      </Can>
+      <Can I={CashflowAction.Edit} a={AbilitySubject.Cashflow}>
+        <MenuDivider />
+
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_account')}
+          onClick={safeCallback(onEditClick)}
         />
-      </If>
+      </Can>
-      <MenuItem
+      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
-        text={intl.get('delete_account')}
+        <MenuDivider />
-        icon={<Icon icon="trash-16" iconSize={16} />}
+        <If condition={account.active}>
-        intent={Intent.DANGER}
+          <MenuItem
-        onClick={safeCallback(onDeleteClick)}
+            text={intl.get('inactivate_account')}
-      />
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={safeCallback(onInactivateClick)}
+          />
+        </If>
+        <If condition={!account.active}>
+          <MenuItem
+            text={intl.get('activate_account')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivateClick)}
+          />
+        </If>
+      </Can>
+      <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
+        <MenuItem
+          text={intl.get('delete_account')}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDeleteClick)}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Customers/CustomersLanding/CustomersActionsBar.js

@@ -14,6 +14,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
   Icon,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   AdvancedFilterPopover,
@@ -29,6 +30,7 @@ import withCustomersActions from './withCustomersActions';
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
+import { CustomerAction, AbilitySubject } from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -103,15 +105,15 @@ function CustomerActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
+        <Can I={CustomerAction.Create} a={AbilitySubject.Item}>
-        <Button
+          <Button
-          className={Classes.MINIMAL}
+            className={Classes.MINIMAL}
-          icon={<Icon icon={'plus'} />}
+            icon={<Icon icon={'plus'} />}
-          text={<T id={'new_customer'} />}
+            text={<T id={'new_customer'} />}
-          onClick={onClickNewCustomer}
+            onClick={onClickNewCustomer}
-        />
+          />
-        <NavbarDivider />
+          <NavbarDivider />
-
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: customersFilterConditions,
@@ -152,11 +154,13 @@ function CustomerActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Switch
+        <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
-          labelElement={<T id={'inactive'} />}
+          <Switch
-          defaultChecked={accountsInactiveMode}
+            labelElement={<T id={'inactive'} />}
-          onChange={handleInactiveSwitchChange}
+            defaultChecked={accountsInactiveMode}
-        />
+            onChange={handleInactiveSwitchChange}
+          />
+        </Can>
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button

src/containers/Customers/CustomersLanding/CustomersEmptyStatus.js

@@ -2,7 +2,8 @@ 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, CustomerAction } from '../../../common/abilityOption';
 
 export default function CustomersEmptyStatus() {
   const history = useHistory();
@@ -17,19 +18,21 @@ export default function CustomersEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={CustomerAction.Create} a={AbilitySubject.Customer}>
-            intent={Intent.PRIMARY}
+            <Button
-            large={true}
+              intent={Intent.PRIMARY}
-            onClick={() => {
+              large={true}
-              history.push('/customers/new');
+              onClick={() => {
-            }}
+                history.push('/customers/new');
-          >
+              }}
-            <T id={'new_customer'} />
+            >
-          </Button>
+              <T id={'new_customer'} />
+            </Button>
 
-          <Button intent={Intent.NONE} large={true}>
+            <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
+              <T id={'learn_more'} />
-          </Button>
+            </Button>
+          </Can>
         </>
       }
     />

src/containers/Customers/CustomersLanding/components.js

@@ -4,7 +4,8 @@ import clsx from 'classnames';
 
 import intl from 'react-intl-universal';
 
-import { Icon, Money, If, AvaterCell } from 'components';
+import { Can, Icon, Money, If, AvaterCell } from 'components';
+import { CustomerAction, AbilitySubject } from '../../../common/abilityOption';
 
 import { safeCallback } from 'utils';
 
@@ -29,37 +30,46 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
+      <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
-      <MenuItem
+        <MenuDivider />
-        icon={<Icon icon="pen-18" />}
+
-        text={intl.get('edit_customer')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="duplicate-16" />}
-        text={intl.get('duplicate')}
-        onClick={safeCallback(onDuplicate, original)}
-      />
-      <If condition={original.active}>
         <MenuItem
-          text={intl.get('inactivate_customer')}
+          icon={<Icon icon="pen-18" />}
-          icon={<Icon icon="pause-16" iconSize={16} />}
+          text={intl.get('edit_customer')}
-          onClick={safeCallback(onInactivate, original)}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
+      </Can>
-      <If condition={!original.active}>
+      <Can I={CustomerAction.Create} a={AbilitySubject.Customer}>
         <MenuItem
-          text={intl.get('activate_customer')}
+          icon={<Icon icon="duplicate-16" />}
-          icon={<Icon icon="play-16" iconSize={16} />}
+          text={intl.get('duplicate')}
-          onClick={safeCallback(onActivate, original)}
+          onClick={safeCallback(onDuplicate, original)}
         />
-      </If>
+      </Can>
-      <MenuItem
+      <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
-        icon={<Icon icon="trash-16" iconSize={16} />}
+        <If condition={original.active}>
-        text={intl.get('delete_customer')}
+          <MenuItem
-        intent={Intent.DANGER}
+            text={intl.get('inactivate_customer')}
-        onClick={safeCallback(onDelete, original)}
+            icon={<Icon icon="pause-16" iconSize={16} />}
-      />
+            onClick={safeCallback(onInactivate, original)}
+          />
+        </If>
+        <If condition={!original.active}>
+          <MenuItem
+            text={intl.get('activate_customer')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivate, original)}
+          />
+        </If>
+      </Can>
+      <Can I={CustomerAction.Delete} a={AbilitySubject.Customer}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_customer')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Customers/CustomersUniversalSearch.js

@@ -1,4 +1,5 @@
 import intl from 'react-intl-universal';
+import { AbilitySubject, CustomerAction } from '../../common/abilityOption';
 
 import { RESOURCES_TYPES } from '../../common/resourcesTypes';
 import withDrawerActions from '../Drawer/withDrawerActions';
@@ -42,4 +43,8 @@ export const universalSearchCustomerBind = () => ({
   optionItemLabel: intl.get('customers'),
   selectItemAction: CustomerUniversalSearchSelectAction,
   itemSelect: customersToSearch,
+  permission: {
+    ability: CustomerAction.View,
+    subject: AbilitySubject.Customer,
+  },
 });

src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js

@@ -2,10 +2,8 @@ import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 
 const Schema = Yup.object().shape({
-  email: Yup.string()
+  email: Yup.string().email().required().label(intl.get('email')),
-    .email()
+  role_id: Yup.string().required().label(intl.get('roles.label.role_name_')),
-    .required()
-    .label(intl.get('email')),
 });
 
 export const InviteUserFormSchema = Schema;

src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import { FormGroup, InputGroup, Intent, Button } from '@blueprintjs/core';
 import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'components';
+import {
+  ListSelect,
+  FieldRequiredHint,
+  FormattedMessage as T,
+} from 'components';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { inputIntent } from 'utils';
@@ -15,23 +19,24 @@ function InviteUserFormContent({
   closeDialog,
 }) {
   const { isSubmitting } = useFormikContext();
-  const { isEditMode, dialogName } = useInviteUserFormContext();
+  const { isEditMode, dialogName, roles } = useInviteUserFormContext();
 
   const handleClose = () => {
     closeDialog(dialogName);
   };
-
+  console.log(roles, 'XX');
   return (
     <Form>
       <div className={CLASSES.DIALOG_BODY}>
         <p className="mb2">
           <T id={'your_access_to_your_team'} />
         </p>
-
+        {/* ----------- Email ----------- */}
         <FastField name={'email'}>
           {({ field, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'email'} />}
+              labelInfo={<FieldRequiredHint />}
               className={classNames('form-group--email', CLASSES.FILL)}
               intent={inputIntent({ error, touched })}
               helperText={<ErrorMessage name="email" />}
@@ -40,6 +45,31 @@ function InviteUserFormContent({
             </FormGroup>
           )}
         </FastField>
+        {/* ----------- Role name ----------- */}
+        <FastField name={'role_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'roles.label.role_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              helperText={<ErrorMessage name="role_id" />}
+              className={classNames(CLASSES.FILL, 'form-group--role_name')}
+              intent={inputIntent({ error, touched })}
+            >
+              <ListSelect
+                items={roles}
+                onItemSelect={({ id }) => {
+                  form.setFieldValue('role_id', id);
+                }}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                textProp={'name'}
+                // labelProp={'id '}
+                popoverProps={{ minimal: true }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </FastField>
       </div>
 
       <div className={CLASSES.DIALOG_FOOTER}>

src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext } from 'react';
-import { useCreateInviteUser, useUsers } from 'hooks/query';
+import { useCreateInviteUser, useUsers, useRoles } from 'hooks/query';
 import { DialogContent } from 'components';
 
 const InviteUserFormContext = createContext();
@@ -14,6 +14,9 @@ function InviteUserFormProvider({ userId, isEditMode, dialogName, ...props }) {
   // fetch users list.
   const { isLoading: isUsersLoading } = useUsers();
 
+  // fetch roles list.
+  const { data: roles, isLoading: isRolesLoading } = useRoles();
+
   // Provider state.
   const provider = {
     inviteUserMutate,
@@ -21,10 +24,14 @@ function InviteUserFormProvider({ userId, isEditMode, dialogName, ...props }) {
     userId,
     isUsersLoading,
     isEditMode,
+    roles,
   };
 
   return (
-    <DialogContent isLoading={isUsersLoading} name={'invite-form'}>
+    <DialogContent
+      isLoading={isUsersLoading || isRolesLoading}
+      name={'invite-form'}
+    >
       <InviteUserFormContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Dialogs/UserFormDialog/UserForm.js

@@ -10,6 +10,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import { UserFormSchema } from './UserForm.schema';
 import UserFormContent from './UserFormContent';
 import { useUserFormContext } from './UserFormProvider';
+import { transformErrors } from './utils';
 
 import { compose, objectKeysTransform } from 'utils';
 
@@ -20,13 +21,10 @@ function UserForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const {
+  const [calloutCode, setCalloutCode] = React.useState([]);
-    dialogName,
+
-    user,
+  const { dialogName, user, userId, isEditMode, EditUserMutate } =
-    userId,
+    useUserFormContext();
-    isEditMode,
-    EditUserMutate,
-  } = useUserFormContext();
 
   const initialValues = {
     ...(isEditMode &&
@@ -59,7 +57,7 @@ function UserForm({
           data: { errors },
         },
       } = error;
-
+      transformErrors(errors, { setErrors, setCalloutCode });
       setSubmitting(false);
     };
 
@@ -72,7 +70,7 @@ function UserForm({
       initialValues={initialValues}
       onSubmit={handleSubmit}
     >
-      <UserFormContent />
+      <UserFormContent calloutCode={calloutCode} />
     </Formik>
   );
 }

src/containers/Dialogs/UserFormDialog/UserForm.schema.js

@@ -2,20 +2,14 @@ import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 
 const Schema = Yup.object().shape({
-  email: Yup.string()
+  email: Yup.string().email().required().label(intl.get('email')),
-    .email()
+  first_name: Yup.string().required().label(intl.get('first_name_')),
-    .required()
+  last_name: Yup.string().required().label(intl.get('last_name_')),
-    .label(intl.get('email')),
-  first_name: Yup.string()
-    .required()
-    .label(intl.get('first_name_')),
-  last_name: Yup.string()
-    .required()
-    .label(intl.get('last_name_')),
   phone_number: Yup.string()
     .matches()
     .required()
     .label(intl.get('phone_number_')),
+  role_id: Yup.string().required().label(intl.get('roles.label.role_name_')),
 });
 
 export const UserFormSchema = Schema;

src/containers/Dialogs/UserFormDialog/UserFormContent.js

@@ -11,20 +11,22 @@ import { FormattedMessage as T } from 'components';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { inputIntent } from 'utils';
-import { FieldRequiredHint } from 'components';
+import { ListSelect, FieldRequiredHint } from 'components';
 import { useUserFormContext } from './UserFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
+import { UserFormCalloutAlerts } from './components';
 
 /**
  * User form content.
  */
 function UserFormContent({
+  calloutCode,
   // #withDialogActions
   closeDialog,
 }) {
   const { isSubmitting } = useFormikContext();
-  const { dialogName } = useUserFormContext();
+  const { dialogName, roles, isAuth } = useUserFormContext();
 
   const handleClose = () => {
     closeDialog(dialogName);
@@ -33,6 +35,8 @@ function UserFormContent({
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
+        <UserFormCalloutAlerts calloutCodes={calloutCode} />
+
         {/* ----------- Email ----------- */}
         <FastField name={'email'}>
           {({ field, meta: { error, touched } }) => (
@@ -88,6 +92,32 @@ function UserFormContent({
             </FormGroup>
           )}
         </FastField>
+        {/* ----------- Role name ----------- */}
+        <FastField name={'role_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'roles.label.role_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              helperText={<ErrorMessage name="role_id" />}
+              className={classNames(CLASSES.FILL, 'form-group--role_name')}
+              intent={inputIntent({ error, touched })}
+            >
+              <ListSelect
+                items={roles}
+                onItemSelect={({ id }) => {
+                  form.setFieldValue('role_id', id);
+                }}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                textProp={'name'}
+                // labelProp={'id '}
+                popoverProps={{ minimal: true }}
+                intent={inputIntent({ error, touched })}
+                disabled={isAuth}
+              />
+            </FormGroup>
+          )}
+        </FastField>
       </div>
 
       <div className={CLASSES.DIALOG_FOOTER}>

src/containers/Dialogs/UserFormDialog/UserFormProvider.js

@@ -1,5 +1,10 @@
 import React, { createContext, useContext } from 'react';
-import { useEditUser, useUser } from 'hooks/query';
+import {
+  useEditUser,
+  useUser,
+  useRoles,
+  useAuthenticatedAccount,
+} from 'hooks/query';
 
 import { DialogContent } from 'components';
 
@@ -17,10 +22,21 @@ function UserFormProvider({ userId, dialogName, ...props }) {
     enabled: !!userId,
   });
 
+  // fetch roles list.
+  const { data: roles, isLoading: isRolesLoading } = useRoles();
+
+  // Retrieve authenticated user information.
+  const {
+    data: { id },
+  } = useAuthenticatedAccount();
+
   const isEditMode = userId;
 
+  const isAuth = user.system_user_id == id
+
   // Provider state.
   const provider = {
+    isAuth,
     userId,
     dialogName,
 
@@ -28,10 +44,14 @@ function UserFormProvider({ userId, dialogName, ...props }) {
     EditUserMutate,
 
     isEditMode,
+    roles,
   };
 
   return (
-    <DialogContent isLoading={isUserLoading} name={'user-form'}>
+    <DialogContent
+      isLoading={isUserLoading || isRolesLoading}
+      name={'user-form'}
+    >
       <UserFormContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Dialogs/UserFormDialog/components.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { includes } from 'lodash';
+import { Callout, Intent } from '@blueprintjs/core';
+
+export const UserFormCalloutAlerts = ({ calloutCodes }) => {
+  return [
+    includes(calloutCodes, 200) && (
+      <Callout icon={null} intent={Intent.DANGER}>
+        {intl.get('roles.error.you_cannot_change_your_own_role')}
+      </Callout>
+    ),
+  ];
+};

src/containers/Dialogs/UserFormDialog/utils.js

@@ -0,0 +1,13 @@
+import intl from 'react-intl-universal';
+
+// handle delete errors.
+export const transformErrors = (errors, { setErrors, setCalloutCode }) => {
+  if (
+    errors.find((error) => error.type === 'CANNOT_AUTHORIZED_USER_MUTATE_ROLE')
+  ) {
+    setCalloutCode([200]);
+    setErrors({
+      role_id: intl.get('roles.error.you_cannot_change_your_own_role'),
+    });
+  }
+};

src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js

@@ -7,13 +7,14 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { safeCallback } from 'utils';
+import { AccountAction, AbilitySubject } from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
@@ -53,26 +54,31 @@ function AccountDrawerActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon="pen-18" />}
+            className={Classes.MINIMAL}
-          text={<T id={'edit_account'} />}
+            icon={<Icon icon="pen-18" />}
-          onClick={safeCallback(onEditAccount)}
+            text={<T id={'edit_account'} />}
-        />
+            onClick={safeCallback(onEditAccount)}
-        <Button
+          />
-          className={Classes.MINIMAL}
+
-          icon={<Icon icon="plus" />}
+          <Button
-          text={<T id={'new_child_account'} />}
+            className={Classes.MINIMAL}
-          onClick={safeCallback(onNewChildAccount)}
+            icon={<Icon icon="plus" />}
-        />
+            text={<T id={'new_child_account'} />}
-        <NavbarDivider />
+            onClick={safeCallback(onNewChildAccount)}
-        <Button
+          />
-          className={Classes.MINIMAL}
+          <NavbarDivider />
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
+        </Can>
-          text={<T id={'delete'} />}
+        <Can I={AccountAction.Delete} a={AbilitySubject.Account}>
-          intent={Intent.DANGER}
+          <Button
-          onClick={safeCallback(onDeleteAccount)}
+            className={Classes.MINIMAL}
-        />
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={safeCallback(onDeleteAccount)}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/BillDrawer/BillDetailActionsBar.js

@@ -16,7 +16,12 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { If, Icon, FormattedMessage as T } from 'components';
+import { Can, If, Icon, FormattedMessage as T } from 'components';
+import {
+  BillAction,
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { safeCallback, compose } from 'utils';
 
@@ -53,29 +58,35 @@ function BillDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_bill'} />}
-          onClick={safeCallback(onEditBill)}
-        />
-        <NavbarDivider />
-        <If condition={bill.is_open && !bill.is_fully_paid}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            icon={<Icon icon="pen-18" />}
-            text={<T id={'add_payment'} />}
+            text={<T id={'edit_bill'} />}
-            onClick={handleQuickBillPayment}
+            onClick={safeCallback(onEditBill)}
           />
-        </If>
+          <NavbarDivider />
-        <NavbarDivider />
+        </Can>
-        <Button
+        <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
-          className={Classes.MINIMAL}
+          <If condition={bill.is_open && !bill.is_fully_paid}>
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
+            <Button
-          text={<T id={'delete'} />}
+              className={Classes.MINIMAL}
-          intent={Intent.DANGER}
+              icon={<Icon icon="quick-payment-16" iconSize={16} />}
-          onClick={safeCallback(onDeleteBill)}
+              text={<T id={'add_payment'} />}
-        />
+              onClick={handleQuickBillPayment}
+            />
+          </If>
+          <NavbarDivider />
+        </Can>
+        <Can I={BillAction.Delete} a={AbilitySubject.Bill}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={safeCallback(onDeleteBill)}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import Icon from 'components/Icon';
 import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
 import withAlertsActions from 'containers/Alert/withAlertActions';
-
+import { AbilitySubject, CashflowAction } from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -24,17 +24,19 @@ function CashflowTransactionDrawerActionBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
-      <NavbarGroup>
+      <DashboardActionsBar>
-        <Button
+        <NavbarGroup>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon="trash-16" iconSize={16} />}
+            className={Classes.MINIMAL}
-          text={<T id={'delete'} />}
+            icon={<Icon icon="trash-16" iconSize={16} />}
-          intent={Intent.DANGER}
+            text={<T id={'delete'} />}
-          onClick={handleDeleteCashflowTransaction}
+            intent={Intent.DANGER}
-        />
+            onClick={handleDeleteCashflowTransaction}
-      </NavbarGroup>
+          />
-    </DashboardActionsBar>
+        </NavbarGroup>
+      </DashboardActionsBar>
+    </Can>
   );
 }
 export default compose(withAlertsActions)(CashflowTransactionDrawerActionBar);

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js

@@ -21,8 +21,15 @@ import { useCustomerDetailsDrawerContext } from './CustomerDetailsDrawerProvider
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Can, Icon, FormattedMessage as T } from 'components';
-
+import {
+  AbilitySubject,
+  SaleInvoiceAction,
+  SaleEstimateAction,
+  SaleReceiptAction,
+  PaymentReceiveAction,
+  CustomerAction,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -74,22 +81,34 @@ function CustomerDetailsActionsBar({
         <Popover
           content={
             <Menu>
-              <MenuItem
+              <Can I={SaleInvoiceAction.Create} a={AbilitySubject.Invoice}>
-                text={<T id={'customer.drawer.action.new_invoice'} />}
+                <MenuItem
-                onClick={handleNewInvoiceClick}
+                  text={<T id={'customer.drawer.action.new_invoice'} />}
-              />
+                  onClick={handleNewInvoiceClick}
-              <MenuItem
+                />
-                text={<T id={'customer.drawer.action.new_estimate'} />}
+              </Can>
-                onClick={handleNewEstimateClick}
+              <Can I={SaleEstimateAction.Create} a={AbilitySubject.Estimate}>
-              />
+                <MenuItem
-              <MenuItem
+                  text={<T id={'customer.drawer.action.new_estimate'} />}
-                text={<T id={'customer.drawer.action.new_receipt'} />}
+                  onClick={handleNewEstimateClick}
-                onClick={handleNewReceiptClick}
+                />
-              />
+              </Can>
-              <MenuItem
+              <Can I={SaleReceiptAction.Create} a={AbilitySubject.Receipt}>
-                text={<T id={'customer.drawer.action.new_payment'} />}
+                <MenuItem
-                onClick={handleNewPaymentClick}
+                  text={<T id={'customer.drawer.action.new_receipt'} />}
-              />
+                  onClick={handleNewReceiptClick}
+                />
+              </Can>
+
+              <Can
+                I={PaymentReceiveAction.Create}
+                a={AbilitySubject.PaymentReceive}
+              >
+                <MenuItem
+                  text={<T id={'customer.drawer.action.new_payment'} />}
+                  onClick={handleNewPaymentClick}
+                />
+              </Can>
             </Menu>
           }
           minimal={true}
@@ -104,21 +123,24 @@ function CustomerDetailsActionsBar({
         </Popover>
 
         <NavbarDivider />
-
+        <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
-        <Button
+          <Button
-          className={Classes.MINIMAL}
+            className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
+            icon={<Icon icon="pen-18" />}
-          text={intl.get('customer.drawer.action.edit')}
+            text={intl.get('customer.drawer.action.edit')}
-          onClick={handleEditContact}
+            onClick={handleEditContact}
-        />
+          />
-        <NavbarDivider />
+          <NavbarDivider />
-        <Button
+        </Can>
-          className={Classes.MINIMAL}
+        <Can I={CustomerAction.Delete} a={AbilitySubject.Customer}>
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          <Button
-          text={<T id={'delete'} />}
+            className={Classes.MINIMAL}
-          intent={Intent.DANGER}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
-          onClick={handleDeleteCustomer}
+            text={<T id={'delete'} />}
-        />
+            intent={Intent.DANGER}
+            onClick={handleDeleteCustomer}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js

@@ -14,8 +14,12 @@ import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import {
+  SaleEstimateAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
-import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
+import { Icon, FormattedMessage as T, MoreMenuItems, Can } from 'components';
 
 import { compose } from 'utils';
 
@@ -59,27 +63,33 @@ function EstimateDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon="pen-18" />}
+            className={Classes.MINIMAL}
-          text={<T id={'edit_estimate'} />}
+            icon={<Icon icon="pen-18" />}
-          onClick={handleEditEstimate}
+            text={<T id={'edit_estimate'} />}
-        />
+            onClick={handleEditEstimate}
-        <NavbarDivider />
+          />
-        <Button
+          <NavbarDivider />
-          className={Classes.MINIMAL}
+        </Can>
-          icon={<Icon icon="print-16" />}
+        <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
-          text={<T id={'print'} />}
+          <Button
-          onClick={handlePrintEstimate}
+            className={Classes.MINIMAL}
-        />
+            icon={<Icon icon="print-16" />}
-        <Button
+            text={<T id={'print'} />}
-          className={Classes.MINIMAL}
+            onClick={handlePrintEstimate}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          />
-          text={<T id={'delete'} />}
+        </Can>
-          intent={Intent.DANGER}
+        <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
-          onClick={handleDeleteEstimate}
+          <Button
-        />
+            className={Classes.MINIMAL}
-        <NavbarDivider />
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteEstimate}
+          />
+          <NavbarDivider />
+        </Can>
         <MoreMenuItems
           payload={{
             onNotifyViaSMS: handleNotifyViaSMS,

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js

@@ -8,8 +8,8 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
-
+import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -44,20 +44,24 @@ function ExpenseDrawerActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={ExpenseAction.Edit} a={AbilitySubject.Expense}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon="pen-18" />}
+            className={Classes.MINIMAL}
-          text={<T id={'edit_expense'} />}
+            icon={<Icon icon="pen-18" />}
-          onClick={handleEditExpense}
+            text={<T id={'edit_expense'} />}
-        />
+            onClick={handleEditExpense}
-        <NavbarDivider />
+          />
-        <Button
+          <NavbarDivider />
-          className={Classes.MINIMAL}
+        </Can>
-          icon={<Icon icon="trash-16" iconSize={16} />}
+        <Can I={ExpenseAction.Delete} a={AbilitySubject.Expense}>
-          text={<T id={'delete'} />}
+          <Button
-          intent={Intent.DANGER}
+            className={Classes.MINIMAL}
-          onClick={handleDeleteExpense}
+            icon={<Icon icon="trash-16" iconSize={16} />}
-        />
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteExpense}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js

@@ -7,7 +7,11 @@ import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawer
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T, Can } from 'components';
+import {
+  InventoryAdjustmentAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -26,17 +30,22 @@ function InventoryAdjustmentDetailActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <Can
-      <NavbarGroup>
+      I={InventoryAdjustmentAction.Delete}
-        <Button
+      a={AbilitySubject.InventoryAdjustment}
-          className={Classes.MINIMAL}
+    >
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
+      <DashboardActionsBar>
-          text={<T id={'delete'} />}
+        <NavbarGroup>
-          intent={Intent.DANGER}
+          <Button
-          onClick={handleDeleteInventoryAdjustment}
+            className={Classes.MINIMAL}
-        />
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
-      </NavbarGroup>
+            text={<T id={'delete'} />}
-    </DashboardActionsBar>
+            intent={Intent.DANGER}
+            onClick={handleDeleteInventoryAdjustment}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    </Can>
   );
 }
 

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js

@@ -16,7 +16,12 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { If, Icon, FormattedMessage as T } from 'components';
+import { If, Can, Icon, FormattedMessage as T } from 'components';
+import {
+  SaleInvoiceAction,
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -78,43 +83,54 @@ function InvoiceDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={SaleInvoiceAction.Edit} a={AbilitySubject.Invoice}>
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_invoice'} />}
-          onClick={handleEditInvoice}
-        />
-        <NavbarDivider />
-        <If condition={invoice.is_delivered && !invoice.is_fully_paid}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            icon={<Icon icon="pen-18" />}
-            text={<T id={'add_payment'} />}
+            text={<T id={'edit_invoice'} />}
-            onClick={handleQuickPaymentInvoice}
+            onClick={handleEditInvoice}
           />
-        </If>
+
-        <NavbarDivider />
+          <NavbarDivider />
-        <Button
+        </Can>
-          className={Classes.MINIMAL}
+        <Can I={PaymentReceiveAction.Create} a={AbilitySubject.PaymentReceive}>
-          icon={<Icon icon="print-16" />}
+          <If condition={invoice.is_delivered && !invoice.is_fully_paid}>
-          text={<T id={'print'} />}
+            <Button
-          onClick={handlePrintInvoice}
+              className={Classes.MINIMAL}
-        />
+              icon={<Icon icon="quick-payment-16" iconSize={16} />}
-        <Button
+              text={<T id={'add_payment'} />}
-          className={Classes.MINIMAL}
+              onClick={handleQuickPaymentInvoice}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
+            />
-          text={<T id={'delete'} />}
+          </If>
-          intent={Intent.DANGER}
+          <NavbarDivider />
-          onClick={handleDeleteInvoice}
+        </Can>
-        />
+        <Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
-        <NavbarDivider />
+          <Button
-        <BadDebtMenuItem
+            className={Classes.MINIMAL}
-          payload={{
+            icon={<Icon icon="print-16" />}
-            onBadDebt: handleBadDebtInvoice,
+            text={<T id={'print'} />}
-            onCancelBadDebt: handleCancelBadDebtInvoice,
+            onClick={handlePrintInvoice}
-            onNotifyViaSMS: handleNotifyViaSMS,
+          />
-          }}
+        </Can>
-        />
+        <Can I={SaleInvoiceAction.Delete} a={AbilitySubject.Invoice}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteInvoice}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={SaleInvoiceAction.Writeoff} a={AbilitySubject.Invoice}>
+          <BadDebtMenuItem
+            payload={{
+              onBadDebt: handleBadDebtInvoice,
+              onCancelBadDebt: handleCancelBadDebtInvoice,
+              onNotifyViaSMS: handleNotifyViaSMS,
+            }}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js

@@ -10,11 +10,12 @@ import {
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
+import { ItemAction, AbilitySubject } from '../../../common/abilityOption';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T, Can } from 'components';
 
 import { compose } from 'utils';
 
@@ -47,20 +48,25 @@ function ItemDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={ItemAction.Edit} a={AbilitySubject.Item}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon="pen-18" />}
+            className={Classes.MINIMAL}
-          text={<T id={'edit_item'} />}
+            icon={<Icon icon="pen-18" />}
-          onClick={handleEditItem}
+            text={<T id={'edit_item'} />}
-        />
+            onClick={handleEditItem}
-        <NavbarDivider />
+          />
-        <Button
+
-          className={Classes.MINIMAL}
+          <NavbarDivider />
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
+        </Can>
-          text={<T id={'delete'} />}
+        <Can I={ItemAction.Delete} a={AbilitySubject.Item}>
-          intent={Intent.DANGER}
+          <Button
-          onClick={handleDeleteItem}
+            className={Classes.MINIMAL}
-        />
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteItem}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js

@@ -8,14 +8,19 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { compose } from 'utils';
 import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+import {
+  ManualJournalAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
+
+import { compose } from 'utils';
 
 /**
  * Manual journal action bar.
@@ -44,20 +49,24 @@ function ManualJournalDrawerActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon="pen-18" />}
+            className={Classes.MINIMAL}
-          text={<T id={'edit_journal'} />}
+            icon={<Icon icon="pen-18" />}
-          onClick={handleEditManualJournal}
+            text={<T id={'edit_journal'} />}
-        />
+            onClick={handleEditManualJournal}
-        <NavbarDivider />
+          />
-        <Button
+          <NavbarDivider />
-          className={Classes.MINIMAL}
+        </Can>
-          icon={<Icon icon="trash-16" iconSize={16} />}
+        <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
-          text={<T id={'delete'} />}
+          <Button
-          intent={Intent.DANGER}
+            className={Classes.MINIMAL}
-          onClick={handleDeleteManualJournal}
+            icon={<Icon icon="trash-16" iconSize={16} />}
-        />
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteManualJournal}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js

@@ -16,8 +16,11 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Can, Icon, FormattedMessage as T } from 'components';
-
+import {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -48,20 +51,24 @@ function PaymentMadeDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={PaymentMadeAction.Edit} a={AbilitySubject.PaymentMade}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon="pen-18" />}
+            className={Classes.MINIMAL}
-          text={<T id={'edit_payment_made'} />}
+            icon={<Icon icon="pen-18" />}
-          onClick={handleEditPaymentMade}
+            text={<T id={'edit_payment_made'} />}
-        />
+            onClick={handleEditPaymentMade}
-        <NavbarDivider />
+          />
-        <Button
+          <NavbarDivider />
-          className={Classes.MINIMAL}
+        </Can>
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
+        <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
-          text={<T id={'delete'} />}
+          <Button
-          intent={Intent.DANGER}
+            className={Classes.MINIMAL}
-          onClick={handleDeletePaymentMade}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
-        />
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeletePaymentMade}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js

@@ -16,7 +16,11 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
+import { Can, Icon, FormattedMessage as T, MoreMenuItems } from 'components';
+import {
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -57,21 +61,25 @@ function PaymentReceiveActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={PaymentReceiveAction.Edit} a={AbilitySubject.PaymentReceive}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon="pen-18" />}
+            className={Classes.MINIMAL}
-          text={<T id={'edit_payment_receive'} />}
+            icon={<Icon icon="pen-18" />}
-          onClick={handleEditPaymentReceive}
+            text={<T id={'edit_payment_receive'} />}
-        />
+            onClick={handleEditPaymentReceive}
-        <NavbarDivider />
+          />
-        <Button
+          <NavbarDivider />
-          className={Classes.MINIMAL}
+        </Can>
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
+        <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
-          text={<T id={'delete'} />}
+          <Button
-          intent={Intent.DANGER}
+            className={Classes.MINIMAL}
-          onClick={handleDeletePaymentReceive}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
-        />
+            text={<T id={'delete'} />}
-        <NavbarDivider />
+            intent={Intent.DANGER}
+            onClick={handleDeletePaymentReceive}
+          />
+          <NavbarDivider />
+        </Can>
         <MoreMenuItems
           payload={{
             onNotifyViaSMS: handleNotifyViaSMS,

src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js

@@ -14,8 +14,12 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
+import { Can, Icon, FormattedMessage as T, MoreMenuItems } from 'components';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
+import {
+  SaleReceiptAction,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { safeCallback, compose } from 'utils';
 
@@ -54,27 +58,33 @@ function ReceiptDetailActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={SaleReceiptAction.Edit} a={AbilitySubject.Receipt}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon="pen-18" />}
+            className={Classes.MINIMAL}
-          text={<T id={'edit_receipt'} />}
+            icon={<Icon icon="pen-18" />}
-          onClick={safeCallback(onEditReceipt)}
+            text={<T id={'edit_receipt'} />}
-        />
+            onClick={safeCallback(onEditReceipt)}
-        <NavbarDivider />
+          />
-        <Button
+          <NavbarDivider />
-          className={Classes.MINIMAL}
+        </Can>
-          icon={<Icon icon="print-16" />}
+        <Can I={SaleReceiptAction.View} a={AbilitySubject.Receipt}>
-          text={<T id={'print'} />}
+          <Button
-          onClick={safeCallback(onPrintReceipt)}
+            className={Classes.MINIMAL}
-        />
+            icon={<Icon icon="print-16" />}
-        <Button
+            text={<T id={'print'} />}
-          className={Classes.MINIMAL}
+            onClick={safeCallback(onPrintReceipt)}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          />
-          text={<T id={'delete'} />}
+        </Can>
-          intent={Intent.DANGER}
+        <Can I={SaleReceiptAction.Delete} a={AbilitySubject.Receipt}>
-          onClick={safeCallback(onDeleteReceipt)}
+          <Button
-        />
+            className={Classes.MINIMAL}
-        <NavbarDivider />
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={safeCallback(onDeleteReceipt)}
+          />
+          <NavbarDivider />
+        </Can>
         <MoreMenuItems
           payload={{
             onNotifyViaSMS: handleNotifyViaSMS,

src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.js

@@ -20,8 +20,13 @@ import { useVendorDetailsDrawerContext } from './VendorDetailsDrawerProvider';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { Can, Icon, FormattedMessage as T } from 'components';
-
+import {
+  AbilitySubject,
+  SaleInvoiceAction,
+  PaymentMadeAction,
+  VendorAction,
+} from '../../../common/abilityOption';
 import { safeCallback, compose } from 'utils';
 
 /**
@@ -64,14 +69,18 @@ function VendorDetailsActionsBar({
         <Popover
           content={
             <Menu>
-              <MenuItem
+              <Can I={SaleInvoiceAction.Create} a={AbilitySubject.Invoice}>
-                text={<T id={'vendor.drawer.action.new_invoice'} />}
+                <MenuItem
-                onClick={handleNewInvoiceClick}
+                  text={<T id={'vendor.drawer.action.new_invoice'} />}
-              />
+                  onClick={handleNewInvoiceClick}
-              <MenuItem
+                />
-                text={<T id={'vendor.drawer.action.new_payment'} />}
+              </Can>
-                onClick={handleNewPaymentClick}
+              <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
-              />
+                <MenuItem
+                  text={<T id={'vendor.drawer.action.new_payment'} />}
+                  onClick={handleNewPaymentClick}
+                />
+              </Can>
             </Menu>
           }
           minimal={true}
@@ -84,23 +93,25 @@ function VendorDetailsActionsBar({
             icon={<Icon icon={'plus'} />}
           />
         </Popover>
-
         <NavbarDivider />
-
+        <Can I={VendorAction.Edit} a={AbilitySubject.Vendor}>
-        <Button
+          <Button
-          className={Classes.MINIMAL}
+            className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
+            icon={<Icon icon="pen-18" />}
-          text={<T id={'vendor.drawer.action.edit'} />}
+            text={<T id={'vendor.drawer.action.edit'} />}
-          onClick={safeCallback(onEditContact)}
+            onClick={safeCallback(onEditContact)}
-        />
+          />
-        <NavbarDivider />
+          <NavbarDivider />
-        <Button
+        </Can>
-          className={Classes.MINIMAL}
+        <Can I={VendorAction.Delete} a={AbilitySubject.Vendor}>
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          <Button
-          text={<T id={'vendor.drawer.action.delete'} />}
+            className={Classes.MINIMAL}
-          intent={Intent.DANGER}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
-          onClick={safeCallback(onDeleteContact)}
+            text={<T id={'vendor.drawer.action.delete'} />}
-        />
+            intent={Intent.DANGER}
+            onClick={safeCallback(onDeleteContact)}
+          />
+        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js

@@ -15,6 +15,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import {
   If,
+  Can,
   DashboardRowsHeightButton,
   DashboardActionViewsList,
   DashboardFilterButton,
@@ -22,6 +23,7 @@ import {
   FormattedMessage as T,
 } from 'components';
 
+import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
 import { useRefreshExpenses } from 'hooks/query/expenses';
 import { useExpensesListContext } from './ExpensesListProvider';
 
@@ -92,13 +94,14 @@ function ExpensesActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
+        <Can I={ExpenseAction.Create} a={AbilitySubject.Expense}>
-        <Button
+          <Button
-          className={Classes.MINIMAL}
+            className={Classes.MINIMAL}
-          icon={<Icon icon="plus" />}
+            icon={<Icon icon="plus" />}
-          text={<T id={'new_expense'} />}
+            text={<T id={'new_expense'} />}
-          onClick={onClickNewExpense}
+            onClick={onClickNewExpense}
-        />
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: expensesFilterConditions,

src/containers/Expenses/ExpensesLanding/ExpensesEmptyStatus.js

@@ -2,7 +2,8 @@ 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, ExpenseAction } from '../../../common/abilityOption';
 
 export default function InvoicesEmptyStatus() {
   const history = useHistory();
@@ -17,19 +18,21 @@ export default function InvoicesEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={ExpenseAction.Create} a={AbilitySubject.Expense}>
-            intent={Intent.PRIMARY}
+            <Button
-            large={true}
+              intent={Intent.PRIMARY}
-            onClick={() => {
+              large={true}
-              history.push('/expenses/new');
+              onClick={() => {
-            }}
+                history.push('/expenses/new');
-          >
+              }}
-            <T id={'new_expense'} />
+            >
-          </Button>
+              <T id={'new_expense'} />
+            </Button>
 
-          <Button intent={Intent.NONE} large={true}>
+            <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
+              <T id={'learn_more'} />
-          </Button>
+            </Button>
+          </Can>
         </>
       }
     />

src/containers/Expenses/ExpensesLanding/components.js

@@ -12,13 +12,14 @@ import {
   MenuDivider,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-
+import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
 import {
   FormatDateCell,
   FormattedMessage as T,
   Money,
   Icon,
   If,
+  Can,
 } from 'components';
 import { safeCallback } from 'utils';
 
@@ -54,25 +55,31 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
+      <Can I={ExpenseAction.Edit} a={AbilitySubject.Expense}>
-      <If condition={!original.is_published}>
+        <MenuDivider />
+        <If condition={!original.is_published}>
+          <MenuItem
+            icon={<Icon icon={'arrow-to-top'} size={16} />}
+            text={intl.get('publish_expense')}
+            onClick={safeCallback(onPublish, original)}
+          />
+        </If>
+      </Can>
+      <Can I={ExpenseAction.Edit} a={AbilitySubject.Expense}>
         <MenuItem
-          icon={<Icon icon={'arrow-to-top'} size={16} />}
+          icon={<Icon icon="pen-18" />}
-          text={intl.get('publish_expense')}
+          text={intl.get('edit_expense')}
-          onClick={safeCallback(onPublish, original)}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
+      </Can>
-      <MenuItem
+      <Can I={ExpenseAction.Delete} a={AbilitySubject.Expense}>
-        icon={<Icon icon="pen-18" />}
+        <MenuItem
-        text={intl.get('edit_expense')}
+          icon={<Icon icon="trash-16" iconSize={16} />}
-        onClick={safeCallback(onEdit, original)}
+          text={intl.get('delete_expense')}
-      />
+          intent={Intent.DANGER}
-      <MenuItem
+          onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
+        />
-        text={intl.get('delete_expense')}
+      </Can>
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-      />
     </Menu>
   );
 }

src/containers/FinancialStatements/FilterFinancialReports.js

@@ -0,0 +1,23 @@
+import { isEmpty } from 'lodash';
+import { useAbilityContext } from '../../hooks';
+
+function useFilterFinancialReports(financialSection) {
+  const ability = useAbilityContext();
+
+  const section = financialSection
+    .map((section) => {
+      const reports = section.reports.filter((report) => {
+        return ability.can(report.ability, report.subject);
+      });
+
+      return {
+        sectionTitle: section.sectionTitle,
+        reports,
+      };
+    })
+    .filter(({ reports }) => !isEmpty(reports));
+
+  return section;
+}
+
+export default useFilterFinancialReports;

src/containers/FinancialStatements/FinancialReports.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { For } from 'components';
-
+import useFilterFinancialReports from './FilterFinancialReports';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   financialReportMenus,
@@ -37,13 +37,18 @@ function FinancialReportsSection({ sectionTitle, reports }) {
  * Financial reports.
  */
 export default function FinancialReports() {
+  const financialReportMenu = useFilterFinancialReports(financialReportMenus);
+  const SalesAndPurchasesReportMenu = useFilterFinancialReports(
+    SalesAndPurchasesReportMenus,
+  );
+
   return (
     <DashboardInsider name={'financial-reports'}>
       <div class="financial-reports">
-        <For render={FinancialReportsSection} of={financialReportMenus} />
+        <For render={FinancialReportsSection} of={financialReportMenu} />
         <For
           render={FinancialReportsSection}
-          of={SalesAndPurchasesReportMenus}
+          of={SalesAndPurchasesReportMenu}
         />
       </div>
     </DashboardInsider>

src/containers/GlobalErrors/GlobalErrors.js

@@ -1,7 +1,5 @@
-import React from 'react';
 import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { useHistory } from 'react-router-dom';
 import AppToaster from 'components/AppToaster';
 
 import withGlobalErrors from './withGlobalErrors';
@@ -30,7 +28,6 @@ function GlobalErrors({
       toastKeySessionExpired,
     );
   }
-
   if (globalErrors.session_expired) {
     toastKeySomethingWrong = AppToaster.show(
       {
@@ -43,6 +40,18 @@ function GlobalErrors({
       toastKeySomethingWrong,
     );
   }
+  if (globalErrors.access_denied) {
+    toastKeySomethingWrong = AppToaster.show(
+      {
+        message: 'You do not have permissions to access this page.',
+        intent: Intent.DANGER,
+        onDismiss: () => {
+          globalErrorsSet({ access_denied: false });
+        },
+      },
+      toastKeySomethingWrong,
+    );
+  }
   return null;
 }
 

src/containers/Homepage/ShortcutBoxesSection.js

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { For } from 'components';
 
 import 'style/pages/FinancialStatements/FinancialSheets.scss';
+import { useFilterShortcutBoxesSection } from './components';
 
 function ShortcutBox({ title, link, description }) {
   return (
@@ -27,5 +28,6 @@ function ShortcutBoxes({ sectionTitle, shortcuts }) {
 }
 
 export default function ShortcutBoxesSection({ section }) {
-  return <For render={ShortcutBoxes} of={section} />;
+  const BoxSection = useFilterShortcutBoxesSection(section);
+  return <For render={ShortcutBoxes} of={BoxSection} />;
 }

src/containers/Homepage/components.js

@@ -0,0 +1,18 @@
+import { isEmpty } from 'lodash';
+import { useAbilityContext } from '../../hooks';
+
+export const useFilterShortcutBoxesSection = (section) => {
+  const ability = useAbilityContext();
+
+  return section
+    .map(({ sectionTitle, shortcuts }) => {
+      const shortcut = shortcuts.filter((shortcuts) => {
+        return ability.can(shortcuts.ability, shortcuts.subject);
+      });
+      return {
+        sectionTitle: sectionTitle,
+        shortcuts: shortcut,
+      };
+    })
+    .filter(({ shortcuts }) => !isEmpty(shortcuts));
+};

src/containers/InventoryAdjustments/components.js

@@ -12,10 +12,14 @@ import {
 import intl from 'react-intl-universal';
 import moment from 'moment';
 
-import { FormattedMessage as T } from 'components';
+import { FormattedMessage as T, Can } from 'components';
 import { isNumber } from 'lodash';
 import { Icon, Money, If } from 'components';
 import { isBlank, safeCallback } from 'utils';
+import {
+  InventoryAdjustmentAction,
+  AbilitySubject,
+} from '../../common/abilityOption';
 
 /**
  * Publish accessor
@@ -102,20 +106,31 @@ export const ActionsMenu = ({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
+
-      <If condition={!original.is_published}>
+      <Can
+        I={InventoryAdjustmentAction.Create}
+        a={AbilitySubject.InventoryAdjustment}
+      >
+        <MenuDivider />
+        <If condition={!original.is_published}>
+          <MenuItem
+            icon={<Icon icon={'arrow-to-top'} size={16} />}
+            text={intl.get('publish_adjustment')}
+            onClick={safeCallback(onPublish, original)}
+          />
+        </If>
+      </Can>
+      <Can
+        I={InventoryAdjustmentAction.Delete}
+        a={AbilitySubject.InventoryAdjustment}
+      >
         <MenuItem
-          icon={<Icon icon={'arrow-to-top'} size={16} />}
+          text={intl.get('delete_adjustment')}
-          text={intl.get('publish_adjustment')}
+          intent={Intent.DANGER}
-          onClick={safeCallback(onPublish, original)}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
         />
-      </If>
+      </Can>
-      <MenuItem
-        text={intl.get('delete_adjustment')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
     </Menu>
   );
 };

src/containers/Items/ItemsActionsBar.js

@@ -14,6 +14,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import {
   If,
+  Can,
   DashboardActionViewsList,
   AdvancedFilterPopover,
   DashboardFilterButton,
@@ -30,8 +31,7 @@ import withSettings from '../Settings/withSettings';
 import { compose } from 'utils';
 import withSettingsActions from '../Settings/withSettingsActions';
 
-
+import { ItemAction, AbilitySubject } from '../../common/abilityOption';
-import { Can, AbilityContext } from '../../components/Abilities';
 
 /**
  * Items actions bar.
@@ -60,8 +60,6 @@ function ItemsActionsBar({
   // Items refresh action.
   const { refresh } = useRefreshItems();
 
-  const { ability } = React.useContext(AbilityContext);
-
   // History context.
   const history = useHistory();
 
@@ -106,14 +104,14 @@ function ItemsActionsBar({
         />
         <NavbarDivider />
 
-        {/* <Can I="create" a="Item" ability={ability}> */}
+        <Can I={ItemAction.Create} a={AbilitySubject.Item}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="plus" />}
             text={<T id={'new_item'} />}
             onClick={onClickNewItem}
           />
-        {/* </Can> */}
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: itemsFilterRoles,
@@ -155,11 +153,13 @@ function ItemsActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Switch
+        <Can I={ItemAction.Edit} a={AbilitySubject.Item}>
-          labelElement={<T id={'inactive'} />}
+          <Switch
-          defaultChecked={itemsInactiveMode}
+            labelElement={<T id={'inactive'} />}
-          onChange={handleInactiveSwitchChange}
+            defaultChecked={itemsInactiveMode}
-        />
+            onChange={handleInactiveSwitchChange}
+          />
+        </Can>
       </NavbarGroup>
 
       <NavbarGroup align={Alignment.RIGHT}>

src/containers/Items/ItemsEmptyStatus.js

@@ -2,7 +2,8 @@ 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 { ItemAction, AbilitySubject } from '../../common/abilityOption';
 
 export default function ItemsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +18,21 @@ export default function ItemsEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={ItemAction.Create} a={AbilitySubject.Item}>
-            intent={Intent.PRIMARY}
+            <Button
-            large={true}
+              intent={Intent.PRIMARY}
-            onClick={() => {
+              large={true}
-              history.push('/items/new');
+              onClick={() => {
-            }}
+                history.push('/items/new');
-          >
+              }}
-            <T id={'new_item'} />
+            >
-          </Button>
+              <T id={'new_item'} />
+            </Button>
 
-          <Button intent={Intent.NONE} large={true}>
+            <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
+              <T id={'learn_more'} />
-          </Button>
+            </Button>
+          </Can>
         </>
       }
     />

src/containers/Items/ItemsUniversalSearch.js

@@ -1,7 +1,10 @@
 import intl from 'react-intl-universal';
-import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+
 import withDrawerActions from '../Drawer/withDrawerActions';
 
+import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+import { AbilitySubject, ItemAction } from '../../common/abilityOption';
+
 /**
  * Item univrsal search item select action.
  */
@@ -46,4 +49,8 @@ export const universalSearchItemBind = () => ({
   optionItemLabel: intl.get('items'),
   selectItemAction: ItemUniversalSearchSelectAction,
   itemSelect: transfromItemsToSearch,
+  permission: {
+    ability: ItemAction.View,
+    subject: AbilitySubject.Item,
+  },
 });

src/containers/Items/components.js

@@ -12,8 +12,13 @@ import {
 import intl from 'react-intl-universal';
 import { isNumber } from 'lodash';
 
-import { FormattedMessage as T, Icon, Money, If } from 'components';
+import { FormattedMessage as T, Icon, Money, If, Can } from 'components';
 import { isBlank, safeCallback } from 'utils';
+import {
+  AbilitySubject,
+  ItemAction,
+  InventoryAdjustmentAction,
+} from '../../common/abilityOption';
 
 /**
  * Publish accessor
@@ -90,44 +95,58 @@ export function ItemsActionMenuList({
         text={<T id={'view_details'} />}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
+      <Can I={ItemAction.Edit} a={AbilitySubject.Item}>
-      <MenuItem
+        <MenuDivider />
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_item')}
-        onClick={safeCallback(onEditItem, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="duplicate-16" />}
-        text={intl.get('duplicate')}
-        onClick={safeCallback(onDuplicate, original)}
-      />
-      <If condition={original.active}>
         <MenuItem
-          text={intl.get('inactivate_item')}
+          icon={<Icon icon="pen-18" />}
-          icon={<Icon icon="pause-16" iconSize={16} />}
+          text={intl.get('edit_item')}
-          onClick={safeCallback(onInactivateItem, original)}
+          onClick={safeCallback(onEditItem, original)}
         />
-      </If>
+      </Can>
-      <If condition={!original.active}>
+      <Can I={ItemAction.Create} a={AbilitySubject.Item}>
         <MenuItem
-          text={intl.get('activate_item')}
+          icon={<Icon icon="duplicate-16" />}
-          icon={<Icon icon="play-16" iconSize={16} />}
+          text={intl.get('duplicate')}
-          onClick={safeCallback(onActivateItem, original)}
+          onClick={safeCallback(onDuplicate, original)}
         />
-      </If>
+      </Can>
-      <If condition={original.type === 'inventory'}>
+      <Can I={ItemAction.Edit} a={AbilitySubject.Item}>
+        <If condition={original.active}>
+          <MenuItem
+            text={intl.get('inactivate_item')}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={safeCallback(onInactivateItem, original)}
+          />
+        </If>
+
+        <If condition={!original.active}>
+          <MenuItem
+            text={intl.get('activate_item')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivateItem, original)}
+          />
+        </If>
+      </Can>
+      <Can
+        I={InventoryAdjustmentAction.Edit}
+        a={AbilitySubject.InventoryAdjustment}
+      >
+        <If condition={original.type === 'inventory'}>
+          <MenuItem
+            text={intl.get('make_adjustment')}
+            icon={<Icon icon={'swap-vert'} iconSize={16} />}
+            onClick={safeCallback(onMakeAdjustment, original)}
+          />
+        </If>
+      </Can>
+      <Can I={ItemAction.Delete} a={AbilitySubject.Item}>
         <MenuItem
-          text={intl.get('make_adjustment')}
+          text={intl.get('delete_item')}
-          icon={<Icon icon={'swap-vert'} iconSize={16} />}
+          icon={<Icon icon="trash-16" iconSize={16} />}
-          onClick={safeCallback(onMakeAdjustment, original)}
+          onClick={safeCallback(onDeleteItem, original)}
+          intent={Intent.DANGER}
         />
-      </If>
+      </Can>
-      <MenuItem
-        text={intl.get('delete_item')}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-        onClick={safeCallback(onDeleteItem, original)}
-        intent={Intent.DANGER}
-      />
     </Menu>
   );
 }

src/containers/KeyboardShortcuts/ShortcutsTable.js

@@ -1,14 +1,13 @@
 import React, { useMemo } from 'react';
 import { DataTable } from 'components';
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
-import keyboardShortcuts from 'common/keyboardShortcutsOptions';
+import { useKeywordShortcuts } from '../../hooks/dashboard';
 
 /**
  *  keyboard shortcuts table.
  */
-function ShortcutsTable() {
+export default function ShortcutsTable() {
-  
+  const keywordShortcuts = useKeywordShortcuts();
 
   const columns = useMemo(
     () => [
@@ -30,8 +29,5 @@ function ShortcutsTable() {
     ],
     [],
   );
-
+  return <DataTable columns={columns} data={keywordShortcuts} />;
-  return <DataTable columns={columns} data={keyboardShortcuts} />;
 }
-
-export default ShortcutsTable;

src/containers/Preferences/Currencies/components.js

@@ -67,7 +67,7 @@ export function useCurrenciesTableColumns() {
         width: 120,
       },
       {
-        Header: 'Currency sign',
+        Header: intl.get('currency_sign'),
         width: 120,
         accessor: 'currency_sign'
       },

src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
-import { defaultTo, sumBy, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 import 'style/pages/Preferences/Roles/Form.scss';
 
@@ -12,7 +13,11 @@ import { AppToaster, FormattedMessage as T } from 'components';
 import { CreateRolesFormSchema, EditRolesFormSchema } from './RolesForm.schema';
 
 import { useRolesFormContext } from './RolesFormProvider';
-import { transformToArray } from './utils';
+import {
+  getNewRoleInitialValues,
+  transformToArray,
+  transformToObject,
+} from './utils';
 
 import RolesFormContent from './RolesFormContent';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -32,24 +37,31 @@ function RolesForm({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
+  // History context.
+  const history = useHistory();
+
+  // Role form context.
   const {
     isNewMode,
     createRolePermissionMutate,
     editRolePermissionMutate,
-    permissionSchema,
+    permissionsSchema,
+    role,
     roleId,
   } = useRolesFormContext();
 
   // Initial values.
   const initialValues = {
     ...defaultValues,
-    ...transformToForm(permissionSchema, defaultValues),
+    ...(!isEmpty(role)
+      ? transformToForm(transformToObject(role), defaultValues)
+      : getNewRoleInitialValues(permissionsSchema)),
   };
-
   React.useEffect(() => {
     changePreferencesPageTitle(<T id={'roles.label'} />);
   }, [changePreferencesPageTitle]);
 
+  // Handle the form submit.
   const handleFormSubmit = (values, { setSubmitting }) => {
     const permission = transformToArray(values);
     const form = {
@@ -67,6 +79,7 @@ function RolesForm({
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
+      history.push('/preferences/users');
     };
 
     const onError = (errors) => {

src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js

@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
-  role_name: Yup.string().required().label(intl.get('roles.label.role_name')),
+  role_name: Yup.string().required().label(intl.get('roles.label.role_name_')),
   role_description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
 
   permissions: Yup.object().shape({

src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useParams } from 'react-router-dom';
 import RolesForm from './RolesForm';
 import { RolesFormProvider } from './RolesFormProvider';
 
@@ -6,8 +7,11 @@ import { RolesFormProvider } from './RolesFormProvider';
  * Roles Form page.
  */
 export default function RolesFormPage() {
+  const { id } = useParams();
+  const idInteger = parseInt(id, 10);
+
   return (
-    <RolesFormProvider roleId={undefined}>
+    <RolesFormProvider roleId={idInteger}>
       <RolesForm />
     </RolesFormProvider>
   );

src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js

@@ -25,29 +25,27 @@ function RolesFormProvider({ roleId, ...props }) {
   const { mutateAsync: editRolePermissionMutate } =
     useEditRolePermissionSchema();
 
+  // Retrieve permissions schema.
   const {
     data: permissionsSchema,
     isLoading: isPermissionsSchemaLoading,
     isFetching: isPermissionsSchemaFetching,
   } = usePermissionsSchema();
 
-  // const roleId = 6;
+  const { data: role, isLoading: isPermissionLoading } =
-
-  const { data: permission, isLoading: isPermissionLoading } =
     useRolePermission(roleId, {
       enabled: !!roleId,
     });
 
+  // Detarmines whether the new or edit mode.
   const isNewMode = !roleId;
 
-  const permissionSchema = transformToObject(permission);
-
   // Provider state.
   const provider = {
     isNewMode,
     roleId,
+    role,
     permissionsSchema,
-    permissionSchema,
     isPermissionsSchemaLoading,
     isPermissionsSchemaFetching,
     createRolePermissionMutate,

src/containers/Preferences/Users/Roles/RolesForm/utils.js

@@ -1,5 +1,3 @@
-import { isEmpty } from 'lodash';
-
 export const transformToArray = ({ permissions }) => {
   return Object.keys(permissions).map((index) => {
     const [value, key] = index.split('/');
@@ -12,16 +10,44 @@ export const transformToArray = ({ permissions }) => {
   });
 };
 
-export const transformToObject = ({ name, description, permissions }) => {
+export const transformPermissionsToObject = (permissions) => {
-  if (!isEmpty(permissions)) {
+  const output = {};
-    const output = {};
+  permissions.forEach((item) => {
-    permissions.forEach((item) => {
+    output[`${item.subject}/${item.ability}`] = !!item.value;
-      output[`${item.subject}/${item.ability}`] = !!item.value;
+  });
-    });
+  return output;
-    return {
+};
-      role_name: name,
+
-      role_description: description,
+export const transformToObject = (role) => {
-      permissions: { ...output },
+  return {
-    };
+    role_name: role.name,
-  }
+    role_description: role.description,
+    permissions: transformPermissionsToObject(role.permissions),
+  };
+};
+
+export const getDefaultValuesFromSchema = (schema) => {
+  return schema
+    .map((item) => {
+      const abilities = [
+        ...(item.abilities || []),
+        ...(item.extra_abilities || []),
+      ];
+      return abilities
+        .filter((ability) => ability.default)
+        .map((ability) => ({
+          subject: item.subject,
+          ability: ability.key,
+          value: ability.default,
+        }));
+    })
+    .flat();
+};
+
+export const getNewRoleInitialValues = (schema) => {
+  return {
+    permissions: transformPermissionsToObject(
+      getDefaultValuesFromSchema(schema),
+    ),
+  };
 };

src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js

@@ -1,11 +1,15 @@
 import React from 'react';
+import { Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
-import { DataTable } from 'components';
+import { DataTable, AppToaster } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
 import { useRolesTableColumns, ActionsMenu } from './components';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import { useRolesContext } from './RolesListProvider';
 
 import { compose } from 'utils';
 
@@ -16,26 +20,59 @@ function RolesDataTable({
   // #withAlertsActions
   openAlert,
 }) {
+  // History context.
+  const history = useHistory();
+
+  // Retrieve roles table columns
   const columns = useRolesTableColumns();
 
-  const handleDeleteRole = ({ id }) => {
+  // Roles table context.
-    openAlert('role-delete', { roleId: id });
+  const { roles, isRolesFetching, isRolesLoading } = useRolesContext();
+
+  // handles delete the given role.
+  const handleDeleteRole = ({ id, predefined }) => {
+    if (predefined) {
+      AppToaster.show({
+        message: intl.get('roles.error.you_cannot_delete_predefined_roles'),
+        intent: Intent.DANGER,
+      });
+    } else {
+      openAlert('role-delete', { roleId: id });
+    }
+  };
+  // Handles the edit of the given role.
+  const handleEditRole = ({ id, predefined }) => {
+    if (predefined) {
+      AppToaster.show({
+        message: intl.get('roles.error.you_cannot_edit_predefined_roles'),
+        intent: Intent.DANGER,
+      });
+    } else {
+      history.push(`/preferences/roles/${id}`);
+    }
   };
 
-  // const Data = [{ name: 'AH', description: 'Description' }];
   return (
-    <DataTable
+    <RolesTable
       columns={columns}
-      data={[]}
+      data={roles}
-      // loading={}
+      loading={isRolesLoading}
-      // progressBarLoading={}
+      headerLoading={isRolesFetching}
+      progressBarLoading={isRolesFetching}
       TableLoadingRenderer={TableSkeletonRows}
       ContextMenu={ActionsMenu}
       payload={{
         onDeleteRole: handleDeleteRole,
+        onEditRole: handleEditRole,
       }}
     />
   );
 }
 
+const RolesTable = styled(DataTable)`
+  .table .tr {
+    min-height: 42px;
+  }
+`;
+
 export default compose(withAlertsActions)(RolesDataTable);

src/containers/Preferences/Users/Roles/RolesLanding/RolesList.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import intl from 'react-intl-universal';
 
 import { RolesListProvider } from './RolesListProvider';
 import RolesDataTable from './RolesDataTable';

src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-// import {} from 'hooks/query';
+import { useRoles } from 'hooks/query';
 
 const RolesListContext = React.createContext();
 
@@ -9,8 +9,19 @@ const RolesListContext = React.createContext();
  * Roles list provider.
  */
 function RolesListProvider({ ...props }) {
+  // Fetch roles list.
+  const {
+    data: roles,
+    isFetching: isRolesFetching,
+    isLoading: isRolesLoading,
+  } = useRoles();
+
   // Provider state.
-  const provider = {};
+  const provider = {
+    roles,
+    isRolesFetching,
+    isRolesLoading,
+  };
   return (
     <div
       className={classNames(

src/containers/Preferences/Users/Roles/RolesLanding/components.js

@@ -1,19 +1,23 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import { Intent, Button, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import { safeCallback } from 'utils';
-import { Icon, If } from 'components';
+import { Icon } from 'components';
 
 /**
  * Context menu of roles.
  */
-export function ActionsMenu({ payload: { onDeleteRole }, row: { original } }) {
+export function ActionsMenu({
+  payload: { onDeleteRole, onEditRole },
+  row: { original },
+}) {
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="pen-18" />}
         text={intl.get('roles.edit_roles')}
+        onClick={safeCallback(onEditRole, original)}
       />
       <MenuDivider />
       <MenuItem
@@ -38,16 +42,16 @@ export function useRolesTableColumns() {
         Header: intl.get('roles.column.name'),
         accessor: 'name',
         className: 'name',
-        width: '100',
+        width: '80',
-        disableSortBy: true,
+        textOverview: true,
       },
       {
         id: 'description',
         Header: intl.get('roles.column.description'),
         accessor: 'description',
         className: 'description',
-        width: '120',
+        width: '180',
-        disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],

src/containers/Preferences/Users/Roles/utils.js

@@ -0,0 +1,13 @@
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+// handle delete errors.
+export const handleDeleteErrors = (errors) => {
+  if (errors.find((error) => error.type === 'ROLE_PREFINED')) {
+    AppToaster.show({
+      message: intl.get('roles.error.role_is_predefined'),
+      intent: Intent.DANGER,
+    });
+  }
+};

src/containers/Preferences/Users/components.js

@@ -28,8 +28,6 @@ export function ActionsMenu({
   row: { original },
   payload: { onEdit, onInactivate, onActivate, onDelete, onResendInvitation },
 }) {
-  
-
   return (
     <Menu>
       <If condition={original.invite_accepted_at}>
@@ -78,7 +76,7 @@ export function ActionsMenu({
  */
 function StatusAccessor(user) {
   return !user.is_invite_accepted ? (
-    <Tag minimal={true} >
+    <Tag minimal={true}>
       <T id={'inviting'} />
     </Tag>
   ) : user.active ? (
@@ -111,8 +109,6 @@ function FullNameAccessor(user) {
 }
 
 export const useUsersListColumns = () => {
-  
-
   return React.useMemo(
     () => [
       {
@@ -134,14 +130,20 @@ export const useUsersListColumns = () => {
         width: 150,
       },
       {
-        id: 'phone_number',
+        id: 'role_name',
-        Header: intl.get('phone_number'),
+        Header: intl.get('users.column.role_name'),
-        accessor: 'phone_number',
+        accessor: 'role.name',
         width: 120,
       },
+      // {
+      //   id: 'phone_number',
+      //   Header: intl.get('phone_number'),
+      //   accessor: 'phone_number',
+      //   width: 120,
+      // },
       {
         id: 'status',
-        Header: 'Status',
+        Header: intl.get('status'),
         accessor: StatusAccessor,
         width: 80,
         className: 'status',

src/containers/Purchases/Bills/BillUniversalSearch.js

@@ -7,6 +7,7 @@ import { T, Icon, Choose, If } from 'components';
 
 import { RESOURCES_TYPES } from 'common/resourcesTypes';
 import withDrawerActions from '../../Drawer/withDrawerActions';
+import { AbilitySubject, BillAction } from '../../../common/abilityOption';
 
 /**
  * Universal search bill item select action.
@@ -116,4 +117,8 @@ export const universalSearchBillBind = () => ({
   selectItemAction: BillUniversalSearchSelect,
   itemRenderer: BillUniversalSearchItem,
   itemSelect: billsToSearch,
+  permission: {
+    ability: BillAction.View,
+    subject: AbilitySubject.Bill,
+  },
 });

src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js

@@ -14,12 +14,14 @@ import { useHistory } from 'react-router-dom';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   DashboardFilterButton,
   AdvancedFilterPopover,
   DashboardRowsHeightButton,
 } from 'components';
+import { BillAction, AbilitySubject } from '../../../../common/abilityOption';
 
 import withBillsActions from './withBillsActions';
 import withBills from './withBills';
@@ -86,12 +88,14 @@ function BillActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
+        <Can I={BillAction.Create} a={AbilitySubject.Bill}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon={'plus'} />}
+            className={Classes.MINIMAL}
-          text={<T id={'new_bill'} />}
+            icon={<Icon icon={'plus'} />}
-          onClick={handleClickNewBill}
+            text={<T id={'new_bill'} />}
-        />
+            onClick={handleClickNewBill}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: billsConditionsRoles,

src/containers/Purchases/Bills/BillsLanding/BillsEmptyStatus.js

@@ -2,7 +2,8 @@ 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 { BillAction, AbilitySubject } from '../../../../common/abilityOption';
 
 export default function BillsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +18,21 @@ export default function BillsEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={BillAction.Create} a={AbilitySubject.Bill}>
-            intent={Intent.PRIMARY}
+            <Button
-            large={true}
+              intent={Intent.PRIMARY}
-            onClick={() => {
+              large={true}
-              history.push('/bills/new');
+              onClick={() => {
-            }}
+                history.push('/bills/new');
-          >
+              }}
-            <T id={'new_bill'} />
+            >
-          </Button>
+              <T id={'new_bill'} />
+            </Button>
 
-          <Button intent={Intent.NONE} large={true}>
+            <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
+              <T id={'learn_more'} />
-          </Button>
+            </Button>
+          </Can>
         </>
       }
     />

src/containers/Purchases/Bills/BillsLanding/components.js

@@ -16,8 +16,14 @@ import {
   If,
   Choose,
   Money,
+  Can,
 } from 'components';
 import { formattedAmount, safeCallback, isBlank, calculateStatus } from 'utils';
+import {
+  BillAction,
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 /**
  * Actions menu.
@@ -40,38 +46,44 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
+      <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
-      <MenuItem
+        <MenuDivider />
-        icon={<Icon icon="pen-18" />}
+        <MenuItem
-        text={intl.get('edit_bill')}
+          icon={<Icon icon="pen-18" />}
-        onClick={safeCallback(onEdit, original)}
+          text={intl.get('edit_bill')}
-      />
+          onClick={safeCallback(onEdit, original)}
+        />
 
-      <If condition={!original.is_open}>
+        <If condition={!original.is_open}>
-        <MenuItem
+          <MenuItem
-          icon={<Icon icon={'check'} iconSize={18} />}
+            icon={<Icon icon={'check'} iconSize={18} />}
-          text={intl.get('mark_as_opened')}
+            text={intl.get('mark_as_opened')}
-          onClick={safeCallback(onOpen, original)}
+            onClick={safeCallback(onOpen, original)}
-        />
+          />
-      </If>
+        </If>
-      <If condition={original.is_open && !original.is_fully_paid}>
+      </Can>
-        <MenuItem
+      <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
-          icon={<Icon icon="quick-payment-16" iconSize={16} />}
+        <If condition={original.is_open && !original.is_fully_paid}>
-          text={intl.get('add_payment')}
+          <MenuItem
-          onClick={safeCallback(onQuick, original)}
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
-        />
+            text={intl.get('add_payment')}
-      </If>
+            onClick={safeCallback(onQuick, original)}
+          />
+        </If>
+      </Can>
       <MenuItem
         icon={<Icon icon="receipt-24" iconSize={16} />}
         text={intl.get('allocate_landed_coast')}
         onClick={safeCallback(onAllocateLandedCost, original)}
       />
-      <MenuItem
+      <Can I={BillAction.Delete} a={AbilitySubject.Bill}>
-        text={intl.get('delete_bill')}
+        <MenuItem
-        intent={Intent.DANGER}
+          text={intl.get('delete_bill')}
-        onClick={safeCallback(onDelete, original)}
+          intent={Intent.DANGER}
-        icon={<Icon icon="trash-16" iconSize={16} />}
+          onClick={safeCallback(onDelete, original)}
-      />
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { isEmpty } from 'lodash';
 
-import { Icon, If } from 'components';
+import { Icon } from 'components';
 
 import { RESOURCES_TYPES } from 'common/resourcesTypes';
 import withDrawerActions from '../../Drawer/withDrawerActions';
 
 import { highlightText } from 'utils';
+import { AbilitySubject, PaymentMadeAction } from '../../../common/abilityOption';
 
 /**
  * Universal search bill item select action.
@@ -82,4 +82,8 @@ export const universalSearchPaymentMadeBind = () => ({
   selectItemAction: PaymentMadeUniversalSearchSelect,
   itemRenderer: PaymentMadeUniversalSearchItem,
   itemSelect: paymentMadeToSearch,
+  permission: {
+    ability: PaymentMadeAction.View,
+    subject: AbilitySubject.PaymentMade,
+  },
 });

src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js

@@ -14,6 +14,7 @@ import { useHistory } from 'react-router-dom';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   DashboardFilterButton,
@@ -29,6 +30,10 @@ import withSettings from 'containers/Settings/withSettings';
 
 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
 import { useRefreshPaymentMades } from 'hooks/query/paymentMades';
+import {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -85,12 +90,14 @@ function PaymentMadeActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
+        <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon={'plus'} />}
+            className={Classes.MINIMAL}
-          text={<T id={'new_payment_made'} />}
+            icon={<Icon icon={'plus'} />}
-          onClick={handleClickNewPaymentMade}
+            text={<T id={'new_payment_made'} />}
-        />
+            onClick={handleClickNewPaymentMade}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: paymentMadesFilterConditions,

src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.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 {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function PaymentMadesEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,21 @@ export default function PaymentMadesEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
-            intent={Intent.PRIMARY}
+            <Button
-            large={true}
+              intent={Intent.PRIMARY}
-            onClick={() => {
+              large={true}
-              history.push('/payment-mades/new');
+              onClick={() => {
-            }}
+                history.push('/payment-mades/new');
-          >
+              }}
-            <T id={'new_bill_payment'} />
+            >
-          </Button>
+              <T id={'new_bill_payment'} />
+            </Button>
 
-          <Button intent={Intent.NONE} large={true}>
+            <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'} />
+              <T id={'learn_more'} />
-          </Button>
+            </Button>
+          </Can>
         </>
       }
     />

src/containers/Purchases/PaymentMades/PaymentsLanding/components.js

@@ -10,7 +10,12 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { Icon, Money, FormatDateCell } from 'components';
+import { Icon, Money, FormatDateCell, Can } from 'components';
+import {
+  PaymentMadeAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
 import { safeCallback } from 'utils';
 
 export function AmountAccessor(row) {
@@ -31,18 +36,23 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
+
-      <MenuItem
+      <Can I={PaymentMadeAction.Edit} a={AbilitySubject.PaymentMade}>
-        icon={<Icon icon="pen-18" />}
+        <MenuDivider />
-        text={intl.get('edit_payment_made')}
+        <MenuItem
-        onClick={safeCallback(onEdit, original)}
+          icon={<Icon icon="pen-18" />}
-      />
+          text={intl.get('edit_payment_made')}
-      <MenuItem
+          onClick={safeCallback(onEdit, original)}
-        text={intl.get('delete_payment_made')}
+        />
-        intent={Intent.DANGER}
+      </Can>
-        onClick={safeCallback(onDelete, original)}
+      <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
-        icon={<Icon icon="trash-16" iconSize={16} />}
+        <MenuItem
-      />
+          text={intl.get('delete_payment_made')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/QuickNewDropdown/QuickNewDropdown.js

@@ -4,16 +4,21 @@ import { FormattedMessage as T } from 'components';
 import { useHistory } from 'react-router-dom';
 import { Icon } from 'components';
 import { Position } from '@blueprintjs/core';
-import { getQuickNewActions } from 'common/quickNewOptions';
 import { Select } from '@blueprintjs/select';
 
+import { useGetQuickNewMenu } from 'common/quickNewOptions';
+
 /**
  * Quick New Dropdown.
  */
 export default function QuickNewDropdown() {
   const history = useHistory();
-  const quickNewOptions = getQuickNewActions();
+  const quickNewOptions = useGetQuickNewMenu();
 
+  // Can't continue if there is no any quick new menu items to display.
+  if (quickNewOptions.length === 0) {
+    return null;
+  }
   // Handle click quick new button.
   const handleClickQuickNew = ({ path }) => {
     history.push(`/${path}`);

src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.js

@@ -5,6 +5,8 @@ import intl from 'react-intl-universal';
 import { Choose, T, Icon } from 'components';
 
 import { RESOURCES_TYPES } from "common/resourcesTypes";
+import { AbilitySubject, SaleEstimateAction } from '../../../../common/abilityOption';
+
 import withDrawerActions from "../../../Drawer/withDrawerActions";
 
 /**
@@ -110,5 +112,9 @@ export const universalSearchEstimateBind = () => ({
   optionItemLabel: intl.get('estimates'),
   selectItemAction: EstimateUniversalSearchSelect,
   itemRenderer: EstimateUniversalSearchItem,
-  itemSelect: transformEstimatesToSearch
+  itemSelect: transformEstimatesToSearch,
+  permission: {
+    ability: SaleEstimateAction.View,
+    subject: AbilitySubject.Estimate,
+  },
 });

src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js

@@ -11,6 +11,7 @@ import {
 import { useHistory } from 'react-router-dom';
 
 import {
+  Can,
   FormattedMessage as T,
   AdvancedFilterPopover,
   If,
@@ -28,6 +29,10 @@ import withSettings from 'containers/Settings/withSettings';
 
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { useRefreshEstimates } from 'hooks/query/estimates';
+import {
+  SaleEstimateAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -87,12 +92,14 @@ function EstimateActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
+        <Can I={SaleEstimateAction.Create} a={AbilitySubject.Estimate}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon={'plus'} />}
+            className={Classes.MINIMAL}
-          text={<T id={'new_estimate'} />}
+            icon={<Icon icon={'plus'} />}
-          onClick={onClickNewEstimate}
+            text={<T id={'new_estimate'} />}
-        />
+            onClick={onClickNewEstimate}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: estimatesFilterRoles,

src/containers/Sales/Estimates/EstimatesLanding/EstimatesEmptyStatus.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 {
+  SaleEstimateAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function EstimatesEmptyStatus() {
   const history = useHistory();
@@ -16,18 +20,20 @@ export default function EstimatesEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={SaleEstimateAction.Create} a={AbilitySubject.Estimate}>
-            intent={Intent.PRIMARY}
+            <Button
-            large={true}
+              intent={Intent.PRIMARY}
-            onClick={() => {
+              large={true}
-              history.push('/estimates/new');
+              onClick={() => {
-            }}
+                history.push('/estimates/new');
-          >
+              }}
-            <T id={'new_sale_estimate'} />
+            >
-          </Button>
+              <T id={'new_sale_estimate'} />
-          <Button intent={Intent.NONE} large={true}>
+            </Button>
-            <T id={'learn_more'} />
+            <Button intent={Intent.NONE} large={true}>
-          </Button>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
         </>
       }
     />

src/containers/Sales/Estimates/EstimatesLanding/components.js

@@ -2,6 +2,10 @@ import React from 'react';
 import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import clsx from 'classnames';
+import {
+  SaleEstimateAction,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 import { CLASSES } from '../../../../common/classes';
 import {
@@ -11,6 +15,7 @@ import {
   Choose,
   Icon,
   If,
+  Can,
 } from 'components';
 import { safeCallback } from 'utils';
 
@@ -68,63 +73,74 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
+      <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
-      <MenuItem
+        <MenuDivider />
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_estimate')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <MenuItem
-        icon={<Icon icon="convert_to" />}
-        text={intl.get('convert_to_invoice')}
-        onClick={safeCallback(onConvert, original)}
-      />
-      <If condition={!original.is_delivered}>
         <MenuItem
-          icon={<Icon icon={'check'} iconSize={18} />}
+          icon={<Icon icon="pen-18" />}
-          text={intl.get('mark_as_delivered')}
+          text={intl.get('edit_estimate')}
-          onClick={safeCallback(onDeliver, original)}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
+        <MenuItem
-      <Choose>
+          icon={<Icon icon="convert_to" />}
-        <Choose.When condition={original.is_delivered && original.is_approved}>
+          text={intl.get('convert_to_invoice')}
-          <MenuItem
+          onClick={safeCallback(onConvert, original)}
-            icon={<Icon icon={'close-black'} />}
+        />
-            text={intl.get('mark_as_rejected')}
+
-            onClick={safeCallback(onReject, original)}
+        <If condition={!original.is_delivered}>
-          />
-        </Choose.When>
-        <Choose.When condition={original.is_delivered && original.is_rejected}>
           <MenuItem
             icon={<Icon icon={'check'} iconSize={18} />}
-            text={intl.get('mark_as_approved')}
+            text={intl.get('mark_as_delivered')}
-            onClick={safeCallback(onApprove, original)}
+            onClick={safeCallback(onDeliver, original)}
           />
-        </Choose.When>
+        </If>
-        <Choose.When condition={original.is_delivered}>
+        <Choose>
-          <MenuItem
+          <Choose.When
-            icon={<Icon icon={'check'} iconSize={18} />}
+            condition={original.is_delivered && original.is_approved}
-            text={intl.get('mark_as_approved')}
+          >
-            onClick={safeCallback(onApprove, original)}
+            <MenuItem
-          />
+              icon={<Icon icon={'close-black'} />}
-          <MenuItem
+              text={intl.get('mark_as_rejected')}
-            icon={<Icon icon={'close-black'} />}
+              onClick={safeCallback(onReject, original)}
-            text={intl.get('mark_as_rejected')}
+            />
-            onClick={safeCallback(onReject, original)}
+          </Choose.When>
-          />
+          <Choose.When
-        </Choose.When>
+            condition={original.is_delivered && original.is_rejected}
-      </Choose>
+          >
-      <MenuItem
+            <MenuItem
-        icon={<Icon icon={'print-16'} iconSize={16} />}
+              icon={<Icon icon={'check'} iconSize={18} />}
-        text={intl.get('print')}
+              text={intl.get('mark_as_approved')}
-        onClick={safeCallback(onPrint, original)}
+              onClick={safeCallback(onApprove, original)}
-      />
+            />
-      <MenuItem
+          </Choose.When>
-        text={intl.get('delete_estimate')}
+          <Choose.When condition={original.is_delivered}>
-        intent={Intent.DANGER}
+            <MenuItem
-        onClick={safeCallback(onDelete, original)}
+              icon={<Icon icon={'check'} iconSize={18} />}
-        icon={<Icon icon="trash-16" iconSize={16} />}
+              text={intl.get('mark_as_approved')}
-      />
+              onClick={safeCallback(onApprove, original)}
+            />
+            <MenuItem
+              icon={<Icon icon={'close-black'} />}
+              text={intl.get('mark_as_rejected')}
+              onClick={safeCallback(onReject, original)}
+            />
+          </Choose.When>
+        </Choose>
+      </Can>
+      <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
+        <MenuItem
+          icon={<Icon icon={'print-16'} iconSize={16} />}
+          text={intl.get('print')}
+          onClick={safeCallback(onPrint, original)}
+        />
+      </Can>
+      <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
+        <MenuItem
+          text={intl.get('delete_estimate')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Sales/Invoices/InvoiceUniversalSearch.js

@@ -3,10 +3,13 @@ import intl from 'react-intl-universal';
 import { MenuItem } from '@blueprintjs/core';
 
 import { T, Choose, Icon } from 'components';
-
 import { highlightText } from 'utils';
 
 import { RESOURCES_TYPES } from 'common/resourcesTypes';
+import {
+  AbilitySubject,
+  SaleInvoiceAction,
+} from '../../../common/abilityOption';
 import withDrawerActions from '../../Drawer/withDrawerActions';
 
 /**
@@ -118,4 +121,8 @@ export const universalSearchInvoiceBind = () => ({
   selectItemAction: InvoiceUniversalSearchSelect,
   itemRenderer: InvoiceUniversalSearchItem,
   itemSelect: transformInvoicesToSearch,
+  permission: {
+    ability: SaleInvoiceAction.View,
+    subject: AbilitySubject.Invoice,
+  },
 });