diff --git a/package.json b/package.json
index 38afbca86..1b55b7a1d 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.18.0",
     "eslint-plugin-react-hooks": "^1.6.1",
+    "fast-deep-equal": "^3.1.3",
     "file-loader": "4.3.0",
     "flow-bin": "^0.123.0",
     "formik": "^2.2.5",
diff --git a/src/common/permissionsSchema.js b/src/common/permissionsSchema.js
index 0ab859a25..2bc0fdcac 100644
--- a/src/common/permissionsSchema.js
+++ b/src/common/permissionsSchema.js
@@ -1,3 +1,4 @@
+import { chain } from 'lodash';
 import {
   AbilitySubject,
   AccountAction,
@@ -14,7 +15,7 @@ import {
   SaleInvoiceAction,
   SaleReceiptAction,
   VendorAction,
-  VendorCreditAction
+  VendorCreditAction,
 } from './abilityOption';
 
 export const ModulePermissionsStyle = {
@@ -26,8 +27,8 @@ const PermissionColumn = {
   View: 'view',
   Create: 'create',
   Delete: 'delete',
-  Edit: 'edit'
-}
+  Edit: 'edit',
+};
 
 export const permissions = [
   {
@@ -46,20 +47,52 @@ export const permissions = [
         label: 'Items',
         subject: AbilitySubject.Item,
         permissions: [
-          { label: 'View',    key: ItemAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: ItemAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: ItemAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: ItemAction.Delete,  relatedColumn: PermissionColumn.Delete },
+          {
+            label: 'View',
+            key: ItemAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: ItemAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: ItemAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: ItemAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
         ],
       },
       {
         label: 'Inventory adjustments',
         subject: AbilitySubject.InventoryAdjustment,
         permissions: [
-          { label: 'View',    key: ItemAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: ItemAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: ItemAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: ItemAction.Delete,  relatedColumn: PermissionColumn.Delete },
+          {
+            label: 'View',
+            key: ItemAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: ItemAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: ItemAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: ItemAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
         ],
       },
     ],
@@ -68,7 +101,7 @@ export const permissions = [
     label: 'Contacts',
     type: ModulePermissionsStyle.Columns,
     serviceFullAccess: true,
-    moduleFullAccess: true, 
+    moduleFullAccess: true,
     columns: [
       { label: 'View', key: 'view' },
       { label: 'Create', key: 'create' },
@@ -80,23 +113,55 @@ export const permissions = [
         label: 'Customers',
         subject: AbilitySubject.Customer,
         permissions: [
-          { label: 'View',    key: CustomerAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: CustomerAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: CustomerAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: CustomerAction.Delete,  relatedColumn: PermissionColumn.Delete },
+          {
+            label: 'View',
+            key: CustomerAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: CustomerAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: CustomerAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: CustomerAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
         ],
       },
       {
         label: 'Vendors',
-        subject: AbilitySubject.Customer,
+        subject: AbilitySubject.Vendor,
         permissions: [
-          { label: 'View',    key: VendorAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: VendorAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: VendorAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: VendorAction.Delete,  relatedColumn: PermissionColumn.Delete },
+          {
+            label: 'View',
+            key: VendorAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: VendorAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: VendorAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: VendorAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
         ],
       },
-    ]
+    ],
   },
   {
     label: 'Sales',
@@ -114,55 +179,135 @@ export const permissions = [
         label: 'Sale Invoice',
         subject: AbilitySubject.Invoice,
         permissions: [
-          { label: 'View',    key: SaleInvoiceAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: SaleInvoiceAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: SaleInvoiceAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: SaleInvoiceAction.Delete,  relatedColumn: PermissionColumn.Delete },
-          { label: 'Written-off invoice', key: SaleInvoiceAction.Writeoff }
+          {
+            label: 'View',
+            key: SaleInvoiceAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: SaleInvoiceAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: SaleInvoiceAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: SaleInvoiceAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
+          { label: 'Written-off invoice', key: SaleInvoiceAction.Writeoff },
         ],
       },
       {
         label: 'Sale Estimate',
         subject: AbilitySubject.Estimate,
         permissions: [
-          { label: 'View',    key: SaleEstimateAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: SaleEstimateAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: SaleEstimateAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: SaleEstimateAction.Delete,  relatedColumn: PermissionColumn.Delete },
+          {
+            label: 'View',
+            key: SaleEstimateAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: SaleEstimateAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: SaleEstimateAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: SaleEstimateAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
         ],
       },
       {
         label: 'Sale Receipt',
         subject: AbilitySubject.Receipt,
         permissions: [
-          { label: 'View',    key: SaleReceiptAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: SaleReceiptAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: SaleReceiptAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: SaleReceiptAction.Delete,  relatedColumn: PermissionColumn.Delete },
+          {
+            label: 'View',
+            key: SaleReceiptAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: SaleReceiptAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: SaleReceiptAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: SaleReceiptAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
         ],
       },
       {
         label: 'Credit note',
         subject: AbilitySubject.CreditNote,
         permissions: [
-          { label: 'View',    key: CreditNoteAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: CreditNoteAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: CreditNoteAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: CreditNoteAction.Delete,  relatedColumn: PermissionColumn.Delete },
-          { label: 'Refund credit note', key: CreditNoteAction.Refund }
+          {
+            label: 'View',
+            key: CreditNoteAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: CreditNoteAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: CreditNoteAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: CreditNoteAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
+          { label: 'Refund credit note', key: CreditNoteAction.Refund },
         ],
       },
       {
         label: 'Payment Receive',
         subject: AbilitySubject.PaymentReceive,
         permissions: [
-          { label: 'View',    key: PaymentReceiveAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: PaymentReceiveAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: PaymentReceiveAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: PaymentReceiveAction.Delete,  relatedColumn: PermissionColumn.Delete },
+          {
+            label: 'View',
+            key: PaymentReceiveAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: PaymentReceiveAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: PaymentReceiveAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: PaymentReceiveAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
         ],
       },
-    ]
+    ],
   },
   {
     label: 'Purchases',
@@ -170,44 +315,92 @@ export const permissions = [
     serviceFullAccess: true,
     moduleFullAccess: true,
     columns: [
-      { label: 'View',    key: 'view' },
-      { label: 'Create',  key: 'create' },
-      { label: 'Edit',    key: 'edit' },
-      { label: 'Delete',  key: 'delete' },
+      { label: 'View', key: 'view' },
+      { label: 'Create', key: 'create' },
+      { label: 'Edit', key: 'edit' },
+      { label: 'Delete', key: 'delete' },
     ],
     services: [
       {
         label: 'Bills',
         subject: AbilitySubject.Bill,
         permissions: [
-          { label: 'View',    key: BillAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: BillAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: BillAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: BillAction.Delete,  relatedColumn: PermissionColumn.Delete },
+          {
+            label: 'View',
+            key: BillAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: BillAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: BillAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: BillAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
         ],
       },
       {
         label: 'Vendor Credits',
         subject: AbilitySubject.VendorCredit,
         permissions: [
-          { label: 'View',    key: VendorCreditAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: VendorCreditAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: VendorCreditAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: VendorCreditAction.Delete,  relatedColumn: PermissionColumn.Delete },
-          { label: 'Refund vendor credit', key: VendorCreditAction.Refund }
+          {
+            label: 'View',
+            key: VendorCreditAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: VendorCreditAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: VendorCreditAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: VendorCreditAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
+          { label: 'Refund vendor credit', key: VendorCreditAction.Refund },
         ],
       },
       {
         label: 'Payment Made',
         subject: AbilitySubject.PaymentMade,
         permissions: [
-          { label: 'View',    key: PaymentMadeAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: PaymentMadeAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: PaymentMadeAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: PaymentMadeAction.Delete,  relatedColumn: PermissionColumn.Delete },
+          {
+            label: 'View',
+            key: PaymentMadeAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: PaymentMadeAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: PaymentMadeAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: PaymentMadeAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
         ],
       },
-    ]
+    ],
   },
   {
     label: 'Financial Accounting',
@@ -219,70 +412,169 @@ export const permissions = [
       { label: 'Create', key: 'create' },
       { label: 'Edit', key: 'edit' },
       { label: 'Delete', key: 'delete' },
-    ], 
+    ],
     services: [
       {
         label: 'Manual Journals',
         subject: AbilitySubject.ManualJournal,
         permissions: [
-          { label: 'View',    key: ManualJournalAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: ManualJournalAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: ManualJournalAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: ManualJournalAction.Delete,  relatedColumn: PermissionColumn.Delete },
+          {
+            label: 'View',
+            key: ManualJournalAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: ManualJournalAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: ManualJournalAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: ManualJournalAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
         ],
       },
       {
         label: 'Chart of Accounts',
         subject: AbilitySubject.Account,
         permissions: [
-          { label: 'View',    key: AccountAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: AccountAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: AccountAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: AccountAction.Delete,  relatedColumn: PermissionColumn.Delete },
-          { label: 'Transactions locking', key: AccountAction.TransactionsLocking },
+          {
+            label: 'View',
+            key: AccountAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: AccountAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: AccountAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: AccountAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
+          {
+            label: 'Transactions locking',
+            key: AccountAction.TransactionsLocking,
+          },
         ],
       },
       {
         label: 'Expenses',
         subject: AbilitySubject.Expense,
         permissions: [
-          { label: 'View',    key: ExpenseAction.View,    relatedColumn: PermissionColumn.View },
-          { label: 'Create',  key: ExpenseAction.Create,  relatedColumn: PermissionColumn.Create },
-          { label: 'Edit',    key: ExpenseAction.Edit,    relatedColumn: PermissionColumn.Edit },
-          { label: 'Delete',  key: ExpenseAction.Delete,  relatedColumn: PermissionColumn.Delete },
+          {
+            label: 'View',
+            key: ExpenseAction.View,
+            relatedColumn: PermissionColumn.View,
+          },
+          {
+            label: 'Create',
+            key: ExpenseAction.Create,
+            relatedColumn: PermissionColumn.Create,
+          },
+          {
+            label: 'Edit',
+            key: ExpenseAction.Edit,
+            relatedColumn: PermissionColumn.Edit,
+          },
+          {
+            label: 'Delete',
+            key: ExpenseAction.Delete,
+            relatedColumn: PermissionColumn.Delete,
+          },
         ],
       },
-    ]
+    ],
   },
   {
     label: 'Financial Reports',
     type: ModulePermissionsStyle.Vertical,
     serviceFullAccess: true,
-    moduleFullAccess: true, 
-    services: [ 
+    moduleFullAccess: true,
+    services: [
       {
         label: 'Financial reprots',
         subject: AbilitySubject.Report,
         permissions: [
-          { label: 'Balance sheet',                 key: ReportsAction.READ_BALANCE_SHEET    },
-          { label: 'Trial Balance sheet',           key: ReportsAction.READ_TRIAL_BALANCE_SHEET  },
-          { label: 'Profit & Loss sheet',           key: ReportsAction.READ_PROFIT_LOSS  },
-          { label: 'Cash flow sheet',               key: ReportsAction.READ_CASHFLOW  }, 
-          { label: 'Journal sheet',                 key: ReportsAction.READ_JOURNAL  },
-          { label: 'General ledger',                key: ReportsAction.READ_GENERAL_LEDGET  },
-          { label: 'A/R Aging Summary report',      key: ReportsAction.READ_AR_AGING_SUMMARY  },
-          { label: 'A/P Aging Summary report',      key: ReportsAction.READ_AP_AGING_SUMMARY  },
-          { label: 'Purchases by items',            key: ReportsAction.READ_PURCHASES_BY_ITEMS  },
-          { label: 'Sales by items',                key: ReportsAction.READ_SALES_BY_ITEMS  },
-          { label: 'Customers transactions',        key: ReportsAction.READ_CUSTOMERS_TRANSACTIONS  },
-          { label: 'Vendors transactions',          key: ReportsAction.READ_VENDORS_TRANSACTIONS  },
-          { label: 'Customers summary balance',     key: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE  },
-          { label: 'Vendors summary balance',       key: ReportsAction.READ_VENDORS_SUMMARY_BALANCE  },
-          { label: 'Inventory valuation summary',   key: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY },
-          { label: 'Inventory items details',       key: ReportsAction.READ_INVENTORY_ITEM_DETAILS }, 
-          { label: 'Cashflow account transactions', key: ReportsAction.READ_CASHFLOW_ACCOUNT_TRANSACTION }, 
+          { label: 'Balance sheet', key: ReportsAction.READ_BALANCE_SHEET },
+          {
+            label: 'Trial Balance sheet',
+            key: ReportsAction.READ_TRIAL_BALANCE_SHEET,
+          },
+          { label: 'Profit & Loss sheet', key: ReportsAction.READ_PROFIT_LOSS },
+          { label: 'Cash flow sheet', key: ReportsAction.READ_CASHFLOW },
+          { label: 'Journal sheet', key: ReportsAction.READ_JOURNAL },
+          { label: 'General ledger', key: ReportsAction.READ_GENERAL_LEDGET },
+          {
+            label: 'A/R Aging Summary report',
+            key: ReportsAction.READ_AR_AGING_SUMMARY,
+          },
+          {
+            label: 'A/P Aging Summary report',
+            key: ReportsAction.READ_AP_AGING_SUMMARY,
+          },
+          {
+            label: 'Purchases by items',
+            key: ReportsAction.READ_PURCHASES_BY_ITEMS,
+          },
+          { label: 'Sales by items', key: ReportsAction.READ_SALES_BY_ITEMS },
+          {
+            label: 'Customers transactions',
+            key: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
+          },
+          {
+            label: 'Vendors transactions',
+            key: ReportsAction.READ_VENDORS_TRANSACTIONS,
+          },
+          {
+            label: 'Customers summary balance',
+            key: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
+          },
+          {
+            label: 'Vendors summary balance',
+            key: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
+          },
+          {
+            label: 'Inventory valuation summary',
+            key: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+          },
+          {
+            label: 'Inventory items details',
+            key: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
+          },
+          {
+            label: 'Cashflow account transactions',
+            key: ReportsAction.READ_CASHFLOW_ACCOUNT_TRANSACTION,
+          },
         ],
       },
     ],
-  }
+  },
 ];
+
+export function getPermissionsSchemaService(subject) {
+  return chain(permissions)
+    .map((perm) => perm.services)
+    .flatten()
+    .find((service) => service.subject === subject)
+    .value();
+}
+
+export function getPermissionsSchemaServices() {
+  return chain(permissions)
+    .map((module) => module.services)
+    .flatten()
+    .value();
+}
diff --git a/src/components/Forms/FormikObserver.js b/src/components/Forms/FormikObserver.js
new file mode 100644
index 000000000..a93b06864
--- /dev/null
+++ b/src/components/Forms/FormikObserver.js
@@ -0,0 +1,14 @@
+
+import { useDeepCompareEffect } from 'hooks/utils';
+
+export function FormikObserver({ onChange, values }) {
+  useDeepCompareEffect(() => {
+    onChange(values);
+  }, [values]);
+
+  return null;
+}
+
+FormikObserver.defaultProps = {
+  onChange: () => null,
+};
diff --git a/src/components/Forms/index.js b/src/components/Forms/index.js
index 8deddad40..c531c474b 100644
--- a/src/components/Forms/index.js
+++ b/src/components/Forms/index.js
@@ -1 +1,2 @@
-export * from './FormObserver';
\ No newline at end of file
+export * from './FormObserver';
+export * from './FormikObserver';
\ No newline at end of file
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.js b/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.js
index 322eafce0..1f46d2979 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.js
@@ -11,9 +11,13 @@ import { FormattedMessage as T } from 'components';
  * @returns {React.JSX}
  */
 export function RoleFormFloatingActions() {
+  // Formik form context.
   const { isSubmitting } = useFormikContext();
+
+  // History context.
   const history = useHistory();
 
+  // Handle close click.
   const handleCloseClick = () => {
     history.go(-1);
   };
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RoleFormHeader.js b/src/containers/Preferences/Users/Roles/RolesForm/RoleFormHeader.js
new file mode 100644
index 000000000..dfb7ab02c
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RoleFormHeader.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { ErrorMessage, FastField } from 'formik';
+import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
+
+import { inputIntent } from 'utils';
+import { FormattedMessage as T, FieldRequiredHint, Card } from 'components';
+import { useAutofocus } from 'hooks';
+
+/**
+ * Role form header.
+ * @returns {React.JSX}
+ */
+export function RoleFormHeader() {
+  const roleNameFieldRef = useAutofocus();
+
+  return (
+    <Card>
+      {/* ----------  name ----------  */}
+      <FastField name={'role_name'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={
+              <strong>
+                <T id={'role_name'} />
+              </strong>
+            }
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--name'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="role_name" />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              inputRef={(ref) => (roleNameFieldRef.current = ref)}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------  description ----------  */}
+      <FastField name={'role_description'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'description'} />}
+            className={'form-group--description'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'role_description'} />}
+            inline={true}
+          >
+            <TextArea
+              growVertically={true}
+              height={280}
+              {...field}
+              placeholder="Max. 500 characters"
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </Card>
+  );
+}
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RoleFormObserver.js b/src/containers/Preferences/Users/Roles/RolesForm/RoleFormObserver.js
new file mode 100644
index 000000000..281fbc58a
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RoleFormObserver.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { FormikObserver } from 'components';
+
+/**
+ * Role form observer.
+ * @returns {React.JSX}
+ */
+export function RoleFormObserver() {
+  const { values } = useFormikContext();
+
+  // Handles the form change.
+  const handleFormChange = () => {};
+
+  return <FormikObserver onChange={handleFormChange} values={values} />;
+}
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
index 1f0a766c3..684b55316 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
@@ -3,32 +3,28 @@ import { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { isEmpty } from 'lodash';
+import { Intent } from '@blueprintjs/core';
 
 import 'style/pages/Preferences/Roles/Form.scss';
 
-import { Intent } from '@blueprintjs/core';
-
 import { AppToaster, FormattedMessage as T } from 'components';
-
 import { CreateRolesFormSchema, EditRolesFormSchema } from './RolesForm.schema';
-
 import { useRolesFormContext } from './RolesFormProvider';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import RolesFormContent from './RolesFormContent';
 import {
   getNewRoleInitialValues,
   transformToArray,
   transformToObject,
 } from './utils';
-
-import RolesFormContent from './RolesFormContent';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import { handleDeleteErrors } from '../utils';
-
 import { compose, transformToForm } from 'utils';
 
 const defaultValues = {
   role_name: '',
   role_description: '',
   permissions: {},
+  serviceFullAccess: {},
 };
 
 /**
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
index d9a5ab85a..e736409d3 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
@@ -1,67 +1,14 @@
 import React from 'react';
-import { ErrorMessage, FastField, Form } from 'formik';
-import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
+import { Form } from 'formik';
 
-import { inputIntent } from 'utils';
-import { FormattedMessage as T, FieldRequiredHint, Card } from 'components';
-import { useAutofocus } from 'hooks';
+import { RoleFormHeader } from './RoleFormHeader';
 import { RolesPermissionList } from './components';
 import { RoleFormFloatingActions } from './RoleFormFloatingActions';
-
-/**
- * Role form header.
- * @returns {React.JSX}
- */
-function RoleFormHeader() {
-  const roleNameFieldRef = useAutofocus();
-
-  return (
-    <Card>
-      {/* ----------  name ----------  */}
-      <FastField name={'role_name'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<strong><T id={'role_name'} /></strong>}
-            labelInfo={<FieldRequiredHint />}
-            className={'form-group--name'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="role_name" />}
-            inline={true}
-          >
-            <InputGroup
-              medium={true}
-              inputRef={(ref) => (roleNameFieldRef.current = ref)}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-
-      {/* ----------  description ----------  */}
-      <FastField name={'role_description'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'role_description'} />}
-            inline={true}
-          >
-            <TextArea
-              growVertically={true}
-              height={280}
-              {...field}
-              placeholder="Max. 500 characters"
-            />
-          </FormGroup>
-        )}
-      </FastField>
-    </Card>
-  );
-}
+import { RoleFormObserver } from './RoleFormObserver';
 
 /**
  * Preferences - Roles Form content.
+ * @returns {React.JSX}
  */
 export default function RolesFormContent() {
   return (
@@ -69,6 +16,7 @@ export default function RolesFormContent() {
       <RoleFormHeader />
       <RolesPermissionList />
       <RoleFormFloatingActions />
+      <RoleFormObserver />
     </Form>
   );
 }
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/components.js b/src/containers/Preferences/Users/Roles/RolesForm/components.js
index df9d07410..48d31824c 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/components.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/components.js
@@ -1,13 +1,16 @@
 import React from 'react';
-import { Checkbox, Switch, Popover } from '@blueprintjs/core';
+import { Checkbox, Popover } from '@blueprintjs/core';
 import styled from 'styled-components';
-import { FastField } from 'formik';
+import { Field } from 'formik';
 
 import { permissions, ModulePermissionsStyle } from 'common/permissionsSchema';
 import { Card, If, ButtonLink, Choose } from 'components';
 import {
   getSerivceColumnPermission,
   getServiceExtraPermissions,
+  FULL_ACCESS_CHECKBOX_STATE,
+  handleCheckboxFullAccessChange,
+  handleCheckboxPermissionChange,
 } from './utils';
 
 // Module permissions context.
@@ -66,15 +69,20 @@ function PermissionBodyColumn({ column }) {
   if (!permission) {
     return <td class={'permission-checkbox'}></td>;
   }
-
   return (
     <td class={'permission-checkbox'}>
-      <FastField
+      <Field
         name={`permissions.${service.subject}/${permission.key}`}
         type="checkbox"
       >
-        {({ field }) => <PermissionCheckbox inline={true} {...field} />}
-      </FastField>
+        {({ field, form }) => (
+          <PermissionCheckbox
+            inline={true}
+            {...field}
+            onChange={handleCheckboxPermissionChange(form, permission, service)}
+          />
+        )}
+      </Field>
     </td>
   );
 }
@@ -103,18 +111,23 @@ function ModuleExtraPermissionsPopover() {
 
       <ExtraPermissionsRoot>
         {extraPermissions.map((permission) => (
-          <FastField
+          <Field
             name={`permissions.${service.subject}/${permission.key}`}
             type="checkbox"
           >
-            {({ form: { setFieldValue, values }, field }) => (
+            {({ form, field }) => (
               <PermissionCheckbox
                 inline={true}
                 label={permission.label}
                 {...field}
+                onChange={handleCheckboxPermissionChange(
+                  form,
+                  permission,
+                  service,
+                )}
               />
             )}
-          </FastField>
+          </Field>
         ))}
       </ExtraPermissionsRoot>
     </Popover>
@@ -179,14 +192,18 @@ function ModulePermissionsServiceFullAccess() {
   return (
     <If condition={module.serviceFullAccess}>
       <td class="full-access-permission">
-        <FastField
-          name={`serviceFullAccess.${service.subject}`}
-          type="checkbox"
-        >
-          {({ form: { setFieldValue, values }, field }) => (
-            <PermissionCheckbox inline={true} />
+        <Field name={`serviceFullAccess.${service.subject}`} type="checkbox">
+          {({ form, field }) => (
+            <PermissionCheckbox
+              inline={true}
+              {...field}
+              indeterminate={
+                field.value === FULL_ACCESS_CHECKBOX_STATE.INDETARMINE
+              }
+              onChange={handleCheckboxFullAccessChange(service, form)}
+            />
           )}
-        </FastField>
+        </Field>
       </td>
     </If>
   );
@@ -242,18 +259,23 @@ function ModuleVerticalTableCells() {
     <td class={'permissions'}>
       {service.permissions.map((permission) => (
         <div>
-          <FastField
+          <Field
             name={`permissions.${service.subject}/${permission.key}`}
             type="checkbox"
           >
-            {({ form: { setFieldValue, values }, field }) => (
+            {({ form, field }) => (
               <PermissionCheckbox
                 inline={true}
                 label={permission.label}
                 {...field}
+                onChange={handleCheckboxPermissionChange(
+                  form,
+                  permission,
+                  service,
+                )}
               />
             )}
-          </FastField>
+          </Field>
         </div>
       ))}
     </td>
@@ -319,12 +341,6 @@ function ModulePermissions({ module }) {
       <ModulePermissionsProvider module={module}>
         <ModulePermissionHead>
           <ModulePermissionTitle>{module.label} </ModulePermissionTitle>
-
-          <If condition={module.moduleFullAccess}>
-            <ModulePermissionFullControlRoot>
-              <Switch />
-            </ModulePermissionFullControlRoot>
-          </If>
         </ModulePermissionHead>
 
         <ModulePermissionsBody />
@@ -380,15 +396,6 @@ const ModulePermissionTitle = styled.div`
   color: #878787;
 `;
 
-const ModulePermissionFullControlRoot = styled.div`
-  margin-left: auto;
-  display: flex;
-
-  .bp3-switch {
-    margin: auto;
-  }
-`;
-
 const ModulePermissionBodyRoot = styled.div``;
 
 const ModulePermissionsTableRoot = styled.table`
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/utils.js b/src/containers/Preferences/Users/Roles/RolesForm/utils.js
index 881d0c126..d4c4ea81d 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/utils.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/utils.js
@@ -1,3 +1,20 @@
+import { chain } from 'lodash';
+import * as R from 'ramda';
+import {
+  getPermissionsSchemaService,
+  getPermissionsSchemaServices,
+} from 'common/permissionsSchema';
+
+export const FULL_ACCESS_CHECKBOX_STATE = {
+  INDETARMINE: -1,
+  ON: true,
+  OFF: false,
+};
+
+/**
+ * Transformes the permissions object to array.
+ * @returns
+ */
 export const transformToArray = ({ permissions }) => {
   return Object.keys(permissions).map((index) => {
     const [value, key] = index.split('/');
@@ -10,6 +27,20 @@ export const transformToArray = ({ permissions }) => {
   });
 };
 
+function transformPermissions(permissions) {
+  return Object.keys(permissions).map((permissionKey) => {
+    const [subject, key] = permissionKey.split('/');
+    const value = permissions[permissionKey];
+
+    return { key, subject, value };
+  });
+}
+
+/**
+ * Transformes permissions array to object.
+ * @param {*} permissions -
+ * @returns
+ */
 export const transformPermissionsToObject = (permissions) => {
   const output = {};
   permissions.forEach((item) => {
@@ -18,6 +49,11 @@ export const transformPermissionsToObject = (permissions) => {
   return output;
 };
 
+/**
+ *
+ * @param {*} role
+ * @returns
+ */
 export const transformToObject = (role) => {
   return {
     role_name: role.name,
@@ -44,22 +80,162 @@ export const getDefaultValuesFromSchema = (schema) => {
     .flat();
 };
 
+/**
+ * Retrieve initial values of full access services.
+ * @param {*} formPermissions
+ * @returns
+ */
+export const getInitialServicesFullAccess = (formPermissions) => {
+  const services = getPermissionsSchemaServices();
+
+  return chain(services)
+    .map((service) => {
+      const { subject } = service;
+      const isFullChecked = isServiceFullChecked(subject, formPermissions);
+      const isFullUnchecked = isServiceFullUnchecked(subject, formPermissions);
+      const value = detarmineCheckboxState(isFullChecked, isFullUnchecked);
+
+      return [service.subject, value];
+    })
+    .fromPairs()
+    .value();
+};
+
+/**
+ *
+ * @param {*} schema
+ * @returns
+ */
 export const getNewRoleInitialValues = (schema) => {
+  const permissions = transformPermissionsToObject(
+    getDefaultValuesFromSchema(schema),
+  );
+  const serviceFullAccess = getInitialServicesFullAccess(permissions);
+
   return {
-    permissions: transformPermissionsToObject(
-      getDefaultValuesFromSchema(schema),
-    ),
+    permissions,
+    serviceFullAccess,
   };
 };
 
+/**
+ *
+ * @param {*} service
+ * @param {*} columnKey
+ * @returns
+ */
 export function getSerivceColumnPermission(service, columnKey) {
   return service.permissions.find((permission) => {
     return permission.relatedColumn === columnKey;
   });
 }
 
+/**
+ *
+ * @param {*} service
+ * @returns
+ */
 export function getServiceExtraPermissions(service) {
   return service.permissions.filter((permission) => {
     return !permission.relatedColumn;
   });
 }
+
+/**
+ * Detarmines the given service subject is full permissions checked.
+ */
+export function isServiceFullChecked(subject, permissions) {
+  const serviceSchema = getPermissionsSchemaService(subject);
+
+  return serviceSchema.permissions.every(
+    (permission) => permissions[`${subject}/${permission.key}`],
+  );
+}
+
+/**
+ * Detarmines the given service subject is fully associated permissions unchecked.
+ * @param {string} subject -
+ * @param {Object} permissionsMap -
+ */
+export function isServiceFullUnchecked(subject, permissionsMap) {
+  const serviceSchema = getPermissionsSchemaService(subject);
+
+  return serviceSchema.permissions.every(
+    (permission) => !permissionsMap[`${subject}/${permission.key}`],
+  );
+}
+
+/**
+ * Handles permission checkbox change.
+ */
+export const handleCheckboxPermissionChange = R.curry(
+  (form, permission, service, event) => {
+    const { subject } = service;
+    const isChecked = event.currentTarget.checked;
+    const newValues = {
+      ...form.values,
+      permissions: {
+        ...form.values.permissions,
+        [`${subject}/${permission.key}`]: isChecked,
+      },
+    };
+    const isFullChecked = isServiceFullChecked(subject, newValues.permissions);
+    const isFullUnchecked = isServiceFullUnchecked(
+      subject,
+      newValues.permissions,
+    );
+    form.setFieldValue(`permissions.${subject}/${permission.key}`, isChecked);
+    form.setFieldValue(
+      `serviceFullAccess.${subject}`,
+      detarmineCheckboxState(isFullChecked, isFullUnchecked),
+    );
+  },
+);
+
+/**
+ * Detarmines the permission checkbox state.
+ * @param {boolean} isFullChecked
+ * @param {boolean} isFullUnchecked
+ * @returns {FULL_ACCESS_CHECKBOX_STATE}
+ */
+function detarmineCheckboxState(isFullChecked, isFullUnchecked) {
+  return isFullChecked
+    ? FULL_ACCESS_CHECKBOX_STATE.ON
+    : isFullUnchecked
+    ? FULL_ACCESS_CHECKBOX_STATE.OFF
+    : FULL_ACCESS_CHECKBOX_STATE.INDETARMINE;
+}
+
+/**
+ * Retreive the service all permissions paths.
+ * @param {string} subject
+ * @returns {string[]}
+ */
+export function getServiceAllPermissionsPaths(subject) {
+  const service = getPermissionsSchemaService(subject);
+
+  return service.permissions.map(
+    (perm) => `permissions.${subject}/${perm.key}`,
+  );
+}
+
+/**
+ * Handle full access service checkbox change.
+ */
+export const handleCheckboxFullAccessChange = R.curry(
+  (service, form, event) => {
+    const isChecked = event.currentTarget.checked;
+    const permsPaths = getServiceAllPermissionsPaths(service.subject);
+
+    form.setFieldValue(`serviceFullAccess.${service.subject}`, isChecked);
+
+    permsPaths.forEach((permissionPath) => {
+      form.setFieldValue(
+        permissionPath,
+        isChecked
+          ? FULL_ACCESS_CHECKBOX_STATE.ON
+          : FULL_ACCESS_CHECKBOX_STATE.OFF,
+      );
+    });
+  },
+);
diff --git a/src/hooks/utils/index.js b/src/hooks/utils/index.js
index 5d189d42e..ba26d0fa2 100644
--- a/src/hooks/utils/index.js
+++ b/src/hooks/utils/index.js
@@ -6,4 +6,6 @@ export * from './useWhen';
 export * from './useRequestPdf';
 export * from './useAsync';
 export * from './useIntersectionObserver';
-export * from './useAbilityContext';
\ No newline at end of file
+export * from './useAbilityContext';
+export * from './useCustomCompareEffect';
+export * from './useDeepCompareEffect';
diff --git a/src/hooks/utils/useCustomCompareEffect.ts b/src/hooks/utils/useCustomCompareEffect.ts
new file mode 100644
index 000000000..c67e6488a
--- /dev/null
+++ b/src/hooks/utils/useCustomCompareEffect.ts
@@ -0,0 +1,44 @@
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
+
+const isPrimitive = (val: any) => val !== Object(val);
+
+type DepsEqualFnType<TDeps extends DependencyList> = (
+  prevDeps: TDeps,
+  nextDeps: TDeps,
+) => boolean;
+
+const useCustomCompareEffect = <TDeps extends DependencyList>(
+  effect: EffectCallback,
+  deps: TDeps,
+  depsEqual: DepsEqualFnType<TDeps>,
+) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!(deps instanceof Array) || !deps.length) {
+      console.warn(
+        '`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.',
+      );
+    }
+
+    if (deps.every(isPrimitive)) {
+      console.warn(
+        '`useCustomCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.',
+      );
+    }
+
+    if (typeof depsEqual !== 'function') {
+      console.warn(
+        '`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list',
+      );
+    }
+  }
+
+  const ref = useRef<TDeps | undefined>(undefined);
+
+  if (!ref.current || !depsEqual(deps, ref.current)) {
+    ref.current = deps;
+  }
+
+  useEffect(effect, ref.current);
+};
+
+export { useCustomCompareEffect };
diff --git a/src/hooks/utils/useDeepCompareEffect.ts b/src/hooks/utils/useDeepCompareEffect.ts
new file mode 100644
index 000000000..8504cc09f
--- /dev/null
+++ b/src/hooks/utils/useDeepCompareEffect.ts
@@ -0,0 +1,24 @@
+import { DependencyList, EffectCallback } from 'react';
+import isDeepEqualReact from 'fast-deep-equal/react';
+import { useCustomCompareEffect } from './useCustomCompareEffect';
+
+const isPrimitive = (val: any) => val !== Object(val);
+
+const useDeepCompareEffect = (effect: EffectCallback, deps: DependencyList) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!(deps instanceof Array) || !deps.length) {
+      console.warn(
+        '`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.',
+      );
+    }
+
+    if (deps.every(isPrimitive)) {
+      console.warn(
+        '`useDeepCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.',
+      );
+    }
+  }
+  useCustomCompareEffect(effect, deps, isDeepEqualReact);
+};
+
+export { useDeepCompareEffect };