feat: dashboard quick new access control.

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/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}`);
@@ -40,4 +45,4 @@ export default function QuickNewDropdown() {
       />
     </Select>
   );
-}
+}

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