Merge branch 'feature/draft' into featrue/roles-permission

src/common/abilityOption.js

@@ -0,0 +1,135 @@
+export const AbilitySubject = {
+  Item: 'Item',
+  Inventory_Adjustment: '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',
+};
+
+export const Item_Abilities = {
+  View: 'view',
+  Create: 'create',
+  Edit: 'edit',
+  Delete: 'delete',
+};
+
+export const Inventory_Adjustment_Abilities = {
+  Create: 'create',
+  View: 'view',
+  Delete: 'delete',
+};
+
+export const Estimate_Abilities = {
+  View: 'view',
+  Create: 'create',
+  Edit: 'edit',
+  Delete: 'delete',
+};
+
+export const Invoice_Abilities = {
+  View: 'view',
+  Create: 'create',
+  Edit: 'edit',
+  Delete: 'delete',
+  BadDebt: 'bad-debt',
+};
+
+export const Receipt_Abilities = {
+  View: 'view',
+  Create: 'create',
+  Edit: 'edit',
+  Delete: 'delete',
+};
+
+export const Payment_Receive_Abilities = {
+  View: 'view',
+  Create: 'create',
+  Edit: 'edit',
+  Delete: 'delete',
+};
+
+export const Bill_Abilities = {
+  View: 'view',
+  Create: 'create',
+  Edit: 'edit',
+  Delete: 'delete',
+};
+
+export const Payment_Made_Abilities = {
+  View: 'view',
+  Create: 'create',
+  Edit: 'edit',
+  Delete: 'delete',
+};
+
+export const Customer_Abilities = {
+  View: 'view',
+  Create: 'create',
+  Edit: 'edit',
+  Delete: 'delete',
+};
+
+export const Vendor_Abilities = {
+  View: 'view',
+  Create: 'create',
+  Edit: 'edit',
+  Delete: 'delete',
+};
+
+export const Account_Abilities = {
+  View: 'view',
+  Create: 'create',
+  Edit: 'edit',
+  Delete: 'delete',
+  Transactions_Locking: 'TransactionsLocking',
+};
+
+export const Manual_Journal_Abilities = {
+  View: 'view',
+  Create: 'create',
+  Edit: 'edit',
+  Delete: 'delete',
+};
+
+export const Expense_Abilities = {
+  View: 'view',
+  Create: 'create',
+  Edit: 'edit',
+  Delete: 'delete',
+};
+
+export const Cashflow_Abilities = {
+  View: 'view',
+  Create: 'create',
+  Delete: 'delete',
+};
+
+export const Report_Abilities = {
+  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',
+};

src/common/homepageOptions.js

@@ -1,5 +1,20 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
+import {
+  Invoice_Abilities,
+  Estimate_Abilities,
+  AbilitySubject,
+  Receipt_Abilities,
+  Customer_Abilities,
+  Payment_Receive_Abilities,
+  Bill_Abilities,
+  Vendor_Abilities,
+  Payment_Made_Abilities,
+  Account_Abilities,
+  Manual_Journal_Abilities,
+  Expense_Abilities,
+  Item_Abilities,
+} from '../common/abilityOption';
 
 export const accountsReceivable = [
   {
@@ -9,21 +24,29 @@ export const accountsReceivable = [
         title: <T id={'sales_invoices'} />,
         description: <T id={'tracking_sales_invoices_with_your_customers'} />,
         link: '/invoices',
+        subject: AbilitySubject.Invoice,
+        ability: Invoice_Abilities.View,
       },
       {
         title: <T id={'sales_estimates'} />,
         description: <T id={'manage_your_sales_estimates_to_create_quotes'} />,
         link: '/estimates',
+        subject: AbilitySubject.Estimate,
+        ability: Estimate_Abilities.View,
       },
       {
         title: <T id={'sales_receipts'} />,
         description: <T id={'manage_sales_receipts_for_sales_that_get_paid'} />,
         link: '/receipts',
+        subject: AbilitySubject.Receipt,
+        ability: Receipt_Abilities.View,
       },
       {
         title: <T id={'customers'} />,
         description: <T id={'manage_the_customers_relations_with_customer'} />,
         link: '/customers',
+        subject: AbilitySubject.Customer,
+        ability: Customer_Abilities.View,
       },
       {
         title: <T id={'customers_payments'} />,
@@ -31,6 +54,8 @@ export const accountsReceivable = [
           <T id={'manage_payment_transactions_from_your_customers'} />
         ),
         link: '/payment-receives',
+        subject: AbilitySubject.PaymentReceive,
+        ability: Payment_Receive_Abilities.View,
       },
     ],
   },
@@ -46,6 +71,8 @@ export const accountsPayable = [
           <T id={'manage_the_purchase_invoices_with_your_vendors'} />
         ),
         link: '/bills',
