From 8c9a19d223c1bcd3c570d2f4e8f0374e5e169ab2 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 17 Aug 2024 21:45:55 +0800
Subject: [PATCH] implemented all permission locks in UI

---
 addon/components/modals/group-form.hbs        |  7 +-
 addon/components/modals/policy-form.hbs       |  4 +-
 addon/components/modals/role-form.hbs         |  7 +-
 addon/components/modals/user-form.hbs         | 22 +++--
 addon/components/permission-picker.hbs        |  7 +-
 addon/components/permission-picker.js         |  2 +-
 addon/components/policy-attacher.hbs          |  5 +-
 addon/components/table/cell/user-name.hbs     |  2 +-
 addon/components/widget/iam-metrics.hbs       | 19 ++++
 addon/components/widget/iam-metrics.js        | 49 ++++++++++
 addon/controllers/groups/index.js             | 89 ++++++-----------
 addon/controllers/policies/index.js           | 85 ++++++----------
 addon/controllers/roles/index.js              | 84 ++++++----------
 addon/controllers/users/index.js              | 96 +++++++------------
 addon/engine.js                               | 14 +++
 addon/templates/application.hbs               |  8 +-
 addon/templates/groups/index.hbs              |  8 +-
 addon/templates/home.hbs                      |  9 +-
 addon/templates/policies/index.hbs            |  6 +-
 addon/templates/roles/index.hbs               |  6 +-
 addon/templates/users/index.hbs               |  8 +-
 app/components/widget/iam-metrics.js          |  1 +
 index.js                                      |  1 +
 .../components/widget/iam-metrics-test.js     | 26 +++++
 translations/en-us.yaml                       |  8 +-
 25 files changed, 298 insertions(+), 275 deletions(-)
 create mode 100644 addon/components/widget/iam-metrics.hbs
 create mode 100644 addon/components/widget/iam-metrics.js
 create mode 100644 app/components/widget/iam-metrics.js
 create mode 100644 tests/integration/components/widget/iam-metrics-test.js

diff --git a/addon/components/modals/group-form.hbs b/addon/components/modals/group-form.hbs
index f683010..3947b95 100644
--- a/addon/components/modals/group-form.hbs
+++ b/addon/components/modals/group-form.hbs
@@ -5,13 +5,13 @@
                 <label>
                     {{t "iam.components.modals.group-form.group-name"}}
                 </label>
-                <Input @value={{@options.group.name}} @type="text" class="w-full form-input" placeholder={{t "iam.components.modals.group-form.group-name"}} />
+                <Input @value={{@options.group.name}} @type="text" class="w-full form-input" placeholder={{t "iam.components.modals.group-form.group-name"}} disabled={{cannot @options.formPermission}} />
             </div>
             <div class="input-group">
                 <label>
                     {{t "iam.components.modals.group-form.group-description"}}
                 </label>
-                <Textarea @value={{@options.group.description}} rows="5" class="w-full form-input" placeholder={{t "iam.components.modals.group-form.group-description"}} />
+                <Textarea @value={{@options.group.description}} rows="5" class="w-full form-input" placeholder={{t "iam.components.modals.group-form.group-description"}} disabled={{cannot @options.formPermission}} />
             </div>
 
             <div class="input-group">
@@ -32,6 +32,7 @@
                             @infiniteScroll={{false}}
                             @renderInPlace={{true}}
                             @onChange={{@options.addUser}}
+                            @disabled={{cannot @options.formPermission}}
                             as |model|
                         >
                             {{model.name}}
@@ -46,7 +47,7 @@
                                     {{user.name}}
                                 </span>
                                 <span>
-                                    <a href="javascript:;" class="text-blue-300 no-underline hover:text-blue-500" {{on "click" (fn @options.removeUser user)}}>
+                                    <a href="javascript:;" class="text-blue-300 no-underline hover:text-blue-500" {{on "click" (fn @options.removeUser user)}} disabled={{cannot @options.formPermission}}>
                                         <FaIcon @icon="times" @prefix="fas" />
                                     </a>
                                 </span>
diff --git a/addon/components/modals/policy-form.hbs b/addon/components/modals/policy-form.hbs
index 11df10c..a1bd8a1 100644
--- a/addon/components/modals/policy-form.hbs
+++ b/addon/components/modals/policy-form.hbs
@@ -4,14 +4,16 @@
             @value={{@options.policy.name}}
             @name={{t "iam.components.modals.policy-form.policy-name"}}
             @placeholder={{t "iam.components.modals.policy-form.enter-name-your-policy"}}
+            @disabled={{cannot @options.formPermission}}
         />
         <InputGroup
             @value={{@options.policy.description}}
             @name={{t "iam.components.modals.policy-form.policy-description"}}
             @placeholder={{t "iam.components.modals.policy-form.enter-description-your-policy"}}
+            @disabled={{cannot @options.formPermission}}
         />
         <InputGroup @name={{t "iam.components.modals.policy-form.select-permissions"}}>
-            <PermissionPicker @selected={{@options.policy.permissions}} @onChange={{fn (mut @options.policy.permissions)}} />
+            <PermissionPicker @selected={{@options.policy.permissions}} @onChange={{fn (mut @options.policy.permissions)}} @disabled={{cannot @options.formPermission}} />
         </InputGroup>
     </div>
 </Modal::Default>
\ No newline at end of file
diff --git a/addon/components/modals/role-form.hbs b/addon/components/modals/role-form.hbs
index 8a7cfc5..c9ecaf0 100644
--- a/addon/components/modals/role-form.hbs
+++ b/addon/components/modals/role-form.hbs
@@ -1,16 +1,17 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container" ...attributes>
-        <InputGroup @name={{t "iam.components.modals.role-form.role-name"}} @value={{@options.role.name}} @placeholder={{t "iam.components.modals.role-form.enter-name-for-this-role"}} />
+        <InputGroup @name={{t "iam.components.modals.role-form.role-name"}} @value={{@options.role.name}} @placeholder={{t "iam.components.modals.role-form.enter-name-for-this-role"}} @disabled={{cannot @options.formPermission}} />
         <InputGroup
             @name={{t "iam.components.modals.role-form.role-description"}}
             @value={{@options.role.description}}
             @placeholder={{t "iam.components.modals.role-form.enter-description-your-role"}}
+            @disabled={{cannot @options.formPermission}}
         />
         <InputGroup @name={{t "iam.common.attach-policies"}}>
