chore: add manage group actions

api/src/backend/api/models.py

@@ -309,7 +309,7 @@ class ProviderGroup(RowLevelSecurityProtectedModel):
         ]
 
     class JSONAPIMeta:
-        resource_name = "provider-group"
+        resource_name = "provider-groups"
 
 
 class ProviderGroupMembership(RowLevelSecurityProtectedModel):
@@ -926,7 +926,7 @@ class Role(RowLevelSecurityProtectedModel):
         ]
 
     class JSONAPIMeta:
-        resource_name = "role"
+        resource_name = "roles"
 
 
 class RoleProviderGroupRelationship(RowLevelSecurityProtectedModel):

api/src/backend/api/specs/v1.yaml

@@ -1696,7 +1696,7 @@ paths:
       summary: List all provider groups
       parameters:
       - in: query
-        name: fields[provider-group]
+        name: fields[provider-groups]
         schema:
           type: array
           items:
@@ -1833,13 +1833,13 @@ paths:
         content:
           application/vnd.api+json:
             schema:
-              $ref: '#/components/schemas/ProviderGroupRequest'
+              $ref: '#/components/schemas/ProviderGroupCreateRequest'
           application/x-www-form-urlencoded:
             schema:
-              $ref: '#/components/schemas/ProviderGroupRequest'
+              $ref: '#/components/schemas/ProviderGroupCreateRequest'
           multipart/form-data:
             schema:
-              $ref: '#/components/schemas/ProviderGroupRequest'
+              $ref: '#/components/schemas/ProviderGroupCreateRequest'
         required: true
       security:
       - jwtAuth: []
@@ -1848,7 +1848,7 @@ paths:
           content:
             application/vnd.api+json:
               schema:
-                $ref: '#/components/schemas/ProviderGroupResponse'
+                $ref: '#/components/schemas/ProviderGroupCreateResponse'
           description: ''
   /api/v1/provider-groups/{id}:
     get:
@@ -1858,7 +1858,7 @@ paths:
       summary: Retrieve data from a provider group
       parameters:
       - in: query
-        name: fields[provider-group]
+        name: fields[provider-groups]
         schema:
           type: array
           items:
@@ -2939,7 +2939,7 @@ paths:
       summary: List all roles
       parameters:
       - in: query
-        name: fields[role]
+        name: fields[roles]
         schema:
           type: array
           items:
@@ -3138,7 +3138,7 @@ paths:
       summary: Retrieve data from a role
       parameters:
       - in: query
-        name: fields[role]
+        name: fields[roles]
         schema:
           type: array
           items:
@@ -3750,6 +3750,7 @@ paths:
         name: filter[state]
         schema:
           type: string
+          title: Task State
           enum:
           - available
           - cancelled
@@ -3758,6 +3759,8 @@ paths:
           - failed
           - scheduled
         description: |-
+          Current state of the task being run
+
           * `available` - Available
           * `scheduled` - Scheduled
           * `executing` - Executing
@@ -5536,7 +5539,7 @@ components:
                       type:
                         type: string
                         enum:
-                        - role
+                        - roles
                         title: Resource Type Name
                         description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
                           member is used to describe resource objects that share common
@@ -5546,8 +5549,8 @@ components:
                     - type
               required:
               - data
-              description: A related resource object from type role
+              description: A related resource object from type roles
-              title: role
+              title: roles
             inviter:
               type: object
               properties:
@@ -5689,7 +5692,7 @@ components:
                       type:
                         type: string
                         enum:
-                        - role
+                        - roles
                         title: Resource Type Name
                         description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
                           member is used to describe resource objects that share common
@@ -5699,8 +5702,8 @@ components:
                     - type
               required:
               - data
-              description: A related resource object from type role
+              description: A related resource object from type roles
-              title: role
+              title: roles
           required:
           - roles
     InvitationCreateRequest:
@@ -5796,7 +5799,7 @@ components:
                           type:
                             type: string
                             enum:
-                            - role
+                            - roles
                             title: Resource Type Name
                             description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
                               member is used to describe resource objects that share
@@ -5806,8 +5809,8 @@ components:
                         - type
                   required:
                   - data
-                  description: A related resource object from type role
+                  description: A related resource object from type roles
-                  title: role
+                  title: roles
               required:
               - roles
       required:
@@ -5887,7 +5890,7 @@ components:
                       type:
                         type: string
                         enum:
-                        - role
+                        - roles
                         title: Resource Type Name
                         description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
                           member is used to describe resource objects that share common
@@ -5897,8 +5900,8 @@ components:
                     - type
               required:
               - data
-              description: A related resource object from type role
+              description: A related resource object from type roles
-              title: role
+              title: roles
           required:
           - roles
     InvitationUpdateResponse:
@@ -6422,7 +6425,7 @@ components:
                           type:
                             type: string
                             enum:
-                            - role
+                            - roles
                             title: Resource Type Name
                             description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
                               member is used to describe resource objects that share
@@ -6432,8 +6435,8 @@ components:
                         - type
                   required:
                   - data
-                  description: A related resource object from type role
+                  description: A related resource object from type roles
-                  title: role
+                  title: roles
               required:
               - roles
       required:
@@ -6486,7 +6489,7 @@ components:
                 member is used to describe resource objects that share common attributes
                 and relationships.
               enum:
-              - provider-group
+              - provider-groups
             id:
               type: string
               format: uuid
@@ -6497,8 +6500,75 @@ components:
                   type: string
                   minLength: 1
                   maxLength: 255
+                inserted_at:
+                  type: string
+                  format: date-time
+                  readOnly: true
+                updated_at:
+                  type: string
+                  format: date-time
+                  readOnly: true
               required:
               - name
+            relationships:
+              type: object
+              properties:
+                providers:
+                  type: object
+                  properties:
+                    data:
+                      type: array
+                      items:
+                        type: object
+                        properties:
+                          id:
+                            type: string
+                            format: uuid
+                            title: Resource Identifier
+                            description: The identifier of the related object.
+                          type:
+                            type: string
+                            enum:
+                            - providers
+                            title: Resource Type Name
+                            description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
+                              member is used to describe resource objects that share
+                              common attributes and relationships.
+                        required:
+                        - id
+                        - type
+                  required:
+                  - data
+                  description: A related resource object from type providers
+                  title: providers
+                roles:
+                  type: object
+                  properties:
+                    data:
+                      type: array
+                      items:
+                        type: object
+                        properties:
+                          id:
+                            type: string
+                            format: uuid
+                            title: Resource Identifier
+                            description: The identifier of the related object.
+                          type:
+                            type: string
+                            enum:
+                            - roles
+                            title: Resource Type Name
+                            description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
+                              member is used to describe resource objects that share
+                              common attributes and relationships.
+                        required:
+                        - id
+                        - type
+                  required:
+                  - data
+                  description: A related resource object from type roles
+                  title: roles
       required:
       - data
     PatchedProviderSecretUpdateRequest:
@@ -6765,7 +6835,7 @@ components:
                 member is used to describe resource objects that share common attributes
                 and relationships.
               enum:
-              - role
+              - roles
             id:
               type: string
               format: uuid
@@ -6788,10 +6858,109 @@ components:
                   type: boolean
                 manage_scans:
                   type: boolean
+                permission_state:
+                  type: string
+                  readOnly: true
                 unlimited_visibility:
                   type: boolean
+                inserted_at:
+                  type: string
+                  format: date-time
+                  readOnly: true
+                updated_at:
+                  type: string
+                  format: date-time
+                  readOnly: true
               required:
               - name
+            relationships:
+              type: object
+              properties:
+                provider_groups:
+                  type: object
+                  properties:
+                    data:
+                      type: array
+                      items:
+                        type: object
+                        properties:
+                          id:
+                            type: string
+                            format: uuid
+                            title: Resource Identifier
+                            description: The identifier of the related object.
+                          type:
+                            type: string
+                            enum:
+                            - provider-groups
+                            title: Resource Type Name
+                            description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
+                              member is used to describe resource objects that share
+                              common attributes and relationships.
+                        required:
+                        - id
+                        - type
+                  required:
+                  - data
+                  description: A related resource object from type provider-groups
+                  title: provider-groups
+                users:
+                  type: object
+                  properties:
+                    data:
+                      type: array
+                      items:
+                        type: object
+                        properties:
+                          id:
+                            type: string
+                            format: uuid
+                            title: Resource Identifier
+                            description: The identifier of the related object.
+                          type:
+                            type: string
+                            enum:
+                            - users
+                            title: Resource Type Name
+                            description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
+                              member is used to describe resource objects that share
+                              common attributes and relationships.
+                        required:
+                        - id
+                        - type
+                  required:
+                  - data
+                  description: A related resource object from type users
+                  title: users
+                invitations:
+                  type: object
+                  properties:
+                    data:
+                      type: array
+                      items:
+                        type: object
+                        properties:
+                          id:
+                            type: string
+                            format: uuid
+                            title: Resource Identifier
+                            description: The identifier of the related object.
+                          type:
+                            type: string
+                            enum:
+                            - invitations
+                            title: Resource Type Name
+                            description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
+                              member is used to describe resource objects that share
+                              common attributes and relationships.
+                        required:
+                        - id
+                        - type
+                  required:
+                  - data
+                  description: A related resource object from type invitations
+                  title: invitations
+                  readOnly: true
       required:
       - data
     PatchedScanUpdateRequest:
@@ -6962,6 +7131,37 @@ components:
               required:
               - name
               - email
+            relationships:
+              type: object
+              properties:
+                roles:
+                  type: object
+                  properties:
+                    data:
+                      type: array
+                      items:
+                        type: object
+                        properties:
+                          id:
+                            type: string
+                            format: uuid
+                            title: Resource Identifier
+                            description: The identifier of the related object.
+                          type:
+                            type: string
+                            enum:
+                            - roles
+                            title: Resource Type Name
+                            description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
+                              member is used to describe resource objects that share
+                              common attributes and relationships.
+                        required:
+                        - id
+                        - type
+                  required:
+                  - data
+                  description: A related resource object from type roles
+                  title: roles
       required:
       - data
     Provider:
@@ -7068,7 +7268,7 @@ components:
                       type:
                         type: string
                         enum:
-                        - provider-group
+                        - provider-groups
                         title: Resource Type Name
                         description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
                           member is used to describe resource objects that share common
@@ -7078,8 +7278,8 @@ components:
                     - type
               required:
               - data
-              description: A related resource object from type provider-group
+              description: A related resource object from type provider-groups
-              title: provider-group
+              title: provider-groups
               readOnly: true
           required:
           - secret
@@ -7183,7 +7383,7 @@ components:
       properties:
         type:
           allOf:
-          - $ref: '#/components/schemas/ProviderGroupTypeEnum'
+          - $ref: '#/components/schemas/Type34dEnum'
           description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
             member is used to describe resource objects that share common attributes
             and relationships.
@@ -7237,7 +7437,6 @@ components:
               - data
               description: A related resource object from type providers
               title: providers
-              readOnly: true
             roles:
               type: object
               properties:
@@ -7254,7 +7453,7 @@ components:
                       type:
                         type: string
                         enum:
-                        - role
+                        - roles
                         title: Resource Type Name
                         description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
                           member is used to describe resource objects that share common
@@ -7264,38 +7463,96 @@ components:
                     - type
               required:
               - data
-              description: A related resource object from type role
+              description: A related resource object from type roles
-              title: role
+              title: roles
-              readOnly: true
+    ProviderGroupCreate:
-    ProviderGroupMembershipRequest:
       type: object
+      required:
+      - type
+      additionalProperties: false
       properties:
-        data:
+        type:
+          allOf:
+          - $ref: '#/components/schemas/Type34dEnum'
+          description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
+            member is used to describe resource objects that share common attributes
+            and relationships.
+        attributes:
           type: object
-          required:
-          - type
-          additionalProperties: false
           properties:
-            type:
+            name:
               type: string
-              description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
+              maxLength: 255
-                member is used to describe resource objects that share common attributes
+            inserted_at:
-                and relationships.
+              type: string
-              enum:
+              format: date-time
-              - provider_groups-provider
+              readOnly: true
-            attributes:
+            updated_at:
+              type: string
+              format: date-time
+              readOnly: true
+          required:
+          - name
+        relationships:
+          type: object
+          properties:
+            providers:
               type: object
               properties:
-                providers:
+                data:
                   type: array
                   items:
-                    $ref: '#/components/schemas/ProviderResourceIdentifierRequest'
+                    type: object
-                  description: List of resource identifier objects representing providers.
+                    properties:
+                      id:
+                        type: string
+                        format: uuid
+                        title: Resource Identifier
+                        description: The identifier of the related object.
+                      type:
+                        type: string
+                        enum:
+                        - providers
+                        title: Resource Type Name
+                        description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
+                          member is used to describe resource objects that share common
+                          attributes and relationships.
+                    required:
+                    - id
+                    - type
               required:
-              - providers
+              - data
-      required:
+              description: A related resource object from type providers
-      - data
+              title: providers
-    ProviderGroupRequest:
+            roles:
+              type: object
+              properties:
+                data:
+                  type: array
+                  items:
+                    type: object
+                    properties:
+                      id:
+                        type: string
+                        format: uuid
+                        title: Resource Identifier
+                        description: The identifier of the related object.
+                      type:
+                        type: string
+                        enum:
+                        - roles
+                        title: Resource Type Name
+                        description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
+                          member is used to describe resource objects that share common
+                          attributes and relationships.
+                    required:
+                    - id
+                    - type
+              required:
+              - data
+              description: A related resource object from type roles
+              title: roles
+    ProviderGroupCreateRequest:
       type: object
       properties:
         data:
@@ -7310,7 +7567,7 @@ components:
                 member is used to describe resource objects that share common attributes
                 and relationships.
               enum:
-              - provider-group
+              - provider-groups
             attributes:
               type: object
               properties:
@@ -7359,7 +7616,6 @@ components:
                   - data
                   description: A related resource object from type providers
                   title: providers
-                  readOnly: true
                 roles:
                   type: object
                   properties:
@@ -7376,7 +7632,7 @@ components:
                           type:
                             type: string
                             enum:
-                            - role
+                            - roles
                             title: Resource Type Name
                             description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
                               member is used to describe resource objects that share
@@ -7386,9 +7642,43 @@ components:
                         - type
                   required:
                   - data
-                  description: A related resource object from type role
+                  description: A related resource object from type roles
-                  title: role
+                  title: roles
-                  readOnly: true
+      required:
+      - data
+    ProviderGroupCreateResponse:
+      type: object
+      properties:
+        data:
+          $ref: '#/components/schemas/ProviderGroupCreate'
+      required:
+      - data
+    ProviderGroupMembershipRequest:
+      type: object
+      properties:
+        data:
+          type: object
+          required:
+          - type
+          additionalProperties: false
+          properties:
+            type:
+              type: string
+              description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
+                member is used to describe resource objects that share common attributes
+                and relationships.
+              enum:
+              - provider_groups-provider
+            attributes:
+              type: object
+              properties:
+                providers:
+                  type: array
+                  items:
+                    $ref: '#/components/schemas/ProviderResourceIdentifierRequest'
+                  description: List of resource identifier objects representing providers.
+              required:
+              - providers
       required:
       - data
     ProviderGroupResourceIdentifierRequest:
@@ -7428,10 +7718,6 @@ components:
           $ref: '#/components/schemas/ProviderGroup'
       required:
       - data
-    ProviderGroupTypeEnum:
-      type: string
-      enum:
-      - provider-group
     ProviderResourceIdentifierRequest:
       type: object
       properties:
@@ -8234,7 +8520,7 @@ components:
       properties:
         type:
           allOf:
-          - $ref: '#/components/schemas/Type1aaEnum'
+          - $ref: '#/components/schemas/Type6bbEnum'
           description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
             member is used to describe resource objects that share common attributes
             and relationships.
@@ -8293,7 +8579,7 @@ components:
                       type:
                         type: string
                         enum:
-                        - provider-group
+                        - provider-groups
                         title: Resource Type Name
                         description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
                           member is used to describe resource objects that share common
@@ -8303,8 +8589,8 @@ components:
                     - type
               required:
               - data
-              description: A related resource object from type provider-group
+              description: A related resource object from type provider-groups
-              title: provider-group
+              title: provider-groups
             users:
               type: object
               properties:
@@ -8333,7 +8619,6 @@ components:
               - data
               description: A related resource object from type users
               title: users
-              readOnly: true
             invitations:
               type: object
               properties:
@@ -8363,8 +8648,6 @@ components:
               description: A related resource object from type invitations
               title: invitations
               readOnly: true
-          required:
-          - provider_groups
     RoleCreate:
       type: object
       required:
@@ -8373,7 +8656,7 @@ components:
       properties:
         type:
           allOf:
-          - $ref: '#/components/schemas/Type1aaEnum'
+          - $ref: '#/components/schemas/Type6bbEnum'
           description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
             member is used to describe resource objects that share common attributes
             and relationships.
@@ -8429,7 +8712,7 @@ components:
                       type:
                         type: string
                         enum:
-                        - provider-group
+                        - provider-groups
                         title: Resource Type Name
                         description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
                           member is used to describe resource objects that share common
@@ -8439,8 +8722,8 @@ components:
                     - type
               required:
               - data