+        subject: AbilitySubject.Bill,
+        ability: Bill_Abilities.View,
       },
       {
         title: <T id={'vendors'} />,
@@ -53,11 +80,15 @@ export const accountsPayable = [
           <T id={'manage_the_vendors_relations_with_vendor_relations'} />
         ),
         link: '/vendors',
+        subject: AbilitySubject.Vendor,
+        ability: Vendor_Abilities.View,
       },
       {
         title: <T id={'vendors_payments'} />,
         description: <T id={'manage_payments_transactions_to_your_vendors'} />,
         link: '/payment-mades',
+        subject: AbilitySubject.PaymentMade,
+        ability: Payment_Made_Abilities.View,
       },
     ],
   },
@@ -77,20 +108,32 @@ export const financialAccounting = [
           />
         ),
         link: '/accounts',
+        subject: AbilitySubject.Account,
+        ability: Account_Abilities.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: Manual_Journal_Abilities.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: Expense_Abilities.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',
       },
     ],
@@ -102,19 +145,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: Item_Abilities.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.Inventory_Adjustment,
+        ability: Invoice_Abilities.View,
       },
     ],
   },

src/components/Can.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Ability } from '@casl/ability';
+import { createContextualCan } from '@casl/react';
+
+import {
+  Item_Abilities,
+  AbilitySubject,
+  Inventory_Adjustment_Abilities,
+  Estimate_Abilities,
+  Invoice_Abilities,
+  Receipt_Abilities,
+  PaymentReceive,
+  Bill_Abilities,
+  Payment_Made_Abilities,
+  Customer_Abilities,
+  Vendor_Abilities,
+  Account_Abilities,
+} from '../common/abilityOption';
+
+export const AbilityContext = React.createContext();
+export const Can = createContextualCan(AbilityContext.Consumer);
+
+const AbilityContextProvider = (props) => {
+  const ability = new Ability([
+    {
+      subject: [AbilitySubject.Account],
+      action: [Account_Abilities.Create],
+    },
+    {
+      subject: [AbilitySubject.Invoice],
+      action: [],
+    },
+  ]);
+
+  return (
+    <AbilityContext.Provider value={ability}>
+      {props.children}
+    </AbilityContext.Provider>
+  );
+};
+
+export default AbilityContextProvider;

src/components/Dashboard/DashboardProvider.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import AbilityContextProvider from '../../components/Can';
 
 /**
  * Dashboard provider.
  */
 export default function DashboardProvider({ children }) {
-  return children;
+  return <AbilityContextProvider>{children}</AbilityContextProvider>;
 }

src/components/index.js

@@ -59,6 +59,7 @@ import AvaterCell from './AvaterCell';
 
 import { ItemsMultiSelect } from './Items';
 import MoreMenuItems from './MoreMenutItems';
+import { Can } from './Can';
 
 export * from './Dialog';
 export * from './Menu';
@@ -156,4 +157,5 @@ export {
   Card,
   AvaterCell,
   MoreMenuItems,
+  Can,
 };

src/config/financialReportsMenu.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
+import { Report_Abilities, 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: Report_Abilities.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: Report_Abilities.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: Report_Abilities.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: Report_Abilities.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: Report_Abilities.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: Report_Abilities.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: Report_Abilities.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: Report_Abilities.READ_AP_AGING_SUMMARY,
       },
     ],
   },