-            <PolicyAttacher @onChange={{fn (mut @options.role.policies)}} @value={{@options.role.policies}} />
+            <PolicyAttacher @onChange={{fn (mut @options.role.policies)}} @value={{@options.role.policies}} @disabled={{cannot @options.formPermission}} />
         </InputGroup>
         <InputGroup @name={{t "iam.components.modals.role-form.select-permission"}}>
-            <PermissionPicker @selected={{@options.role.permissionsArray}} @onChange={{@options.setPermissions}} />
+            <PermissionPicker @selected={{@options.role.permissionsArray}} @onChange={{@options.setPermissions}} @disabled={{cannot @options.formPermission}} />
         </InputGroup>
     </div>
 </Modal::Default>
\ No newline at end of file
diff --git a/addon/components/modals/user-form.hbs b/addon/components/modals/user-form.hbs
index 77c7495..d55ce27 100644
--- a/addon/components/modals/user-form.hbs
+++ b/addon/components/modals/user-form.hbs
@@ -3,20 +3,21 @@
         <div class="flex">
             <div class="w-32 mb-6 mr-6">
                 <Image src={{@options.user.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{@options.user.name}} height="128" width="128" class="h-32 w-32 rounded-md" />
-                <UploadButton @name={{t "iam.common.photo"}} @accept="image/*" @onFileAdded={{@options.uploadNewPhoto}} class="w-32" />
+                <UploadButton @name={{t "iam.common.photo"}} @accept="image/*" @onFileAdded={{@options.uploadNewPhoto}} @disabled={{cannot @options.formPermission}} class="w-32" />
             </div>
             <div class="flex-1">
                 <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100 mb-2">
-                    <InputGroup @name={{t "iam.common.name"}} @value={{@options.user.name}} />
-                    <InputGroup @name={{t "iam.common.email"}} @type="email" @value={{@options.user.email}} />
+                    <InputGroup @name={{t "iam.common.name"}} @value={{@options.user.name}} @disabled={{cannot @options.formPermission}} />
+                    <InputGroup @name={{t "iam.common.email"}} @type="email" @value={{@options.user.email}} @disabled={{cannot @options.formPermission}} />
                     <InputGroup @name={{t "iam.common.phone"}}>
-                        <PhoneInput @value={{@options.user.phone}} @onInput={{fn (mut @options.user.phone)}} class="form-input w-full" />
+                        <PhoneInput @value={{@options.user.phone}} @onInput={{fn (mut @options.user.phone)}} disabled={{cannot @options.formPermission}} class="form-input w-full" />
                     </InputGroup>
                     <InputGroup @name={{t "iam.common.country"}}>
                         <CountrySelect
                             class="w-full form-input form-select form-datalist"
                             @value={{@options.user.country}}
                             @onChange={{fn (mut @options.user.country)}}
+                            @disabled={{cannot @options.formPermission}}
                             placeholder={{t "iam.common.country"}}
                         />
                     </InputGroup>
@@ -29,17 +30,20 @@
                             @infiniteScroll={{false}}
                             @renderInPlace={{true}}
                             @onChange={{fn (mut @options.user.role)}}
+                            @disabled={{cannot @options.formPermission}}
                             as |model|
                         >
                             {{model.name}}
                         </ModelSelect>
                     </InputGroup>
                 </div>
-                <div>
-                    <InputGroup @name={{t "iam.common.select-permissions"}}>
-                        <PermissionPicker @selected={{@options.user.permissions}} @onChange={{fn (mut @options.user.permissions)}} />
-                    </InputGroup>
-                </div>
+                {{#if (can @options.formPermission)}}
+                    <div>
+                        <InputGroup @name={{t "iam.common.select-permissions"}}>
+                            <PermissionPicker @selected={{@options.user.permissions}} @onChange={{fn (mut @options.user.permissions)}} />
+                        </InputGroup>
+                    </div>
+                {{/if}}
             </div>
         </div>
     </div>
diff --git a/addon/components/permission-picker.hbs b/addon/components/permission-picker.hbs
index 224c28f..8e5a8e9 100644
--- a/addon/components/permission-picker.hbs
+++ b/addon/components/permission-picker.hbs
@@ -7,6 +7,7 @@
                     {{on "input" (perform this.search)}}
                     placeholder={{t "iam.components.permission-picker.search-permissions-keyword"}}
                     class="w-64 form-input form-input-sm"
+                    disabled={{@disabled}}
                 />
             </div>
             <div>
@@ -26,7 +27,7 @@
         <div class="w-full dark:bg-gray-800">
             <div class="grid grid-cols-12 text-xs px-3 py-1.5 font-bold text-sm text-gray-800 dark:text-gray-100 border-b border-gray-200 dark:border-gray-900 shadow">
                 <div class="flex items-center">
-                    <Checkbox @value={{this.allSelected}} @onToggle={{this.selectAll}} @disabled={{not this.permissions}} />
+                    <Checkbox @value={{this.allSelected}} @onToggle={{this.selectAll}} @disabled={{or @disabled (not this.permissions)}} />
                 </div>
                 <div class="col-span-5 flex items-center">{{t "iam.common.permission"}}</div>
                 <div class="col-span-6 flex items-center">{{t "iam.common.description"}}</div>
@@ -42,9 +43,9 @@
                 </div>
             {{/unless}}
             {{#each this.permissions as |permission|}}
-                <div class="grid grid-cols-12 text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100">
+                <div class="grid grid-cols-12 text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100 {{if @disabled 'opacity-50'}}">
                     <div class="flex items-center">
-                        <Checkbox @value={{permission.selected}} @onToggle={{fn this.selectPermission permission}} />
+                        <Checkbox @value={{permission.selected}} @onToggle={{fn this.selectPermission permission}} @disabled={{@disabled}} />
                     </div>
                     <div class="col-span-5 flex items-center truncate">{{permission.name}}</div>
                     <div class="col-span-6 flex items-center truncate text-xs">{{permission.description}}</div>
diff --git a/addon/components/permission-picker.js b/addon/components/permission-picker.js
index c1764d8..3e398ad 100644
--- a/addon/components/permission-picker.js
+++ b/addon/components/permission-picker.js
@@ -4,7 +4,7 @@ import { inject as service } from '@ember/service';
 import { action, computed } from '@ember/object';
 import { isArray } from '@ember/array';
 import { isBlank } from '@ember/utils';
-import { task } from 'ember-concurrency-decorators';
+import { task } from 'ember-concurrency';
 
 export default class PermissionPickerComponent extends Component {
     /**
diff --git a/addon/components/policy-attacher.hbs b/addon/components/policy-attacher.hbs
index 96bdc20..dcf3c88 100644
--- a/addon/components/policy-attacher.hbs
+++ b/addon/components/policy-attacher.hbs
@@ -8,17 +8,18 @@
         @renderInPlace={{true}}
         @onChange={{this.selectPolicy}}
         @query={{hash sort="name"}}
+        @disabled={{@disabled}}
         as |model|
     >
         {{model.name}}
     </ModelSelect>
 
     {{#if this.selected}}
-        <div class="flex flex-row bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm p-2 mt-4 space-x-2">
+        <div class="flex flex-row bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm p-2 mt-4 space-x-2 {{if @disabled 'opacity-50'}}">
             {{#each this.selected as |policy|}}
                 <Badge @hideStatusDot={{true}} @status="info" class="flex flex-row items-center">
                     <div class="mr-2">{{policy.name}}</div>
-                    <Button @icon="trash" @size="xs" @type="link" @onClick={{fn this.removePolicy policy}} class="hover:opacity-50" />
+                    <Button @icon="trash" @size="xs" @type="link" @onClick={{fn this.removePolicy policy}} @disabled={{@disabled}} class="hover:opacity-50" />
                 </Badge>
             {{/each}}
         </div>
diff --git a/addon/components/table/cell/user-name.hbs b/addon/components/table/cell/user-name.hbs
index 4559368..6ab2abe 100644
--- a/addon/components/table/cell/user-name.hbs
+++ b/addon/components/table/cell/user-name.hbs
@@ -1,7 +1,7 @@
 <div class="relative flex items-center">
     <img src={{@row.avatar_url}} alt={{@row.name}} class="w-6 h-6 rounded-md {{if @column.hasOnline 'mx-2' 'mr-2'}}" />
     <span class="relative block">
-        <a href="javascript:;" class="relative block" {{on "click" this.onClick}}>
+        <a href="javascript:;" class="relative block" {{on "click" this.onClick}} disabled={{and @column.permission (cannot @column.permission)}}>
             {{#if (has-block)}}
                 {{yield}}
             {{else}}
diff --git a/addon/components/widget/iam-metrics.hbs b/addon/components/widget/iam-metrics.hbs
new file mode 100644
index 0000000..aeb411b
--- /dev/null
+++ b/addon/components/widget/iam-metrics.hbs
@@ -0,0 +1,19 @@
+<div class="iam-metrics" ...attributes>
+    <div class="flex flex-col">
+        <div class="flex flex-row items-center justify-between px-4 py-2 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-lg shadow-sm">
+            <span class="text-base font-bold text-black dark:text-gray-100">{{t "iam.components.widget.metrics.title"}}</span>
+        </div>
+
+        <div class="mt-4">
+            {{#if this.getIamMetrics.isRunning}}
+                <Spinner />
+            {{else}}
+                <div class="grid grid-cols-2 lg:grid-cols-8 gap-4">
+                    {{#each-in this.metrics as |title count|}}
+                        <Widget::Count @title={{smart-humanize title}} @value={{count}} class="lg:col-span-2 h-full" />
+                    {{/each-in}}
+                </div>
+            {{/if}}
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/addon/components/widget/iam-metrics.js b/addon/components/widget/iam-metrics.js
new file mode 100644
index 0000000..f2a4000
--- /dev/null
+++ b/addon/components/widget/iam-metrics.js
@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class WidgetIamMetricsComponent extends Component {
+    /**
+     * The widget ID to use for registering.
+     *
+     * @memberof WidgetIamMetricsComponent
+     */
+    static widgetId = 'iam-metrics-widget';
+
+    /**
+     * Inject the fetch service.
+     *
+     * @memberof WidgetKeyMetricsComponent
+     */
+    @service fetch;
+
+    /**
+     * Property for loading metrics to.
+     *
+     * @memberof WidgetKeyMetricsComponent
+     */
+    @tracked metrics = {};
+
+    /**
+     * Creates an instance of WidgetKeyMetricsComponent.
+     * @memberof WidgetKeyMetricsComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.getIamMetrics.perform();
+    }
+
+    /**
+     * Task which fetches key metrics.
+     *
+     * @memberof WidgetKeyMetricsComponent
+     */
+    @task *getIamMetrics() {
+        try {
+            this.metrics = yield this.fetch.get('metrics/iam');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}
diff --git a/addon/controllers/groups/index.js b/addon/controllers/groups/index.js
index 0095894..d25c7a5 100644
--- a/addon/controllers/groups/index.js
+++ b/addon/controllers/groups/index.js
@@ -3,73 +3,20 @@ import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { isBlank } from '@ember/utils';
-import { timeout } from 'ember-concurrency';
-import { task } from 'ember-concurrency-decorators';
+import { timeout, task } from 'ember-concurrency';
 import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
 
 export default class GroupsIndexController extends Controller {
-    /**
-     * Inject the `UsersIndexController` controller
-     *
-     * @memberof GroupsIndexController
-     */
     @controller('users.index') usersIndexController;
-
-    /**
-     * Inject the `store` service
-     *
-     * @var {Service}
-     */
     @service store;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @var {Service}
-     */
     @service intl;
-
-    /**
-     * Inject the `notifications` service
-     *
-     * @var {Service}
-     */
     @service notifications;
-
-    /**
-     * Inject the `currentUser` service
-     *
-     * @var {Service}
-     */
     @service currentUser;
-
-    /**
-     * Inject the `modalsManager` service
-     *
-     * @var {Service}
-     */
     @service modalsManager;
-
-    /**
-     * Inject the `hostRouter` service
-     *
-     * @var {Service}
-     */
     @service hostRouter;
-
-    /**
-     * Inject the `crud` service
-     *
-     * @var {Service}
-     */
     @service crud;
-
-    /**
-     * Inject the `fetch` service
-     *
-     * @var {Service}
-     */
     @service fetch;
+    @service abilities;
 
     /**
      * Queryable parameters for this controller's model
@@ -116,6 +63,7 @@ export default class GroupsIndexController extends Controller {
             label: this.intl.t('iam.common.name'),
             valuePath: 'name',
             cellComponent: 'table/cell/anchor',
+            permission: 'iam view group',
             onClick: this.editGroup,
             width: '20%',
             sortable: false,
@@ -150,7 +98,7 @@ export default class GroupsIndexController extends Controller {
             ddButtonText: false,
             ddButtonIcon: 'ellipsis-h',
             ddButtonIconPrefix: 'fas',
-            ddMenuLabel: 'Contact Actions',
+            ddMenuLabel: this.intl.t('iam.groups.index.group-actions'),
             cellClassNames: 'overflow-visible',
             wrapperClass: 'flex items-center justify-end mx-2',
             width: '10%',
@@ -158,11 +106,13 @@ export default class GroupsIndexController extends Controller {
                 {
                     label: this.intl.t('iam.groups.index.edit-group'),
                     fn: this.editGroup,
+                    permission: 'iam view group',
                 },
                 {
                     label: this.intl.t('iam.groups.index.delete-group-label'),
                     fn: this.deleteGroup,
                     className: 'text-red-700 hover:text-red-800',
+                    permission: 'iam delete group',
                 },
             ],
         },
@@ -225,19 +175,31 @@ export default class GroupsIndexController extends Controller {
      * @void
      */
     @action createGroup() {
+        const formPermission = 'iam create group';
         const group = this.store.createRecord('group', { users: [] });
 
         this.editGroup(group, {
             title: this.intl.t('iam.groups.index.new-group'),
             acceptButtonText: this.intl.t('common.confirm'),
             acceptButtonIcon: 'check',
+            acceptButtonDisabled: this.abilities.cannot(formPermission),
+            acceptButtonHelpText: this.abilities.cannot(formPermission) ? this.intl.t('common.unauthorized') : null,
+            formPermission,
             group,
-            confirm: (modal) => {
+            confirm: async (modal) => {
                 modal.startLoading();
-                return group.save().then(() => {
+
+                if (this.abilities.cannot(formPermission)) {
+                    return this.notifications.warning(this.intl.t('common.permissions-required-for-changes'));
+                }
+                try {
+                    await group.save();
                     this.notifications.success(this.intl.t('iam.groups.index.new-group-created'));
                     return this.hostRouter.refresh();
-                });
+                } catch (error) {
+                    this.notifications.serverError(error);
+                    modal.stopLoading();
+                }
             },
         });
     }
@@ -248,10 +210,14 @@ export default class GroupsIndexController extends Controller {
      * @void
      */
     @action editGroup(group, options = {}) {
+        const formPermission = 'iam update group';
         this.modalsManager.show('modals/group-form', {
             title: this.intl.t('iam.groups.index.edit-group-title'),
             acceptButtonText: this.intl.t('common.save-changes'),
             acceptButtonIcon: 'save',
+            acceptButtonDisabled: this.abilities.cannot(formPermission),
+            acceptButtonHelpText: this.abilities.cannot(formPermission) ? this.intl.t('common.unauthorized') : null,
+            formPermission,
             group,
             lastSelectedUser: null,
             removeUser: (user) => {
@@ -263,6 +229,11 @@ export default class GroupsIndexController extends Controller {
             },
             confirm: async (modal) => {
                 modal.startLoading();
+
+                if (this.abilities.cannot(formPermission)) {
+                    return this.notifications.warning(this.intl.t('common.permissions-required-for-changes'));
+                }
+
                 try {
                     await group.save();
                     this.notifications.success(this.intl.t('iam.groups.index.changes-group-save'));
diff --git a/addon/controllers/policies/index.js b/addon/controllers/policies/index.js
index 0fcc0ff..b5dc535 100644
--- a/addon/controllers/policies/index.js
+++ b/addon/controllers/policies/index.js
@@ -3,65 +3,18 @@ import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { isBlank } from '@ember/utils';
-import { timeout } from 'ember-concurrency';
-import { task } from 'ember-concurrency-decorators';
+import { timeout, task } from 'ember-concurrency';
 
 export default class PoliciesIndexController extends Controller {
-    /**
-     * Inject the `store` service
-     *
-     * @var {Service}
-     */
     @service store;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @var {Service}
-     */
     @service intl;
-
-    /**
-     * Inject the `notifications` service
-     *
-     * @var {Service}
-     */
     @service notifications;
-
-    /**
-     * Inject the `currentUser` service
-     *
-     * @var {Service}
-     */
     @service currentUser;
-
-    /**
-     * Inject the `modalsManager` service
-     *
-     * @var {Service}
-     */
     @service modalsManager;
-
-    /**
-     * Inject the `hostRouter` service
-     *
-     * @var {Service}
-     */
     @service hostRouter;
-
-    /**
-     * Inject the `crud` service
-     *
-     * @var {Service}
-     */
     @service crud;
-
-    /**
-     * Inject the `fetch` service
-     *
-     * @var {Service}
-     */
     @service fetch;
+    @service abilities;
 
     /**
      * Queryable parameters for this controller's model
@@ -108,6 +61,7 @@ export default class PoliciesIndexController extends Controller {
             label: this.intl.t('iam.common.name'),
             valuePath: 'name',
             cellComponent: 'table/cell/anchor',
+            permission: 'iam view policy',
             onClick: this.editPolicy,
             width: '20%',
             sortable: false,
@@ -138,7 +92,7 @@ export default class PoliciesIndexController extends Controller {
             ddButtonText: false,
             ddButtonIcon: 'ellipsis-h',
             ddButtonIconPrefix: 'fas',
-            ddMenuLabel: this.intl.t('iam.policies.index.contact-action'),
+            ddMenuLabel: this.intl.t('iam.policies.index.policy-actions'),
             cellClassNames: 'overflow-visible',
             wrapperClass: 'flex items-center justify-end mx-2',
             width: '10%',
@@ -146,11 +100,13 @@ export default class PoliciesIndexController extends Controller {
                 {
                     label: this.intl.t('iam.policies.index.edit-policy'),
                     fn: this.editPolicy,
+                    permission: 'iam view policy',
                 },
                 {
                     label: this.intl.t('iam.policies.index.delete-policy'),
                     fn: this.deletePolicy,
                     className: 'text-red-700 hover:text-red-800',
+                    permission: 'iam delete policy',
                 },
             ],
         },
@@ -204,6 +160,7 @@ export default class PoliciesIndexController extends Controller {
      * @void
      */
     @action createPolicy() {
+        const formPermission = 'iam create policy';
         const policy = this.store.createRecord('policy', {
             is_mutable: true,
             is_deletable: true,
@@ -213,12 +170,24 @@ export default class PoliciesIndexController extends Controller {
             title: this.intl.t('iam.policies.index.new-policy'),
             acceptButtonText: this.intl.t('common.confirm'),
             acceptButtonIcon: 'check',
-            confirm: (modal) => {
+            acceptButtonDisabled: this.abilities.cannot(formPermission),
+            acceptButtonHelpText: this.abilities.cannot(formPermission) ? this.intl.t('common.unauthorized') : null,
+            formPermission,
+            confirm: async (modal) => {
                 modal.startLoading();
-                return policy.save().then(() => {
+
+                if (this.abilities.cannot(formPermission)) {
+                    return this.notifications.warning(this.intl.t('common.permissions-required-for-changes'));
+                }
+
+                try {
+                    await policy.save();
                     this.notifications.success(this.intl.t('iam.policies.index.new-policy-created'));
                     return this.hostRouter.refresh();
-                });
+                } catch (error) {
+                    this.notifications.serverError(error);
+                    modal.stopLoading();
+                }
             },
         });
     }
@@ -233,16 +202,24 @@ export default class PoliciesIndexController extends Controller {
     @action editPolicy(policy, options = {}) {
         if (!policy.is_mutable) {
             return this.viewPolicyPermissions(policy);
-            // return this.notifications.warning(this.intl.t('iam.policies.index.unable-changes-policy-warning', { policyType: policy.type }));
         }
 
+        const formPermission = 'iam update policy';
         this.modalsManager.show('modals/policy-form', {
             title: this.intl.t('iam.policies.index.edit-policy-title'),
             acceptButtonText: this.intl.t('common.save-changes'),
             acceptButtonIcon: 'save',
+            acceptButtonDisabled: this.abilities.cannot(formPermission),
+            acceptButtonHelpText: this.abilities.cannot(formPermission) ? this.intl.t('common.unauthorized') : null,
+            formPermission,
             policy,
             confirm: async (modal) => {
                 modal.startLoading();
+
+                if (this.abilities.cannot(formPermission)) {
+                    return this.notifications.warning(this.intl.t('common.permissions-required-for-changes'));
+                }
+
                 try {
                     await policy.save();
                     this.notifications.success(this.intl.t('iam.policies.index.changes-policy-saved-success'));
diff --git a/addon/controllers/roles/index.js b/addon/controllers/roles/index.js
index b3843cb..a2cbdda 100644
--- a/addon/controllers/roles/index.js
+++ b/addon/controllers/roles/index.js
@@ -3,65 +3,18 @@ import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { isBlank } from '@ember/utils';
-import { timeout } from 'ember-concurrency';
-import { task } from 'ember-concurrency-decorators';
+import { timeout, task } from 'ember-concurrency';
 
 export default class RolesIndexController extends Controller {
-    /**
-     * Inject the `store` service
-     *
-     * @var {Service}
-     */
     @service store;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @var {Service}
-     */
     @service intl;
-
-    /**
-     * Inject the `notifications` service
-     *
-     * @var {Service}
-     */
     @service notifications;
-
-    /**
-     * Inject the `currentUser` service
-     *
-     * @var {Service}
-     */
     @service currentUser;
-
-    /**
-     * Inject the `modalsManager` service
-     *
-     * @var {Service}
-     */
     @service modalsManager;
-
-    /**
-     * Inject the `hostRouter` service
-     *
-     * @var {Service}
-     */
     @service hostRouter;
-
-    /**
-     * Inject the `crud` service
-     *
-     * @var {Service}
-     */
     @service crud;
-
-    /**
-     * Inject the `fetch` service
-     *
-     * @var {Service}
-     */
     @service fetch;
+    @service abilities;
 
     /**
      * Queryable parameters for this controller's model
@@ -108,6 +61,7 @@ export default class RolesIndexController extends Controller {
             label: this.intl.t('iam.common.name'),
             valuePath: 'name',
             cellComponent: 'table/cell/anchor',
+            permission: 'iam view role',
             onClick: this.editRole,
             width: '30%',
             sortable: false,
@@ -132,7 +86,7 @@ export default class RolesIndexController extends Controller {
             ddButtonText: false,
             ddButtonIcon: 'ellipsis-h',
             ddButtonIconPrefix: 'fas',
-            ddMenuLabel: this.intl.t('iam.roles.index.contact-action'),
+            ddMenuLabel: this.intl.t('iam.roles.index.role-actions'),
             cellClassNames: 'overflow-visible',
             wrapperClass: 'flex items-center justify-end mx-2',
             width: '10%',
@@ -140,11 +94,13 @@ export default class RolesIndexController extends Controller {
                 {
                     label: this.intl.t('iam.roles.index.edit-role'),
                     fn: this.editRole,
+                    permission: 'iam view role',
                 },
                 {
                     label: this.intl.t('iam.roles.index.delete-role'),
                     fn: this.deleteRole,
                     className: 'text-red-700 hover:text-red-800',
+                    permission: 'iam delete role',
                 },
             ],
         },
@@ -198,18 +154,31 @@ export default class RolesIndexController extends Controller {
      * @void
      */
     @action createRole() {
+        const formPermission = 'iam create role';
         const role = this.store.createRecord('role');
 
         this.editRole(role, {
             title: this.intl.t('iam.roles.index.new-role'),
             acceptButtonText: this.intl.t('common.confirm'),
             acceptButtonIcon: 'check',
-            confirm: (modal) => {
+            acceptButtonDisabled: this.abilities.cannot(formPermission),
+            acceptButtonHelpText: this.abilities.cannot(formPermission) ? this.intl.t('common.unauthorized') : null,
+            formPermission,
+            confirm: async (modal) => {
                 modal.startLoading();
-                return role.save().then(() => {
+
+                if (this.abilities.cannot(formPermission)) {
+                    return this.notifications.warning(this.intl.t('common.permissions-required-for-changes'));
+                }
+
+                try {
+                    await role.save();
                     this.notifications.success(this.intl.t('iam.roles.index.new-role-create'));
                     return this.hostRouter.refresh();
-                });
+                } catch (error) {
+                    this.notifications.serverError(error);
+                    modal.stopLoading();
+                }
             },
         });
     }
@@ -220,16 +189,25 @@ export default class RolesIndexController extends Controller {
      * @void
      */
     @action editRole(role, options = {}) {
+        const formPermission = 'iam update role';
         this.modalsManager.show('modals/role-form', {
             title: this.intl.t('iam.roles.index.edit-role-title'),
             acceptButtonText: this.intl.t('common.save-changes'),
             acceptButtonIcon: 'save',
+            acceptButtonDisabled: this.abilities.cannot(formPermission),
+            acceptButtonHelpText: this.abilities.cannot(formPermission) ? this.intl.t('common.unauthorized') : null,
+            formPermission,
             role,
             setPermissions: (permissions) => {
                 role.permissions = permissions;
             },
             confirm: async (modal) => {
                 modal.startLoading();
+
+                if (this.abilities.cannot(formPermission)) {
+                    return this.notifications.warning(this.intl.t('common.permissions-required-for-changes'));
+                }
+
                 try {
                     await role.save();
                     this.notifications.success(this.intl.t('iam.roles.index.changes-role-save'));
diff --git a/addon/controllers/users/index.js b/addon/controllers/users/index.js
index 5d4206d..2633c29 100644
--- a/addon/controllers/users/index.js
+++ b/addon/controllers/users/index.js
@@ -3,65 +3,18 @@ import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { isBlank } from '@ember/utils';
-import { timeout } from 'ember-concurrency';
-import { task } from 'ember-concurrency-decorators';
+import { timeout, task } from 'ember-concurrency';
 
 export default class UsersIndexController extends Controller {
-    /**
-     * Inject the `store` service
-     *
-     * @var {Service}
-     */
     @service store;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @var {Service}
-     */
     @service intl;
-
-    /**
-     * Inject the `notifications` service
-     *
-     * @var {Service}
-     */
     @service notifications;
-
-    /**
-     * Inject the `currentUser` service
-     *
-     * @var {Service}
-     */
     @service currentUser;
-
-    /**
-     * Inject the `modalsManager` service
-     *
-     * @var {Service}
-     */
     @service modalsManager;
-
-    /**
-     * Inject the `hostRouter` service
-     *
-     * @var {Service}
-     */
     @service hostRouter;
-
-    /**
-     * Inject the `crud` service
-     *
-     * @var {Service}
-     */
     @service crud;
-
-    /**
-     * Inject the `fetch` service
-     *
-     * @var {Service}
-     */
     @service fetch;
+    @service abilities;
 
     /**
      * Queryable parameters for this controller's model
@@ -109,6 +62,7 @@ export default class UsersIndexController extends Controller {
             valuePath: 'name',
             width: '160px',
             cellComponent: 'table/cell/user-name',
+            permission: 'iam view user',
             mediaPath: 'avatar_url',
             action: this.editUser,
             resizable: true,
@@ -179,7 +133,7 @@ export default class UsersIndexController extends Controller {
             ddButtonText: false,
             ddButtonIcon: 'ellipsis-h',
             ddButtonIconPrefix: 'fas',
-            ddMenuLabel: this.intl.t('iam.users.index.contact-action'),
+            ddMenuLabel: this.intl.t('iam.users.index.user-actions'),
             cellClassNames: 'overflow-visible',
             wrapperClass: 'flex items-center justify-end mx-2',
             width: '10%',
@@ -187,28 +141,33 @@ export default class UsersIndexController extends Controller {
                 {
                     label: this.intl.t('iam.users.index.edit-user'),
                     fn: this.editUser,
+                    permission: 'iam view user',
                 },
                 {
                     label: this.intl.t('iam.users.index.re-send-invitation'),
                     fn: this.resendInvitation,
+                    permission: 'iam update user',
                     isVisible: (user) => user.get('session_status') === 'pending',
                 },
                 {
                     label: this.intl.t('iam.users.index.deactivate-user'),
                     fn: this.deactivateUser,
                     className: 'text-danger',
+                    permission: 'iam deactivate user',
                     isVisible: (user) => user.get('session_status') === 'active',
                 },
                 {
                     label: this.intl.t('iam.users.index.activate-user'),
                     fn: this.activateUser,
                     className: 'text-danger',
+                    permission: 'iam activate user',
                     isVisible: (user) => user.get('session_status') === 'inactive' || (this.currentUser.user.is_admin && user.get('session_status') === 'pending'),
                 },
                 {
                     label: this.intl.t('iam.users.index.delete-user'),
                     fn: this.deleteUser,
                     className: 'text-danger',
+                    permission: 'iam delete user',
                 },
             ],
             sortable: false,
@@ -276,6 +235,7 @@ export default class UsersIndexController extends Controller {
      * @void
      */
     @action createUser() {
+        const formPermission = 'iam create user';
         const user = this.store.createRecord('user', {
             status: 'pending',
             type: 'user',
@@ -285,19 +245,24 @@ export default class UsersIndexController extends Controller {
             title: this.intl.t('iam.users.index.new-user'),
             acceptButtonText: this.intl.t('common.confirm'),
             acceptButtonIcon: 'check',
-            confirm: (modal) => {
+            acceptButtonDisabled: this.abilities.cannot(formPermission),
+            acceptButtonHelpText: this.abilities.cannot(formPermission) ? this.intl.t('common.unauthorized') : null,
+            formPermission,
+            confirm: async (modal) => {
                 modal.startLoading();
 
-                user.save()
-                    .then(() => {
-                        modal.done();
-                        this.notifications.success(this.intl.t('iam.users.index.user-invited-join-your-organization-success'));
-                        return this.hostRouter.refresh();
-                    })
-                    .catch((error) => {
-                        this.notifications.serverError(error);
-                        modal.stopLoading();
-                    });
+                if (this.abilities.cannot(formPermission)) {
+                    return this.notifications.warning(this.intl.t('common.permissions-required-for-changes'));
+                }
+
+                try {
+                    await user.save();
+                    this.notifications.success(this.intl.t('iam.users.index.user-changes-saved-success'));
+                    return this.hostRouter.refresh();
+                } catch (error) {
+                    this.notifications.serverError(error);
+                    modal.stopLoading();
+                }
             },
         });
     }
@@ -308,11 +273,15 @@ export default class UsersIndexController extends Controller {
      * @void
      */
     @action editUser(user, options = {}) {
+        const formPermission = 'iam update user';
         this.modalsManager.show('modals/user-form', {
             title: this.intl.t('iam.users.index.edit-user-title'),
             modalClass: 'modal-lg',
             acceptButtonText: this.intl.t('common.save-changes'),
             acceptButtonIcon: 'save',
+            acceptButtonDisabled: this.abilities.cannot(formPermission),
+            acceptButtonHelpText: this.abilities.cannot(formPermission) ? this.intl.t('common.unauthorized') : null,
+            formPermission,
             user,
             uploadNewPhoto: (file) => {
                 this.fetch.uploadFile.perform(
@@ -334,6 +303,11 @@ export default class UsersIndexController extends Controller {
             },
             confirm: async (modal) => {
                 modal.startLoading();
+
+                if (this.abilities.cannot(formPermission)) {
+                    return this.notifications.warning(this.intl.t('common.permissions-required-for-changes'));
+                }
+
                 try {
                     await user.save();
                     this.notifications.success(this.intl.t('iam.users.index.user-changes-saved-success'));
diff --git a/addon/engine.js b/addon/engine.js
index 61d6a06..cac33d6 100644
--- a/addon/engine.js
+++ b/addon/engine.js
@@ -3,6 +3,7 @@ import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 import config from './config/environment';
 import services from '@fleetbase/ember-core/exports/services';
+import WidgetIamMetricsComponent from './components/widget/iam-metrics';
 
 const { modulePrefix } = config;
 const externalRoutes = ['console', 'extensions'];
@@ -17,6 +18,19 @@ export default class IAMEngine extends Engine {
     setupExtension = function (app, engine, universe) {
         // register menu item in header
         universe.registerHeaderMenuItem('IAM', 'console.iam', { icon: 'shield-halved', priority: 3 });
+        // register metrics widget
+        const IamMetricsWidgetDefinition = {
+            widgetId: 'iam-metrics-widget',
+            name: 'IAM Metrics',
+            description: 'IAM usage metrics.',
+            icon: 'user-shield',
+            component: WidgetIamMetricsComponent,
+            grid_options: { w: 6, h: 8, minW: 6, minH: 8 },
+            options: {
+                title: 'IAM Metrics',
+            },
+        };
+        universe.registerDashboardWidgets([IamMetricsWidgetDefinition]);
     };
 }
 
diff --git a/addon/templates/application.hbs b/addon/templates/application.hbs
index a2e68e5..e7b927c 100644
--- a/addon/templates/application.hbs
+++ b/addon/templates/application.hbs
@@ -1,10 +1,10 @@
 <EmberWormhole @to="sidebar-menu-items">
     <Layout::Sidebar::Panel @open={{true}} @title={{t "iam.application.access-management"}}>
         <Layout::Sidebar::Item @route="console.iam.home" @icon="home">{{t "iam.common.dashboard"}}</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.iam.users" @icon="id-card">{{t "iam.common.user"}}</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.iam.groups" @icon="building">{{t "iam.common.group"}}</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.iam.roles" @icon="tag">{{t "iam.common.role"}}</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.iam.policies" @icon="shield">{{t "iam.common.policies"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.iam.users" @icon="id-card" @permission="iam list user">{{t "iam.common.user"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.iam.groups" @icon="building" @permission="iam list groups">{{t "iam.common.group"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.iam.roles" @icon="tag" @permission="iam list roles">{{t "iam.common.role"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.iam.policies" @icon="shield" @permission="iam list policies">{{t "iam.common.policies"}}</Layout::Sidebar::Item>
     </Layout::Sidebar::Panel>
 </EmberWormhole>
 
diff --git a/addon/templates/groups/index.hbs b/addon/templates/groups/index.hbs
index 8ce2549..2e747bc 100644
--- a/addon/templates/groups/index.hbs
+++ b/addon/templates/groups/index.hbs
@@ -1,6 +1,6 @@
-<Layout::Section::Header @title={{t "iam.common.group"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+<Layout::Section::Header @title={{t "iam.common.group"}} @searchQuery={{this.query}} @onSearch={{perform this.search}} @searchDisabled={{cannot "iam list group"}}>
     {{#if (safe-has this.table "selectedRows")}}
-        <DropdownButton @icon="layer-group" @text={{t "iam.common.bulk-action"}} @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+        <DropdownButton @icon="layer-group" @text={{t "iam.common.bulk-action"}} @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" @permission="iam delete group" as |dd|>
             <div class="next-dd-menu mt-2 mx-0">
                 <div class="px-1">
                     <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteGroups)}}>
@@ -10,8 +10,8 @@
             </div>
         </DropdownButton>
     {{/if}}
-    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text={{t "iam.common.new"}} class="mr-2" @onClick={{this.createGroup}} />
-    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text={{t "iam.common.export"}} @onClick={{this.exportGroups}} />
+    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text={{t "iam.common.new"}} class="mr-2" @onClick={{this.createGroup}} @permission="iam create group" />
+    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text={{t "iam.common.export"}} @onClick={{this.exportGroups}} @permission="iam export group" />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/addon/templates/home.hbs b/addon/templates/home.hbs
index cf0c9b9..7f752d1 100644
--- a/addon/templates/home.hbs
+++ b/addon/templates/home.hbs
@@ -1,13 +1,10 @@
 <Layout::Section::Header @title={{t "iam.home.identity-access-management"}} @hideActions={{true}} />
 
 <Layout::Section::Body>
-    <div class="container mx-auto h-screen" {{increase-height-by 800}}>
+    <div class="container mx-auto h-screen">
         <div class="max-w-3xl my-10 mx-auto space-y-6">
-            <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                {{#each-in @model as |key value|}}
-                    <StatWidget @title={{humanize key}} @value={{value}} />
-                {{/each-in}}
-            </div>
+            <Widget::IamMetrics />
         </div>
+        <Spacer @height="300px" />
     </div>
 </Layout::Section::Body>
\ No newline at end of file
diff --git a/addon/templates/policies/index.hbs b/addon/templates/policies/index.hbs
index a582a02..96e5c94 100644
--- a/addon/templates/policies/index.hbs
+++ b/addon/templates/policies/index.hbs
@@ -1,6 +1,6 @@
-<Layout::Section::Header @title={{t "iam.policies.index.title"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+<Layout::Section::Header @title={{t "iam.policies.index.title"}} @searchQuery={{this.query}} @onSearch={{perform this.search}} @searchDisabled={{cannot "iam list policy"}}>
     {{#if (safe-has this.table "selectedRows")}}
-        <DropdownButton @icon="layer-group" @text={{t "iam.common.bulk-action"}} @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+        <DropdownButton @icon="layer-group" @text={{t "iam.common.bulk-action"}} @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" @permission="iam delete policy" as |dd|>
             <div class="next-dd-menu mt-2 mx-0">
                 <div class="px-1">
                     <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeletePolicies)}}>
@@ -10,7 +10,7 @@
             </div>
         </DropdownButton>
     {{/if}}
-    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text={{t "iam.common.new"}} class="mr-2" @onClick={{this.createPolicy}} />
+    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text={{t "iam.common.new"}} class="mr-2" @onClick={{this.createPolicy}} @permission="iam create policy" />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/addon/templates/roles/index.hbs b/addon/templates/roles/index.hbs
index 412845b..f53b3d9 100644
--- a/addon/templates/roles/index.hbs
+++ b/addon/templates/roles/index.hbs
@@ -1,6 +1,6 @@
-<Layout::Section::Header @title={{t "iam.common.role"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+<Layout::Section::Header @title={{t "iam.common.role"}} @searchQuery={{this.query}} @onSearch={{perform this.search}} @searchDisabled={{cannot "iam list role"}}>
     {{#if (safe-has this.table "selectedRows")}}
-        <DropdownButton @icon="layer-group" @text={{t "iam.common.bulk-action"}} @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+        <DropdownButton @icon="layer-group" @text={{t "iam.common.bulk-action"}} @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" @permission="iam delete role" as |dd|>
             <div class="next-dd-menu mt-2 mx-0">
                 <div class="px-1">
                     <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteRoles)}}>
@@ -10,7 +10,7 @@
             </div>
         </DropdownButton>
     {{/if}}
-    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text={{t "iam.common.new"}} class="mr-2" @onClick={{this.createRole}} />
+    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text={{t "iam.common.new"}} class="mr-2" @onClick={{this.createRole}} @permission="iam create role" />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/addon/templates/users/index.hbs b/addon/templates/users/index.hbs
index ee99c15..473f971 100644
--- a/addon/templates/users/index.hbs
+++ b/addon/templates/users/index.hbs
@@ -1,6 +1,6 @@
-<Layout::Section::Header @title={{t "iam.common.user"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+<Layout::Section::Header @title={{t "iam.common.user"}} @searchQuery={{this.query}} @onSearch={{perform this.search}} @searchDisabled={{cannot "iam list user"}}>
     {{#if (safe-has this.table "selectedRows")}}
-        <DropdownButton @icon="layer-group" @text={{t "iam.common.bulk-action"}} @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+        <DropdownButton @icon="layer-group" @text={{t "iam.common.bulk-action"}} @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" @permission="iam delete user" as |dd|>
             <div class="next-dd-menu mt-2 mx-0">
                 <div class="px-1">
                     <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteUsers)}}>
@@ -10,8 +10,8 @@
             </div>
         </DropdownButton>
     {{/if}}
-    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text={{t "iam.common.new"}} class="mr-2" @onClick={{this.createUser}} />
-    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text={{t "iam.common.export"}} @onClick={{this.exportUsers}} />
+    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text={{t "iam.common.new"}} @permission="iam delete user" class="mr-2" @onClick={{this.createUser}} />
+    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text={{t "iam.common.export"}} @permission="iam export user" @onClick={{this.exportUsers}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>
diff --git a/app/components/widget/iam-metrics.js b/app/components/widget/iam-metrics.js
new file mode 100644
index 0000000..9112704
--- /dev/null
+++ b/app/components/widget/iam-metrics.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/iam-engine/components/widget/iam-metrics';
diff --git a/index.js b/index.js
index f7ceeee..b79df00 100644
--- a/index.js
+++ b/index.js
@@ -10,6 +10,7 @@ module.exports = buildEngine({
         if (type === 'css') {
             tree = new Funnel(tree, {
                 exclude: ['**/@fleetbase/ember-ui/**/*.css'],
+                allowEmpty: true,
             });
         }
 
diff --git a/tests/integration/components/widget/iam-metrics-test.js b/tests/integration/components/widget/iam-metrics-test.js
new file mode 100644
index 0000000..a6cebb0
--- /dev/null
+++ b/tests/integration/components/widget/iam-metrics-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | widget/iam-metrics', function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+        // Set any properties with this.set('myProperty', 'value');
+        // Handle any actions with this.set('myAction', function(val) { ... });
+
+        await render(hbs`<Widget::IamMetrics />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <Widget::IamMetrics>
+        template block text
+      </Widget::IamMetrics>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index 9d73c96..a7f8a72 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -30,6 +30,9 @@ iam:
     type: Type
     user: Users
   components:
+    widget:
+      metrics:
+        title: IAM Metrics
     modals:
       group-details:    
         group-name: Group Name
@@ -75,6 +78,7 @@ iam:
       new-group: New Group
       new-group-created: New group created.
       edit-group-title: Edit Group
+      group-actions: Group Actions
       changes-group-save: Changes to group saved.
       data-assosciated-this-group-deleted: Are you sure you want to delete this group? All data assosciated with this group will also be deleted. This action cannot be undone.
   policies:
@@ -88,6 +92,7 @@ iam:
       new-policy-created: New policy created.
       unable-changes-policy-warning: Unable to make changes to a {policyType} policy.
       edit-policy-title: Edit Policy
+      policy-actions: Policy Actions
       changes-policy-saved-success: Changes to policy saved.
       unable-delete-policy-warning: Unable to delete a {policyType} policy.
       data-assosciated-this-policy-deleted: Are you sure you want to delete this policy? All data assosciated with this policy will also be deleted. This action cannot be undone.
@@ -101,6 +106,7 @@ iam:
       new-role: New Role
       new-role-create: New role created
       edit-role-title: Edit Role
+      role-actions: Role Actions
       changes-role-saved: Changes to role saved.
       data-assosciated-this-role-deleted: Are you sure you want to delete this role? All data assosciated with this role will also be deleted. This action cannot be undone.
       role-deleted: Role {roleName} deleted.
@@ -116,7 +122,7 @@ iam:
       last-login: Last Login
       created-at: Created At
       updated-at: Updated At
-      contact-action: Contact Actions
+      user-actions: User Actions
       edit-user: Edit user...
       re-send-invitation: Re-send invitation...
       deactivate-user: Deactivate user...