Merge branch 'featrue/roles-permission' of https://github.com/bigcapitalhq/client into featrue/roles-permission

src/common/abilityOption.js

@@ -14,6 +14,9 @@ export const AbilitySubject = {
   Expense: 'Expense',
   Cashflow: 'Cashflow',
   Report: 'Report',
+  Preferences: 'Preferences',
+  ExchangeRate: 'ExchangeRate',
+  SubscriptionBilling: 'SubscriptionBilling'
 };
 
 export const Item_Abilities = {
@@ -99,6 +102,7 @@ export const Manual_Journal_Abilities = {
   Create: 'create',
   Edit: 'edit',
   Delete: 'delete',
+  TransactionLocking: 'TransactionLocking'
 };
 
 export const Expense_Abilities = {
@@ -134,3 +138,18 @@ export const Report_Abilities = {
   READ_INVENTORY_ITEM_DETAILS: 'read-inventory-item-details',
   READ_CASHFLOW_ACCOUNT_TRANSACTION: 'read-cashflow-account-transactions',
 };
+
+export const PreferencesAbility = {
+  Mutate: 'Mutate'
+}
+
+export const ExchangeRateAbility ={ 
+  View: 'view',
+  Create: 'create',
+  Delete: 'delete', 
+}
+
+export const SubscriptionBillingAbility = {
+  View: 'view',
+  Payment: 'payment'
+}

src/common/quickNewOptions.js

@@ -1,10 +1,71 @@
 import intl from 'react-intl-universal';
+import {
+  AbilitySubject,
+  Invoice_Abilities,
+  Customer_Abilities,
+  Vendor_Abilities,
+  Manual_Journal_Abilities,
+  Expense_Abilities,
+} from '../common/abilityOption';
+import { useAbilitiesFilter } from '../hooks';
 
 export const getQuickNewActions = () => [
-  { path: 'invoices/new', name: intl.get('sale_invoice') },
+  {
-  { path: 'bills/new', name: intl.get('purchase_invoice') },
+    path: 'invoices/new',
-  { path: 'make-journal-entry', name: intl.get('manual_journal') },
+    name: intl.get('sale_invoice'),
-  { path: 'expenses/new', name: intl.get('expense') },
+    permission: {
-  { path: 'customers/new', name: intl.get('customer') },
+      subject: AbilitySubject.Invoice,
-  { path: 'vendors/new', name: intl.get('vendor') },
+      ability: Invoice_Abilities.Create,
+    },
+  },
+  {
+    path: 'bills/new',
+    name: intl.get('purchase_invoice'),
+    permission: {
+      subject: AbilitySubject.Invoice,
+      ability: Invoice_Abilities.Create,
+    },
+  },
+  {
+    path: 'make-journal-entry',
+    name: intl.get('manual_journal'),
+    permission: {
+      subject: AbilitySubject.ManualJournal,
+      ability: Manual_Journal_Abilities.Create,
+    },
+  },
+  {
+    path: 'expenses/new',
+    name: intl.get('expense'),
+    permission: {
+      subject: AbilitySubject.Expense,
+      ability: Expense_Abilities.Create,
+    },
+  },
+  {
+    path: 'customers/new',
+    name: intl.get('customer'),
+    permission: {
+      subject: AbilitySubject.Customer,
+      ability: Customer_Abilities.Create,
+    },
+  },
+  {
+    path: 'vendors/new',
+    name: intl.get('vendor'),
+    permission: {
+      subject: AbilitySubject.Vendor,
+      ability: Vendor_Abilities.Vendor,
+    },
+  },
 ];
+
+/**
+ * Retrieve the dashboard quick new menu items.
+ */
+export const useGetQuickNewMenu = () => {
+  const quickNewMenu = getQuickNewActions();
+  const abilitiesFilter = useAbilitiesFilter();
+
+  return abilitiesFilter(quickNewMenu);
+};

src/components/Dashboard/DashboardAbilityProvider.js

@@ -15,7 +15,7 @@ export function DashboardAbilityProvider({ children }) {
   } = useDashboardMeta();
 
   // Ability instance.
-  const ability = new Ability([]);
+  const ability = new Ability(abilities);
 
   return (
     <AbilityContext.Provider value={ability}>

src/components/Dashboard/DashboardBoot.js

@@ -7,7 +7,6 @@ import {
 } from '../../hooks/query';
 import { useSplashLoading } from '../../hooks/state';
 import { useWatch, useWatchImmediate, useWhen } from '../../hooks';
-
 import { setCookie, getCookie } from '../../utils';
 
 /**

src/components/Sidebar/Sidebar.js

@@ -2,16 +2,19 @@ import React from 'react';
 import SidebarContainer from 'components/Sidebar/SidebarContainer';
 import SidebarHead from 'components/Sidebar/SidebarHead';
 import SidebarMenu from 'components/Sidebar/SidebarMenu';
+import { useGetSidebarMenu } from './utils';
 
 import 'style/containers/Dashboard/Sidebar.scss';
 
 export default function Sidebar({ dashboardContentRef }) {
+  const menu = useGetSidebarMenu();
+
   return (
     <SidebarContainer>
       <SidebarHead />
 
       <div className="sidebar__menu">
-        <SidebarMenu />
+        <SidebarMenu menu={menu} />
       </div>
 
       <div class="sidebar__version">0.0.1-beta version.</div>

src/components/Sidebar/SidebarMenu.js

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

src/components/Sidebar/utils.js

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

src/config/sidebarMenu.js

@@ -1,5 +1,26 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
+import {
+  Report_Abilities,
+  AbilitySubject,
+  Item_Abilities,
+  Inventory_Adjustment_Abilities,
+  Estimate_Abilities,
+  Invoice_Abilities,
+  Receipt_Abilities,
+  Payment_Receive_Abilities,
+  Bill_Abilities,
+  Payment_Made_Abilities,
+  Customer_Abilities,
+  Vendor_Abilities,
+  Account_Abilities,
+  Manual_Journal_Abilities,
+  Expense_Abilities,
+  Cashflow_Abilities,
+  PreferencesAbility,
+  ExchangeRateAbility,
+  SubscriptionBillingAbility,
+} from '../common/abilityOption';
 
 export default [
   {
@@ -11,6 +32,32 @@ export default [
   {
     text: <T id={'sales_inventory'} />,
     label: true,
+    permission: [
+      {
+        subject: AbilitySubject.Item,
+        ability: Item_Abilities.View,
+      },
+      {
+        subject: AbilitySubject.Inventory_Adjustment,
+        ability: Inventory_Adjustment_Abilities.View,
+      },
+      {
+        subject: AbilitySubject.Estimate,
+        ability: Estimate_Abilities.View,
+      },
+      {
+        subject: AbilitySubject.Invoice,
+        ability: Invoice_Abilities.View,
+      },
+      {
+        subject: AbilitySubject.Receipt,
+        ability: Receipt_Abilities.View,
+      },
+      {
+        subject: AbilitySubject.PaymentReceive,
+        ability: Payment_Receive_Abilities.View,
+      }
+    ],
   },
   {
     text: <T id={'items'} />,
@@ -18,37 +65,70 @@ export default [
       {
         text: <T id={'items'} />,
         href: '/items',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: Item_Abilities.View,
+        },
       },
       {
         text: <T id={'inventory_adjustments'} />,
         href: '/inventory-adjustments',
+        permission: {
+          subject: AbilitySubject.Inventory_Adjustment,
+          ability: Inventory_Adjustment_Abilities.View,
+        },
       },
       {
         text: <T id={'category_list'} />,
         href: '/items/categories',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: Item_Abilities.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Item,
+            ability: Item_Abilities.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Item,
+            ability: Item_Abilities.Create,
+          },
+        ],
       },
       {
         text: <T id={'New inventory item'} />,
         href: '/items/new',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: Item_Abilities.Create,
+        },
       },
       {
         text: <T id={'New service'} />,
         href: '/items/new',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: Item_Abilities.Create,
+        },
       },
       {
         text: <T id={'New item category'} />,
         href: '/items/categories/new',
+        permission: {
+          subject: AbilitySubject.Item,
+          ability: Item_Abilities.Create,
+        },
       },
-      // {
-      //   text: <T id={'New inventory adjustment'} />,
-      // },
     ],
   },
   {
@@ -57,43 +137,109 @@ export default [
       {
         text: <T id={'estimates'} />,
         href: '/estimates',
-        newTabHref: '/estimates/new',
+        permission: {
+          subject: AbilitySubject.Estimate,
+          ability: Estimate_Abilities.View,
+        },
       },
       {
         text: <T id={'invoices'} />,
         href: '/invoices',
-        newTabHref: '/invoices/new',
+        permission: {
+          subject: AbilitySubject.Invoice,
+          ability: Invoice_Abilities.View,
+        },
       },
       {
         text: <T id={'receipts'} />,
         href: '/receipts',
+        permission: {
+          subject: AbilitySubject.Receipt,
+          ability: Receipt_Abilities.View,
+        },
       },
       {
         text: <T id={'payment_receives'} />,
         href: '/payment-receives',
+        permission: {
+          subject: AbilitySubject.PaymentReceive,
+          ability: Payment_Receive_Abilities.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Estimate,
+            ability: Estimate_Abilities.Create,
+          },
+          {
+            subject: AbilitySubject.Invoice,
+            ability: Invoice_Abilities.Create,
+          },
+          {
+            subject: AbilitySubject.Receipt,
+            ability: Receipt_Abilities.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentReceive,
+            ability: Payment_Receive_Abilities.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Estimate,
+            ability: Estimate_Abilities.Create,
+          },
+          {
+            subject: AbilitySubject.Invoice,
+            ability: Invoice_Abilities.Create,
+          },
+          {
+            subject: AbilitySubject.Receipt,
+            ability: Receipt_Abilities.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentReceive,
+            ability: Payment_Receive_Abilities.Create,
+          },
+        ],
       },
       {
         text: <T id={'new_estimate'} />,
         href: '/estimates/new',
+        permission: {
+          subject: AbilitySubject.Estimate,
+          ability: Estimate_Abilities.Create,
+        },
       },
       {
         text: <T id={'new_invoice'} />,
         href: '/invoices/new',
+        permission: {
+          subject: AbilitySubject.Invoice,
+          ability: Invoice_Abilities.Create,
+        },
       },
       {
         text: <T id={'new_receipt'} />,
         href: '/receipts/new',
+        permission: {
+          subject: AbilitySubject.Receipt,
+          ability: Receipt_Abilities.Create,
+        },
       },
       {
         text: <T id={'new_payment_receive'} />,
         href: '/payment-receives/new',
+        permission: {
+          subject: AbilitySubject.PaymentReceive,
+          ability: Payment_Receive_Abilities.Create,
+        },
       },
     ],
   },
@@ -103,27 +249,62 @@ export default [
       {
         text: <T id={'bills'} />,
         href: '/bills',
-        newTabHref: '/bills/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: Bill_Abilities.View,
+        },
       },
       {
         text: <T id={'payment_mades'} />,
         href: '/payment-mades',
         newTabHref: '/payment-mades/new',
+        permission: {
+          subject: AbilitySubject.PaymentMade,
+          ability: Payment_Made_Abilities.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Bill,
+            ability: Bill_Abilities.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentMade,
+            ability: Payment_Made_Abilities.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Bill,
+            ability: Bill_Abilities.Create,
+          },
+          {
+            subject: AbilitySubject.PaymentMade,
+            ability: Payment_Made_Abilities.Create,
+          },
+        ],
       },
       {
         text: <T id={'New purchase invoice'} />,
         href: '/bills/new',
+        permission: {
+          subject: AbilitySubject.Bill,
+          ability: Bill_Abilities.Create,
+        },
       },
       {
         text: <T id={'new_payment_made'} />,
         href: '/payment-mades/new',
+        permission: {
+          subject: AbilitySubject.PaymentMade,
+          ability: Payment_Made_Abilities.Create,
+        },
       },
     ],
   },
@@ -133,33 +314,77 @@ export default [
       {
         text: <T id={'customers'} />,
         href: '/customers',
-        newTabHref: '/customers/new',
+        permission: {
+          subject: AbilitySubject.Customer,
+          ability: Customer_Abilities.View,
+        },
       },
       {
         text: <T id={'vendors'} />,
         href: '/vendors',
-        newTabHref: '/vendors/new',
+        permission: {
+          subject: AbilitySubject.Vendor,
+          ability: Vendor_Abilities.Create,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Customer,
+            ability: Customer_Abilities.View,
+          },
+          {
+            subject: AbilitySubject.Vendor,
+            ability: Vendor_Abilities.View,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Customer,
+            ability: Customer_Abilities.View,
+          },
+          {
+            subject: AbilitySubject.Vendor,
+            ability: Vendor_Abilities.View,
+          },
+        ],
       },
       {
         text: <T id={'new_customer'} />,
         href: '/customers/new',
+        permission: {
+          subject: AbilitySubject.Customer,
+          ability: Customer_Abilities.View,
+        },
       },
       {
         text: <T id={'new_vendor'} />,
         href: '/vendors/new',
+        permission: {
+          subject: AbilitySubject.Vendor,
+          ability: Vendor_Abilities.View,
+        },
       },
     ],
   },
   {
     text: <T id={'accounting'} />,
     label: true,
+    permission: [
+      {
+        subject: AbilitySubject.Account,
+        ability: Account_Abilities.View,
+      },
+      {
+        subject: AbilitySubject.ManualJournal,
+        ability: Manual_Journal_Abilities.View,
+      },
+    ],
   },
   {
     text: <T id={'financial'} />,
@@ -167,29 +392,57 @@ export default [
       {
         text: <T id={'accounts_chart'} />,
         href: '/accounts',
+        permission: {
+          subject: AbilitySubject.Account,
+          ability: Account_Abilities.View,
+        },
       },
       {
         text: <T id={'manual_journals'} />,
         href: '/manual-journals',
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: Manual_Journal_Abilities.View,
+        },
       },
       {
         text: <T id={'sidebar.transactions_locaking'} />,
         href: '/transactions-locking',
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: Manual_Journal_Abilities.TransactionLocking,
+        },
       },
       {
         text: <T id={'exchange_rate'} />,
         href: '/exchange-rates',
+        permission: {
+          subject: AbilitySubject.ExchangeRate,
+          ability: ExchangeRateAbility.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: Manual_Journal_Abilities.Create,
+        },
       },
       {
         divider: true,
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: Manual_Journal_Abilities.Create,
+        },
       },
       {
         text: <T id={'make_journal_entry'} />,
         href: '/make-journal-entry',
+        permission: {
+          subject: AbilitySubject.ManualJournal,
+          ability: Manual_Journal_Abilities.Create,
+        },
       },
     ],
   },
@@ -199,29 +452,61 @@ export default [
       {
         text: <T id={'siebar.cashflow.label_cash_and_bank_accounts'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: Cashflow_Abilities.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Cashflow,
+            ability: Cashflow_Abilities.Create,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Cashflow,
+            ability: Cashflow_Abilities.Create,
+          },
+        ],
       },
       {
         text: <T id={'cash_flow.label.add_money_in'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: Cashflow_Abilities.Create,
+        },
       },
       {
         text: <T id={'cash_flow.label.add_money_out'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: Cashflow_Abilities.Create,
+        },
       },
       {
         text: <T id={'cash_flow.label.add_cash_account'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: Cashflow_Abilities.Create,
+        },
       },
       {
         text: <T id={'cash_flow.label.add_bank_account'} />,
         href: '/cashflow-accounts',
+        permission: {
+          subject: AbilitySubject.Cashflow,
+          ability: Cashflow_Abilities.Create,
+        },
       },
     ],
   },
@@ -231,17 +516,33 @@ export default [
       {
         text: <T id={'expenses'} />,
         href: '/expenses',
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: Expense_Abilities.View,
+        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: Expense_Abilities.Create,
+        },
       },
       {
         divider: true,
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: Expense_Abilities.Create,
+        },
       },
       {
         text: <T id={'new_expense'} />,
         href: '/expenses/new',
+        permission: {
+          subject: AbilitySubject.Expense,
+          ability: Expense_Abilities.Create,
+        },
       },
     ],
   },
@@ -251,80 +552,216 @@ export default [
       {
         text: <T id={'balance_sheet'} />,
         href: '/financial-reports/balance-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_BALANCE_SHEET,
+        },
       },
       {
         text: <T id={'trial_balance_sheet'} />,
         href: '/financial-reports/trial-balance-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_TRIAL_BALANCE_SHEET,
+        },
       },
       {
         text: <T id={'journal'} />,
         href: '/financial-reports/journal-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_JOURNAL,
+        },
       },
       {
         text: <T id={'general_ledger'} />,
         href: '/financial-reports/general-ledger',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_GENERAL_LEDGET,
+        },
       },
       {
         text: <T id={'profit_loss_sheet'} />,
         href: '/financial-reports/profit-loss-sheet',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_PROFIT_LOSS,
+        },
       },
       {
         text: <T id={'cash_flow_statement'} />,
         href: '/financial-reports/cash-flow',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_CASHFLOW_ACCOUNT_TRANSACTION,
+        },
       },
       {
         text: <T id={'AR_Aging_Summary'} />,
         href: '/financial-reports/receivable-aging-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_AR_AGING_SUMMARY,
+        },
       },
       {
         text: <T id={'AP_Aging_Summary'} />,
         href: '/financial-reports/payable-aging-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_AP_AGING_SUMMARY,
+        },
       },
       {
         text: <T id={'Sales/Purchases'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_PURCHASES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_SALES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_CUSTOMERS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_VENDORS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_CUSTOMERS_SUMMARY_BALANCE,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_VENDORS_SUMMARY_BALANCE,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_PURCHASES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_SALES_BY_ITEMS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_CUSTOMERS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_VENDORS_TRANSACTIONS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_CUSTOMERS_SUMMARY_BALANCE,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_VENDORS_SUMMARY_BALANCE,
+          },
+        ],
       },
       {
         text: <T id={'purchases_by_items'} />,
         href: '/financial-reports/purchases-by-items',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_PURCHASES_BY_ITEMS,
+        },
       },
       {
         text: <T id={'sales_by_items'} />,
         href: '/financial-reports/sales-by-items',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_SALES_BY_ITEMS,
+        },
       },
       {
         text: <T id={'customers_transactions'} />,
         href: '/financial-reports/transactions-by-customers',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_CUSTOMERS_TRANSACTIONS,
+        },
       },
       {
         text: <T id={'vendors_transactions'} />,
         href: '/financial-reports/transactions-by-vendors',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_VENDORS_TRANSACTIONS,
+        },
       },
       {
         text: <T id={'customers_balance_summary'} />,
         href: '/financial-reports/customers-balance-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_CUSTOMERS_SUMMARY_BALANCE,
+        },
       },
       {
         text: <T id={'vendors_balance_summary'} />,
         href: '/financial-reports/vendors-balance-summary',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_VENDORS_SUMMARY_BALANCE,
+        },
       },
       {
         text: <T id={'inventory'} />,
         label: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_INVENTORY_ITEM_DETAILS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_INVENTORY_VALUATION_SUMMARY,
+          },
+        ],
       },
       {
         divider: true,
+        permission: [
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_INVENTORY_ITEM_DETAILS,
+          },
+          {
+            subject: AbilitySubject.Report,
+            ability: Report_Abilities.READ_INVENTORY_VALUATION_SUMMARY,
+          },
+        ],
       },
       {
         text: <T id={'inventory_item_details'} />,
         href: '/financial-reports/inventory-item-details',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_INVENTORY_ITEM_DETAILS,
+        },
       },
       {
         text: <T id={'inventory_valuation'} />,
         href: '/financial-reports/inventory-valuation',
+        permission: {
+          subject: AbilitySubject.Report,
+          ability: Report_Abilities.READ_INVENTORY_VALUATION_SUMMARY,
+        },
       },
     ],
   },
@@ -332,14 +769,32 @@ export default [
     text: <T id={'system'} />,
     enableBilling: true,
     label: true,
+    permission: [
+      {
+        subject: AbilitySubject.Preferences,
+        ability: PreferencesAbility.Mutate,
+      },
+      {
+        subject: AbilitySubject.SubscriptionBilling,
+        ability: SubscriptionBillingAbility.View,
+      },
+    ],
   },
   {
     text: <T id={'preferences'} />,
     href: '/preferences',
+    permission: {
+      subject: AbilitySubject.Preferences,
+      ability: PreferencesAbility.Mutate,
+    },
   },
   {
     text: <T id={'billing'} />,
     href: '/billing',
     enableBilling: true,
+    permission: {
+      subject: AbilitySubject.SubscriptionBilling,
+      ability: SubscriptionBillingAbility.View,
+    },
   },
 ];

src/containers/QuickNewDropdown/QuickNewDropdown.js

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

src/hooks/utils/useAbilityContext.js

@@ -1,4 +1,22 @@
+import React from 'react';
 import { useAbility } from '@casl/react';
 import { AbilityContext } from '../../components';
 
 export const useAbilityContext = () => useAbility(AbilityContext);
+
+/**
+ *
+ */
+export const useAbilitiesFilter = () => {
+  const ability = useAbilityContext();
+
+  return React.useCallback(
+    (items) => {
+      return items.filter((item) =>
+        ability.can(item.permission.ability, item.permission.subject),
+      );
+    },
+    [ability],
+  );
+};
+