-              description: A related resource object from type provider-group
+              description: A related resource object from type provider-groups
-              title: provider-group
+              title: provider-groups
             users:
               type: object
               properties:
@@ -8469,7 +8752,6 @@ components:
               - data
               description: A related resource object from type users
               title: users
-              readOnly: true
             invitations:
               type: object
               properties:
@@ -8499,8 +8781,6 @@ components:
               description: A related resource object from type invitations
               title: invitations
               readOnly: true
-          required:
-          - provider_groups
     RoleCreateRequest:
       type: object
       properties:
@@ -8516,7 +8796,7 @@ components:
                 member is used to describe resource objects that share common attributes
                 and relationships.
               enum:
-              - role
+              - roles
             attributes:
               type: object
               properties:
@@ -8570,7 +8850,7 @@ components:
                           type:
                             type: string
                             enum:
-                            - provider-group
+                            - provider-groups
                             title: Resource Type Name
                             description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
                               member is used to describe resource objects that share
@@ -8580,8 +8860,8 @@ components:
                         - type
                   required:
                   - data
-                  description: A related resource object from type provider-group
+                  description: A related resource object from type provider-groups
-                  title: provider-group
+                  title: provider-groups
                 users:
                   type: object
                   properties:
@@ -8610,7 +8890,6 @@ components:
                   - data
                   description: A related resource object from type users
                   title: users
-                  readOnly: true
                 invitations:
                   type: object
                   properties:
@@ -8640,8 +8919,6 @@ components:
                   description: A related resource object from type invitations
                   title: invitations
                   readOnly: true
-              required:
-              - provider_groups
       required:
       - data
     RoleCreateResponse:
@@ -9319,14 +9596,18 @@ components:
       type: string
       enum:
       - provider-secrets
-    Type1aaEnum:
-      type: string
-      enum:
-      - role
     Type227Enum:
       type: string
       enum:
       - providers
+    Type34dEnum:
+      type: string
+      enum:
+      - provider-groups
+    Type6bbEnum:
+      type: string
+      enum:
+      - roles
     Type7f7Enum:
       type: string
       enum:
@@ -9429,7 +9710,7 @@ components:
                       type:
                         type: string
                         enum:
-                        - role
+                        - roles
                         title: Resource Type Name
                         description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
                           member is used to describe resource objects that share common
@@ -9439,8 +9720,8 @@ components:
                     - type
               required:
               - data
-              description: A related resource object from type role
+              description: A related resource object from type roles
-              title: role
+              title: roles
               readOnly: true
     UserCreate:
       type: object
@@ -9596,6 +9877,37 @@ components:
           required:
           - name
           - email