@@ -71,6 +88,8 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/purchases-by-items',
+        subject: AbilitySubject.Report,
+        ability: Report_Abilities.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: Report_Abilities.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: Report_Abilities.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: Report_Abilities.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: Report_Abilities.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: Report_Abilities.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: Report_Abilities.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: Report_Abilities.READ_INVENTORY_ITEM_DETAILS,
       },
     ],
   },

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 {
+  Manual_Journal_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -86,13 +89,17 @@ function ManualJournalActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
+        <Can
-        <Button
+          I={Manual_Journal_Abilities.Create}
-          className={Classes.MINIMAL}
+          a={AbilitySubject.ManualJournal}
-          icon={<Icon icon="plus" />}
+        >
-          text={<T id={'journal_entry'} />}
+          <Button
-          onClick={onClickNewManualJournal}
+            className={Classes.MINIMAL}
-        />
+            icon={<Icon icon="plus" />}
+            text={<T id={'journal_entry'} />}
+            onClick={onClickNewManualJournal}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: manualJournalsFilterConditions,

src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js

@@ -2,7 +2,11 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
+import {
+  AbilitySubject,
+  Manual_Journal_Abilities,
+} from '../../../common/abilityOption';
 
 export default function ManualJournalsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,24 @@ export default function ManualJournalsEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can
-            intent={Intent.PRIMARY}
+            I={Manual_Journal_Abilities.Create}
-            large={true}
+            a={AbilitySubject.ManualJournal}
-            onClick={() => {
-              history.push('/make-journal-entry');
-            }}
           >
-            <T id={'make_journal'} />
+            <Button
-          </Button>
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/make-journal-entry');
+              }}
+            >
+              <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 {
+  Manual_Journal_Abilities,
+  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={Manual_Journal_Abilities.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={Manual_Journal_Abilities.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={Manual_Journal_Abilities.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/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 { Account_Abilities, AbilitySubject } from '../../common/abilityOption';
+
 import { compose } from 'utils';
 
 /**
@@ -116,13 +119,14 @@ function AccountsActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
+        <Can I={Account_Abilities.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={Account_Abilities.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, Account_Abilities } 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={Account_Abilities.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={Account_Abilities.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={Account_Abilities.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/CashFlow/AccountTransactions/components.js

@@ -4,9 +4,13 @@ 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,
+  Cashflow_Abilities,
+} from '../../../common/abilityOption';
 import { safeCallback } from 'utils';
 
 export function ActionsMenu({
@@ -20,15 +24,17 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <If condition={TRANSACRIONS_TYPE.includes(original.reference_type)}>
+      <Can I={Cashflow_Abilities.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 +89,7 @@ export function useAccountTransactionsColumns() {
         className: 'deposit',
         textOverview: true,
         align: 'right',
-        clickable: true
+        clickable: true,
       },
       {
         id: 'withdrawal',
@@ -93,7 +99,7 @@ export function useAccountTransactionsColumns() {
         width: 150,
         textOverview: true,
         align: 'right',
-        clickable: true
+        clickable: true,
       },
       {
         id: 'running_balance',
@@ -103,7 +109,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,12 @@ 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 {
+  Cashflow_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
@@ -56,19 +60,22 @@ function CashFlowAccountsActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={Cashflow_Abilities.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 +92,15 @@ function CashFlowAccountsActionsBar({
           text={<T id={'import'} />}
         />
         <NavbarDivider />
-
+        <Can I={Cashflow_Abilities.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 {
+  Account_Abilities,
+  Cashflow_Abilities,
+  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={Cashflow_Abilities.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={Cashflow_Abilities.Edit} a={AbilitySubject.Cashflow}>
+        <MenuDivider />
+
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_account')}
+          onClick={safeCallback(onEditClick)}
         />
-      </If>
+      </Can>
-      <MenuItem
+      <Can I={Account_Abilities.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={Cashflow_Abilities.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,10 @@ import withCustomersActions from './withCustomersActions';
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
+import {
+  Customer_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -103,15 +108,15 @@ function CustomerActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
+        <Can I={Customer_Abilities.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 +157,13 @@ function CustomerActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Switch
+        <Can I={Customer_Abilities.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,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,
+  Customer_Abilities,
+} from '../../../common/abilityOption';
 
 export default function CustomersEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,21 @@ export default function CustomersEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={Customer_Abilities.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,11 @@ 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 {
+  Customer_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { safeCallback } from 'utils';
 
@@ -29,37 +33,46 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
+      <Can I={Customer_Abilities.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={Customer_Abilities.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={Customer_Abilities.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={Customer_Abilities.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/Drawers/AccountDrawer/AccountDrawerActionBar.js

@@ -7,13 +7,17 @@ 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 {
+  Account_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
@@ -53,26 +57,31 @@ function AccountDrawerActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={Account_Abilities.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={Account_Abilities.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 {
+  Bill_Abilities,
+  Payment_Made_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { safeCallback, compose } from 'utils';
 
@@ -53,29 +58,38 @@ function BillDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={Bill_Abilities.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
-          className={Classes.MINIMAL}
+          I={Payment_Made_Abilities.Create}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          a={AbilitySubject.PaymentMade}
-          text={<T id={'delete'} />}
+        >
-          intent={Intent.DANGER}
+          <If condition={bill.is_open && !bill.is_fully_paid}>
-          onClick={safeCallback(onDeleteBill)}
+            <Button
-        />
+              className={Classes.MINIMAL}
+              icon={<Icon icon="quick-payment-16" iconSize={16} />}
+              text={<T id={'add_payment'} />}
+              onClick={handleQuickBillPayment}
+            />
+          </If>
+          <NavbarDivider />
+        </Can>
+        <Can I={Bill_Abilities.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,15 @@
 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,
+  Cashflow_Abilities,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -24,17 +27,19 @@ function CashflowTransactionDrawerActionBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <Can I={Cashflow_Abilities.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,
+  Invoice_Abilities,
+  Estimate_Abilities,
+  Receipt_Abilities,
+  Payment_Receive_Abilities,
+  Customer_Abilities,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -74,22 +81,34 @@ function CustomerDetailsActionsBar({
         <Popover
           content={
             <Menu>
-              <MenuItem
+              <Can I={Invoice_Abilities.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={Estimate_Abilities.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={Receipt_Abilities.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={Payment_Receive_Abilities.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={Customer_Abilities.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={Customer_Abilities.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 {
+  Estimate_Abilities,
+  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={Estimate_Abilities.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={Estimate_Abilities.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={Estimate_Abilities.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,11 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Can, FormattedMessage as T } from 'components';
-
+import {
+  Expense_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -44,20 +47,24 @@ function ExpenseDrawerActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={Expense_Abilities.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={Expense_Abilities.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 {
+  Inventory_Adjustment_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -26,17 +30,22 @@ function InventoryAdjustmentDetailActionsBar({
   };
 
   return (
-    <DashboardActionsBar>
+    <Can
-      <NavbarGroup>
+      I={Inventory_Adjustment_Abilities.Delete}
-        <Button
+      a={AbilitySubject.Inventory_Adjustment}
-          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 {
+  Invoice_Abilities,
+  Payment_Receive_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -78,43 +83,54 @@ function InvoiceDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={Invoice_Abilities.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={Payment_Receive_Abilities.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={Invoice_Abilities.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={Invoice_Abilities.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={Invoice_Abilities.BadDebt} 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 { Item_Abilities, 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={Item_Abilities.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={Item_Abilities.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 {
+  Manual_Journal_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
+
+import { compose } from 'utils';
 
 /**
  * Manual journal action bar.
@@ -44,20 +49,27 @@ function ManualJournalDrawerActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={Manual_Journal_Abilities.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
-          text={<T id={'delete'} />}
+          I={Manual_Journal_Abilities.Delete}
-          intent={Intent.DANGER}
+          a={AbilitySubject.ManualJournal}
-          onClick={handleDeleteManualJournal}
+        >
-        />
+          <Button
+            className={Classes.MINIMAL}
+            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 {
+  Payment_Made_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -48,20 +51,24 @@ function PaymentMadeDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={Payment_Made_Abilities.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={Payment_Made_Abilities.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,8 @@ 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 { Payment_Receive_Abilities, AbilitySubject } from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -57,21 +58,25 @@ function PaymentReceiveActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={Payment_Receive_Abilities.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={Payment_Receive_Abilities.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 {
+  Receipt_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 import { safeCallback, compose } from 'utils';
 
@@ -54,27 +58,33 @@ function ReceiptDetailActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Button
+        <Can I={Receipt_Abilities.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={Receipt_Abilities.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={Receipt_Abilities.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,
+  Invoice_Abilities,
+  Payment_Made_Abilities,
+  Vendor_Abilities,
+} from '../../../common/abilityOption';
 import { safeCallback, compose } from 'utils';
 
 /**
@@ -64,14 +69,21 @@ function VendorDetailsActionsBar({
         <Popover
           content={
             <Menu>
-              <MenuItem
+              <Can I={Invoice_Abilities.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={Payment_Made_Abilities.Create}
+                a={AbilitySubject.PaymentMade}
+              >
+                <MenuItem
+                  text={<T id={'vendor.drawer.action.new_payment'} />}
+                  onClick={handleNewPaymentClick}
+                />
+              </Can>
             </Menu>
           }
           minimal={true}
@@ -84,23 +96,25 @@ function VendorDetailsActionsBar({
             icon={<Icon icon={'plus'} />}
           />
         </Popover>
-
         <NavbarDivider />
-
+        <Can I={Vendor_Abilities.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={Vendor_Abilities.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,10 @@ import {
   FormattedMessage as T,
 } from 'components';
 
+import {
+  Expense_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { useRefreshExpenses } from 'hooks/query/expenses';
 import { useExpensesListContext } from './ExpensesListProvider';
 
@@ -92,13 +97,14 @@ function ExpensesActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-
+        <Can I={Expense_Abilities.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,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,
+  Expense_Abilities,
+} from '../../../common/abilityOption';
 
 export default function InvoicesEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,21 @@ export default function InvoicesEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={Expense_Abilities.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,17 @@ import {
   MenuDivider,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-
+import {
+  Expense_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import {
   FormatDateCell,
   FormattedMessage as T,
   Money,
   Icon,
   If,
+  Can,
 } from 'components';
 import { safeCallback } from 'utils';
 
@@ -54,25 +58,31 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
+      <Can I={Expense_Abilities.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={Expense_Abilities.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={Expense_Abilities.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/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 {
+  Inventory_Adjustment_Abilities,
+  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={Inventory_Adjustment_Abilities.Create}
+        a={AbilitySubject.Inventory_Adjustment}
+      >
+        <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={Inventory_Adjustment_Abilities.Delete}
+        a={AbilitySubject.Inventory_Adjustment}
+      >
         <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,6 +31,8 @@ import withSettings from '../Settings/withSettings';
 import { compose } from 'utils';
 import withSettingsActions from '../Settings/withSettingsActions';
 
+import { Item_Abilities, AbilitySubject } from '../../common/abilityOption';
+
 /**
  * Items actions bar.
  */
@@ -101,13 +104,14 @@ function ItemsActionsBar({
         />
         <NavbarDivider />
 
-        <Button
+        <Can I={Item_Abilities.Create} a={AbilitySubject.Item}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon="plus" />}
+            className={Classes.MINIMAL}
-          text={<T id={'new_item'} />}
+            icon={<Icon icon="plus" />}
-          onClick={onClickNewItem}
+            text={<T id={'new_item'} />}
-        />
+            onClick={onClickNewItem}
-
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: itemsFilterRoles,
@@ -149,11 +153,13 @@ function ItemsActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Switch
+        <Can I={Item_Abilities.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 { Item_Abilities, AbilitySubject } from '../../common/abilityOption';
 
 export default function ItemsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +18,21 @@ export default function ItemsEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={Item_Abilities.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/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,
+  Item_Abilities,
+  Inventory_Adjustment_Abilities,
+} from '../../common/abilityOption';
 
 /**
  * Publish accessor
@@ -90,44 +95,58 @@ export function ItemsActionMenuList({
         text={<T id={'view_details'} />}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
+      <Can I={Item_Abilities.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={Item_Abilities.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={Item_Abilities.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={Inventory_Adjustment_Abilities.Edit}
+        a={AbilitySubject.Inventory_Adjustment}
+      >
+        <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={Item_Abilities.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/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 { Bill_Abilities, AbilitySubject } from '../../../../common/abilityOption';
 
 import withBillsActions from './withBillsActions';
 import withBills from './withBills';
@@ -86,12 +88,14 @@ function BillActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
+        <Can I={Bill_Abilities.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,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 {
+  Bill_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function BillsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,21 @@ export default function BillsEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={Bill_Abilities.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 {
+  Bill_Abilities,
+  Payment_Made_Abilities,
+  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={Bill_Abilities.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={Payment_Made_Abilities.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={Bill_Abilities.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/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 {
+  Payment_Made_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -85,12 +90,14 @@ function PaymentMadeActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
+        <Can I={Payment_Made_Abilities.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 {
+  Payment_Made_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function PaymentMadesEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,21 @@ export default function PaymentMadesEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={Payment_Made_Abilities.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 {
+  Payment_Made_Abilities,
+  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={Payment_Made_Abilities.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={Payment_Made_Abilities.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/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 {
+  Estimate_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -87,12 +92,14 @@ function EstimateActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
+        <Can I={Estimate_Abilities.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 {
+  Estimate_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function EstimatesEmptyStatus() {
   const history = useHistory();
@@ -16,18 +20,20 @@ export default function EstimatesEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={Estimate_Abilities.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 {
+  Estimate_Abilities,
+  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={Estimate_Abilities.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={Estimate_Abilities.View} a={AbilitySubject.Estimate}>
+        <MenuItem
+          icon={<Icon icon={'print-16'} iconSize={16} />}
+          text={intl.get('print')}
+          onClick={safeCallback(onPrint, original)}
+        />
+      </Can>
+      <Can I={Estimate_Abilities.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/InvoicesLanding/InvoicesActionsBar.js

@@ -18,7 +18,11 @@ import {
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
-import { If, DashboardActionViewsList } from 'components';
+import { Can, If, DashboardActionViewsList } from 'components';
+import {
+  Invoice_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 import { useRefreshInvoices } from 'hooks/query/invoices';
 import { useInvoicesListContext } from './InvoicesListProvider';
@@ -84,12 +88,14 @@ function InvoiceActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
+        <Can I={Invoice_Abilities.Create} a={AbilitySubject.Invoice}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon={'plus'} />}
+            className={Classes.MINIMAL}
-          text={<T id={'new_invoice'} />}
+            icon={<Icon icon={'plus'} />}
-          onClick={handleClickNewInvoice}
+            text={<T id={'new_invoice'} />}
-        />
+            onClick={handleClickNewInvoice}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: invoicesFilterRoles,

src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.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 {
+  Invoice_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function EstimatesEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,20 @@ export default function EstimatesEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={Invoice_Abilities.Create} a={AbilitySubject.Invoice}>
-            intent={Intent.PRIMARY}
+            <Button
-            large={true}
+              intent={Intent.PRIMARY}
-            onClick={() => {
+              large={true}
-              history.push('/invoices/new');
+              onClick={() => {
-            }}
+                history.push('/invoices/new');
-          >
+              }}
-            <T id={'new_sale_invoice'} />
+            >
-          </Button>
+              <T id={'new_sale_invoice'} />
-
+            </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/Sales/Invoices/InvoicesLanding/components.js

@@ -18,8 +18,14 @@ import {
   Choose,
   If,
   Icon,
+  Can,
 } from 'components';
 import { formattedAmount, safeCallback, calculateStatus } from 'utils';
+import {
+  Invoice_Abilities,
+  Payment_Receive_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export const statusAccessor = (row) => {
   return (
@@ -55,7 +61,6 @@ export const statusAccessor = (row) => {
               })}
             </span>
             <ProgressBar
-          
               animate={false}
               stripes={false}
               intent={Intent.PRIMARY}
@@ -115,37 +120,46 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
+      <Can I={Invoice_Abilities.Edit} a={AbilitySubject.Invoice}>
-      <MenuItem
+        <MenuDivider />
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_invoice')}
-        onClick={safeCallback(onEdit, original)}
-      />
-      <If condition={!original.is_delivered}>
         <MenuItem
-          icon={<Icon icon="send" iconSize={16} />}
+          icon={<Icon icon="pen-18" />}
-          text={intl.get('mark_as_delivered')}
+          text={intl.get('edit_invoice')}
-          onClick={safeCallback(onDeliver, original)}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
+
-      <If condition={original.is_delivered && !original.is_fully_paid}>
+        <If condition={!original.is_delivered}>
+          <MenuItem
+            icon={<Icon icon="send" iconSize={16} />}
+            text={intl.get('mark_as_delivered')}
+            onClick={safeCallback(onDeliver, original)}
+          />
+        </If>
+      </Can>
+      <Can I={Payment_Receive_Abilities.Create} a={AbilitySubject.PaymentReceive}>
+        <If condition={original.is_delivered && !original.is_fully_paid}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            text={intl.get('add_payment')}
+            onClick={safeCallback(onQuick, original)}
+          />
+        </If>
+      </Can>
+      <Can I={Invoice_Abilities.View} a={AbilitySubject.Invoice}>
         <MenuItem
-          icon={<Icon icon="quick-payment-16" iconSize={16} />}
+          icon={<Icon icon={'print-16'} iconSize={16} />}
-          text={intl.get('add_payment')}
+          text={intl.get('print')}
-          onClick={safeCallback(onQuick, original)}
+          onClick={safeCallback(onPrint, original)}
         />
-      </If>
+      </Can>
-      <MenuItem
+      <Can I={Invoice_Abilities.Delete} a={AbilitySubject.Invoice}>
-        icon={<Icon icon={'print-16'} iconSize={16} />}
+        <MenuItem
-        text={intl.get('print')}
+          text={intl.get('delete_invoice')}
-        onClick={safeCallback(onPrint, original)}
+          intent={Intent.DANGER}
-      />
+          onClick={safeCallback(onDelete, original)}
-      <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
-        text={intl.get('delete_invoice')}
+        />
-        intent={Intent.DANGER}
+      </Can>
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
     </Menu>
   );
 }

src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js

@@ -19,14 +19,17 @@ import {
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
-import { If, DashboardActionViewsList } from 'components';
+import { Can, If, DashboardActionViewsList } from 'components';
 
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withPaymentReceives from './withPaymentReceives';
 
 import withSettingsActions from 'containers/Settings/withSettingsActions';
 import withSettings from 'containers/Settings/withSettings';
-
+import {
+  Payment_Receive_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 import { compose } from 'utils';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
 import { useRefreshPaymentReceive } from 'hooks/query/paymentReceives';
@@ -85,12 +88,14 @@ function PaymentReceiveActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
+        <Can I={Payment_Receive_Abilities.Create} a={AbilitySubject.PaymentReceive}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon={'plus'} />}
+            className={Classes.MINIMAL}
-          text={<T id={'new_payment_receive'} />}
+            icon={<Icon icon={'plus'} />}
-          onClick={handleClickNewPaymentReceive}
+            text={<T id={'new_payment_receive'} />}
-        />
+            onClick={handleClickNewPaymentReceive}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: paymentFilterConditions,

src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesEmptyStatus.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 {
+  Payment_Receive_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function PaymentReceivesEmptyStatus() {
   const history = useHistory();
@@ -12,24 +16,31 @@ export default function PaymentReceivesEmptyStatus() {
       title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
       description={
         <p>
-          <T id={'receiving_customer_payments_is_one_pleasant_accounting_tasks'} />
+          <T
+            id={'receiving_customer_payments_is_one_pleasant_accounting_tasks'}
+          />
         </p>
       }
       action={
         <>
-          <Button
+          <Can
-            intent={Intent.PRIMARY}
+            I={Payment_Receive_Abilities.Create}
-            large={true}
+            a={AbilitySubject.PaymentReceive}
-            onClick={() => {
-              history.push('/payment-receives/new');
-            }}
           >
-            <T id={'new_payment_receive'} />
+            <Button
-          </Button>
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/payment-receives/new');
+              }}
+            >
+              <T id={'new_payment_receive'} />
+            </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/Sales/PaymentReceives/PaymentsLanding/components.js

@@ -11,10 +11,13 @@ import {
 import intl from 'react-intl-universal';
 import clsx from 'classnames';
 
-import { FormatDateCell, Money, Icon } from 'components';
+import { FormatDateCell, Money, Icon, Can } from 'components';
 import { safeCallback } from 'utils';
 import { CLASSES } from '../../../../common/classes';
-
+import {
+  Payment_Receive_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 /**
  * Table actions menu.
  */
@@ -29,18 +32,22 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, paymentReceive)}
       />
-      <MenuDivider />
+      <Can I={Payment_Receive_Abilities.Edit} a={AbilitySubject.PaymentReceive}>
-      <MenuItem
+        <MenuDivider />
-        icon={<Icon icon="pen-18" />}
+        <MenuItem
-        text={intl.get('edit_payment_receive')}
+          icon={<Icon icon="pen-18" />}
-        onClick={safeCallback(onEdit, paymentReceive)}
+          text={intl.get('edit_payment_receive')}
-      />
+          onClick={safeCallback(onEdit, paymentReceive)}
-      <MenuItem
+        />
-        text={intl.get('delete_payment_receive')}
+      </Can>
-        intent={Intent.DANGER}
+      <Can I={Payment_Receive_Abilities.Delete} a={AbilitySubject.PaymentReceive}>
-        onClick={safeCallback(onDelete, paymentReceive)}
+        <MenuItem
-        icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_payment_receive')}
-      />
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, paymentReceive)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js

@@ -17,7 +17,7 @@ import {
   DashboardRowsHeightButton,
 } from 'components';
 
-import { If, DashboardActionViewsList } from 'components';
+import { Can, If, DashboardActionViewsList } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import withReceiptsActions from './withReceiptsActions';
@@ -28,6 +28,11 @@ import withSettings from 'containers/Settings/withSettings';
 
 import { useReceiptsListContext } from './ReceiptsListProvider';
 import { useRefreshReceipts } from 'hooks/query/receipts';
+import {
+  Receipt_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
+
 import { compose } from 'utils';
 
 /**
@@ -87,12 +92,14 @@ function ReceiptActionsBar({
         />
 
         <NavbarDivider />
-        <Button
+        <Can I={Receipt_Abilities.Create} a={AbilitySubject.Receipt}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon={'plus'} />}
+            className={Classes.MINIMAL}
-          text={<T id={'new_receipt'} />}
+            icon={<Icon icon={'plus'} />}
-          onClick={onClickNewReceipt}
+            text={<T id={'new_receipt'} />}
-        />
+            onClick={onClickNewReceipt}
+          />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: receiptsFilterConditions,

src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.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 {
+  Receipt_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export default function ReceiptsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,21 @@ export default function ReceiptsEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={Receipt_Abilities.Create} a={AbilitySubject.Receipt}>
-            intent={Intent.PRIMARY}
+            <Button
-            large={true}
+              intent={Intent.PRIMARY}
-            onClick={() => {
+              large={true}
-              history.push('/receipts/new');
+              onClick={() => {
-            }}
+                history.push('/receipts/new');
-          >
+              }}
-            <T id={'new_receipt'} />
+            >
-          </Button>
+              <T id={'new_receipt'} />
+            </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/Sales/Receipts/ReceiptsLanding/components.js

@@ -15,7 +15,11 @@ import clsx from 'classnames';
 
 import { CLASSES } from '../../../../common/classes';
 import { safeCallback } from 'utils';
-import { FormatDateCell, Choose, Money, Icon, If } from 'components';
+import { FormatDateCell, Choose, Money, Icon, If, Can } from 'components';
+import {
+  Receipt_Abilities,
+  AbilitySubject,
+} from '../../../../common/abilityOption';
 
 export function ActionsMenu({
   payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails, onPrint },
@@ -28,30 +32,37 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, receipt)}
       />
-      <MenuDivider />
+      <Can I={Receipt_Abilities.Edit} a={AbilitySubject.Receipt}>
-      <MenuItem
+        <MenuDivider />
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_receipt')}
-        onClick={safeCallback(onEdit, receipt)}
-      />
-      <If condition={!receipt.is_closed}>
         <MenuItem
-          icon={<Icon icon={'check'} iconSize={18} />}
+          icon={<Icon icon="pen-18" />}
-          text={intl.get('mark_as_closed')}
+          text={intl.get('edit_receipt')}
-          onClick={safeCallback(onClose, receipt)}
+          onClick={safeCallback(onEdit, receipt)}
         />
-      </If>
+
-      <MenuItem
+        <If condition={!receipt.is_closed}>
-        icon={<Icon icon={'print-16'} iconSize={16} />}
+          <MenuItem
-        text={intl.get('print')}
+            icon={<Icon icon={'check'} iconSize={18} />}
-        onClick={safeCallback(onPrint, receipt)}
+            text={intl.get('mark_as_closed')}
-      />
+            onClick={safeCallback(onClose, receipt)}
-      <MenuItem
+          />
-        text={intl.get('delete_receipt')}
+        </If>
-        intent={Intent.DANGER}
+      </Can>
-        onClick={safeCallback(onDelete, receipt)}
+      <Can I={Receipt_Abilities.View} a={AbilitySubject.Receipt}>
-        icon={<Icon icon="trash-16" iconSize={16} />}
+        <MenuItem
-      />
+          icon={<Icon icon={'print-16'} iconSize={16} />}
+          text={intl.get('print')}
+          onClick={safeCallback(onPrint, receipt)}
+        />
+      </Can>
+      <Can I={Receipt_Abilities.Delete} a={AbilitySubject.Receipt}>
+        <MenuItem
+          text={intl.get('delete_receipt')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, receipt)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
     </Menu>
   );
 }

src/containers/Vendors/VendorsLanding/VendorActionsBar.js

@@ -13,6 +13,7 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import {
   If,
+  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   DashboardFilterButton,
@@ -29,7 +30,10 @@ import withVendors from './withVendors';
 
 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
-
+import {
+  Vendor_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -90,13 +94,15 @@ function VendorActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Button
+        <Can I={VendorActionsBar.Create} a={AbilitySubject.Vendor}>
-          className={Classes.MINIMAL}
+          <Button
-          icon={<Icon icon={'plus'} />}
+            className={Classes.MINIMAL}
-          text={<T id={'new_vendor'} />}
+            icon={<Icon icon={'plus'} />}
-          onClick={onClickNewVendor}
+            text={<T id={'new_vendor'} />}
-        />
+            onClick={onClickNewVendor}
-        <NavbarDivider />
+          />
+          <NavbarDivider />
+        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: vendorsFilterConditions,
@@ -136,12 +142,15 @@ function VendorActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Switch
+        <Can I={Vendor_Abilities.Edit} a={AbilitySubject.Vendor}>
-          labelElement={<T id={'inactive'} />}
+          <Switch
-          defaultChecked={vendorsInactiveMode}
+            labelElement={<T id={'inactive'} />}
-          onChange={handleInactiveSwitchChange}
+            defaultChecked={vendorsInactiveMode}
-        />
+            onChange={handleInactiveSwitchChange}
+          />
+        </Can>
       </NavbarGroup>
+
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
           className={Classes.MINIMAL}

src/containers/Vendors/VendorsLanding/VendorsEmptyStatus.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 {
+  Vendor_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 
 export default function VendorsEmptyStatus() {
   const history = useHistory();
@@ -17,19 +21,21 @@ export default function VendorsEmptyStatus() {
       }
       action={
         <>
-          <Button
+          <Can I={Vendor_Abilities.Create} a={AbilitySubject.Vendor}>
-            intent={Intent.PRIMARY}
+            <Button
-            large={true}
+              intent={Intent.PRIMARY}
-            onClick={() => {
+              large={true}
-              history.push('/vendors/new');
+              onClick={() => {
-            }}
+                history.push('/vendors/new');
-          >
+              }}
-            <T id={'new_vendor'} />
+            >
-          </Button>
+              <T id={'new_vendor'} />
+            </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/Vendors/VendorsLanding/components.js

@@ -10,7 +10,11 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { Icon, Money, If, AvaterCell } from 'components';
+import { Can, Icon, Money, If, AvaterCell } from 'components';
+import {
+  Vendor_Abilities,
+  AbilitySubject,
+} from '../../../common/abilityOption';
 import { safeCallback, firstLettersArgs } from 'utils';
 
 /**
@@ -34,37 +38,45 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <MenuDivider />
+      <Can I={Vendor_Abilities.Edit} a={AbilitySubject.Vendor}>
-      <MenuItem
+        <MenuDivider />
-        icon={<Icon icon="pen-18" />}
-        text={intl.get('edit_vendor')}
-        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_item')}
+          icon={<Icon icon="pen-18" />}
-          icon={<Icon icon="pause-16" iconSize={16} />}
+          text={intl.get('edit_vendor')}
-          onClick={safeCallback(onInactivate, original)}
+          onClick={safeCallback(onEdit, original)}
         />
-      </If>
+      </Can>
-      <If condition={!original.active}>
+      <Can I={Vendor_Abilities.Create} a={AbilitySubject.Customer}>
         <MenuItem
-          text={intl.get('activate_item')}
+          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={Vendor_Abilities.Edit} a={AbilitySubject.Vendor}>
-        icon={<Icon icon="trash-16" iconSize={16} />}
+        <If condition={original.active}>
-        text={intl.get('delete_vendor')}
+          <MenuItem
-        intent={Intent.DANGER}
+            text={intl.get('inactivate_item')}
-        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_item')}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={safeCallback(onActivate, original)}
+          />
+        </If>
+      </Can>
+      <Can I={Vendor_Abilities.Delete} a={AbilitySubject.Vendor}>
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={intl.get('delete_vendor')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+        />
+      </Can>
     </Menu>
   );
 }

src/hooks/utils/index.js

@@ -1,5 +1,3 @@
-
-
 export * from './useLocalStorage';
 export * from './usePrevious';
 export * from './useUpdateEffect';
@@ -8,3 +6,4 @@ export * from './useWhen';
 export * from './useRequestPdf';
 export * from './useAsync';
 export * from './useIntersectionObserver';
+export * from './useAbilityContext';

src/hooks/utils/useAbilityContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { useAbility } from '@casl/react';
+import { AbilityContext } from '../../components/Can';
+
+export const useAbilityContext = () => useAbility(AbilityContext);
+