+        relationships:
+          type: object
+          properties:
+            roles:
+              type: object
+              properties:
+                data:
+                  type: array
+                  items:
+                    type: object
+                    properties:
+                      id:
+                        type: string
+                        format: uuid
+                        title: Resource Identifier
+                        description: The identifier of the related object.
+                      type:
+                        type: string
+                        enum:
+                        - roles
+                        title: Resource Type Name
+                        description: The [type](https://jsonapi.org/format/#document-resource-object-identification)
+                          member is used to describe resource objects that share common
+                          attributes and relationships.
+                    required:
+                    - id
+                    - type
+              required:
+              - data
+              description: A related resource object from type roles
+              title: roles
     UserUpdateResponse:
       type: object
       properties:

api/src/backend/api/tests/test_views.py

@@ -815,7 +815,7 @@ class TestProviderViewSet:
     @pytest.mark.parametrize(
         "include_values, expected_resources",
         [
-            ("provider_groups", ["provider-group"]),
+            ("provider_groups", ["provider-groups"]),
         ],
     )
     def test_providers_list_include(
@@ -1200,7 +1200,7 @@ class TestProviderGroupViewSet:
     def test_provider_group_create(self, authenticated_client):
         data = {
             "data": {
-                "type": "provider-group",
+                "type": "provider-groups",
                 "attributes": {
                     "name": "Test Provider Group",
                 },
@@ -1219,7 +1219,7 @@ class TestProviderGroupViewSet:
     def test_provider_group_create_invalid(self, authenticated_client):
         data = {
             "data": {
-                "type": "provider-group",
+                "type": "provider-groups",
                 "attributes": {
                     # Name is missing
                 },
@@ -1241,7 +1241,7 @@ class TestProviderGroupViewSet:
         data = {
             "data": {
                 "id": str(provider_group.id),
-                "type": "provider-group",
+                "type": "provider-groups",
                 "attributes": {
                     "name": "Updated Provider Group Name",
                 },
@@ -1263,7 +1263,7 @@ class TestProviderGroupViewSet:
         data = {
             "data": {
                 "id": str(provider_group.id),
-                "type": "provider-group",
+                "type": "provider-groups",
                 "attributes": {
                     "name": "",  # Invalid name
                 },
@@ -1327,6 +1327,170 @@ class TestProviderGroupViewSet:
         response = authenticated_client.put(reverse("providergroup-list"))
         assert response.status_code == status.HTTP_405_METHOD_NOT_ALLOWED
 
+    def test_provider_group_create_with_relationships(
+        self, authenticated_client, providers_fixture, roles_fixture
+    ):
+        provider1, provider2, *_ = providers_fixture
+        role1, role2, *_ = roles_fixture
+
+        data = {
+            "data": {
+                "type": "provider-groups",
+                "attributes": {"name": "Test Provider Group with relationships"},
+                "relationships": {
+                    "providers": {
+                        "data": [
+                            {"type": "providers", "id": str(provider1.id)},
+                            {"type": "providers", "id": str(provider2.id)},
+                        ]
+                    },
+                    "roles": {
+                        "data": [
+                            {"type": "roles", "id": str(role1.id)},
+                            {"type": "roles", "id": str(role2.id)},
+                        ]
+                    },
+                },
+            }
+        }
+
+        response = authenticated_client.post(
+            reverse("providergroup-list"),
+            data=json.dumps(data),
+            content_type="application/vnd.api+json",
+        )
+
+        assert response.status_code == status.HTTP_201_CREATED
+        response_data = response.json()["data"]
+        group = ProviderGroup.objects.get(id=response_data["id"])
+        assert group.name == "Test Provider Group with relationships"
+        assert set(group.providers.all()) == {provider1, provider2}
+        assert set(group.roles.all()) == {role1, role2}
+
+    def test_provider_group_update_relationships(
+        self,
+        authenticated_client,
+        provider_groups_fixture,
+        providers_fixture,
+        roles_fixture,
+    ):
+        group = provider_groups_fixture[0]
+        provider3 = providers_fixture[2]
+        provider4 = providers_fixture[3]
+        role3 = roles_fixture[2]
+        role4 = roles_fixture[3]
+
+        data = {
+            "data": {
+                "id": str(group.id),
+                "type": "provider-groups",
+                "relationships": {
+                    "providers": {
+                        "data": [
+                            {"type": "providers", "id": str(provider3.id)},
+                            {"type": "providers", "id": str(provider4.id)},
+                        ]
+                    },
+                    "roles": {
+                        "data": [
+                            {"type": "roles", "id": str(role3.id)},
+                            {"type": "roles", "id": str(role4.id)},
+                        ]
+                    },
+                },
+            }
+        }
+
+        response = authenticated_client.patch(
+            reverse("providergroup-detail", kwargs={"pk": group.id}),
+            data=json.dumps(data),
+            content_type="application/vnd.api+json",
+        )
+
+        assert response.status_code == status.HTTP_200_OK
+        group.refresh_from_db()
+        assert set(group.providers.all()) == {provider3, provider4}
+        assert set(group.roles.all()) == {role3, role4}
+
+    def test_provider_group_clear_relationships(
+        self, authenticated_client, providers_fixture, provider_groups_fixture
+    ):
+        group = provider_groups_fixture[0]
+        provider3 = providers_fixture[2]
+        provider4 = providers_fixture[3]
+
+        data = {
+            "data": {
+                "id": str(group.id),
+                "type": "provider-groups",
+                "relationships": {
+                    "providers": {
+                        "data": [
+                            {"type": "providers", "id": str(provider3.id)},
+                            {"type": "providers", "id": str(provider4.id)},
+                        ]
+                    }
+                },
+            }
+        }
+
+        response = authenticated_client.patch(
+            reverse("providergroup-detail", kwargs={"pk": group.id}),
+            data=json.dumps(data),
+            content_type="application/vnd.api+json",
+        )
+
+        assert response.status_code == status.HTTP_200_OK
+
+        data = {
+            "data": {
+                "id": str(group.id),
+                "type": "provider-groups",
+                "relationships": {
+                    "providers": {
+                        "data": []  # Removing all providers
+                    },
+                    "roles": {
+                        "data": []  # Removing all roles
+                    },
+                },
+            }
+        }
+
+        response = authenticated_client.patch(
+            reverse("providergroup-detail", kwargs={"pk": group.id}),
+            data=json.dumps(data),
+            content_type="application/vnd.api+json",
+        )
+
+        assert response.status_code == status.HTTP_200_OK
+        group.refresh_from_db()
+        assert group.providers.count() == 0
+        assert group.roles.count() == 0
+
+    def test_provider_group_create_with_invalid_relationships(
+        self, authenticated_client
+    ):
+        invalid_provider_id = "non-existent-id"
+        data = {
+            "data": {
+                "type": "provider-groups",
+                "attributes": {"name": "Invalid relationships test"},
+                "relationships": {
+                    "providers": {
+                        "data": [{"type": "providers", "id": invalid_provider_id}]
+                    }
+                },
+            }
+        }
+
+        response = authenticated_client.post(
+            reverse("providergroup-list"),
+            data=json.dumps(data),
+            content_type="application/vnd.api+json",
+        )
+        assert response.status_code in [status.HTTP_400_BAD_REQUEST]
+
 
 @pytest.mark.django_db
 class TestProviderSecretViewSet:
@@ -2571,7 +2735,7 @@ class TestInvitationViewSet:
                 },
                 "relationships": {
                     "roles": {
-                        "data": [{"type": "role", "id": str(roles_fixture[0].id)}]
+                        "data": [{"type": "roles", "id": str(roles_fixture[0].id)}]
                     }
                 },
             }
@@ -3121,7 +3285,7 @@ class TestRoleViewSet:
     def test_role_create(self, authenticated_client):
         data = {
             "data": {
-                "type": "role",
+                "type": "roles",
                 "attributes": {
                     "name": "Test Role",
                     "manage_users": "false",
@@ -3150,7 +3314,7 @@ class TestRoleViewSet:
     ):
         data = {
             "data": {
-                "type": "role",
+                "type": "roles",
                 "attributes": {
                     "name": "Test Role",
                     "manage_users": "false",
@@ -3164,7 +3328,7 @@ class TestRoleViewSet:
                 "relationships": {
                     "provider_groups": {
                         "data": [
-                            {"type": "provider-group", "id": str(provider_group.id)}
+                            {"type": "provider-groups", "id": str(provider_group.id)}
                             for provider_group in provider_groups_fixture[:2]
                         ]
                     }
@@ -3190,7 +3354,7 @@ class TestRoleViewSet:
     def test_role_create_invalid(self, authenticated_client):
         data = {
             "data": {
-                "type": "role",
+                "type": "roles",
                 "attributes": {
                     # Name is missing
                 },
@@ -3210,7 +3374,7 @@ class TestRoleViewSet:
         data = {
             "data": {
                 "id": str(role.id),
-                "type": "role",
+                "type": "roles",
                 "attributes": {
                     "name": "Updated Provider Group Name",
                 },
@@ -3230,7 +3394,7 @@ class TestRoleViewSet:
         data = {
             "data": {
                 "id": str(role.id),
-                "type": "role",
+                "type": "roles",
                 "attributes": {
                     "name": "",  # Invalid name
                 },
@@ -3290,6 +3454,162 @@ class TestRoleViewSet:
         response = authenticated_client.put(reverse("role-list"))
         assert response.status_code == status.HTTP_405_METHOD_NOT_ALLOWED
 
+    def test_role_create_with_users_and_provider_groups(
+        self, authenticated_client, users_fixture, provider_groups_fixture
+    ):
+        user1, user2, *_ = users_fixture
+        pg1, pg2, *_ = provider_groups_fixture
+
+        data = {
+            "data": {
+                "type": "roles",
+                "attributes": {
+                    "name": "Role with Users and PGs",
+                    "manage_users": "true",
+                    "manage_account": "false",
+                    "manage_billing": "true",
+                    "manage_providers": "true",
+                    "manage_integrations": "false",
+                    "manage_scans": "false",
+                    "unlimited_visibility": "false",
+                },
+                "relationships": {
+                    "users": {
+                        "data": [
+                            {"type": "users", "id": str(user1.id)},
+                            {"type": "users", "id": str(user2.id)},
+                        ]
+                    },
+                    "provider_groups": {
+                        "data": [
+                            {"type": "provider-groups", "id": str(pg1.id)},
+                            {"type": "provider-groups", "id": str(pg2.id)},
+                        ]
+                    },
+                },
+            }
+        }
+
+        response = authenticated_client.post(
+            reverse("role-list"),
+            data=json.dumps(data),
+            content_type="application/vnd.api+json",
+        )
+        assert response.status_code == status.HTTP_201_CREATED
+        created_role = Role.objects.get(name="Role with Users and PGs")
+
+        assert created_role.users.count() == 2
+        assert set(created_role.users.all()) == {user1, user2}
+
+        assert created_role.provider_groups.count() == 2
+        assert set(created_role.provider_groups.all()) == {pg1, pg2}
+
+    def test_role_update_relationships(
+        self,
+        authenticated_client,
+        roles_fixture,
+        users_fixture,
+        provider_groups_fixture,
+    ):
+        role = roles_fixture[0]
+        user3 = users_fixture[2]
+        pg3 = provider_groups_fixture[2]
+
+        data = {
+            "data": {
+                "id": str(role.id),
+                "type": "roles",
+                "relationships": {
+                    "users": {
+                        "data": [
+                            {"type": "users", "id": str(user3.id)},
+                        ]
+                    },
+                    "provider_groups": {
+                        "data": [
+                            {"type": "provider-groups", "id": str(pg3.id)},
+                        ]
+                    },
+                },
+            }
+        }
+
+        response = authenticated_client.patch(
+            reverse("role-detail", kwargs={"pk": role.id}),
+            data=json.dumps(data),
+            content_type="application/vnd.api+json",
+        )
+        assert response.status_code == status.HTTP_200_OK
+        role.refresh_from_db()
+
+        assert role.users.count() == 1
+        assert role.users.first() == user3
+        assert role.provider_groups.count() == 1
+        assert role.provider_groups.first() == pg3
+
+    def test_role_clear_relationships(self, authenticated_client, roles_fixture):
+        role = roles_fixture[0]
+        data = {
+            "data": {
+                "id": str(role.id),
+                "type": "roles",
+                "relationships": {
+                    "users": {
+                        "data": []  # Clearing all users
+                    },
+                    "provider_groups": {
+                        "data": []  # Clearing all provider groups
+                    },
+                },
+            }
+        }
+
+        response = authenticated_client.patch(
+            reverse("role-detail", kwargs={"pk": role.id}),
+            data=json.dumps(data),
+            content_type="application/vnd.api+json",
+        )
+        assert response.status_code == status.HTTP_200_OK
+        role.refresh_from_db()
+        assert role.users.count() == 0
+        assert role.provider_groups.count() == 0
+
+    def test_role_create_with_invalid_user_relationship(
+        self, authenticated_client, provider_groups_fixture
+    ):
+        invalid_user_id = "non-existent-user-id"
+        pg = provider_groups_fixture[0]
+
+        data = {
+            "data": {
+                "type": "roles",
+                "attributes": {
+                    "name": "Invalid Users Role",
+                    "manage_users": "false",
+                    "manage_account": "false",
+                    "manage_billing": "false",
+                    "manage_providers": "true",
+                    "manage_integrations": "true",
+                    "manage_scans": "true",
+                    "unlimited_visibility": "true",
+                },
+                "relationships": {
+                    "users": {"data": [{"type": "users", "id": invalid_user_id}]},
+                    "provider_groups": {
+                        "data": [{"type": "provider-groups", "id": str(pg.id)}]
+                    },
+                },
+            }
+        }
+
+        response = authenticated_client.post(
+            reverse("role-list"),
+            data=json.dumps(data),
+            content_type="application/vnd.api+json",
+        )
+
+        assert response.status_code in [status.HTTP_400_BAD_REQUEST]
+
 
 @pytest.mark.django_db
 class TestUserRoleRelationshipViewSet:
@@ -3297,7 +3617,9 @@ class TestUserRoleRelationshipViewSet:
         self, authenticated_client, roles_fixture, create_test_user
     ):
         data = {
-            "data": [{"type": "role", "id": str(role.id)} for role in roles_fixture[:2]]
+            "data": [
+                {"type": "roles", "id": str(role.id)} for role in roles_fixture[:2]
+            ]
         }
         response = authenticated_client.post(
             reverse("user-roles-relationship", kwargs={"pk": create_test_user.id}),
@@ -3314,7 +3636,9 @@ class TestUserRoleRelationshipViewSet:
         self, authenticated_client, roles_fixture, create_test_user
     ):
         data = {
-            "data": [{"type": "role", "id": str(role.id)} for role in roles_fixture[:2]]
+            "data": [
+                {"type": "roles", "id": str(role.id)} for role in roles_fixture[:2]
+            ]
         }
         authenticated_client.post(
             reverse("user-roles-relationship", kwargs={"pk": create_test_user.id}),
@@ -3324,7 +3648,7 @@ class TestUserRoleRelationshipViewSet:
 
         data = {
             "data": [
-                {"type": "role", "id": str(roles_fixture[0].id)},
+                {"type": "roles", "id": str(roles_fixture[0].id)},
             ]
         }
         response = authenticated_client.post(
@@ -3341,7 +3665,7 @@ class TestUserRoleRelationshipViewSet:
     ):
         data = {
             "data": [
-                {"type": "role", "id": str(roles_fixture[2].id)},
+                {"type": "roles", "id": str(roles_fixture[2].id)},
             ]
         }
         response = authenticated_client.patch(
@@ -3356,8 +3680,8 @@ class TestUserRoleRelationshipViewSet:
 
         data = {
             "data": [
-                {"type": "role", "id": str(roles_fixture[1].id)},
+                {"type": "roles", "id": str(roles_fixture[1].id)},
-                {"type": "role", "id": str(roles_fixture[2].id)},
+                {"type": "roles", "id": str(roles_fixture[2].id)},
             ]
         }
         response = authenticated_client.patch(
@@ -3385,7 +3709,7 @@ class TestUserRoleRelationshipViewSet:
 
     def test_invalid_provider_group_id(self, authenticated_client, create_test_user):
         invalid_id = "non-existent-id"
-        data = {"data": [{"type": "provider-group", "id": invalid_id}]}
+        data = {"data": [{"type": "provider-groups", "id": invalid_id}]}
         response = authenticated_client.post(
             reverse("user-roles-relationship", kwargs={"pk": create_test_user.id}),
             data=data,
@@ -3403,7 +3727,7 @@ class TestRoleProviderGroupRelationshipViewSet:
     ):
         data = {
             "data": [
-                {"type": "provider-group", "id": str(provider_group.id)}
+                {"type": "provider-groups", "id": str(provider_group.id)}
                 for provider_group in provider_groups_fixture[:2]
             ]
         }
@@ -3429,7 +3753,7 @@ class TestRoleProviderGroupRelationshipViewSet:
     ):
         data = {
             "data": [
-                {"type": "provider-group", "id": str(provider_group.id)}
+                {"type": "provider-groups", "id": str(provider_group.id)}
                 for provider_group in provider_groups_fixture[:2]
             ]
         }
@@ -3443,7 +3767,7 @@ class TestRoleProviderGroupRelationshipViewSet:
 
         data = {
             "data": [
-                {"type": "provider-group", "id": str(provider_groups_fixture[0].id)},
+                {"type": "provider-groups", "id": str(provider_groups_fixture[0].id)},
             ]
         }
         response = authenticated_client.post(
@@ -3462,7 +3786,7 @@ class TestRoleProviderGroupRelationshipViewSet:
     ):
         data = {
             "data": [
-                {"type": "provider-group", "id": str(provider_groups_fixture[1].id)},
+                {"type": "provider-groups", "id": str(provider_groups_fixture[1].id)},
             ]
         }
         response = authenticated_client.patch(
@@ -3483,8 +3807,8 @@ class TestRoleProviderGroupRelationshipViewSet:
 
         data = {
             "data": [
-                {"type": "provider-group", "id": str(provider_groups_fixture[1].id)},
+                {"type": "provider-groups", "id": str(provider_groups_fixture[1].id)},
-                {"type": "provider-group", "id": str(provider_groups_fixture[2].id)},
+                {"type": "provider-groups", "id": str(provider_groups_fixture[2].id)},
             ]
         }
         response = authenticated_client.patch(
@@ -3520,7 +3844,7 @@ class TestRoleProviderGroupRelationshipViewSet:
 
     def test_invalid_provider_group_id(self, authenticated_client, roles_fixture):
         invalid_id = "non-existent-id"
-        data = {"data": [{"type": "provider-group", "id": invalid_id}]}
+        data = {"data": [{"type": "provider-groups", "id": invalid_id}]}
         response = authenticated_client.post(
             reverse(
                 "role-provider-groups-relationship", kwargs={"pk": roles_fixture[1].id}
@@ -3681,7 +4005,7 @@ class TestProviderGroupMembershipViewSet:
     ):
         provider_group, *_ = provider_groups_fixture
         invalid_id = "non-existent-id"
-        data = {"data": [{"type": "provider-group", "id": invalid_id}]}
+        data = {"data": [{"type": "provider-groups", "id": invalid_id}]}
         response = authenticated_client.post(
             reverse(
                 "provider_group-providers-relationship",

api/src/backend/api/v1/serializers.py

@@ -235,10 +235,13 @@ class UserCreateSerializer(BaseWriteSerializer):
 
 class UserUpdateSerializer(BaseWriteSerializer):
     password = serializers.CharField(write_only=True, required=False)
+    roles = serializers.ResourceRelatedField(
+        queryset=Role.objects.all(), many=True, required=False
+    )
 
     class Meta:
         model = User
-        fields = ["id", "name", "password", "email", "company_name"]
+        fields = ["id", "name", "password", "email", "company_name", "roles"]
         extra_kwargs = {
             "id": {"read_only": True},
         }
@@ -445,7 +448,12 @@ class MembershipSerializer(serializers.ModelSerializer):
 
 # Provider Groups
 class ProviderGroupSerializer(RLSSerializer, BaseWriteSerializer):
-    providers = serializers.ResourceRelatedField(many=True, read_only=True)
+    providers = serializers.ResourceRelatedField(
+        queryset=Provider.objects.all(), many=True, required=False
+    )
+    roles = serializers.ResourceRelatedField(
+        queryset=Role.objects.all(), many=True, required=False
+    )
 
     def validate(self, attrs):
         if ProviderGroup.objects.filter(name=attrs.get("name")).exists():
@@ -475,21 +483,94 @@ class ProviderGroupSerializer(RLSSerializer, BaseWriteSerializer):
         }
 
 
-class ProviderGroupIncludedSerializer(RLSSerializer, BaseWriteSerializer):
+class ProviderGroupIncludedSerializer(ProviderGroupSerializer):
     class Meta:
         model = ProviderGroup
         fields = ["id", "name"]
 
 
-class ProviderGroupUpdateSerializer(RLSSerializer, BaseWriteSerializer):
+class ProviderGroupCreateSerializer(ProviderGroupSerializer):
-    """
+    providers = serializers.ResourceRelatedField(
-    Serializer for updating the ProviderGroup model.
+        queryset=Provider.objects.all(), many=True, required=False
-    Only allows "name" field to be updated.
+    )
-    """
+    roles = serializers.ResourceRelatedField(
+        queryset=Role.objects.all(), many=True, required=False
+    )
 
     class Meta:
         model = ProviderGroup
-        fields = ["id", "name"]
+        fields = [
+            "id",
+            "name",
+            "inserted_at",
+            "updated_at",
+            "providers",
+            "roles",
+            "url",
+        ]
+
+    def create(self, validated_data):
+        providers = validated_data.pop("providers", [])
+        roles = validated_data.pop("roles", [])
+        tenant_id = self.context.get("tenant_id")
+        provider_group = ProviderGroup.objects.create(
+            tenant_id=tenant_id, **validated_data
+        )
+
+        through_model_instances = [
+            ProviderGroupMembership(
+                provider_group=provider_group,
+                provider=provider,
+                tenant_id=tenant_id,
+            )
+            for provider in providers
+        ]
+        ProviderGroupMembership.objects.bulk_create(through_model_instances)
+
+        through_model_instances = [
+            RoleProviderGroupRelationship(
+                provider_group=provider_group,
+                role=role,
+                tenant_id=tenant_id,
+            )
+            for role in roles
+        ]
+        RoleProviderGroupRelationship.objects.bulk_create(through_model_instances)
+
+        return provider_group
+
+
+class ProviderGroupUpdateSerializer(ProviderGroupSerializer):
+    def update(self, instance, validated_data):
+        tenant_id = self.context.get("tenant_id")
+
+        if "providers" in validated_data:
+            providers = validated_data.pop("providers")
+            instance.providers.clear()
+            through_model_instances = [
+                ProviderGroupMembership(
+                    provider_group=instance,
+                    provider=provider,
+                    tenant_id=tenant_id,
+                )
+                for provider in providers
+            ]
+            ProviderGroupMembership.objects.bulk_create(through_model_instances)
+
+        if "roles" in validated_data:
+            roles = validated_data.pop("roles")
+            instance.roles.clear()
+            through_model_instances = [
+                RoleProviderGroupRelationship(
+                    provider_group=instance,
+                    role=role,
+                    tenant_id=tenant_id,
+                )
+                for role in roles
+            ]
+            RoleProviderGroupRelationship.objects.bulk_create(through_model_instances)
+
+        return super().update(instance, validated_data)
 
 
 class ProviderResourceIdentifierSerializer(serializers.Serializer):
@@ -1247,10 +1328,10 @@ class InvitationUpdateSerializer(InvitationBaseWriteSerializer):
         }
 
     def update(self, instance, validated_data):
-        roles = validated_data.pop("roles", [])
         tenant_id = self.context.get("tenant_id")
         invitation = super().update(instance, validated_data)
-        if roles:
+        if "roles" in validated_data:
+            roles = validated_data.pop("roles")
             instance.roles.clear()
             for role in roles:
                 InvitationRoleRelationship.objects.create(
@@ -1274,12 +1355,15 @@ class InvitationAcceptSerializer(RLSSerializer):
 
 
 class RoleSerializer(RLSSerializer, BaseWriteSerializer):
-    provider_groups = serializers.ResourceRelatedField(
-        many=True, queryset=ProviderGroup.objects.all()
-    )
     permission_state = serializers.SerializerMethodField()
+    users = serializers.ResourceRelatedField(
+        queryset=User.objects.all(), many=True, required=False
+    )
+    provider_groups = serializers.ResourceRelatedField(
+        queryset=ProviderGroup.objects.all(), many=True, required=False
+    )
 
-    def get_permission_state(self, obj):
+    def get_permission_state(self, obj) -> str:
         return obj.permission_state
 
     def validate(self, attrs):
@@ -1323,12 +1407,18 @@ class RoleSerializer(RLSSerializer, BaseWriteSerializer):
             "id": {"read_only": True},
             "inserted_at": {"read_only": True},
             "updated_at": {"read_only": True},
-            "users": {"read_only": True},
             "url": {"read_only": True},
         }
 
 
 class RoleCreateSerializer(RoleSerializer):
+    provider_groups = serializers.ResourceRelatedField(
+        many=True, queryset=ProviderGroup.objects.all(), required=False
+    )
+    users = serializers.ResourceRelatedField(
+        many=True, queryset=User.objects.all(), required=False
+    )
+
     def create(self, validated_data):
         provider_groups = validated_data.pop("provider_groups", [])
         users = validated_data.pop("users", [])
@@ -1347,7 +1437,7 @@ class RoleCreateSerializer(RoleSerializer):
 
         through_model_instances = [
             UserRoleRelationship(
-                role=user,
+                role=role,
                 user=user,
                 tenant_id=tenant_id,
             )
@@ -1358,20 +1448,37 @@ class RoleCreateSerializer(RoleSerializer):
         return role
 
 
-class RoleUpdateSerializer(RLSSerializer, BaseWriteSerializer):
+class RoleUpdateSerializer(RoleSerializer):
-    class Meta:
+    def update(self, instance, validated_data):
-        model = Role
+        tenant_id = self.context.get("tenant_id")
-        fields = [
+
-            "id",
+        if "provider_groups" in validated_data:
-            "name",
+            provider_groups = validated_data.pop("provider_groups")
-            "manage_users",
+            instance.provider_groups.clear()
-            "manage_account",
+            through_model_instances = [
-            "manage_billing",
+                RoleProviderGroupRelationship(
-            "manage_providers",
+                    role=instance,
-            "manage_integrations",
+                    provider_group=provider_group,
-            "manage_scans",
+                    tenant_id=tenant_id,
-            "unlimited_visibility",
+                )
-        ]
+                for provider_group in provider_groups
+            ]
+            RoleProviderGroupRelationship.objects.bulk_create(through_model_instances)
+
+        if "users" in validated_data:
+            users = validated_data.pop("users")
+            instance.users.clear()
+            through_model_instances = [
+                UserRoleRelationship(
+                    role=instance,
+                    user=user,
+                    tenant_id=tenant_id,
+                )
+                for user in users
+            ]
+            UserRoleRelationship.objects.bulk_create(through_model_instances)
+
+        return super().update(instance, validated_data)
 
 
 class ProviderGroupResourceIdentifierSerializer(serializers.Serializer):

api/src/backend/api/v1/views.py

@@ -100,6 +100,7 @@ from api.v1.serializers import (
     ProviderCreateSerializer,
     ProviderGroupMembershipSerializer,
     ProviderGroupSerializer,
+    ProviderGroupCreateSerializer,
     ProviderGroupUpdateSerializer,
     ProviderSecretCreateSerializer,
     ProviderSecretSerializer,
@@ -741,7 +742,9 @@ class ProviderGroupViewSet(BaseRLSViewSet):
         return user_roles.provider_groups.all()
 
     def get_serializer_class(self):
-        if self.action == "partial_update":
+        if self.action == "create":
+            return ProviderGroupCreateSerializer
+        elif self.action == "partial_update":
             return ProviderGroupUpdateSerializer
         return super().get_serializer_class()
 

api/src/backend/conftest.py

@@ -322,6 +322,20 @@ def invitations_fixture(create_test_user, tenants_fixture):
     return valid_invitation, expired_invitation
 
 
+@pytest.fixture
+def users_fixture(django_user_model):
+    user1 = User.objects.create_user(
+        name="user1", email="test_unit0@prowler.com", password="S3cret"
+    )
+    user2 = User.objects.create_user(
+        name="user2", email="test_unit1@prowler.com", password="S3cret"
+    )
+    user3 = User.objects.create_user(
+        name="user3", email="test_unit2@prowler.com", password="S3cret"
+    )
+    return user1, user2, user3
+
+
 @pytest.fixture
 def providers_fixture(tenants_fixture):
     tenant, *_ = tenants_fixture

ui/actions/invitations/invitation.ts

@@ -53,6 +53,7 @@ export const sendInvite = async (formData: FormData) => {
   const keyServer = process.env.API_BASE_URL;
 
   const email = formData.get("email");
+  const role = formData.get("role");
   const url = new URL(`${keyServer}/tenants/invitations`);
 
   const body = JSON.stringify({
@@ -61,7 +62,18 @@ export const sendInvite = async (formData: FormData) => {
       attributes: {
         email,
       },
-      relationships: {},
+      relationships: {
+        roles: {
+          data: role
+            ? [
+                {
+                  id: role,
+                  type: "roles",
+                },
+              ]
+            : [],
+        },
+      },
     },
   });
 
@@ -91,10 +103,40 @@ export const updateInvite = async (formData: FormData) => {
 
   const invitationId = formData.get("invitationId");
   const invitationEmail = formData.get("invitationEmail");
-  const expiresAt = formData.get("expires_at");
+  const roleId = formData.get("role");
+  const expiresAt =
+    formData.get("expires_at") ||
+    new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString();
 
   const url = new URL(`${keyServer}/tenants/invitations/${invitationId}`);
 
+  const body: any = {
+    data: {
+      type: "invitations",
+      id: invitationId,
+      attributes: {},
+      relationships: {},
+    },
+  };
+
+  // Only add attributes that exist in the formData
+  if (invitationEmail) {
+    body.data.attributes.email = invitationEmail;
+  }
+  if (expiresAt) {
+    body.data.attributes.expires_at = expiresAt;
+  }
+  if (roleId) {
+    body.data.relationships.roles = {
+      data: [
+        {
+          id: roleId,
+          type: "roles",
+        },
+      ],
+    };
+  }
+
   try {
     const response = await fetch(url.toString(), {
       method: "PATCH",
@@ -103,23 +145,18 @@ export const updateInvite = async (formData: FormData) => {
         Accept: "application/vnd.api+json",
         Authorization: `Bearer ${session?.accessToken}`,
       },
-      body: JSON.stringify({
+      body: JSON.stringify(body),
-        data: {
-          type: "invitations",
-          id: invitationId,
-          attributes: {
-            email: invitationEmail,
-            ...(expiresAt && { expires_at: expiresAt }),
-          },
-        },
-      }),
     });
+
+    if (!response.ok) {
+      const error = await response.json();
+      return { error };
+    }
+
     const data = await response.json();
     revalidatePath("/invitations");
     return parseStringify(data);
   } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error("Error updating invitation:", error);
     return {
       error: getErrorMessage(error),
     };

ui/actions/manage-groups/index.ts

@@ -0,0 +1 @@
+export * from "./manage-groups";

ui/actions/manage-groups/manage-groups.ts

@@ -0,0 +1,65 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+
+import { auth } from "@/auth.config";
+import { getErrorMessage, parseStringify } from "@/lib";
+
+export const createProviderGroup = async (formData: FormData) => {
+  const session = await auth();
+  const keyServer = process.env.API_BASE_URL;
+
+  const name = formData.get("name") as string;
+  const providersJson = formData.get("providers") as string;
+  const rolesJson = formData.get("roles") as string;
+
+  // Parse JSON strings and handle empty cases
+  const providers = providersJson ? JSON.parse(providersJson) : [];
+  const roles = rolesJson ? JSON.parse(rolesJson) : [];
+
+  // Prepare base payload
+  const payload: any = {
+    data: {
+      type: "provider-groups",
+      attributes: {
+        name,
+      },
+      relationships: {},
+    },
+  };
+
+  // Add relationships only if there are items
+  if (providers.length > 0) {
+    payload.data.relationships.providers = {
+      data: providers,
+    };
+  }
+
+  if (roles.length > 0) {
+    payload.data.relationships.roles = {
+      data: roles,
+    };
+  }
+
+  const body = JSON.stringify(payload);
+
+  try {
+    const url = new URL(`${keyServer}/provider-groups`);
+    const response = await fetch(url.toString(), {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/vnd.api+json",
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+      body,
+    });
+    const data = await response.json();
+    revalidatePath("/providers/manage-groups");
+    return parseStringify(data);
+  } catch (error) {
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};

ui/actions/roles/index.ts

@@ -0,0 +1 @@
+export * from "./roles";

ui/actions/roles/roles.ts

@@ -0,0 +1,192 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
+import { auth } from "@/auth.config";
+import { getErrorMessage, parseStringify } from "@/lib";
+
+export const getRoles = async ({
+  page = 1,
+  query = "",
+  sort = "",
+  filters = {},
+}) => {
+  const session = await auth();
+
+  if (isNaN(Number(page)) || page < 1) redirect("/roles");
+
+  const keyServer = process.env.API_BASE_URL;
+  const url = new URL(`${keyServer}/roles`);
+
+  if (page) url.searchParams.append("page[number]", page.toString());
+  if (query) url.searchParams.append("filter[search]", query);
+  if (sort) url.searchParams.append("sort", sort);
+
+  // Handle multiple filters
+  Object.entries(filters).forEach(([key, value]) => {
+    if (key !== "filter[search]") {
+      url.searchParams.append(key, String(value));
+    }
+  });
+
+  try {
+    const invitations = await fetch(url.toString(), {
+      headers: {
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+    });
+    const data = await invitations.json();
+    const parsedData = parseStringify(data);
+    revalidatePath("/roles");
+    return parsedData;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error("Error fetching roles:", error);
+    return undefined;
+  }
+};
+
+export const getRoleInfoById = async (roleId: string) => {
+  const session = await auth();
+  const keyServer = process.env.API_BASE_URL;
+  const url = new URL(`${keyServer}/roles/${roleId}`);
+
+  try {
+    const response = await fetch(url.toString(), {
+      method: "GET",
+      headers: {
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch role info: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return parseStringify(data);
+  } catch (error) {
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};
+
+export const addRole = async (formData: FormData) => {
+  const session = await auth();
+  const keyServer = process.env.API_BASE_URL;
+
+  const url = new URL(`${keyServer}/roles`);
+  const body = JSON.stringify({
+    data: {
+      type: "roles",
+      attributes: {
+        name: formData.get("name"),
+        manage_users: formData.get("manage_users") === "true",
+        manage_account: formData.get("manage_account") === "true",
+        manage_billing: formData.get("manage_billing") === "true",
+        manage_providers: formData.get("manage_providers") === "true",
+        manage_integrations: formData.get("manage_integrations") === "true",
+        manage_scans: formData.get("manage_scans") === "true",
+        unlimited_visibility: formData.get("unlimited_visibility") === "true",
+      },
+      relationships: {
+        provider_groups: {
+          data: [],
+        },
+      },
+    },
+  });
+
+  try {
+    const response = await fetch(url.toString(), {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/vnd.api+json",
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+      body,
+    });
+    const data = await response.json();
+    revalidatePath("/roles");
+    return data;
+  } catch (error) {
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};
+
+export const updateRole = async (formData: FormData, roleId: string) => {
+  const session = await auth();
+  const keyServer = process.env.API_BASE_URL;
+
+  const url = new URL(`${keyServer}/roles/${roleId}`);
+  const body = JSON.stringify({
+    data: {
+      type: "roles",
+      id: roleId,
+      attributes: {
+        name: formData.get("name"),
+        manage_users: formData.get("manage_users") === "true",
+        manage_account: formData.get("manage_account") === "true",
+        manage_billing: formData.get("manage_billing") === "true",
+        manage_providers: formData.get("manage_providers") === "true",
+        manage_integrations: formData.get("manage_integrations") === "true",
+        manage_scans: formData.get("manage_scans") === "true",
+        unlimited_visibility: formData.get("unlimited_visibility") === "true",
+      },
+    },
+  });
+
+  try {
+    const response = await fetch(url.toString(), {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/vnd.api+json",
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+      body,
+    });
+    const data = await response.json();
+    revalidatePath("/roles");
+    return data;
+  } catch (error) {
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};
+
+export const deleteRole = async (roleId: string) => {
+  const session = await auth();
+  const keyServer = process.env.API_BASE_URL;
+
+  const url = new URL(`${keyServer}/roles/${roleId}`);
+  try {
+    const response = await fetch(url.toString(), {
+      method: "DELETE",
+      headers: {
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData?.message || "Failed to delete the role");
+    }
+
+    const data = await response.json();
+    revalidatePath("/roles");
+    return data;
+  } catch (error) {
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};

ui/actions/users/users.ts

@@ -14,10 +14,10 @@ export const getUsers = async ({
 }) => {
   const session = await auth();
 
-  if (isNaN(Number(page)) || page < 1) redirect("/users");
+  if (isNaN(Number(page)) || page < 1) redirect("/users?include=roles");
 
   const keyServer = process.env.API_BASE_URL;
-  const url = new URL(`${keyServer}/users`);
+  const url = new URL(`${keyServer}/users?include=roles`);
 
   if (page) url.searchParams.append("page[number]", page.toString());
   if (query) url.searchParams.append("filter[search]", query);
@@ -94,6 +94,58 @@ export const updateUser = async (formData: FormData) => {
     revalidatePath("/users");
     return parseStringify(data);
   } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};
+
+export const updateUserRole = async (formData: FormData) => {
+  const session = await auth();
+  const keyServer = process.env.API_BASE_URL;
+
+  const userId = formData.get("userId") as string;
+  const roleId = formData.get("roleId") as string;
+
+  // Validate required fields
+  if (!userId || !roleId) {
+    return { error: "userId and roleId are required" };
+  }
+
+  const url = new URL(`${keyServer}/users/${userId}/relationships/roles`);
+
+  const requestBody = {
+    data: [
+      {
+        type: "roles",
+        id: roleId,
+      },
+    ],
+  };
+
+  try {
+    const response = await fetch(url.toString(), {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/vnd.api+json",
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      return { error: data.errors || "An error occurred" };
+    }
+
+    revalidatePath("/users"); // Update the path as needed
+    return parseStringify(data);
+  } catch (error) {
+    // eslint-disable-next-line no-console
     console.error(error);
     return {
       error: getErrorMessage(error),

ui/app/(prowler)/invitations/(send-invite)/new/page.tsx

@@ -1,7 +1,31 @@
 import React from "react";
+import { Suspense } from "react";
 
+import { getRoles } from "@/actions/roles";
+import { SkeletonInvitationInfo } from "@/components/invitations/workflow";
 import { SendInvitationForm } from "@/components/invitations/workflow/forms/send-invitation-form";
 
-export default function SendInvitationPage() {
+export default async function SendInvitationPage() {
-  return <SendInvitationForm />;
+  const rolesData = await getRoles({});
+
+  return (
+    <Suspense fallback={<SkeletonInvitationInfo />}>
+      <SSRSendInvitation rolesData={rolesData?.data || []} />
+    </Suspense>
+  );
 }
+
+const SSRSendInvitation = ({ rolesData }: { rolesData: Array<any> }) => {
+  const hasRoles = rolesData && rolesData.length > 0;
+
+  return (
+    <SendInvitationForm
+      roles={rolesData.map((role) => ({
+        id: role.id,
+        name: role.attributes.name,
+      }))}
+      defaultRole={!hasRoles ? "admin" : undefined}
+      isSelectorDisabled={!hasRoles}
+    />
+  );
+};

ui/app/(prowler)/invitations/page.tsx

@@ -1,7 +1,8 @@
 import { Spacer } from "@nextui-org/react";
-import { Suspense } from "react";
+import React, { Suspense } from "react";
 
 import { getInvitations } from "@/actions/invitations/invitation";
+import { getRoles } from "@/actions/roles";
 import { FilterControls } from "@/components/filters";
 import { filterInvitations } from "@/components/filters/data-filters";
 import { SendInvitationButton } from "@/components/invitations";
@@ -11,7 +12,7 @@ import {
 } from "@/components/invitations/table";
 import { Header } from "@/components/ui";
 import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
-import { SearchParamsProps } from "@/types";
+import { InvitationProps, Role, SearchParamsProps } from "@/types";
 
 export default async function Invitations({
   searchParams,
@@ -54,12 +55,58 @@ const SSRDataTable = async ({
   // Extract query from filters
   const query = (filters["filter[search]"] as string) || "";
 
+  // Fetch invitations and roles
   const invitationsData = await getInvitations({ query, page, sort, filters });
+  const rolesData = await getRoles({});
+
+  // Create a dictionary for roles by invitation ID
+  const roleDict = (rolesData?.data || []).reduce(
+    (acc: Record<string, Role>, role: Role) => {
+      role.relationships.invitations.data.forEach((invitation: any) => {
+        acc[invitation.id] = role;
+      });
+      return acc;
+    },
+    {},
+  );
+
+  // Generate the array of roles with all the roles available
+  const roles = Array.from(
+    new Map(
+      (rolesData?.data || []).map((role: Role) => [
+        role.id,
+        { id: role.id, name: role.attributes?.name || "Unnamed Role" },
+      ]),
+    ).values(),
+  );
+
+  // Expand the invitations
+  const expandedInvitations = invitationsData?.data?.map(
+    (invitation: InvitationProps) => {
+      const role = roleDict[invitation.id];
+
+      return {
+        ...invitation,
+        relationships: {
+          ...invitation.relationships,
+          role,
+        },
+        roles, // Include all roles here for each invitation
+      };
+    },
+  );
+
+  // Create the expanded response
+  const expandedResponse = {
+    ...invitationsData,
+    data: expandedInvitations,
+    roles,
+  };
 
   return (
     <DataTable
       columns={ColumnsInvitation}
-      data={invitationsData?.data || []}
+      data={expandedResponse?.data || []}
       metadata={invitationsData?.meta}
     />
   );

ui/app/(prowler)/providers/(manage-groups)/layout.tsx

@@ -0,0 +1,24 @@
+import "@/styles/globals.css";
+
+import { Spacer } from "@nextui-org/react";
+import React from "react";
+
+import { NavigationHeader } from "@/components/ui";
+
+interface ProviderLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function ProviderLayout({ children }: ProviderLayoutProps) {
+  return (
+    <>
+      <NavigationHeader
+        title="Manage providers groups"
+        icon="icon-park-outline:close-small"
+        href="/providers"
+      />
+      <Spacer y={16} />
+      {children}
+    </>
+  );
+}

ui/app/(prowler)/providers/(manage-groups)/manage-groups/page.tsx

@@ -0,0 +1,57 @@
+import { Divider } from "@nextui-org/react";
+import React, { Suspense } from "react";
+
+import { getProviders } from "@/actions/providers";
+import { getRoles } from "@/actions/roles";
+import { AddGroupForm } from "@/components/manage-groups/forms";
+import { SkeletonManageGroups } from "@/components/manage-groups/skeleton-manage-groups";
+import { ProviderProps, SearchParamsProps } from "@/types";
+
+export default function ManageGroupsPage({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) {
+  const searchParamsKey = JSON.stringify(searchParams);
+
+  return (
+    <div className="grid min-h-[70vh] grid-cols-1 items-center justify-center gap-4 md:grid-cols-12">
+      <div className="col-span-1 flex justify-end md:col-span-4">
+        <Suspense key={searchParamsKey} fallback={<SkeletonManageGroups />}>
+          <SSRAddGroupForm searchParams={searchParams} />
+        </Suspense>
+      </div>
+
+      <Divider orientation="vertical" className="mx-auto h-full" />
+
+      <div className="col-span-1 flex justify-start md:col-span-6">
+        {/* Space to add the table */}
+      </div>
+    </div>
+  );
+}
+
+const SSRAddGroupForm = async ({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) => {
+  const providersResponse = await getProviders({});
+  const rolesResponse = await getRoles({});
+
+  const providersData = providersResponse?.data.map(
+    (provider: ProviderProps) => ({
+      id: provider.id,
+      name: provider.attributes.alias,
+    }),
+  );
+
+  const rolesData = rolesResponse?.data.map((role: any) => ({
+    id: role.id,
+    name: role.attributes.name,
+  }));
+
+  return (
+    <AddGroupForm providers={providersData || []} roles={rolesData || []} />
+  );
+};

ui/app/(prowler)/providers/page.tsx

@@ -3,7 +3,8 @@ import { Suspense } from "react";
 
 import { getProviders } from "@/actions/providers";
 import { FilterControls, filterProviders } from "@/components/filters";
-import { AddProvider } from "@/components/providers";
+import { ManageGroupsButton } from "@/components/manage-groups";
+import { AddProviderButton } from "@/components/providers";
 import {
   ColumnProviders,
   SkeletonTableProviders,
@@ -26,7 +27,10 @@ export default async function Providers({
       <Spacer y={4} />
       <FilterControls search providers />
       <Spacer y={8} />
-      <AddProvider />
+      <div className="flex items-center gap-4 md:justify-end">
+        <ManageGroupsButton />
+        <AddProviderButton />
+      </div>
       <Spacer y={4} />
       <DataTableFilterCustom filters={filterProviders || []} />
       <Spacer y={8} />

ui/app/(prowler)/roles/(add-role)/edit/page.tsx

@@ -0,0 +1,43 @@
+import { redirect } from "next/navigation";
+import { Suspense } from "react";
+
+import { getRoleInfoById } from "@/actions/roles/roles";
+import { SkeletonRoleForm } from "@/components/roles/workflow";
+import { EditRoleForm } from "@/components/roles/workflow/forms/edit-role-form";
+import { SearchParamsProps } from "@/types";
+
+export default async function EditRolePage({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) {
+  const searchParamsKey = JSON.stringify(searchParams || {});
+
+  return (
+    <Suspense key={searchParamsKey} fallback={<SkeletonRoleForm />}>
+      <SSRDataRole searchParams={searchParams} />
+    </Suspense>
+  );
+}
+
+const SSRDataRole = async ({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) => {
+  const roleId = searchParams.roleId;
+
+  if (!roleId || Array.isArray(roleId)) {
+    redirect("/roles");
+  }
+
+  const roleData = await getRoleInfoById(roleId as string);
+
+  if (!roleData || roleData.error) {
+    return <div>Role not found</div>;
+  }
+
+  const { attributes } = roleData.data;
+
+  return <EditRoleForm roleId={roleId} roleData={attributes} />;
+};

ui/app/(prowler)/roles/(add-role)/layout.tsx

@@ -0,0 +1,32 @@
+import "@/styles/globals.css";
+
+import { Spacer } from "@nextui-org/react";
+import React from "react";
+
+import { WorkflowAddEditRole } from "@/components/roles/workflow";
+import { NavigationHeader } from "@/components/ui";
+
+interface RoleLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function RoleLayout({ children }: RoleLayoutProps) {
+  return (
+    <>
+      <NavigationHeader
+        title="Role Management"
+        icon="icon-park-outline:close-small"
+        href="/roles"
+      />
+      <Spacer y={16} />
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-12">
+        <div className="order-1 my-auto hidden h-full lg:col-span-4 lg:col-start-2 lg:block">
+          <WorkflowAddEditRole />
+        </div>
+        <div className="order-2 my-auto lg:col-span-5 lg:col-start-6">
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}

ui/app/(prowler)/roles/(add-role)/new/page.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { AddRoleForm } from "@/components/roles/workflow/forms/add-role-form";
+
+export default function AddRolePage() {
+  return <AddRoleForm />;
+}

ui/app/(prowler)/roles/page.tsx

@@ -0,0 +1,64 @@
+import { Spacer } from "@nextui-org/react";
+import { Suspense } from "react";
+
+import { getRoles } from "@/actions/roles";
+import { FilterControls } from "@/components/filters";
+import { filterRoles } from "@/components/filters/data-filters";
+import { AddRoleButton } from "@/components/roles";
+import { ColumnsRoles } from "@/components/roles/table";
+import { SkeletonTableRoles } from "@/components/roles/table";
+import { Header } from "@/components/ui";
+import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
+import { SearchParamsProps } from "@/types";
+
+export default async function Roles({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) {
+  const searchParamsKey = JSON.stringify(searchParams || {});
+
+  return (
+    <>
+      <Header title="Roles" icon="mdi:account-key-outline" />
+      <Spacer y={4} />
+      <FilterControls search />
+      <Spacer y={8} />
+      <AddRoleButton />
+      <Spacer y={4} />
+      <DataTableFilterCustom filters={filterRoles || []} />
+      <Spacer y={8} />
+
+      <Suspense key={searchParamsKey} fallback={<SkeletonTableRoles />}>
+        <SSRDataTable searchParams={searchParams} />
+      </Suspense>
+    </>
+  );
+}
+
+const SSRDataTable = async ({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) => {
+  const page = parseInt(searchParams.page?.toString() || "1", 10);
+  const sort = searchParams.sort?.toString();
+
+  // Extract all filter parameters
+  const filters = Object.fromEntries(
+    Object.entries(searchParams).filter(([key]) => key.startsWith("filter[")),
+  );
+
+  // Extract query from filters
+  const query = (filters["filter[search]"] as string) || "";
+
+  const rolesData = await getRoles({ query, page, sort, filters });
+
+  return (
+    <DataTable
+      columns={ColumnsRoles}
+      data={rolesData?.data || []}
+      metadata={rolesData?.meta}
+    />
+  );
+};

ui/app/(prowler)/users/page.tsx

@@ -1,6 +1,7 @@
 import { Spacer } from "@nextui-org/react";
 import { Suspense } from "react";
 
+import { getRoles } from "@/actions/roles";
 import { getUsers } from "@/actions/users/users";
 import { FilterControls } from "@/components/filters";
 import { filterUsers } from "@/components/filters/data-filters";
@@ -8,7 +9,7 @@ import { Header } from "@/components/ui";
 import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
 import { AddUserButton } from "@/components/users";
 import { ColumnsUser, SkeletonTableUser } from "@/components/users/table";
-import { SearchParamsProps } from "@/types";
+import { Role, SearchParamsProps, UserProps } from "@/types";
 
 export default async function Users({
   searchParams,
@@ -52,11 +53,49 @@ const SSRDataTable = async ({
   const query = (filters["filter[search]"] as string) || "";
 
   const usersData = await getUsers({ query, page, sort, filters });
+  const rolesData = await getRoles({});
+
+  // Create a dictionary for roles by user ID
+  const roleDict = (usersData?.included || []).reduce(
+    (acc: Record<string, any>, item: Role) => {
+      if (item.type === "roles") {
+        acc[item.id] = item.attributes;
+      }
+      return acc;
+    },
+    {} as Record<string, Role>,
+  );
+
+  // Generate the array of roles with all the roles available
+  const roles = Array.from(
+    new Map(
+      (rolesData?.data || []).map((role: Role) => [
+        role.id,
+        { id: role.id, name: role.attributes?.name || "Unnamed Role" },
+      ]),
+    ).values(),
+  );
+
+  // Expand the users with their roles
+  const expandedUsers = (usersData?.data || []).map((user: UserProps) => {
+    // Check if the user has a role
+    const roleId = user?.relationships?.roles?.data?.[0]?.id;
+    const role = roleDict?.[roleId] || null;
+
+    return {
+      ...user,
+      attributes: {
+        ...(user?.attributes || {}),
+        role,
+      },
+      roles,
+    };
+  });
 
   return (
     <DataTable
       columns={ColumnsUser}
-      data={usersData?.data || []}
+      data={expandedUsers || []}
       metadata={usersData?.meta}
     />
   );

ui/components/filters/data-filters.ts

@@ -72,3 +72,11 @@ export const filterInvitations = [
     values: ["pending", "accepted", "expired", "revoked"],
   },
 ];
+
+export const filterRoles = [
+  {
+    key: "permission_state",
+    labelCheckboxGroup: "Permissions",
+    values: ["unlimited", "limited", "none"],
+  },
+];

ui/components/invitations/forms/edit-form.tsx

@@ -1,8 +1,8 @@
-"use client";
-
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Select, SelectItem } from "@nextui-org/react";
+import { MailIcon, ShieldIcon } from "lucide-react";
 import { Dispatch, SetStateAction } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { updateInvite } from "@/actions/invitations/invitation";
@@ -15,10 +15,14 @@ import { editInviteFormSchema } from "@/types";
 export const EditForm = ({
   invitationId,
   invitationEmail,
+  roles = [],
+  currentRole = "",
   setIsOpen,
 }: {
   invitationId: string;
   invitationEmail?: string;
+  roles: Array<{ id: string; name: string }>;
+  currentRole?: string;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }) => {
   const formSchema = editInviteFormSchema;
@@ -27,7 +31,8 @@ export const EditForm = ({
     resolver: zodResolver(formSchema),
     defaultValues: {
       invitationId,
-      invitationEmail: invitationEmail,
+      invitationEmail: invitationEmail || "",
+      role: roles.find((role) => role.name === currentRole)?.id || "",
     },
   });
 
@@ -36,21 +41,43 @@ export const EditForm = ({
   const isLoading = form.formState.isSubmitting;
 
   const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
-    const formData = new FormData();
+    const changedFields: { [key: string]: any } = {};
-    console.log(values);
 
-    Object.entries(values).forEach(
+    // Check if the email changed
-      ([key, value]) => value !== undefined && formData.append(key, value),
+    if (values.invitationEmail && values.invitationEmail !== invitationEmail) {
-    );
+      changedFields.invitationEmail = values.invitationEmail;
+    }
+
+    // Check if the role changed
+    const currentRoleId =
+      roles.find((role) => role.name === currentRole)?.id || "";
+    if (values.role && values.role !== currentRoleId) {
+      changedFields.role = values.role;
+    }
+
+    // If there are no changes, avoid the request
+    if (Object.keys(changedFields).length === 0) {
+      toast({
+        title: "No changes detected",
+        description: "Please modify at least one field before saving.",
+      });
+      return;
+    }
+
+    changedFields.invitationId = invitationId; // Always include the ID
+
+    const formData = new FormData();
+    Object.entries(changedFields).forEach(([key, value]) => {
+      formData.append(key, value);
+    });
 
     const data = await updateInvite(formData);
 
     if (data?.error) {
-      const errorMessage = `${data.error}`;
       toast({
         variant: "destructive",
         title: "Oops! Something went wrong",
-        description: errorMessage,
+        description: `${data.error}`,
       });
     } else {
       toast({
@@ -67,9 +94,23 @@ export const EditForm = ({
         onSubmit={form.handleSubmit(onSubmitClient)}
         className="flex flex-col space-y-4"
       >
-        <div className="text-md">
+        <div className="flex flex-row justify-center space-x-4 rounded-lg bg-gray-50 p-3">
-          Current email: <span className="font-bold">{invitationEmail}</span>
+          <div className="flex items-center text-small text-gray-600">
+            <MailIcon className="mr-2 h-4 w-4" />
+            <span className="text-gray-500">Email:</span>
+            <span className="ml-2 font-semibold text-gray-900">
+              {invitationEmail}
+            </span>
+          </div>
+          <div className="flex items-center text-small text-gray-600">
+            <ShieldIcon className="mr-2 h-4 w-4" />
+            <span className="text-gray-500">Role:</span>
+            <span className="ml-2 font-semibold text-gray-900">
+              {currentRole}
+            </span>
+          </div>
         </div>
+
         <div>
           <CustomInput
             control={form.control}
@@ -83,6 +124,34 @@ export const EditForm = ({
             isInvalid={!!form.formState.errors.invitationEmail}
           />
         </div>
+        <div>
+          <Controller
+            name="role"
+            control={form.control}
+            render={({ field }) => (
+              <Select
+                {...field}
+                label="Role"
+                placeholder="Select a role"
+                variant="bordered"
+                selectedKeys={[field.value || ""]}
+                onSelectionChange={(selected) =>
+                  field.onChange(selected?.currentKey || "")
+                }
+              >
+                {roles.map((role) => (
+                  <SelectItem key={role.id}>{role.name}</SelectItem>
+                ))}
+              </Select>
+            )}
+          />
+
+          {form.formState.errors.role && (
+            <p className="mt-2 text-sm text-red-600">
+              {form.formState.errors.role.message}
+            </p>
+          )}
+        </div>
         <input type="hidden" name="invitationId" value={invitationId} />
 
         <div className="flex w-full justify-center sm:space-x-6">

ui/components/invitations/table/column-invitations.tsx

@@ -31,6 +31,15 @@ export const ColumnsInvitation: ColumnDef<InvitationProps>[] = [
       return <p className="font-semibold">{state}</p>;
     },
   },
+  {
+    accessorKey: "role",
+    header: () => <div className="text-left">Role</div>,
+    cell: ({ row }) => {
+      const roleName =
+        row.original.relationships?.role?.attributes?.name || "No Role";
+      return <p className="font-semibold">{roleName}</p>;
+    },
+  },
   {
     accessorKey: "inserted_at",
     header: ({ column }) => (
@@ -60,13 +69,13 @@ export const ColumnsInvitation: ColumnDef<InvitationProps>[] = [
       return <DateWithTime dateTime={expires_at} showTime={false} />;
     },
   },
-
   {
     accessorKey: "actions",
     header: () => <div className="text-right">Actions</div>,
     id: "actions",
     cell: ({ row }) => {
-      return <DataTableRowActions row={row} />;
+      const roles = row.original.roles;
+      return <DataTableRowActions row={row} roles={roles} />;
     },
   },
 ];

ui/components/invitations/table/data-table-row-actions.tsx

@@ -24,28 +24,34 @@ import { DeleteForm, EditForm } from "../forms";
 
 interface DataTableRowActionsProps<InvitationProps> {
   row: Row<InvitationProps>;
+  roles?: { id: string; name: string }[];
 }
 const iconClasses =
   "text-2xl text-default-500 pointer-events-none flex-shrink-0";
 
 export function DataTableRowActions<InvitationProps>({
   row,
+  roles,
 }: DataTableRowActionsProps<InvitationProps>) {
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const invitationId = (row.original as { id: string }).id;
   const invitationEmail = (row.original as any).attributes?.email;
+  const invitationRole = (row.original as any).relationships?.role?.attributes
+    ?.name;
+
   return (
     <>
       <CustomAlertModal
         isOpen={isEditOpen}
         onOpenChange={setIsEditOpen}
-        title="Edit Invitation"
+        title="Edit invitation details"
-        description={"Edit the invitation details"}
       >
         <EditForm
           invitationId={invitationId}
           invitationEmail={invitationEmail}
+          currentRole={invitationRole}
+          roles={roles || []}
           setIsOpen={setIsEditOpen}
         />
       </CustomAlertModal>

ui/components/invitations/workflow/forms/send-invitation-form.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Select, SelectItem } from "@nextui-org/react";
 import { SaveIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { sendInvite } from "@/actions/invitations/invitation";
@@ -14,11 +15,20 @@ import { ApiError } from "@/types";
 
 const sendInvitationFormSchema = z.object({
   email: z.string().email("Please enter a valid email"),
+  roleId: z.string().nonempty("Role is required"),
 });
 
 export type FormValues = z.infer<typeof sendInvitationFormSchema>;
 
-export const SendInvitationForm = () => {
+export const SendInvitationForm = ({
+  roles = [],
+  defaultRole = "admin",
+  isSelectorDisabled = false,
+}: {
+  roles: Array<{ id: string; name: string }>;
+  defaultRole?: string;
+  isSelectorDisabled: boolean;
+}) => {
   const { toast } = useToast();
   const router = useRouter();
 
@@ -26,6 +36,7 @@ export const SendInvitationForm = () => {
     resolver: zodResolver(sendInvitationFormSchema),
     defaultValues: {
       email: "",
+      roleId: isSelectorDisabled ? defaultRole : "",
     },
   });
 
@@ -34,6 +45,7 @@ export const SendInvitationForm = () => {
   const onSubmitClient = async (values: FormValues) => {
     const formData = new FormData();
     formData.append("email", values.email);
+    formData.append("role", values.roleId);
 
     try {
       const data = await sendInvite(formData);
@@ -48,6 +60,12 @@ export const SendInvitationForm = () => {
                 message: errorMessage,
               });
               break;
+            case "/data/relationships/roles":
+              form.setError("roleId", {
+                type: "server",
+                message: errorMessage,
+              });
+              break;
             default:
               toast({
                 variant: "destructive",
@@ -75,6 +93,7 @@ export const SendInvitationForm = () => {
         onSubmit={form.handleSubmit(onSubmitClient)}
         className="flex flex-col space-y-4"
       >
+        {/* Email Field */}
         <CustomInput
           control={form.control}
           name="email"
@@ -87,6 +106,40 @@ export const SendInvitationForm = () => {
           isInvalid={!!form.formState.errors.email}
         />
 
+        <Controller
+          name="roleId"
+          control={form.control}
+          render={({ field }) => (
+            <>
+              <Select
+                {...field}
+                label="Role"
+                placeholder="Select a role"
+                variant="bordered"
+                isDisabled={isSelectorDisabled}
+                selectedKeys={[field.value]}
+                onSelectionChange={(selected) =>
+                  field.onChange(selected?.currentKey || "")
+                }
+              >
+                {isSelectorDisabled ? (
+                  <SelectItem key={defaultRole}>{defaultRole}</SelectItem>
+                ) : (
+                  roles.map((role) => (
+                    <SelectItem key={role.id}>{role.name}</SelectItem>
+                  ))
+                )}
+              </Select>
+              {form.formState.errors.roleId && (
+                <p className="mt-2 text-sm text-red-600">
+                  {form.formState.errors.roleId.message}
+                </p>
+              )}
+            </>
+          )}
+        />
+
+        {/* Submit Button */}
         <div className="flex w-full justify-end sm:space-x-6">
           <CustomButton
             type="submit"

ui/components/manage-groups/forms/add-group-form.tsx

@@ -0,0 +1,199 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Divider } from "@nextui-org/react";
+import { SaveIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { createProviderGroup } from "@/actions/manage-groups";
+import { useToast } from "@/components/ui";
+import {
+  CustomButton,
+  CustomDropdownSelection,
+  CustomInput,
+} from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+import { ApiError } from "@/types";
+
+const addGroupSchema = z.object({
+  name: z.string().nonempty("Provider group name is required"),
+  providers: z.array(z.string()).optional(),
+  roles: z.array(z.string()).optional(),
+});
+
+export type FormValues = z.infer<typeof addGroupSchema>;
+
+export const AddGroupForm = ({
+  roles = [],
+  providers = [],
+}: {
+  roles: Array<{ id: string; name: string }>;
+  providers: Array<{ id: string; name: string }>;
+}) => {
+  const { toast } = useToast();
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(addGroupSchema),
+    defaultValues: {
+      name: "",
+      providers: [],
+      roles: [],
+    },
+  });
+
+  const isLoading = form.formState.isSubmitting;
+
+  const onSubmitClient = async (values: FormValues) => {
+    console.log(values);
+    try {
+      const formData = new FormData();
+      formData.append("name", values.name);
+
+      if (values.providers?.length) {
+        const providersData = values.providers.map((id) => ({
+          id,
+          type: "providers",
+        }));
+        formData.append("providers", JSON.stringify(providersData));
+      }
+
+      if (values.roles?.length) {
+        const rolesData = values.roles.map((id) => ({
+          id,
+          type: "roles",
+        }));
+        formData.append("roles", JSON.stringify(rolesData));
+      }
+
+      const data = await createProviderGroup(formData);
+
+      if (data?.errors && data.errors.length > 0) {
+        data.errors.forEach((error: ApiError) => {
+          const errorMessage = error.detail;
+          switch (error.source.pointer) {
+            case "/data/attributes/name":
+              form.setError("name", {
+                type: "server",
+                message: errorMessage,
+              });
+              break;
+            case "/data/relationships/roles":
+              form.setError("roles", {
+                type: "server",
+                message: errorMessage,
+              });
+              break;
+            default:
+              toast({
+                variant: "destructive",
+                title: "Oops! Something went wrong",
+                description: errorMessage,
+              });
+          }
+        });
+      } else {
+        form.reset();
+        toast({
+          title: "Success!",
+          description: "The group was created successfully.",
+        });
+      }
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "An unexpected error occurred. Please try again.",
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmitClient)}
+        className="flex flex-col space-y-4"
+      >
+        {/* Name Field */}
+        <p className="text-small font-medium text-default-700">
+          Please provide a name for the group. You can also select providers and
+          roles to associate with the group, this step is optional and can be
+          done later if needed.
+        </p>
+        <Divider orientation="horizontal" className="mb-2" />
+        <div className="flex flex-col gap-2">
+          <CustomInput
+            control={form.control}
+            name="name"
+            type="text"
+            label="Provider group name"
+            labelPlacement="outside"
+            placeholder="Enter the provider group name"
+            variant="bordered"
+            isRequired
+            isInvalid={!!form.formState.errors.name}
+          />
+        </div>
+
+        {/* Providers Field */}
+        <Controller
+          name="providers"
+          control={form.control}
+          render={({ field }) => (
+            <CustomDropdownSelection
+              label="Select Providers"
+              name="providers"
+              values={providers}
+              selectedKeys={field.value || []}
+              onChange={(name, selectedValues) =>
+                field.onChange(selectedValues)
+              }
+            />
+          )}
+        />
+        {form.formState.errors.providers && (
+          <p className="mt-2 text-sm text-red-600">
+            {form.formState.errors.providers.message}
+          </p>
+        )}
+
+        {/* Roles Field */}
+        <Controller
+          name="roles"
+          control={form.control}
+          render={({ field }) => (
+            <CustomDropdownSelection
+              label="Select Roles"
+              name="roles"
+              values={roles}
+              selectedKeys={field.value || []}
+              onChange={(name, selectedValues) =>
+                field.onChange(selectedValues)
+              }
+            />
+          )}
+        />
+        {form.formState.errors.roles && (
+          <p className="mt-2 text-sm text-red-600">
+            {form.formState.errors.roles.message}
+          </p>
+        )}
+
+        {/* Submit Button */}
+        <div className="flex w-full justify-end sm:space-x-6">
+          <CustomButton
+            type="submit"
+            ariaLabel="Create Group"
+            className="w-1/2"
+            variant="solid"
+            color="action"
+            size="md"
+            isLoading={isLoading}
+            startContent={!isLoading && <SaveIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Create Group</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};

ui/components/manage-groups/forms/index.ts

@@ -0,0 +1 @@
+export * from "./add-group-form";

ui/components/manage-groups/index.ts

@@ -0,0 +1,2 @@
+export * from "./manage-groups-button";
+export * from "./skeleton-manage-groups";

ui/components/manage-groups/manage-groups-button.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { SettingsIcon } from "lucide-react";
+
+import { CustomButton } from "../ui/custom";
+
+export const ManageGroupsButton = () => {
+  return (
+    <CustomButton
+      asLink="/providers/manage-groups"
+      ariaLabel="Manage Groups"
+      variant="dashed"
+      color="warning"
+      size="md"
+      startContent={<SettingsIcon size={20} />}
+    >
+      Manage Groups
+    </CustomButton>
+  );
+};

ui/components/manage-groups/skeleton-manage-groups.tsx

@@ -0,0 +1,65 @@
+import { Card, Skeleton } from "@nextui-org/react";
+import React from "react";
+
+export const SkeletonManageGroups = () => {
+  return (
+    <Card className="h-full w-full space-y-5 p-4" radius="sm">
+      {/* Table headers */}
+      <div className="hidden justify-between md:flex">
+        <Skeleton className="w-1/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-1/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-1/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+      </div>
+
+      {/* Table body */}
+      <div className="space-y-3">
+        {[...Array(3)].map((_, index) => (
+          <div
+            key={index}
+            className="flex flex-col items-center justify-between space-x-0 md:flex-row md:space-x-4"
+          >
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-1/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+};

ui/components/providers/add-provider-button.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AddIcon } from "../icons";
+import { CustomButton } from "../ui/custom";
+
+export const AddProviderButton = () => {
+  return (
+    <CustomButton
+      asLink="/providers/connect-account"
+      ariaLabel="Add Account"
+      variant="solid"
+      color="action"
+      size="md"
+      endContent={<AddIcon size={20} />}
+    >
+      Add Account
+    </CustomButton>
+  );
+};

ui/components/providers/index.ts

@@ -1,4 +1,4 @@
-export * from "./add-provider";
+export * from "./add-provider-button";
 export * from "./forms/delete-form";
 export * from "./link-to-scans";
 export * from "./provider-info";

ui/components/roles/add-role-button.tsx

@@ -3,18 +3,18 @@
 import { AddIcon } from "../icons";
 import { CustomButton } from "../ui/custom";
 
-export const AddProvider = () => {
+export const AddRoleButton = () => {
   return (
     <div className="flex w-full items-center justify-end">
       <CustomButton
-        asLink="/providers/connect-account"
+        asLink="/roles/new"
-        ariaLabel="Add Account"
+        ariaLabel="Add Role"
         variant="solid"
         color="action"
         size="md"
         endContent={<AddIcon size={20} />}
       >
-        Add Account
+        Add Role
       </CustomButton>
     </div>
   );

ui/components/roles/index.ts

@@ -0,0 +1 @@
+export * from "./add-role-button";

ui/components/roles/table/column-roles.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+
+import { DateWithTime } from "@/components/ui/entities";
+import { DataTableColumnHeader } from "@/components/ui/table";
+import { RolesProps } from "@/types";
+
+import { DataTableRowActions } from "./data-table-row-actions";
+
+const getRoleAttributes = (row: { original: RolesProps["data"][number] }) => {
+  return row.original.attributes;
+};
+
+const getRoleRelationships = (row: {
+  original: RolesProps["data"][number];
+}) => {
+  return row.original.relationships;
+};
+
+export const ColumnsRoles: ColumnDef<RolesProps["data"][number]>[] = [
+  {
+    accessorKey: "role",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Role"} param="name" />
+    ),
+    cell: ({ row }) => {
+      const data = getRoleAttributes(row);
+      return (
+        <p className="font-semibold">
+          {data.name[0].toUpperCase() + data.name.slice(1).toLowerCase()}
+        </p>
+      );
+    },
+  },
+  {
+    accessorKey: "users",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Users"} param="users" />
+    ),
+    cell: ({ row }) => {
+      const relationships = getRoleRelationships(row);
+      const count = relationships.users.meta.count;
+      return (
+        <p className="text-xs font-semibold">
+          {count === 0
+            ? "No Users"
+            : `${count} ${count === 1 ? "User" : "Users"}`}
+        </p>
+      );
+    },
+  },
+  {
+    accessorKey: "invitations",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Invitations"}
+        param="invitations"
+      />
+    ),
+    cell: ({ row }) => {
+      const relationships = getRoleRelationships(row);
+      return (
+        <p className="text-xs font-semibold">
+          {relationships.invitations.meta.count === 0
+            ? "No Invitations"
+            : `${relationships.invitations.meta.count} ${
+                relationships.invitations.meta.count === 1
+                  ? "Invitation"
+                  : "Invitations"
+              }`}
+        </p>
+      );
+    },
+  },
+  {
+    accessorKey: "permission_state",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Permissions"}
+        param="permission_state"
+      />
+    ),
+    cell: ({ row }) => {
+      const { permission_state } = getRoleAttributes(row);
+      return (
+        <p className="text-xs font-semibold">
+          {permission_state[0].toUpperCase() +
+            permission_state.slice(1).toLowerCase()}
+        </p>
+      );
+    },
+  },
+  {
+    accessorKey: "inserted_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Added"}
+        param="inserted_at"
+      />
+    ),
+    cell: ({ row }) => {
+      const { inserted_at } = getRoleAttributes(row);
+      return <DateWithTime dateTime={inserted_at} showTime={false} />;
+    },
+  },
+  {
+    accessorKey: "actions",
+    header: () => <div className="text-right">Actions</div>,
+    id: "actions",
+    cell: ({ row }) => {
+      return <DataTableRowActions row={row} />;
+    },
+  },
+];

ui/components/roles/table/data-table-row-actions.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownSection,
+  DropdownTrigger,
+} from "@nextui-org/react";
+import {
+  DeleteDocumentBulkIcon,
+  EditDocumentBulkIcon,
+} from "@nextui-org/shared-icons";
+import { Row } from "@tanstack/react-table";
+import clsx from "clsx";
+import { useState } from "react";
+
+import { VerticalDotsIcon } from "@/components/icons";
+import { CustomAlertModal } from "@/components/ui/custom/custom-alert-modal";
+
+import { DeleteRoleForm } from "../workflow/forms";
+interface DataTableRowActionsProps<RoleProps> {
+  row: Row<RoleProps>;
+}
+const iconClasses =
+  "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+
+export function DataTableRowActions<RoleProps>({
+  row,
+}: DataTableRowActionsProps<RoleProps>) {
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const roleId = (row.original as { id: string }).id;
+  return (
+    <>
+      <CustomAlertModal
+        isOpen={isDeleteOpen}
+        onOpenChange={setIsDeleteOpen}
+        title="Are you absolutely sure?"
+        description="This action cannot be undone. This will permanently delete your role and remove your data from the server."
+      >
+        <DeleteRoleForm roleId={roleId} setIsOpen={setIsDeleteOpen} />
+      </CustomAlertModal>
+      <div className="relative flex items-center justify-end gap-2">
+        <Dropdown
+          className="shadow-xl dark:bg-prowler-blue-800"
+          placement="bottom"
+        >
+          <DropdownTrigger>
+            <Button isIconOnly radius="full" size="sm" variant="light">
+              <VerticalDotsIcon className="text-default-400" />
+            </Button>
+          </DropdownTrigger>
+          <DropdownMenu
+            closeOnSelect
+            aria-label="Actions"
+            color="default"
+            variant="flat"
+          >
+            <DropdownSection title="Actions">
+              <DropdownItem
+                href={`/roles/edit?roleId=${roleId}`}
+                key="check-details"
+                description="Edit the role details"
+                textValue="Edit Role"
+                startContent={<EditDocumentBulkIcon className={iconClasses} />}
+              >
+                Edit Role
+              </DropdownItem>
+            </DropdownSection>
+            <DropdownSection title="Danger zone">
+              <DropdownItem
+                key="delete"
+                className="text-danger"
+                color="danger"
+                description="Delete the role permanently"
+                textValue="Delete Role"
+                startContent={
+                  <DeleteDocumentBulkIcon
+                    className={clsx(iconClasses, "!text-danger")}
+                  />
+                }
+                onClick={() => setIsDeleteOpen(true)}
+              >
+                Delete Role
+              </DropdownItem>
+            </DropdownSection>
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+    </>
+  );
+}

ui/components/roles/table/index.ts

@@ -0,0 +1,3 @@
+export * from "./column-roles";
+export * from "./data-table-row-actions";
+export * from "./skeleton-table-roles";

ui/components/roles/table/skeleton-table-roles.tsx

@@ -0,0 +1,59 @@
+import { Card, Skeleton } from "@nextui-org/react";
+import React from "react";
+
+export const SkeletonTableRoles = () => {
+  return (
+    <Card className="h-full w-full space-y-5 p-4" radius="sm">
+      {/* Table headers */}
+      <div className="hidden justify-between md:flex">
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-1/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+      </div>
+
+      {/* Table body */}
+      <div className="space-y-3">
+        {[...Array(10)].map((_, index) => (
+          <div
+            key={index}
+            className="flex flex-col items-center justify-between space-x-0 md:flex-row md:space-x-4"
+          >
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+};

ui/components/roles/workflow/forms/add-role-form.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Checkbox } from "@nextui-org/react";
+import { SaveIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { addRole } from "@/actions/roles/roles";
+import { useToast } from "@/components/ui";
+import { CustomButton, CustomInput } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+import { addRoleFormSchema, ApiError } from "@/types";
+
+type FormValues = z.infer<typeof addRoleFormSchema>;
+
+export const AddRoleForm = () => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(addRoleFormSchema),
+    defaultValues: {
+      name: "",
+      manage_users: false,
+      manage_account: false,
+      manage_billing: false,
+      manage_providers: false,
+      manage_integrations: false,
+      manage_scans: false,
+      unlimited_visibility: false,
+    },
+  });
+
+  const manageProviders = form.watch("manage_providers");
+
+  useEffect(() => {
+    if (manageProviders) {
+      form.setValue("unlimited_visibility", true, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      });
+    }
+  }, [manageProviders, form]);
+
+  const isLoading = form.formState.isSubmitting;
+
+  const onSelectAllChange = (checked: boolean) => {
+    const permissions = [
+      "manage_users",
+      "manage_account",
+      "manage_billing",
+      "manage_providers",
+      "manage_integrations",
+      "manage_scans",
+      "unlimited_visibility",
+    ];
+    permissions.forEach((permission) => {
+      form.setValue(permission as keyof FormValues, checked, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      });
+    });
+  };
+
+  const onSubmitClient = async (values: FormValues) => {
+    const formData = new FormData();
+    formData.append("name", values.name);
+    formData.append("manage_users", String(values.manage_users));
+    formData.append("manage_account", String(values.manage_account));
+    formData.append("manage_billing", String(values.manage_billing));
+    formData.append("manage_providers", String(values.manage_providers));
+    formData.append("manage_integrations", String(values.manage_integrations));
+    formData.append("manage_scans", String(values.manage_scans));
+    formData.append(
+      "unlimited_visibility",
+      String(values.unlimited_visibility),
+    );
+
+    try {
+      const data = await addRole(formData);
+
+      if (data?.errors && data.errors.length > 0) {
+        data.errors.forEach((error: ApiError) => {
+          const errorMessage = error.detail;
+          switch (error.source.pointer) {
+            case "/data/attributes/name":
+              form.setError("name", {
+                type: "server",
+                message: errorMessage,
+              });
+              break;
+            default:
+              toast({
+                variant: "destructive",
+                title: "Error",
+                description: errorMessage,
+              });
+          }
+        });
+      } else {
+        toast({
+          title: "Role Added",
+          description: "The role was added successfully.",
+        });
+        router.push("/roles");
+      }
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "An unexpected error occurred. Please try again.",
+      });
+    }
+  };
+
+  const permissions = [
+    { field: "manage_users", label: "Invite and Manage Users" },
+    { field: "manage_account", label: "Manage SaaS Account" },
+    { field: "manage_billing", label: "Manage Billing" },
+    { field: "manage_providers", label: "Manage Cloud Accounts" },
+    { field: "manage_integrations", label: "Manage Integrations" },
+    { field: "manage_scans", label: "Manage Scans" },
+    { field: "unlimited_visibility", label: "Unlimited Visibility" },
+  ];
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmitClient)}
+        className="flex flex-col space-y-6"
+      >
+        <CustomInput
+          control={form.control}
+          name="name"
+          type="text"
+          label="Role Name"
+          labelPlacement="inside"
+          placeholder="Enter role name"
+          variant="bordered"
+          isRequired
+          isInvalid={!!form.formState.errors.name}
+        />
+
+        <div className="flex flex-col space-y-4">
+          <span className="text-lg font-semibold">Admin Permissions</span>
+
+          {/* Select All Checkbox */}
+          <Checkbox
+            isSelected={permissions.every((perm) =>
+              form.watch(perm.field as keyof FormValues),
+            )}
+            onChange={(e) => onSelectAllChange(e.target.checked)}
+            classNames={{
+              label: "text-small",
+            }}
+          >
+            Grant all admin permissions
+          </Checkbox>
+
+          {/* Permissions Grid */}
+          <div className="grid grid-cols-2 gap-4">
+            {permissions.map(({ field, label }) => (
+              <Checkbox
+                key={field}
+                {...form.register(field as keyof FormValues)}
+                isSelected={!!form.watch(field as keyof FormValues)}
+                classNames={{
+                  label: "text-small",
+                }}
+              >
+                {label}
+              </Checkbox>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex w-full justify-end sm:space-x-6">
+          <CustomButton
+            type="submit"
+            ariaLabel="Add Role"
+            className="w-1/2"
+            variant="solid"
+            color="action"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <SaveIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Add Role</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};

ui/components/roles/workflow/forms/delete-role-form.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { Dispatch, SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { deleteRole } from "@/actions/roles";
+import { DeleteIcon } from "@/components/icons";
+import { useToast } from "@/components/ui";
+import { CustomButton } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+
+const formSchema = z.object({
+  roleId: z.string(),
+});
+
+export const DeleteRoleForm = ({
+  roleId,
+  setIsOpen,
+}: {
+  roleId: string;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+  const { toast } = useToast();
+  const isLoading = form.formState.isSubmitting;
+
+  async function onSubmitClient(formData: FormData) {
+    const roleId = formData.get("id") as string;
+    const data = await deleteRole(roleId);
+
+    if (data?.errors && data.errors.length > 0) {
+      const error = data.errors[0];
+      const errorMessage = `${error.detail}`;
+      // show error
+      toast({
+        variant: "destructive",
+        title: "Oops! Something went wrong",
+        description: errorMessage,
+      });
+    } else {
+      toast({
+        title: "Success!",
+        description: "The role was removed successfully.",
+      });
+    }
+    setIsOpen(false); // Close the modal on success
+  }
+
+  return (
+    <Form {...form}>
+      <form action={onSubmitClient}>
+        <input type="hidden" name="id" value={roleId} />
+        <div className="flex w-full justify-center sm:space-x-6">
+          <CustomButton
+            type="button"
+            ariaLabel="Cancel"
+            className="w-full bg-transparent"
+            variant="faded"
+            size="lg"
+            radius="lg"
+            onPress={() => setIsOpen(false)}
+            isDisabled={isLoading}
+          >
+            <span>Cancel</span>
+          </CustomButton>
+
+          <CustomButton
+            type="submit"
+            ariaLabel="Delete"
+            className="w-full"
+            variant="solid"
+            color="danger"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <DeleteIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Delete</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};

ui/components/roles/workflow/forms/edit-role-form.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Checkbox } from "@nextui-org/react";
+import { SaveIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { updateRole } from "@/actions/roles/roles";
+import { useToast } from "@/components/ui";
+import { CustomButton, CustomInput } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+import { ApiError, editRoleFormSchema } from "@/types";
+
+type FormValues = z.infer<typeof editRoleFormSchema>;
+
+export const EditRoleForm = ({
+  roleId,
+  roleData,
+}: {
+  roleId: string;
+  roleData: FormValues;
+}) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(editRoleFormSchema),
+    defaultValues: roleData,
+  });
+
+  const { watch, setValue } = form;
+
+  const manageProviders = watch("manage_providers");
+  const unlimitedVisibility = watch("unlimited_visibility");
+
+  useEffect(() => {
+    if (manageProviders && !unlimitedVisibility) {
+      setValue("unlimited_visibility", true, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      });
+    }
+  }, [manageProviders, unlimitedVisibility, setValue]);
+
+  const isLoading = form.formState.isSubmitting;
+
+  const onSelectAllChange = (checked: boolean) => {
+    const permissions = [
+      "manage_users",
+      "manage_account",
+      "manage_billing",
+      "manage_providers",
+      "manage_integrations",
+      "manage_scans",
+      "unlimited_visibility",
+    ];
+    permissions.forEach((permission) => {
+      form.setValue(permission as keyof FormValues, checked, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      });
+    });
+  };
+
+  const onSubmitClient = async (values: FormValues) => {
+    if (!roleId) {
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Role ID is missing.",
+      });
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("name", values.name);
+    formData.append("manage_users", String(values.manage_users));
+    formData.append("manage_account", String(values.manage_account));
+    formData.append("manage_billing", String(values.manage_billing));
+    formData.append("manage_providers", String(values.manage_providers));
+    formData.append("manage_integrations", String(values.manage_integrations));
+    formData.append("manage_scans", String(values.manage_scans));
+    formData.append(
+      "unlimited_visibility",
+      String(values.unlimited_visibility),
+    );
+
+    try {
+      const data = await updateRole(formData, roleId);
+
+      if (data?.errors && data.errors.length > 0) {
+        data.errors.forEach((error: ApiError) => {
+          const errorMessage = error.detail;
+          switch (error.source.pointer) {
+            case "/data/attributes/name":
+              form.setError("name", {
+                type: "server",
+                message: errorMessage,
+              });
+              break;
+            default:
+              toast({
+                variant: "destructive",
+                title: "Error",
+                description: errorMessage,
+              });
+          }
+        });
+      } else {
+        toast({
+          title: "Role Updated",
+          description: "The role was updated successfully.",
+        });
+        router.push("/roles");
+      }
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "An unexpected error occurred. Please try again.",
+      });
+    }
+  };
+
+  const permissions = [
+    { field: "manage_users", label: "Invite and Manage Users" },
+    { field: "manage_account", label: "Manage SaaS Account" },
+    { field: "manage_billing", label: "Manage Billing" },
+    { field: "manage_providers", label: "Manage Cloud Accounts" },
+    { field: "manage_integrations", label: "Manage Integrations" },
+    { field: "manage_scans", label: "Manage Scans" },
+    { field: "unlimited_visibility", label: "Unlimited Visibility" },
+  ];
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmitClient)}
+        className="flex flex-col space-y-6"
+      >
+        <CustomInput
+          control={form.control}
+          name="name"
+          type="text"
+          label="Role Name"
+          labelPlacement="inside"
+          placeholder="Enter role name"
+          variant="bordered"
+          isRequired
+          isInvalid={!!form.formState.errors.name}
+        />
+
+        <div className="flex flex-col space-y-4">
+          <span className="text-lg font-semibold">Admin Permissions</span>
+
+          {/* Select All Checkbox */}
+          <Checkbox
+            isSelected={permissions.every((perm) =>
+              form.watch(perm.field as keyof FormValues),
+            )}
+            onChange={(e) => onSelectAllChange(e.target.checked)}
+            classNames={{
+              label: "text-small",
+            }}
+          >
+            Grant all admin permissions
+          </Checkbox>
+
+          {/* Permissions Grid */}
+          <div className="grid grid-cols-2 gap-4">
+            {permissions.map(({ field, label }) => (
+              <Checkbox
+                key={field}
+                {...form.register(field as keyof FormValues)}
+                isSelected={!!form.watch(field as keyof FormValues)}
+                classNames={{
+                  label: "text-small",
+                }}
+              >
+                {label}
+              </Checkbox>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex w-full justify-end sm:space-x-6">
+          <CustomButton
+            type="submit"
+            ariaLabel="Update Role"
+            className="w-1/2"
+            variant="solid"
+            color="action"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <SaveIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Update Role</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};

ui/components/roles/workflow/forms/index.ts

@@ -0,0 +1,3 @@
+export * from "./add-role-form";
+export * from "./delete-role-form";
+export * from "./edit-role-form";

ui/components/roles/workflow/index.ts

@@ -0,0 +1,3 @@
+export * from "./skeleton-role-form";
+export * from "./vertical-steps";
+export * from "./workflow-add-edit-role";

ui/components/roles/workflow/skeleton-role-form.tsx

@@ -0,0 +1,65 @@
+import { Card, Skeleton } from "@nextui-org/react";
+import React from "react";
+
+export const SkeletonRoleForm = () => {
+  return (
+    <Card className="h-full w-full space-y-5 p-4" radius="sm">
+      {/* Table headers */}
+      <div className="hidden justify-between md:flex">
+        <Skeleton className="w-1/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-2/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-1/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+        <Skeleton className="w-1/12 rounded-lg">
+          <div className="h-8 bg-default-200"></div>
+        </Skeleton>
+      </div>
+
+      {/* Table body */}
+      <div className="space-y-3">
+        {[...Array(3)].map((_, index) => (
+          <div
+            key={index}
+            className="flex flex-col items-center justify-between space-x-0 md:flex-row md:space-x-4"
+          >
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-1/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+            <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
+              <div className="h-12 bg-default-300"></div>
+            </Skeleton>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+};

ui/components/roles/workflow/vertical-steps.tsx

@@ -0,0 +1,291 @@
+"use client";
+
+import type { ButtonProps } from "@nextui-org/react";
+import { cn } from "@nextui-org/react";
+import { useControlledState } from "@react-stately/utils";
+import { domAnimation, LazyMotion, m } from "framer-motion";
+import type { ComponentProps } from "react";
+import React from "react";
+
+export type VerticalStepProps = {
+  className?: string;
+  description?: React.ReactNode;
+  title?: React.ReactNode;
+};
+
+export interface VerticalStepsProps
+  extends React.HTMLAttributes<HTMLButtonElement> {
+  /**
+   * An array of steps.
+   *
+   * @default []
+   */
+  steps?: VerticalStepProps[];
+  /**
+   * The color of the steps.
+   *
+   * @default "primary"
+   */
+  color?: ButtonProps["color"];
+  /**
+   * The current step index.
+   */
+  currentStep?: number;
+  /**
+   * The default step index.
+   *
+   * @default 0
+   */
+  defaultStep?: number;
+  /**
+   * Whether to hide the progress bars.
+   *
+   * @default false
+   */
+  hideProgressBars?: boolean;
+  /**
+   * The custom class for the steps wrapper.
+   */
+  className?: string;
+  /**
+   * The custom class for the step.
+   */
+  stepClassName?: string;
+  /**
+   * Callback function when the step index changes.
+   */
+  onStepChange?: (stepIndex: number) => void;
+}
+
+function CheckIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      {...props}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+    >
+      <m.path
+        animate={{ pathLength: 1 }}
+        d="M5 13l4 4L19 7"
+        initial={{ pathLength: 0 }}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        transition={{
+          delay: 0.2,
+          type: "tween",
+          ease: "easeOut",
+          duration: 0.3,
+        }}
+      />
+    </svg>
+  );
+}
+
+export const VerticalSteps = React.forwardRef<
+  HTMLButtonElement,
+  VerticalStepsProps
+>(
+  (
+    {
+      color = "primary",
+      steps = [],
+      defaultStep = 0,
+      onStepChange,
+      currentStep: currentStepProp,
+      hideProgressBars = false,
+      stepClassName,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [currentStep, setCurrentStep] = useControlledState(
+      currentStepProp,
+      defaultStep,
+      onStepChange,
+    );
+
+    const colors = React.useMemo(() => {
+      let userColor;
+      let fgColor;
+
+      const colorsVars = [
+        "[--active-fg-color:var(--step-fg-color)]",
+        "[--active-border-color:var(--step-color)]",
+        "[--active-color:var(--step-color)]",
+        "[--complete-background-color:var(--step-color)]",
+        "[--complete-border-color:var(--step-color)]",
+        "[--inactive-border-color:hsl(var(--nextui-default-300))]",
+        "[--inactive-color:hsl(var(--nextui-default-300))]",
+      ];
+
+      switch (color) {
+        case "primary":
+          userColor = "[--step-color:hsl(var(--nextui-primary))]";
+          fgColor = "[--step-fg-color:hsl(var(--nextui-primary-foreground))]";
+          break;
+        case "secondary":
+          userColor = "[--step-color:hsl(var(--nextui-secondary))]";
+          fgColor = "[--step-fg-color:hsl(var(--nextui-secondary-foreground))]";
+          break;
+        case "success":
+          userColor = "[--step-color:hsl(var(--nextui-success))]";
+          fgColor = "[--step-fg-color:hsl(var(--nextui-success-foreground))]";
+          break;
+        case "warning":
+          userColor = "[--step-color:hsl(var(--nextui-warning))]";
+          fgColor = "[--step-fg-color:hsl(var(--nextui-warning-foreground))]";
+          break;
+        case "danger":
+          userColor = "[--step-color:hsl(var(--nextui-error))]";
+          fgColor = "[--step-fg-color:hsl(var(--nextui-error-foreground))]";
+          break;
+        case "default":
+          userColor = "[--step-color:hsl(var(--nextui-default))]";
+          fgColor = "[--step-fg-color:hsl(var(--nextui-default-foreground))]";
+          break;
+        default:
+          userColor = "[--step-color:hsl(var(--nextui-primary))]";
+          fgColor = "[--step-fg-color:hsl(var(--nextui-primary-foreground))]";
+          break;
+      }
+
+      if (!className?.includes("--step-fg-color")) colorsVars.unshift(fgColor);
+      if (!className?.includes("--step-color")) colorsVars.unshift(userColor);
+      if (!className?.includes("--inactive-bar-color"))
+        colorsVars.push(
+          "[--inactive-bar-color:hsl(var(--nextui-default-300))]",
+        );
+
+      return colorsVars;
+    }, [color, className]);
+
+    return (
+      <nav aria-label="Progress" className="max-w-fit">
+        <ol className={cn("flex flex-col gap-y-3", colors, className)}>
+          {steps?.map((step, stepIdx) => {
+            const status =
+              currentStep === stepIdx
+                ? "active"
+                : currentStep < stepIdx
+                  ? "inactive"
+                  : "complete";
+
+            return (
+              <li key={stepIdx} className="relative">
+                <div className="flex w-full max-w-full items-center">
+                  <button
+                    key={stepIdx}
+                    ref={ref}
+                    aria-current={status === "active" ? "step" : undefined}
+                    className={cn(
+                      "group flex w-full cursor-pointer items-center justify-center gap-4 rounded-large px-3 py-2.5",
+                      stepClassName,
+                    )}
+                    onClick={() => setCurrentStep(stepIdx)}
+                    {...props}
+                  >
+                    <div className="flex h-full items-center">
+                      <LazyMotion features={domAnimation}>
+                        <div className="relative">
+                          <m.div
+                            animate={status}
+                            className={cn(
+                              "relative flex h-[34px] w-[34px] items-center justify-center rounded-full border-medium text-large font-semibold text-default-foreground",
+                              {
+                                "shadow-lg": status === "complete",
+                              },
+                            )}
+                            data-status={status}
+                            initial={false}
+                            transition={{ duration: 0.25 }}
+                            variants={{
+                              inactive: {
+                                backgroundColor: "transparent",
+                                borderColor: "var(--inactive-border-color)",
+                                color: "var(--inactive-color)",
+                              },
+                              active: {
+                                backgroundColor: "transparent",
+                                borderColor: "var(--active-border-color)",
+                                color: "var(--active-color)",
+                              },
+                              complete: {
+                                backgroundColor:
+                                  "var(--complete-background-color)",
+                                borderColor: "var(--complete-border-color)",
+                              },
+                            }}
+                          >
+                            <div className="flex items-center justify-center">
+                              {status === "complete" ? (
+                                <CheckIcon className="h-6 w-6 text-[var(--active-fg-color)]" />
+                              ) : (
+                                <span>{stepIdx + 1}</span>
+                              )}
+                            </div>
+                          </m.div>
+                        </div>
+                      </LazyMotion>
+                    </div>
+                    <div className="flex-1 text-left">
+                      <div>
+                        <div
+                          className={cn(
+                            "text-medium font-medium text-default-foreground transition-[color,opacity] duration-300 group-active:opacity-70",
+                            {
+                              "text-default-500": status === "inactive",
+                            },
+                          )}
+                        >
+                          {step.title}
+                        </div>
+                        <div
+                          className={cn(
+                            "text-tiny text-default-600 transition-[color,opacity] duration-300 group-active:opacity-70 lg:text-small",
+                            {
+                              "text-default-500": status === "inactive",
+                            },
+                          )}
+                        >
+                          {step.description}
+                        </div>
+                      </div>
+                    </div>
+                  </button>
+                </div>
+                {stepIdx < steps.length - 1 && !hideProgressBars && (
+                  <div
+                    aria-hidden="true"
+                    className={cn(
+                      "pointer-events-none absolute left-3 top-[calc(64px_*_var(--idx)_+_1)] flex h-1/2 -translate-y-1/3 items-center px-4",
+                    )}
+                    style={{
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-expect-error
+                      "--idx": stepIdx,
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "relative h-full w-0.5 bg-[var(--inactive-bar-color)] transition-colors duration-300",
+                        "after:absolute after:block after:h-0 after:w-full after:bg-[var(--active-border-color)] after:transition-[height] after:duration-300 after:content-['']",
+                        {
+                          "after:h-full": stepIdx < currentStep,
+                        },
+                      )}
+                    />
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
+    );
+  },
+);
+
+VerticalSteps.displayName = "VerticalSteps";

ui/components/roles/workflow/workflow-add-edit-role.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Progress, Spacer } from "@nextui-org/react";
+import { usePathname } from "next/navigation";
+import React from "react";
+
+import { VerticalSteps } from "./vertical-steps";
+
+const steps = [
+  {
+    title: "Create a new role",
+    description: "Enter the name of the role you want to add.",
+    href: "/roles/new",
+  },
+  {
+    title: "Edit a existing role",
+    description:
+      "Update the role's details, including its name and permissions.",
+    href: "/roles/edit",
+  },
+];
+
+export const WorkflowAddEditRole = () => {
+  const pathname = usePathname();
+
+  // Calculate current step based on pathname
+  const currentStepIndex = steps.findIndex((step) =>
+    pathname.endsWith(step.href),
+  );
+  const currentStep = currentStepIndex === -1 ? 0 : currentStepIndex;
+
+  return (
+    <section className="max-w-sm">
+      <h1 className="mb-2 text-xl font-medium" id="getting-started">
+        Manage Role Permissions
+      </h1>
+      <p className="mb-5 text-small text-default-500">
+        Define a new role with customized permissions or modify an existing one
+        to meet your needs.
+      </p>
+      <Progress
+        classNames={{
+          base: "px-0.5 mb-5",
+          label: "text-small",
+          value: "text-small text-default-400",
+        }}
+        label="Steps"
+        maxValue={steps.length - 1}
+        minValue={0}
+        showValueLabel={true}
+        size="md"
+        value={currentStep}
+        valueLabel={`${currentStep + 1} of ${steps.length}`}
+      />
+      <VerticalSteps
+        hideProgressBars
+        currentStep={currentStep}
+        stepClassName="border border-default-200 dark:border-default-50 aria-[current]:bg-default-100 dark:aria-[current]:bg-prowler-blue-800 cursor-default"
+        steps={steps}
+      />
+      <Spacer y={4} />
+    </section>
+  );
+};

ui/components/scans/table/scans/column-get-scans.tsx

@@ -127,7 +127,7 @@ export const ColumnGetScans: ColumnDef<ScanProps>[] = [
     header: ({ column }) => (
       <DataTableColumnHeader
         column={column}
-        title={"Next execution"}
+        title={"Next scan"}
         param="next_scan_at"
       />
     ),

ui/components/ui/custom/custom-dropdown-selection.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import {
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  Divider,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  ScrollShadow,
+} from "@nextui-org/react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+import { PlusCircleIcon } from "@/components/icons";
+
+interface CustomDropdownSelectionProps {
+  label: string;
+  name: string;
+  values: { id: string; name: string }[];
+  onChange: (name: string, selectedValues: string[]) => void;
+  selectedKeys?: string[];
+}
+
+const selectedTagClass =
+  "inline-flex items-center border py-1 text-xs transition-colors border-transparent bg-default-500 text-secondary-foreground hover:bg-default-500/80 rounded-md px-2 font-normal";
+
+export const CustomDropdownSelection: React.FC<
+  CustomDropdownSelectionProps
+> = ({ label, name, values, onChange, selectedKeys = [] }) => {
+  const [selectedValues, setSelectedValues] = useState<Set<string>>(
+    new Set(selectedKeys),
+  );
+  const allValues = values.map((item) => item.id);
+
+  const memoizedValues = useMemo(() => values, [values]);
+
+  // Update the internal state when selectedKeys changes from props
+  useEffect(() => {
+    const newSelection = new Set(selectedKeys);
+    if (
+      JSON.stringify(Array.from(selectedValues)) !==
+      JSON.stringify(Array.from(newSelection))
+    ) {
+      if (selectedKeys.length === allValues.length) {
+        newSelection.add("all");
+      }
+      setSelectedValues(newSelection);
+    }
+  }, [selectedKeys]);
+
+  const onSelectionChange = useCallback(
+    (keys: string[]) => {
+      setSelectedValues((prevSelected) => {
+        const newSelection = new Set(keys);
+
+        // If all values are selected and "all" is not included,
+        // add "all" automatically
+        if (
+          newSelection.size === allValues.length &&
+          !newSelection.has("all")
+        ) {
+          return new Set(["all", ...allValues]);
+        } else if (prevSelected.has("all")) {
+          // If "all" was previously selected, remove it
+          newSelection.delete("all");
+          return new Set(allValues.filter((key) => newSelection.has(key)));
+        }
+        return newSelection;
+      });
+
+      // Notify the change without including "all"
+      const selectedValues = keys.filter((key) => key !== "all");
+      onChange(name, selectedValues);
+    },
+    [allValues, name, onChange],
+  );
+
+  const handleSelectAllClick = useCallback(() => {
+    setSelectedValues((prevSelected: Set<string>) => {
+      const newSelection: Set<string> = prevSelected.has("all")
+        ? new Set()
+        : new Set(["all", ...allValues]);
+
+      // Notify the change without including "all"
+      const selectedValues = Array.from(newSelection).filter(
+        (key) => key !== "all",
+      );
+      onChange(name, selectedValues);
+
+      return newSelection;
+    });
+  }, [allValues, name, onChange]);
+
+  return (
+    <div className="relative flex w-full flex-col gap-2">
+      <Popover backdrop="transparent" placement="bottom-start">
+        <PopoverTrigger>
+          <Button
+            className="border-input hover:bg-accent hover:text-accent-foreground inline-flex h-10 items-center justify-center whitespace-nowrap rounded-md border border-dashed bg-background px-3 text-xs font-medium shadow-sm transition-colors focus-visible:outline-none disabled:opacity-50 dark:bg-prowler-blue-800"
+            startContent={<PlusCircleIcon size={16} />}
+            size="md"
+          >
+            <h3 className="text-small">{label}</h3>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80 dark:bg-prowler-blue-800">
+          <div className="flex w-full flex-col gap-6 p-2">
+            <CheckboxGroup
+              color="default"
+              label={label}
+              value={Array.from(selectedValues)}
+              onValueChange={onSelectionChange}
+              className="font-bold"
+            >
+              <Checkbox
+                className="font-normal"
+                value="all"
+                onClick={handleSelectAllClick}
+              >
+                Select All
+              </Checkbox>
+              <Divider orientation="horizontal" className="mt-2" />
+              <ScrollShadow
+                hideScrollBar
+                className="flex max-h-96 max-w-56 flex-col gap-y-2 py-2"
+              >
+                {memoizedValues.map(({ id, name }) => (
+                  <Checkbox className="font-normal" key={id} value={id}>
+                    {name}
+                  </Checkbox>
+                ))}
+              </ScrollShadow>
+            </CheckboxGroup>
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      {/* Selected Values Display */}
+      {selectedValues.size > 0 && selectedValues.size !== 1 && (
+        <div className="mt-2 flex flex-wrap gap-2">
+          {Array.from(selectedValues)
+            .filter((value) => value !== "all")
+            .map((value) => {
+              const selectedItem = values.find((item) => item.id === value);
+              return (
+                <span key={value} className={selectedTagClass}>
+                  {selectedItem?.name || value}
+                </span>
+              );
+            })}
+        </div>
+      )}
+    </div>
+  );
+};

ui/components/ui/custom/index.ts

@@ -2,6 +2,7 @@ export * from "./custom-alert-modal";
 export * from "./custom-box";
 export * from "./custom-button";
 export * from "./custom-dropdown-filter";
+export * from "./custom-dropdown-selection";
 export * from "./custom-input";
 export * from "./custom-loader";
 export * from "./custom-radio";

ui/components/ui/sidebar/sidebar-items.tsx

@@ -211,6 +211,12 @@ export const sectionItems: SidebarItem[] = [
         icon: "lucide:scan-search",
         title: "Scan Jobs",
       },
+      {
+        key: "roles",
+        href: "/roles",
+        icon: "mdi:account-key-outline",
+        title: "Roles",
+      },
       // {
       //   key: "integrations",
       //   href: "/integrations",

ui/components/ui/table/data-table-column-header.tsx

@@ -80,20 +80,10 @@ export const DataTableColumnHeader = <TData, TValue>({
 
   return (
     <Button
-      className="h-10 w-fit max-w-[110px] whitespace-nowrap bg-transparent px-0 text-left align-middle text-tiny font-semibold text-foreground-500 outline-none dark:text-slate-400"
+      className="flex h-10 w-full items-center justify-between whitespace-nowrap bg-transparent px-0 text-left align-middle text-tiny font-semibold text-foreground-500 outline-none dark:text-slate-400"
       onClick={getToggleSortingHandler}
     >
-      <span
+      <span className="block whitespace-normal break-normal">{title}</span>
-        className="block whitespace-normal break-normal"
-        style={{
-          display: "-webkit-box",
-          WebkitBoxOrient: "vertical",
-          WebkitLineClamp: 2,
-          width: "90px",
-        }}
-      >
-        {title}
-      </span>
       {renderSortIcon()}
     </Button>
   );

ui/components/users/forms/edit-form.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Select, SelectItem } from "@nextui-org/react";
+import { ShieldIcon, UserIcon } from "lucide-react";
 import { Dispatch, SetStateAction } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import * as z from "zod";
 
-import { updateUser } from "@/actions/users/users";
+import { updateUser, updateUserRole } from "@/actions/users/users";
 import { SaveIcon } from "@/components/icons";
 import { useToast } from "@/components/ui";
 import { CustomButton, CustomInput } from "@/components/ui/custom";
@@ -17,12 +19,16 @@ export const EditForm = ({
   userName,
   userEmail,
   userCompanyName,
+  roles = [],
+  currentRole = "",
   setIsOpen,
 }: {
   userId: string;
   userName?: string;
   userEmail?: string;
   userCompanyName?: string;
+  roles: Array<{ id: string; name: string }>;
+  currentRole?: string;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }) => {
   const formSchema = editUserFormSchema();
@@ -34,6 +40,7 @@ export const EditForm = ({
       name: userName,
       email: userEmail,
       company_name: userCompanyName,
+      role: roles.find((role) => role.name === currentRole)?.id || "",
     },
   });
 
@@ -44,7 +51,7 @@ export const EditForm = ({
   const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
     const formData = new FormData();
 
-    // Check if the value is not undefined before appending to FormData
+    // Update basic user data
     if (values.name !== undefined) {
       formData.append("name", values.name);
     }
@@ -58,6 +65,26 @@ export const EditForm = ({
     // Always include userId
     formData.append("userId", userId);
 
+    // Handle role updates separately
+    if (values.role !== roles.find((role) => role.name === currentRole)?.id) {
+      const roleFormData = new FormData();
+      roleFormData.append("userId", userId);
+      roleFormData.append("roleId", values.role || "");
+
+      const roleUpdateResponse = await updateUserRole(roleFormData);
+
+      if (roleUpdateResponse?.errors && roleUpdateResponse.errors.length > 0) {
+        const error = roleUpdateResponse.errors[0];
+        toast({
+          variant: "destructive",
+          title: "Role Update Failed",
+          description: `${error.detail}`,
+        });
+        return;
+      }
+    }
+
+    // Update other user attributes
     const data = await updateUser(formData);
 
     if (data?.errors && data.errors.length > 0) {
@@ -84,22 +111,49 @@ export const EditForm = ({
         onSubmit={form.handleSubmit(onSubmitClient)}
         className="flex flex-col space-y-4"
       >
-        <div className="text-md">
+        <div className="flex flex-row justify-center space-x-4 rounded-lg bg-gray-50 p-3">
-          Current name: <span className="font-bold">{userName}</span>
+          <div className="flex items-center text-small text-gray-600">
+            <UserIcon className="mr-2 h-4 w-4" />
+            <span className="text-gray-500">Name:</span>
+            <span className="ml-2 font-semibold text-gray-900">{userName}</span>
+          </div>
+          <div className="flex items-center text-small text-gray-600">
+            <ShieldIcon className="mr-2 h-4 w-4" />
+            <span className="text-gray-500">Role:</span>
+            <span className="ml-2 font-semibold text-gray-900">
+              {currentRole}
+            </span>
+          </div>
         </div>
-        <div>
+        <div className="flex flex-row gap-4">
-          <CustomInput
+          <div className="w-1/2">
-            control={form.control}
+            <CustomInput
-            name="name"
+              control={form.control}
-            type="text"
+              name="name"
-            label="Name"
+              type="text"
-            labelPlacement="outside"
+              label="Name"
-            placeholder={userName}
+              labelPlacement="outside"
-            variant="bordered"
+              placeholder={userName}
-            isRequired={false}
+              variant="bordered"
-            isInvalid={!!form.formState.errors.name}
+              isRequired={false}
-          />
+              isInvalid={!!form.formState.errors.name}
+            />
+          </div>
+          <div className="w-1/2">
+            <CustomInput
+              control={form.control}
+              name="company_name"
+              type="text"
+              label="Company Name"
+              labelPlacement="outside"
+              placeholder={userCompanyName}
+              variant="bordered"
+              isRequired={false}
+              isInvalid={!!form.formState.errors.company_name}
+            />
+          </div>
         </div>
+
         <div>
           <CustomInput
             control={form.control}
@@ -113,18 +167,36 @@ export const EditForm = ({
             isInvalid={!!form.formState.errors.email}
           />
         </div>
+
         <div>
-          <CustomInput
+          <Controller
+            name="role"
             control={form.control}
-            name="company_name"
+            render={({ field }) => (
-            type="text"
+              <Select
-            label="Company Name"
+                {...field}
-            labelPlacement="outside"
+                label="Role"
-            placeholder={userCompanyName}
+                labelPlacement="outside"
-            variant="bordered"
+                placeholder="Select a role"
-            isRequired={false}
+                variant="bordered"
-            isInvalid={!!form.formState.errors.company_name}
+                selectedKeys={[field.value || ""]}
+                onSelectionChange={(selected) => {
+                  const selectedKey = Array.from(selected).pop();
+                  field.onChange(selectedKey || "");
+                }}
+              >
+                {roles.map((role: { id: string; name: string }) => (
+                  <SelectItem key={role.id}>{role.name}</SelectItem>
+                ))}
+              </Select>
+            )}
           />
+
+          {form.formState.errors.role && (
+            <p className="mt-2 text-sm text-red-600">
+              {form.formState.errors.role.message}
+            </p>
+          )}
         </div>
         <input type="hidden" name="userId" value={userId} />
 

ui/components/users/table/column-users.tsx

@@ -33,6 +33,14 @@ export const ColumnsUser: ColumnDef<UserProps>[] = [
       return <p className="font-semibold">{email}</p>;
     },
   },
+  {
+    accessorKey: "role",
+    header: () => <div className="text-left">Role</div>,
+    cell: ({ row }) => {
+      const { role } = getUserData(row);
+      return <p className="font-semibold">{role?.name || "No Role"}</p>;
+    },
+  },
   {
     accessorKey: "company_name",
     header: ({ column }) => (
@@ -47,7 +55,6 @@ export const ColumnsUser: ColumnDef<UserProps>[] = [
       return <p className="font-semibold">{company_name}</p>;
     },
   },
-
   {
     accessorKey: "date_joined",
     header: ({ column }) => (
@@ -68,7 +75,8 @@ export const ColumnsUser: ColumnDef<UserProps>[] = [
     header: () => <div className="text-right">Actions</div>,
     id: "actions",
     cell: ({ row }) => {
-      return <DataTableRowActions row={row} />;
+      const roles = row.original.roles;
+      return <DataTableRowActions row={row} roles={roles} />;
     },
   },
 ];

ui/components/users/table/data-table-row-actions.tsx

@@ -21,34 +21,39 @@ import { CustomAlertModal } from "@/components/ui/custom";
 
 import { DeleteForm, EditForm } from "../forms";
 
-interface DataTableRowActionsProps<ProviderProps> {
+interface DataTableRowActionsProps<UserProps> {
-  row: Row<ProviderProps>;
+  row: Row<UserProps>;
+  roles?: { id: string; name: string }[];
 }
 const iconClasses =
   "text-2xl text-default-500 pointer-events-none flex-shrink-0";
 
-export function DataTableRowActions<ProviderProps>({
+export function DataTableRowActions<UserProps>({
   row,
-}: DataTableRowActionsProps<ProviderProps>) {
+  roles,
+}: DataTableRowActionsProps<UserProps>) {
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const userId = (row.original as { id: string }).id;
   const userName = (row.original as any).attributes?.name;
   const userEmail = (row.original as any).attributes?.email;
   const userCompanyName = (row.original as any).attributes?.company_name;
+  const userRole = (row.original as any).attributes?.role?.name;
+
   return (
     <>
       <CustomAlertModal
         isOpen={isEditOpen}
         onOpenChange={setIsEditOpen}
-        title="Edit user"
+        title="Edit user details"
-        description={"Edit the user details"}
       >
         <EditForm
           userId={userId}
           userName={userName}
           userEmail={userEmail}
           userCompanyName={userCompanyName}
+          currentRole={userRole}
+          roles={roles || []}
           setIsOpen={setIsEditOpen}
         />
       </CustomAlertModal>

ui/types/components.ts

@@ -222,11 +222,100 @@ export interface InvitationProps {
         id: string;
       };
     };
+    role?: {
+      data: {
+        type: "roles";
+        id: string;
+      };
+      attributes?: {
+        name: string;
+        manage_users?: boolean;
+        manage_account?: boolean;
+        manage_billing?: boolean;
+        manage_providers?: boolean;
+        manage_integrations?: boolean;
+        manage_scans?: boolean;
+        permission_state?: "unlimited" | "limited" | "none";
+      };
+    };
+  };
+  links: {
+    self: string;
+  };
+  roles?: {
+    id: string;
+    name: string;
+  }[];
+}
+
+export interface Role {
+  type: "roles";
+  id: string;
+  attributes: {
+    name: string;
+    manage_users: boolean;
+    manage_account: boolean;
+    manage_billing: boolean;
+    manage_providers: boolean;
+    manage_integrations: boolean;
+    manage_scans: boolean;
+    unlimited_visibility: boolean;
+    permission_state: "unlimited" | "limited" | "none";
+    inserted_at: string;
+    updated_at: string;
+  };
+  relationships: {
+    provider_groups: {
+      meta: {
+        count: number;
+      };
+      data: {
+        type: string;
+        id: string;
+      }[];
+    };
+    users: {
+      meta: {
+        count: number;
+      };
+      data: {
+        type: string;
+        id: string;
+      }[];
+    };
+    invitations: {
+      meta: {
+        count: number;
+      };
+      data: {
+        type: string;
+        id: string;
+      }[];
+    };
   };
   links: {
     self: string;
   };
 }
+
+export interface RolesProps {
+  links: {
+    first: string;
+    last: string;
+    next: string | null;
+    prev: string | null;
+  };
+  data: Role[];
+  meta: {
+    pagination: {
+      page: number;
+      pages: number;
+      count: number;
+    };
+    version: string;
+  };
+}
+
 export interface UserProfileProps {
   data: {
     type: "users";
@@ -236,6 +325,9 @@ export interface UserProfileProps {
       email: string;
       company_name: string;
       date_joined: string;
+      role: {
+        name: string;
+      };
     };
     relationships: {
       memberships: {
@@ -262,6 +354,9 @@ export interface UserProps {
     email: string;
     company_name: string;
     date_joined: string;
+    role: {
+      name: string;
+    };
   };
   relationships: {
     memberships: {
@@ -273,7 +368,20 @@ export interface UserProps {
         id: string;
       }>;
     };
+    roles: {
+      meta: {
+        count: number;
+      };
+      data: Array<{
+        type: "roles";
+        id: string;
+      }>;
+    };
   };
+  roles: {
+    id: string;
+    name: string;
+  }[];
 }
 
 export interface ProviderProps {

ui/types/formSchemas.ts

@@ -1,5 +1,27 @@
 import { z } from "zod";
 
+export const addRoleFormSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  manage_users: z.boolean().default(false),
+  manage_account: z.boolean().default(false),
+  manage_billing: z.boolean().default(false),
+  manage_providers: z.boolean().default(false),
+  manage_integrations: z.boolean().default(false),
+  manage_scans: z.boolean().default(false),
+  unlimited_visibility: z.boolean().default(false),
+});
+
+export const editRoleFormSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  manage_users: z.boolean().default(false),
+  manage_account: z.boolean().default(false),
+  manage_billing: z.boolean().default(false),
+  manage_providers: z.boolean().default(false),
+  manage_integrations: z.boolean().default(false),
+  manage_scans: z.boolean().default(false),
+  unlimited_visibility: z.boolean().default(false),
+});
+
 export const editScanFormSchema = (currentName: string) =>
   z.object({
     scanName: z
@@ -158,6 +180,7 @@ export const editInviteFormSchema = z.object({
   invitationId: z.string().uuid(),
   invitationEmail: z.string().email(),
   expires_at: z.string().optional(),
+  role: z.string().optional(),
 });
 
 export const editUserFormSchema = () =>
@@ -177,4 +200,5 @@ export const editUserFormSchema = () =>
       .optional(),
     company_name: z.string().optional(),
     userId: z.string(),
+    role: z.string().optional(),
   });