From 79a966111c22ad1415a086608ea446f653d1df42 Mon Sep 17 00:00:00 2001
From: Mihail <mihailkitrozoski@codechem.com>
Date: Mon, 23 Mar 2026 15:37:12 +0100
Subject: [PATCH 1/9] feat: add users and plugins frontend, add GetAllRoles
 backend endpoint

---
 .../users-and-permissions-plugin.service.ts   |  39 +++++
 .../src/app/settings/settings.component.html  | 119 +++++++++++++
 .../src/app/settings/settings.component.scss  | 164 ++++++++++++++++++
 .../src/app/settings/settings.component.ts    | 151 +++++++++++++++-
 .../Api/UsersAndPermissionsController.cs      |  15 ++
 Dappi.HeadlessCms/AppExtensions.cs            |   2 +-
 .../Controllers/PluginsController.cs          |   9 +-
 7 files changed, 491 insertions(+), 8 deletions(-)
 create mode 100644 CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts

diff --git a/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts b/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts
new file mode 100644
index 0000000..03e1398
--- /dev/null
+++ b/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { BASE_API_URL } from '../../../Constants';
+
+export interface UsersAndPermissionsRoleItem {
+  Id: string;
+  Name: string;
+  IsDefaultForAuthenticatedUser: boolean;
+}
+
+export interface UsersAndPermissionsPermissionItem {
+  PermissionName: string;
+  Description: string;
+  Selected: boolean;
+}
+
+export type UsersAndPermissionsRolePermissionsResponse = Record<
+  string,
+  UsersAndPermissionsPermissionItem[]
+>;
+
+@Injectable({ providedIn: 'root' })
+export class UsersAndPermissionsPluginService {
+  constructor(private http: HttpClient) {}
+
+  getAllRoles(): Observable<UsersAndPermissionsRoleItem[]> {
+    return this.http.get<UsersAndPermissionsRoleItem[]>(`${BASE_API_URL}usersandpermissions/roles`);
+  }
+
+  getRolePermissions(roleName: string): Observable<UsersAndPermissionsRolePermissionsResponse> {
+    const params = new HttpParams().set('roleName', roleName);
+
+    return this.http.get<UsersAndPermissionsRolePermissionsResponse>(
+      `${BASE_API_URL}usersandpermissions`,
+      { params }
+    );
+  }
+}
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.html b/CCUI.DAPPI/src/app/settings/settings.component.html
index 58d92dd..ae5d4ae 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.html
+++ b/CCUI.DAPPI/src/app/settings/settings.component.html
@@ -17,6 +17,22 @@
 
     <div class="settings-sidebar__divider"></div>
 
+    <div class="settings-sidebar__section">Plugins</div>
+
+    @if (usersAndPermissionsEnabled) {
+      <button
+        class="settings-sidebar__item"
+        [class.settings-sidebar__item--active]="activeTab === 'usersAndPermissionsPlugin'"
+        (click)="selectTab('usersAndPermissionsPlugin')"
+        aria-label="Users and permissions plugin"
+      >
+        <mat-icon>shield</mat-icon>
+        <span>Users & Permissions plugin</span>
+      </button>
+    }
+
+    <div class="settings-sidebar__divider"></div>
+
     <div class="settings-sidebar__section">User Administration</div>
 
     <button
@@ -43,6 +59,109 @@
   <div class="container">
     @if (activeTab === 'storage') {
       <app-data-storage></app-data-storage>
+    } @else if (activeTab === 'usersAndPermissionsPlugin') {
+      <header class="plugin-header">
+        <div class="plugin-title-block">
+          <h1>Users & Permissions plugin</h1>
+          <p>View all roles from UsersAndPermissionsController.GetAllRoles()</p>
+        </div>
+      </header>
+
+      @if (usersAndPermissionsRolesError) {
+        <div class="plugin-error">{{ usersAndPermissionsRolesError }}</div>
+      }
+
+      @if (usersAndPermissionsRolesLoading) {
+        <div class="plugin-loading">
+          <mat-spinner diameter="40"></mat-spinner>
+          <p>Loading roles...</p>
+        </div>
+      } @else if (!usersAndPermissionsRoles.length) {
+        <div class="plugin-empty">
+          <img src="assets/illustration.svg" alt="No roles" />
+          <h2>There are no roles yet</h2>
+          <p>No roles were returned from the Users & Permissions plugin.</p>
+        </div>
+      } @else {
+        <div class="plugin-roles-layout">
+          <div class="plugin-roles-table-container" aria-label="Users and permissions roles list">
+            <table mat-table [dataSource]="usersAndPermissionsRoles" class="plugin-roles-table">
+              <ng-container matColumnDef="name">
+                <th mat-header-cell *matHeaderCellDef>Name</th>
+                <td mat-cell *matCellDef="let role">{{ role.Name }}</td>
+              </ng-container>
+
+              <tr mat-header-row *matHeaderRowDef="usersAndPermissionsRoleColumns"></tr>
+              <tr
+                mat-row
+                *matRowDef="let role; columns: usersAndPermissionsRoleColumns"
+                class="plugin-role-row"
+                [class.plugin-role-row--active]="selectedUsersAndPermissionsRole?.Id === role.Id"
+                (click)="selectUsersAndPermissionsRole(role)"
+              ></tr>
+            </table>
+          </div>
+
+          <section class="plugin-role-details" aria-label="Role details">
+            @if (selectedUsersAndPermissionsRole) {
+              <header class="plugin-role-details__header">
+                <h2>{{ selectedUsersAndPermissionsRole.Name }}</h2>
+                <p>Role ID: {{ selectedUsersAndPermissionsRole.Id }}</p>
+              </header>
+
+              @if (usersAndPermissionsRoleDetailsError) {
+                <div class="plugin-error">{{ usersAndPermissionsRoleDetailsError }}</div>
+              }
+
+              @if (usersAndPermissionsRoleDetailsLoading) {
+                <div class="plugin-loading plugin-loading--details">
+                  <mat-spinner diameter="32"></mat-spinner>
+                  <p>Loading permissions...</p>
+                </div>
+              } @else if (!selectedUsersAndPermissionsRolePermissionsRows.length) {
+                <div class="plugin-empty plugin-empty--details">
+                  <h3>No permissions found</h3>
+                  <p>This role currently has no configured permissions response.</p>
+                </div>
+              } @else {
+                <div class="plugin-permissions-table-container">
+                  <table mat-table [dataSource]="selectedUsersAndPermissionsRolePermissionsRows" class="plugin-permissions-table">
+                    <ng-container matColumnDef="controller">
+                      <th mat-header-cell *matHeaderCellDef>Controller</th>
+                      <td mat-cell *matCellDef="let row">{{ row.controller }}</td>
+                    </ng-container>
+
+                    <ng-container matColumnDef="permission">
+                      <th mat-header-cell *matHeaderCellDef>Permission</th>
+                      <td mat-cell *matCellDef="let row">{{ row.permissionName }}</td>
+                    </ng-container>
+
+                    <ng-container matColumnDef="description">
+                      <th mat-header-cell *matHeaderCellDef>Description</th>
+                      <td mat-cell *matCellDef="let row">{{ row.description }}</td>
+                    </ng-container>
+
+                    <ng-container matColumnDef="state">
+                      <th mat-header-cell *matHeaderCellDef>Status</th>
+                      <td mat-cell *matCellDef="let row">
+                        <span
+                          class="plugin-permission-state"
+                          [class.plugin-permission-state--enabled]="row.selected"
+                        >
+                          {{ row.selected ? 'Allowed' : 'Not allowed' }}
+                        </span>
+                      </td>
+                    </ng-container>
+
+                    <tr mat-header-row *matHeaderRowDef="usersAndPermissionsPermissionColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: usersAndPermissionsPermissionColumns"></tr>
+                  </table>
+                </div>
+              }
+            }
+          </section>
+        </div>
+      }
     } @else if (activeTab === 'users') {
       <app-users></app-users>
     } @else {
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.scss b/CCUI.DAPPI/src/app/settings/settings.component.scss
index b864e62..d8e3e65 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.scss
+++ b/CCUI.DAPPI/src/app/settings/settings.component.scss
@@ -75,3 +75,167 @@
   background-color: vars.$background-default;
   color: vars.$text-primary;
 }
+
+.plugin-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+
+  .plugin-title-block {
+    h1 {
+      margin: 0;
+      font-size: 24px;
+    }
+
+    p {
+      margin: 4px 0 0;
+      font-size: 14px;
+      color: vars.$text-secondary;
+    }
+  }
+}
+
+.plugin-error {
+  color: vars.$error-light;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.plugin-loading,
+.plugin-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  p {
+    margin-top: 12px;
+    color: vars.$text-secondary;
+  }
+}
+
+.plugin-empty {
+  img {
+    margin-bottom: 24px;
+    max-width: 200px;
+  }
+
+  h2 {
+    margin: 0 0 8px;
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+}
+
+.plugin-roles-layout {
+  display: grid;
+  grid-template-columns: minmax(260px, 320px) 1fr;
+  gap: 16px;
+  min-height: 0;
+  flex: 1;
+}
+
+.plugin-roles-table-container,
+.plugin-permissions-table-container {
+  background-color: vars.$background-paper-elevation-1;
+  border: vars.$divider;
+  border-radius: 8px;
+  overflow: auto;
+}
+
+.plugin-roles-table,
+.plugin-permissions-table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.plugin-roles-table .mat-mdc-header-row,
+.plugin-roles-table .mat-mdc-row,
+.plugin-roles-table .mat-mdc-header-cell,
+.plugin-roles-table .mat-mdc-cell,
+.plugin-permissions-table .mat-mdc-header-row,
+.plugin-permissions-table .mat-mdc-row,
+.plugin-permissions-table .mat-mdc-header-cell,
+.plugin-permissions-table .mat-mdc-cell {
+  background-color: vars.$background-paper-elevation-1;
+  color: vars.$text-primary;
+}
+
+.plugin-role-row {
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(vars.$primary-main, 0.12);
+  }
+}
+
+.plugin-role-row--active {
+  background-color: rgba(vars.$primary-main, 0.18) !important;
+}
+
+.plugin-role-details {
+  border: vars.$divider;
+  border-radius: 8px;
+  background-color: vars.$background-paper-elevation-1;
+  padding: 16px;
+  overflow: auto;
+}
+
+.plugin-role-details__header {
+  margin-bottom: 12px;
+
+  h2 {
+    margin: 0;
+    font-size: 20px;
+  }
+
+  p {
+    margin: 4px 0 0;
+    font-size: 13px;
+    color: vars.$text-secondary;
+  }
+}
+
+.plugin-loading--details,
+.plugin-empty--details {
+  min-height: 200px;
+}
+
+.plugin-empty--details {
+  align-items: flex-start;
+  text-align: left;
+
+  h3 {
+    margin: 0 0 6px;
+    font-size: 18px;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+.plugin-permission-state {
+  display: inline-flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: vars.$text-secondary;
+  background-color: vars.$primary-focus;
+  border-radius: 12px;
+  padding: 4px 10px;
+  white-space: nowrap;
+}
+
+.plugin-permission-state--enabled {
+  color: vars.$primary-main;
+}
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.ts b/CCUI.DAPPI/src/app/settings/settings.component.ts
index aca78f3..685682d 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.ts
+++ b/CCUI.DAPPI/src/app/settings/settings.component.ts
@@ -1,16 +1,34 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTableModule } from '@angular/material/table';
+import { Subscription } from 'rxjs';
 import { DataStorageComponent } from './data-storage/data-storage.component';
 import { UsersComponent } from './users/users.component';
 import { RolesComponent } from './roles/roles.component';
+import { UsersManagementService } from '../services/auth/users-management.service';
+import {
+  UsersAndPermissionsPluginService,
+  UsersAndPermissionsRoleItem,
+  UsersAndPermissionsRolePermissionsResponse,
+} from '../services/auth/users-and-permissions-plugin.service';
 
-type SettingsTab = 'storage' | 'users' | 'roles';
+interface PermissionTableRow {
+  controller: string;
+  permissionName: string;
+  description: string;
+  selected: boolean;
+}
+
+type SettingsTab = 'storage' | 'users' | 'roles' | 'usersAndPermissionsPlugin';
 
 @Component({
   selector: 'app-settings',
   standalone: true,
   imports: [
     MatIconModule,
+    MatProgressSpinnerModule,
+    MatTableModule,
     DataStorageComponent,
     UsersComponent,
     RolesComponent,
@@ -18,10 +36,137 @@ type SettingsTab = 'storage' | 'users' | 'roles';
   templateUrl: './settings.component.html',
   styleUrl: './settings.component.scss',
 })
-export class SettingsComponent {
+export class SettingsComponent implements OnInit, OnDestroy {
+  private subscription = new Subscription();
+
   activeTab: SettingsTab = 'storage';
+  usersAndPermissionsEnabled = false;
+  usersAndPermissionsRoles: UsersAndPermissionsRoleItem[] = [];
+  usersAndPermissionsRoleColumns: string[] = ['name'];
+  selectedUsersAndPermissionsRole: UsersAndPermissionsRoleItem | null = null;
+  selectedUsersAndPermissionsRolePermissions: UsersAndPermissionsRolePermissionsResponse = {};
+  selectedUsersAndPermissionsRolePermissionsRows: PermissionTableRow[] = [];
+  usersAndPermissionsPermissionColumns: string[] = ['controller', 'permission', 'description', 'state'];
+  usersAndPermissionsRolesLoading = false;
+  usersAndPermissionsRolesError = '';
+  usersAndPermissionsRoleDetailsLoading = false;
+  usersAndPermissionsRoleDetailsError = '';
+  private usersAndPermissionsRolesLoaded = false;
+
+  constructor(
+    private usersManagementService: UsersManagementService,
+    private usersAndPermissionsPluginService: UsersAndPermissionsPluginService,
+  ) {}
+
+  ngOnInit(): void {
+    this.loadPluginsState();
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
 
   selectTab(tab: SettingsTab): void {
+    if (tab === 'usersAndPermissionsPlugin' && !this.usersAndPermissionsEnabled) {
+      return;
+    }
+
     this.activeTab = tab;
+
+    if (tab === 'usersAndPermissionsPlugin' && !this.usersAndPermissionsRolesLoaded) {
+      this.loadUsersAndPermissionsRoles();
+    }
+  }
+
+  private loadPluginsState(): void {
+    this.subscription.add(
+      this.usersManagementService.getPluginsState().subscribe({
+        next: (response) => {
+          this.usersAndPermissionsEnabled = !!response.services?.['usersAndPermissions'];
+
+          if (!this.usersAndPermissionsEnabled && this.activeTab === 'usersAndPermissionsPlugin') {
+            this.activeTab = 'storage';
+          }
+        },
+      })
+    );
+  }
+
+  private loadUsersAndPermissionsRoles(): void {
+    this.usersAndPermissionsRolesLoading = true;
+    this.usersAndPermissionsRolesError = '';
+
+    this.subscription.add(
+      this.usersAndPermissionsPluginService.getAllRoles().subscribe({
+        next: (roles) => {
+          this.usersAndPermissionsRoles = roles;
+          this.usersAndPermissionsRolesLoading = false;
+          this.usersAndPermissionsRolesLoaded = true;
+
+          if (!this.selectedUsersAndPermissionsRole && roles.length) {
+            this.selectUsersAndPermissionsRole(roles[0]);
+          }
+        },
+        error: (error) => {
+          this.usersAndPermissionsRoles = [];
+          this.selectedUsersAndPermissionsRole = null;
+          this.selectedUsersAndPermissionsRolePermissions = {};
+          this.selectedUsersAndPermissionsRolePermissionsRows = [];
+          this.usersAndPermissionsRolesError = this.getApiErrorMessage(error);
+          this.usersAndPermissionsRolesLoading = false;
+        },
+      })
+    );
+  }
+
+  private getApiErrorMessage(error: any): string {
+    return (
+      error?.error?.message
+      || error?.error?.title
+      || error?.error?.error
+      || 'Failed to load roles from /api/UsersAndPermissions/roles.'
+    );
+  }
+
+  selectUsersAndPermissionsRole(role: UsersAndPermissionsRoleItem): void {
+    this.selectedUsersAndPermissionsRole = role;
+    this.loadUsersAndPermissionsRoleDetails(role.Name);
+  }
+
+  private loadUsersAndPermissionsRoleDetails(roleName: string): void {
+    this.usersAndPermissionsRoleDetailsLoading = true;
+    this.usersAndPermissionsRoleDetailsError = '';
+
+    this.subscription.add(
+      this.usersAndPermissionsPluginService.getRolePermissions(roleName).subscribe({
+        next: (permissions) => {
+          this.selectedUsersAndPermissionsRolePermissions = permissions;
+          this.selectedUsersAndPermissionsRolePermissionsRows = Object.entries(permissions)
+            .flatMap(([controller, permissionItems]) =>
+              permissionItems.map((permission) => ({
+                controller,
+                permissionName: permission.PermissionName,
+                description: permission.Description || '-',
+                selected: permission.Selected,
+              }))
+            )
+            .sort((a, b) => {
+              const byController = a.controller.localeCompare(b.controller);
+              if (byController !== 0) {
+                return byController;
+              }
+
+              return a.permissionName.localeCompare(b.permissionName);
+            });
+          this.usersAndPermissionsRoleDetailsLoading = false;
+        },
+        error: (error) => {
+          this.selectedUsersAndPermissionsRolePermissions = {};
+          this.selectedUsersAndPermissionsRolePermissionsRows = [];
+          this.usersAndPermissionsRoleDetailsError = this.getApiErrorMessage(error);
+          this.usersAndPermissionsRoleDetailsLoading = false;
+        },
+      })
+    );
   }
 }
diff --git a/Dappi.HeadlessCms.UsersAndPermissions/Api/UsersAndPermissionsController.cs b/Dappi.HeadlessCms.UsersAndPermissions/Api/UsersAndPermissionsController.cs
index 6d34457..2a16b84 100644
--- a/Dappi.HeadlessCms.UsersAndPermissions/Api/UsersAndPermissionsController.cs
+++ b/Dappi.HeadlessCms.UsersAndPermissions/Api/UsersAndPermissionsController.cs
@@ -38,6 +38,7 @@ public async Task<IActionResult> Register([FromBody] RegisterUserDto userDto)
             Email = userDto.Email,
             UserName = userDto.Email,
             RoleId = defaultRole.Id,
+            //zosto email e i username
         };
         var result = await userManager.CreateAsync(user, userDto.Password);
 
@@ -128,4 +129,18 @@ CancellationToken cancellationToken
 
         return Ok(result);
     }
+    
+    [HttpGet("roles")]
+    public async Task<IActionResult> GetAllRoles()
+    {
+        var roles = await _usersAndPermissionsDb.AppRoles
+            .Select(r => new
+            {
+                r.Name,
+                r.Id,
+                r.IsDefaultForAuthenticatedUser
+            })
+            .ToListAsync();
+        return Ok(roles);
+    }
 }
diff --git a/Dappi.HeadlessCms/AppExtensions.cs b/Dappi.HeadlessCms/AppExtensions.cs
index 9ee7b1d..334dd0e 100644
--- a/Dappi.HeadlessCms/AppExtensions.cs
+++ b/Dappi.HeadlessCms/AppExtensions.cs
@@ -126,7 +126,7 @@ this IServiceProvider serviceProvider
             typeof(TUser).GetProperty("UserName")?.SetValue(user, adminUsername);
             typeof(TUser).GetProperty("Email")?.SetValue(user, adminEmail);
             typeof(TUser).GetProperty("EmailConfirmed")?.SetValue(user, true);
-
+            typeof(TUser).GetProperty("AcceptedInvitation")?.SetValue(user, true);
             var result = await userManager.CreateAsync(user, adminPassword);
 
             if (result.Succeeded)
diff --git a/Dappi.HeadlessCms/Controllers/PluginsController.cs b/Dappi.HeadlessCms/Controllers/PluginsController.cs
index 34fc4be..ebe6651 100644
--- a/Dappi.HeadlessCms/Controllers/PluginsController.cs
+++ b/Dappi.HeadlessCms/Controllers/PluginsController.cs
@@ -22,14 +22,15 @@ public PluginsController(IServiceProvider serviceProvider)
     public IActionResult GetPluginsState()
     {
         var interfaceTypes = new[] { typeof(IEmailService) };
-
         var availableInterfaces = _serviceProvider.ResolveAvailable(interfaceTypes);
-
         var services = interfaceTypes.ToDictionary(
-            type => type.Name,
+            type => char.ToLowerInvariant(type.Name[0]) + type.Name.Substring(1),
             type => availableInterfaces.ContainsKey(type)
         );
 
+        var usersAndPermissionsEnabled = _serviceProvider.GetService(typeof(Dappi.Core.Abstractions.Auth.SchemaAndIssuerProvider)) != null;
+        services["usersAndPermissions"] = usersAndPermissionsEnabled;
+
         return Ok(new { services });
     }
-}
\ No newline at end of file
+}    
\ No newline at end of file

From cf21296f8c69036f40d9d32e6e5dc996100a73e3 Mon Sep 17 00:00:00 2001
From: Mihail <mihailkitrozoski@codechem.com>
Date: Mon, 23 Mar 2026 16:06:43 +0100
Subject: [PATCH 2/9] refactor: change the Scriban version

---
 CCUI.DAPPI/src/app/settings/settings.component.html | 3 +--
 Dappi.SourceGenerator/Dappi.SourceGenerator.csproj  | 3 ++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/CCUI.DAPPI/src/app/settings/settings.component.html b/CCUI.DAPPI/src/app/settings/settings.component.html
index ae5d4ae..149f9eb 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.html
+++ b/CCUI.DAPPI/src/app/settings/settings.component.html
@@ -63,7 +63,7 @@
       <header class="plugin-header">
         <div class="plugin-title-block">
           <h1>Users & Permissions plugin</h1>
-          <p>View all roles from UsersAndPermissionsController.GetAllRoles()</p>
+          <p>View the roles and their permissions</p>
         </div>
       </header>
 
@@ -106,7 +106,6 @@ <h2>There are no roles yet</h2>
             @if (selectedUsersAndPermissionsRole) {
               <header class="plugin-role-details__header">
                 <h2>{{ selectedUsersAndPermissionsRole.Name }}</h2>
-                <p>Role ID: {{ selectedUsersAndPermissionsRole.Id }}</p>
               </header>
 
               @if (usersAndPermissionsRoleDetailsError) {
diff --git a/Dappi.SourceGenerator/Dappi.SourceGenerator.csproj b/Dappi.SourceGenerator/Dappi.SourceGenerator.csproj
index 9801943..0c1be46 100644
--- a/Dappi.SourceGenerator/Dappi.SourceGenerator.csproj
+++ b/Dappi.SourceGenerator/Dappi.SourceGenerator.csproj
@@ -9,12 +9,13 @@
     <Description>SourceGenerator for DAPPI</Description>
     <Nullable>enable</Nullable>
     <IsRoslynComponent>true</IsRoslynComponent>
+    <CopyLocalLockFileAssemblies>true</CopyLocalLockFileAssemblies>
   </PropertyGroup>
   <ItemGroup>
     <PackageReference Include="Microsoft.CodeAnalysis.CSharp" Version="4.8.0" PrivateAssets="all" />
     <PackageReference
       Include="Scriban"
-      Version="3.2.1"
+      Version="6.2.1"
       PrivateAssets="all"
       GeneratePathProperty="true"
     />

From 983e9f393eb6c57aa837da5ed66115dfcd69d882 Mon Sep 17 00:00:00 2001
From: Mihail <mihailkitrozoski@codechem.com>
Date: Mon, 23 Mar 2026 16:57:58 +0100
Subject: [PATCH 3/9] refactor: fix the permissions table

---
 CCUI.DAPPI/src/app/settings/settings.component.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/CCUI.DAPPI/src/app/settings/settings.component.scss b/CCUI.DAPPI/src/app/settings/settings.component.scss
index d8e3e65..d633dd4 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.scss
+++ b/CCUI.DAPPI/src/app/settings/settings.component.scss
@@ -182,6 +182,16 @@
   background-color: rgba(vars.$primary-main, 0.18) !important;
 }
 
+.plugin-permissions-table {
+  table-layout: fixed;
+}
+
+.plugin-permissions-table .mat-mdc-header-cell,
+.plugin-permissions-table .mat-mdc-cell {
+  white-space: normal;
+  word-break: break-word;
+}
+
 .plugin-role-details {
   border: vars.$divider;
   border-radius: 8px;

From 7986d6139a2511df9d795bfa8668e8e9cda4dbb7 Mon Sep 17 00:00:00 2001
From: Mihail <mihailkitrozoski@codechem.com>
Date: Tue, 24 Mar 2026 13:35:19 +0100
Subject: [PATCH 4/9] refactor: add expandable view rows for the controllers

---
 .../src/app/settings/settings.component.html  | 94 +++++++++++++------
 .../src/app/settings/settings.component.scss  | 45 +++++++++
 .../src/app/settings/settings.component.ts    | 74 ++++++++++-----
 3 files changed, 157 insertions(+), 56 deletions(-)

diff --git a/CCUI.DAPPI/src/app/settings/settings.component.html b/CCUI.DAPPI/src/app/settings/settings.component.html
index 149f9eb..53f0302 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.html
+++ b/CCUI.DAPPI/src/app/settings/settings.component.html
@@ -117,43 +117,75 @@ <h2>{{ selectedUsersAndPermissionsRole.Name }}</h2>
                   <mat-spinner diameter="32"></mat-spinner>
                   <p>Loading permissions...</p>
                 </div>
-              } @else if (!selectedUsersAndPermissionsRolePermissionsRows.length) {
+              } @else if (!selectedUsersAndPermissionsRolePermissionGroups.length) {
                 <div class="plugin-empty plugin-empty--details">
                   <h3>No permissions found</h3>
                   <p>This role currently has no configured permissions response.</p>
                 </div>
               } @else {
                 <div class="plugin-permissions-table-container">
-                  <table mat-table [dataSource]="selectedUsersAndPermissionsRolePermissionsRows" class="plugin-permissions-table">
-                    <ng-container matColumnDef="controller">
-                      <th mat-header-cell *matHeaderCellDef>Controller</th>
-                      <td mat-cell *matCellDef="let row">{{ row.controller }}</td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="permission">
-                      <th mat-header-cell *matHeaderCellDef>Permission</th>
-                      <td mat-cell *matCellDef="let row">{{ row.permissionName }}</td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="description">
-                      <th mat-header-cell *matHeaderCellDef>Description</th>
-                      <td mat-cell *matCellDef="let row">{{ row.description }}</td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="state">
-                      <th mat-header-cell *matHeaderCellDef>Status</th>
-                      <td mat-cell *matCellDef="let row">
-                        <span
-                          class="plugin-permission-state"
-                          [class.plugin-permission-state--enabled]="row.selected"
-                        >
-                          {{ row.selected ? 'Allowed' : 'Not allowed' }}
-                        </span>
-                      </td>
-                    </ng-container>
-
-                    <tr mat-header-row *matHeaderRowDef="usersAndPermissionsPermissionColumns"></tr>
-                    <tr mat-row *matRowDef="let row; columns: usersAndPermissionsPermissionColumns"></tr>
+                  <table class="plugin-permissions-table plugin-controllers-table">
+                    <thead>
+                      <tr>
+                        <th>Controller</th>
+                        <th>Summary</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      @for (group of selectedUsersAndPermissionsRolePermissionGroups; track group.controller) {
+                        <tr class="plugin-controller-row">
+                          <td>
+                            <button
+                              class="plugin-controller-toggle"
+                              type="button"
+                              (click)="toggleController(group.controller)"
+                              [attr.aria-label]="'Toggle ' + group.controller + ' permissions'"
+                            >
+                              <mat-icon class="plugin-controller-toggle__icon" [class.plugin-controller-toggle__icon--expanded]="isControllerExpanded(group.controller)">expand_more</mat-icon>
+                              <span>{{ group.controller }}</span>
+                            </button>
+                          </td>
+                          <td>
+                            {{ group.allowedCount }}/{{ group.rows.length }} allowed
+                          </td>
+                        </tr>
+
+                        @if (isControllerExpanded(group.controller)) {
+                          <tr class="plugin-controller-details-row">
+                            <td [attr.colspan]="usersAndPermissionsControllerColumns.length">
+                              <div class="plugin-controller-details">
+                                <table mat-table [dataSource]="group.rows" class="plugin-permissions-table">
+                                  <ng-container matColumnDef="permission">
+                                    <th mat-header-cell *matHeaderCellDef>Permission</th>
+                                    <td mat-cell *matCellDef="let row">{{ row.permissionName }}</td>
+                                  </ng-container>
+
+                                  <ng-container matColumnDef="description">
+                                    <th mat-header-cell *matHeaderCellDef>Description</th>
+                                    <td mat-cell *matCellDef="let row">{{ row.description }}</td>
+                                  </ng-container>
+
+                                  <ng-container matColumnDef="state">
+                                    <th mat-header-cell *matHeaderCellDef>Status</th>
+                                    <td mat-cell *matCellDef="let row">
+                                      <span
+                                        class="plugin-permission-state"
+                                        [class.plugin-permission-state--enabled]="row.selected"
+                                      >
+                                        {{ row.selected ? 'Allowed' : 'Not allowed' }}
+                                      </span>
+                                    </td>
+                                  </ng-container>
+
+                                  <tr mat-header-row *matHeaderRowDef="usersAndPermissionsPermissionColumns"></tr>
+                                  <tr mat-row *matRowDef="let row; columns: usersAndPermissionsPermissionColumns"></tr>
+                                </table>
+                              </div>
+                            </td>
+                          </tr>
+                        }
+                      }
+                    </tbody>
                   </table>
                 </div>
               }
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.scss b/CCUI.DAPPI/src/app/settings/settings.component.scss
index d633dd4..4a404d2 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.scss
+++ b/CCUI.DAPPI/src/app/settings/settings.component.scss
@@ -186,6 +186,51 @@
   table-layout: fixed;
 }
 
+.plugin-controllers-table {
+  border-bottom: vars.$divider;
+}
+
+.plugin-controllers-table th,
+.plugin-controllers-table td {
+  padding: 12px 14px;
+  border-bottom: vars.$divider;
+  color: vars.$text-primary;
+  text-align: left;
+}
+
+.plugin-controllers-table th {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.plugin-controller-details-row > td {
+  padding: 0;
+}
+
+.plugin-controller-toggle {
+  border: none;
+  background: transparent;
+  color: vars.$text-primary;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  padding: 0;
+  font: inherit;
+}
+
+.plugin-controller-toggle__icon {
+  transition: transform 0.2s ease;
+}
+
+.plugin-controller-toggle__icon--expanded {
+  transform: rotate(180deg);
+}
+
+.plugin-controller-details {
+  padding: 8px 0 0;
+}
+
 .plugin-permissions-table .mat-mdc-header-cell,
 .plugin-permissions-table .mat-mdc-cell {
   white-space: normal;
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.ts b/CCUI.DAPPI/src/app/settings/settings.component.ts
index 685682d..d0b36c2 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.ts
+++ b/CCUI.DAPPI/src/app/settings/settings.component.ts
@@ -10,7 +10,6 @@ import { UsersManagementService } from '../services/auth/users-management.servic
 import {
   UsersAndPermissionsPluginService,
   UsersAndPermissionsRoleItem,
-  UsersAndPermissionsRolePermissionsResponse,
 } from '../services/auth/users-and-permissions-plugin.service';
 
 interface PermissionTableRow {
@@ -20,6 +19,12 @@ interface PermissionTableRow {
   selected: boolean;
 }
 
+interface ControllerPermissionGroup {
+  controller: string;
+  rows: PermissionTableRow[];
+  allowedCount: number;
+}
+
 type SettingsTab = 'storage' | 'users' | 'roles' | 'usersAndPermissionsPlugin';
 
 @Component({
@@ -44,9 +49,10 @@ export class SettingsComponent implements OnInit, OnDestroy {
   usersAndPermissionsRoles: UsersAndPermissionsRoleItem[] = [];
   usersAndPermissionsRoleColumns: string[] = ['name'];
   selectedUsersAndPermissionsRole: UsersAndPermissionsRoleItem | null = null;
-  selectedUsersAndPermissionsRolePermissions: UsersAndPermissionsRolePermissionsResponse = {};
-  selectedUsersAndPermissionsRolePermissionsRows: PermissionTableRow[] = [];
-  usersAndPermissionsPermissionColumns: string[] = ['controller', 'permission', 'description', 'state'];
+  selectedUsersAndPermissionsRolePermissionGroups: ControllerPermissionGroup[] = [];
+  usersAndPermissionsControllerColumns: string[] = ['controller', 'summary'];
+  usersAndPermissionsPermissionColumns: string[] = ['permission', 'description', 'state'];
+  expandedControllers = new Set<string>();
   usersAndPermissionsRolesLoading = false;
   usersAndPermissionsRolesError = '';
   usersAndPermissionsRoleDetailsLoading = false;
@@ -110,8 +116,8 @@ export class SettingsComponent implements OnInit, OnDestroy {
         error: (error) => {
           this.usersAndPermissionsRoles = [];
           this.selectedUsersAndPermissionsRole = null;
-          this.selectedUsersAndPermissionsRolePermissions = {};
-          this.selectedUsersAndPermissionsRolePermissionsRows = [];
+          this.selectedUsersAndPermissionsRolePermissionGroups = [];
+          this.expandedControllers.clear();
           this.usersAndPermissionsRolesError = this.getApiErrorMessage(error);
           this.usersAndPermissionsRolesLoading = false;
         },
@@ -130,9 +136,23 @@ export class SettingsComponent implements OnInit, OnDestroy {
 
   selectUsersAndPermissionsRole(role: UsersAndPermissionsRoleItem): void {
     this.selectedUsersAndPermissionsRole = role;
+    this.expandedControllers.clear();
     this.loadUsersAndPermissionsRoleDetails(role.Name);
   }
 
+  toggleController(controller: string): void {
+    if (this.expandedControllers.has(controller)) {
+      this.expandedControllers.delete(controller);
+      return;
+    }
+
+    this.expandedControllers.add(controller);
+  }
+
+  isControllerExpanded(controller: string): boolean {
+    return this.expandedControllers.has(controller);
+  }
+
   private loadUsersAndPermissionsRoleDetails(roleName: string): void {
     this.usersAndPermissionsRoleDetailsLoading = true;
     this.usersAndPermissionsRoleDetailsError = '';
@@ -140,29 +160,33 @@ export class SettingsComponent implements OnInit, OnDestroy {
     this.subscription.add(
       this.usersAndPermissionsPluginService.getRolePermissions(roleName).subscribe({
         next: (permissions) => {
-          this.selectedUsersAndPermissionsRolePermissions = permissions;
-          this.selectedUsersAndPermissionsRolePermissionsRows = Object.entries(permissions)
-            .flatMap(([controller, permissionItems]) =>
-              permissionItems.map((permission) => ({
+          this.selectedUsersAndPermissionsRolePermissionGroups = Object.entries(permissions)
+            .map(([controller, permissionItems]) => {
+              const rows = permissionItems
+                .map((permission) => ({
+                  controller,
+                  permissionName: permission.PermissionName,
+                  description: permission.Description || '-',
+                  selected: permission.Selected,
+                }))
+                .sort((a, b) => a.permissionName.localeCompare(b.permissionName));
+
+              return {
                 controller,
-                permissionName: permission.PermissionName,
-                description: permission.Description || '-',
-                selected: permission.Selected,
-              }))
-            )
-            .sort((a, b) => {
-              const byController = a.controller.localeCompare(b.controller);
-              if (byController !== 0) {
-                return byController;
-              }
-
-              return a.permissionName.localeCompare(b.permissionName);
-            });
+                rows,
+                allowedCount: rows.filter((row) => row.selected).length,
+              };
+            })
+            .sort((a, b) => a.controller.localeCompare(b.controller));
+
+          if (this.selectedUsersAndPermissionsRolePermissionGroups.length) {
+            this.expandedControllers.add(this.selectedUsersAndPermissionsRolePermissionGroups[0].controller);
+          }
           this.usersAndPermissionsRoleDetailsLoading = false;
         },
         error: (error) => {
-          this.selectedUsersAndPermissionsRolePermissions = {};
-          this.selectedUsersAndPermissionsRolePermissionsRows = [];
+          this.selectedUsersAndPermissionsRolePermissionGroups = [];
+          this.expandedControllers.clear();
           this.usersAndPermissionsRoleDetailsError = this.getApiErrorMessage(error);
           this.usersAndPermissionsRoleDetailsLoading = false;
         },

From 855d7c44f8ccfff2033f3c8bb5cedea24e448567 Mon Sep 17 00:00:00 2001
From: Mihail <mihailkitrozoski@codechem.com>
Date: Tue, 24 Mar 2026 13:44:46 +0100
Subject: [PATCH 5/9] add effect on the description table items

---
 CCUI.DAPPI/src/app/settings/settings.component.html |  4 +++-
 CCUI.DAPPI/src/app/settings/settings.component.scss | 11 +++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/CCUI.DAPPI/src/app/settings/settings.component.html b/CCUI.DAPPI/src/app/settings/settings.component.html
index 53f0302..082c9e0 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.html
+++ b/CCUI.DAPPI/src/app/settings/settings.component.html
@@ -162,7 +162,9 @@ <h3>No permissions found</h3>
 
                                   <ng-container matColumnDef="description">
                                     <th mat-header-cell *matHeaderCellDef>Description</th>
-                                    <td mat-cell *matCellDef="let row">{{ row.description }}</td>
+                                    <td mat-cell *matCellDef="let row">
+                                      <span class="plugin-permission-description">{{ row.description }}</span>
+                                    </td>
                                   </ng-container>
 
                                   <ng-container matColumnDef="state">
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.scss b/CCUI.DAPPI/src/app/settings/settings.component.scss
index 4a404d2..0f73b1c 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.scss
+++ b/CCUI.DAPPI/src/app/settings/settings.component.scss
@@ -291,6 +291,17 @@
   white-space: nowrap;
 }
 
+.plugin-permission-description {
+  display: inline-flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: vars.$text-secondary;
+  background-color: vars.$primary-focus;
+  border-radius: 12px;
+  padding: 4px 10px;
+}
+
 .plugin-permission-state--enabled {
   color: vars.$primary-main;
 }

From 81210d0fefead2278360a0d44ee4da8c2f0632de Mon Sep 17 00:00:00 2001
From: Mihail <mihailkitrozoski@codechem.com>
Date: Tue, 24 Mar 2026 16:09:32 +0100
Subject: [PATCH 6/9] add toggle status and pill color based on the endpoint
 type

---
 .../src/app/settings/settings.component.html  | 20 ++++++---
 .../src/app/settings/settings.component.scss  | 45 +++++++++++++++++++
 .../src/app/settings/settings.component.ts    | 21 +++++++++
 3 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/CCUI.DAPPI/src/app/settings/settings.component.html b/CCUI.DAPPI/src/app/settings/settings.component.html
index 082c9e0..a2db8da 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.html
+++ b/CCUI.DAPPI/src/app/settings/settings.component.html
@@ -163,19 +163,27 @@ <h3>No permissions found</h3>
                                   <ng-container matColumnDef="description">
                                     <th mat-header-cell *matHeaderCellDef>Description</th>
                                     <td mat-cell *matCellDef="let row">
-                                      <span class="plugin-permission-description">{{ row.description }}</span>
+                                      <span
+                                        class="plugin-permission-description"
+                                        [style.background-color]="getEndpointMethodColor(row.description)"
+                                      >
+                                        {{ row.description }}
+                                      </span>
                                     </td>
                                   </ng-container>
 
                                   <ng-container matColumnDef="state">
                                     <th mat-header-cell *matHeaderCellDef>Status</th>
                                     <td mat-cell *matCellDef="let row">
-                                      <span
-                                        class="plugin-permission-state"
-                                        [class.plugin-permission-state--enabled]="row.selected"
+                                      <mat-button-toggle-group
+                                        class="plugin-status-toggle"
+                                        [value]="row.selected"
+                                        (change)="row.selected = $event.value"
+                                        aria-label="Permission status"
                                       >
-                                        {{ row.selected ? 'Allowed' : 'Not allowed' }}
-                                      </span>
+                                        <mat-button-toggle [value]="true">Allowed</mat-button-toggle>
+                                        <mat-button-toggle [value]="false">Not Allowed</mat-button-toggle>
+                                      </mat-button-toggle-group>
                                     </td>
                                   </ng-container>
 
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.scss b/CCUI.DAPPI/src/app/settings/settings.component.scss
index 0f73b1c..a8eebc0 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.scss
+++ b/CCUI.DAPPI/src/app/settings/settings.component.scss
@@ -235,6 +235,12 @@
 .plugin-permissions-table .mat-mdc-cell {
   white-space: normal;
   word-break: break-word;
+  border-bottom-color: rgba(vars.$text-primary, 0.12) !important;
+}
+
+:host ::ng-deep .plugin-permissions-table .mdc-data-table__header-row,
+:host ::ng-deep .plugin-permissions-table .mdc-data-table__row {
+  border-bottom-color: rgba(vars.$text-primary, 0.12) !important;
 }
 
 .plugin-role-details {
@@ -305,3 +311,42 @@
 .plugin-permission-state--enabled {
   color: vars.$primary-main;
 }
+
+.plugin-status-toggle {
+  border-radius: 14px;
+}
+
+:host ::ng-deep .plugin-status-toggle.mat-button-toggle-group {
+  border: 0px solid vars.$default-enabled-border;
+  background-color: vars.$background-default;
+  overflow: hidden;
+}
+
+:host ::ng-deep .plugin-status-toggle .mat-button-toggle {
+  background-color: transparent;
+  color: vars.$text-secondary;
+}
+
+:host ::ng-deep .plugin-status-toggle .mat-button-toggle + .mat-button-toggle {
+  border-left: 1px solid rgba(vars.$text-primary, 0.16);
+}
+
+:host ::ng-deep .plugin-status-toggle .mat-button-toggle-checked {
+  background-color: vars.$background-paper-elevation-8;
+  color: vars.$text-primary;
+}
+
+:host ::ng-deep .plugin-status-toggle .mat-button-toggle-label-content {
+  font-size: 12px;
+  line-height: 24px;
+  padding: 0 8px;
+}
+
+:host ::ng-deep .plugin-status-toggle .mat-pseudo-checkbox {
+  color: rgba(vars.$text-primary, 0.98) !important;
+  opacity: 1 !important;
+}
+
+:host ::ng-deep .plugin-status-toggle .mat-pseudo-checkbox::after {
+  border-color: rgba(vars.$text-primary, 0.98) !important;
+}
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.ts b/CCUI.DAPPI/src/app/settings/settings.component.ts
index d0b36c2..7033bb0 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.ts
+++ b/CCUI.DAPPI/src/app/settings/settings.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTableModule } from '@angular/material/table';
@@ -31,6 +32,7 @@ type SettingsTab = 'storage' | 'users' | 'roles' | 'usersAndPermissionsPlugin';
   selector: 'app-settings',
   standalone: true,
   imports: [
+    MatButtonToggleModule,
     MatIconModule,
     MatProgressSpinnerModule,
     MatTableModule,
@@ -153,6 +155,25 @@ export class SettingsComponent implements OnInit, OnDestroy {
     return this.expandedControllers.has(controller);
   }
 
+  getEndpointMethodColor(description: string): string {
+    const method = (description || '').split('/')[0].trim().toUpperCase();
+
+    switch (method) {
+      case 'GET':
+        return '#164891';
+      case 'PUT':
+        return '#ae6303';
+      case 'PATCH':
+        return '#2f9480';
+      case 'POST':
+        return '#2e9471';
+      case 'DELETE':
+        return '#a40504';
+      default:
+        return '';
+    }
+  }
+
   private loadUsersAndPermissionsRoleDetails(roleName: string): void {
     this.usersAndPermissionsRoleDetailsLoading = true;
     this.usersAndPermissionsRoleDetailsError = '';

From f9e8e8f1392a5ea9e8f3ac8d2cecdc4cc0c59aa5 Mon Sep 17 00:00:00 2001
From: Mihail <mihailkitrozoski@codechem.com>
Date: Wed, 25 Mar 2026 13:52:09 +0100
Subject: [PATCH 7/9] refactor: use lowercase for the interfaces properties

---
 .../users-and-permissions-plugin.service.ts   | 28 +++++++++----------
 .../src/app/settings/settings.component.html  |  6 ++--
 .../src/app/settings/settings.component.ts    | 16 +++++------
 3 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts b/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts
index 03e1398..e6931fc 100644
--- a/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts
+++ b/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts
@@ -3,35 +3,35 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { BASE_API_URL } from '../../../Constants';
 
-export interface UsersAndPermissionsRoleItem {
-  Id: string;
-  Name: string;
-  IsDefaultForAuthenticatedUser: boolean;
+export interface usersAndPermissionsRoleItem {
+  id: string;
+  name: string;
+  isDefaultForAuthenticatedUser: boolean;
 }
 
-export interface UsersAndPermissionsPermissionItem {
-  PermissionName: string;
-  Description: string;
-  Selected: boolean;
+export interface usersAndPermissionsPermissionItem {
+  permissionName: string;
+  description: string;
+  selected: boolean;
 }
 
-export type UsersAndPermissionsRolePermissionsResponse = Record<
+export type usersAndPermissionsRolePermissionsResponse = Record<
   string,
-  UsersAndPermissionsPermissionItem[]
+  usersAndPermissionsPermissionItem[]
 >;
 
 @Injectable({ providedIn: 'root' })
 export class UsersAndPermissionsPluginService {
   constructor(private http: HttpClient) {}
 
-  getAllRoles(): Observable<UsersAndPermissionsRoleItem[]> {
-    return this.http.get<UsersAndPermissionsRoleItem[]>(`${BASE_API_URL}usersandpermissions/roles`);
+  getAllRoles(): Observable<usersAndPermissionsRoleItem[]> {
+    return this.http.get<usersAndPermissionsRoleItem[]>(`${BASE_API_URL}usersandpermissions/roles`);
   }
 
-  getRolePermissions(roleName: string): Observable<UsersAndPermissionsRolePermissionsResponse> {
+  getRolePermissions(roleName: string): Observable<usersAndPermissionsRolePermissionsResponse> {
     const params = new HttpParams().set('roleName', roleName);
 
-    return this.http.get<UsersAndPermissionsRolePermissionsResponse>(
+    return this.http.get<usersAndPermissionsRolePermissionsResponse>(
       `${BASE_API_URL}usersandpermissions`,
       { params }
     );
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.html b/CCUI.DAPPI/src/app/settings/settings.component.html
index a2db8da..c3d28a9 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.html
+++ b/CCUI.DAPPI/src/app/settings/settings.component.html
@@ -88,7 +88,7 @@ <h2>There are no roles yet</h2>
             <table mat-table [dataSource]="usersAndPermissionsRoles" class="plugin-roles-table">
               <ng-container matColumnDef="name">
                 <th mat-header-cell *matHeaderCellDef>Name</th>
-                <td mat-cell *matCellDef="let role">{{ role.Name }}</td>
+                <td mat-cell *matCellDef="let role">{{ role.name }}</td>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="usersAndPermissionsRoleColumns"></tr>
@@ -96,7 +96,7 @@ <h2>There are no roles yet</h2>
                 mat-row
                 *matRowDef="let role; columns: usersAndPermissionsRoleColumns"
                 class="plugin-role-row"
-                [class.plugin-role-row--active]="selectedUsersAndPermissionsRole?.Id === role.Id"
+                [class.plugin-role-row--active]="selectedUsersAndPermissionsRole?.id === role.Id"
                 (click)="selectUsersAndPermissionsRole(role)"
               ></tr>
             </table>
@@ -105,7 +105,7 @@ <h2>There are no roles yet</h2>
           <section class="plugin-role-details" aria-label="Role details">
             @if (selectedUsersAndPermissionsRole) {
               <header class="plugin-role-details__header">
-                <h2>{{ selectedUsersAndPermissionsRole.Name }}</h2>
+                <h2>{{ selectedUsersAndPermissionsRole.name }}</h2>
               </header>
 
               @if (usersAndPermissionsRoleDetailsError) {
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.ts b/CCUI.DAPPI/src/app/settings/settings.component.ts
index 7033bb0..1cbf371 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.ts
+++ b/CCUI.DAPPI/src/app/settings/settings.component.ts
@@ -10,7 +10,7 @@ import { RolesComponent } from './roles/roles.component';
 import { UsersManagementService } from '../services/auth/users-management.service';
 import {
   UsersAndPermissionsPluginService,
-  UsersAndPermissionsRoleItem,
+  usersAndPermissionsRoleItem,
 } from '../services/auth/users-and-permissions-plugin.service';
 
 interface PermissionTableRow {
@@ -48,9 +48,9 @@ export class SettingsComponent implements OnInit, OnDestroy {
 
   activeTab: SettingsTab = 'storage';
   usersAndPermissionsEnabled = false;
-  usersAndPermissionsRoles: UsersAndPermissionsRoleItem[] = [];
+  usersAndPermissionsRoles: usersAndPermissionsRoleItem[] = [];
   usersAndPermissionsRoleColumns: string[] = ['name'];
-  selectedUsersAndPermissionsRole: UsersAndPermissionsRoleItem | null = null;
+  selectedUsersAndPermissionsRole: usersAndPermissionsRoleItem | null = null;
   selectedUsersAndPermissionsRolePermissionGroups: ControllerPermissionGroup[] = [];
   usersAndPermissionsControllerColumns: string[] = ['controller', 'summary'];
   usersAndPermissionsPermissionColumns: string[] = ['permission', 'description', 'state'];
@@ -136,10 +136,10 @@ export class SettingsComponent implements OnInit, OnDestroy {
     );
   }
 
-  selectUsersAndPermissionsRole(role: UsersAndPermissionsRoleItem): void {
+  selectUsersAndPermissionsRole(role: usersAndPermissionsRoleItem): void {
     this.selectedUsersAndPermissionsRole = role;
     this.expandedControllers.clear();
-    this.loadUsersAndPermissionsRoleDetails(role.Name);
+    this.loadUsersAndPermissionsRoleDetails(role.name);
   }
 
   toggleController(controller: string): void {
@@ -186,9 +186,9 @@ export class SettingsComponent implements OnInit, OnDestroy {
               const rows = permissionItems
                 .map((permission) => ({
                   controller,
-                  permissionName: permission.PermissionName,
-                  description: permission.Description || '-',
-                  selected: permission.Selected,
+                  permissionName: permission.permissionName,
+                  description: permission.description || '-',
+                  selected: permission.selected,
                 }))
                 .sort((a, b) => a.permissionName.localeCompare(b.permissionName));
 

From 5f0637fbf92688ea8888824b3b8ff4fae2b3b515 Mon Sep 17 00:00:00 2001
From: Mihail <mihailkitrozoski@codechem.com>
Date: Wed, 25 Mar 2026 15:26:33 +0100
Subject: [PATCH 8/9] fix: use lowercase for interface properties

---
 .../users-and-permissions-plugin.service.ts   | 49 ++++++++++++++-----
 .../src/app/settings/settings.component.html  |  6 +--
 .../src/app/settings/settings.component.ts    | 12 +++--
 3 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts b/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts
index 03e1398..bd9ce9c 100644
--- a/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts
+++ b/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts
@@ -1,18 +1,18 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { map, Observable } from 'rxjs';
 import { BASE_API_URL } from '../../../Constants';
 
 export interface UsersAndPermissionsRoleItem {
-  Id: string;
-  Name: string;
-  IsDefaultForAuthenticatedUser: boolean;
+  id: string;
+  name: string;
+  isDefaultForAuthenticatedUser: boolean;
 }
 
 export interface UsersAndPermissionsPermissionItem {
-  PermissionName: string;
-  Description: string;
-  Selected: boolean;
+  permissionName: string;
+  description: string;
+  selected: boolean;
 }
 
 export type UsersAndPermissionsRolePermissionsResponse = Record<
@@ -22,18 +22,45 @@ export type UsersAndPermissionsRolePermissionsResponse = Record<
 
 @Injectable({ providedIn: 'root' })
 export class UsersAndPermissionsPluginService {
+  private readonly endpoint = 'usersandpermissions';
+
   constructor(private http: HttpClient) {}
 
   getAllRoles(): Observable<UsersAndPermissionsRoleItem[]> {
-    return this.http.get<UsersAndPermissionsRoleItem[]>(`${BASE_API_URL}usersandpermissions/roles`);
+    return this.http.get<any[]>(`${BASE_API_URL}${this.endpoint}/roles`).pipe(
+      map((roles) => (roles ?? []).map((role) => this.normalizeRole(role)))
+    );
   }
 
   getRolePermissions(roleName: string): Observable<UsersAndPermissionsRolePermissionsResponse> {
     const params = new HttpParams().set('roleName', roleName);
 
-    return this.http.get<UsersAndPermissionsRolePermissionsResponse>(
-      `${BASE_API_URL}usersandpermissions`,
-      { params }
+    return this.http.get<Record<string, any[]>>(`${BASE_API_URL}${this.endpoint}`, { params }).pipe(
+      map((response) =>
+        Object.fromEntries(
+          Object.entries(response ?? {}).map(([controller, permissions]) => [
+            controller,
+            (permissions ?? []).map((permission) => this.normalizePermission(permission)),
+          ])
+        )
+      )
     );
   }
+
+  private normalizeRole(role: any): UsersAndPermissionsRoleItem {
+    return {
+      id: role?.id ?? role?.Id ?? '',
+      name: role?.name ?? role?.Name ?? '',
+      isDefaultForAuthenticatedUser:
+        role?.isDefaultForAuthenticatedUser ?? role?.IsDefaultForAuthenticatedUser ?? false,
+    };
+  }
+
+  private normalizePermission(permission: any): UsersAndPermissionsPermissionItem {
+    return {
+      permissionName: permission?.permissionName ?? permission?.PermissionName ?? '',
+      description: permission?.description ?? permission?.Description ?? '',
+      selected: permission?.selected ?? permission?.Selected ?? false,
+    };
+  }
 }
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.html b/CCUI.DAPPI/src/app/settings/settings.component.html
index a2db8da..f10a2d6 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.html
+++ b/CCUI.DAPPI/src/app/settings/settings.component.html
@@ -88,7 +88,7 @@ <h2>There are no roles yet</h2>
             <table mat-table [dataSource]="usersAndPermissionsRoles" class="plugin-roles-table">
               <ng-container matColumnDef="name">
                 <th mat-header-cell *matHeaderCellDef>Name</th>
-                <td mat-cell *matCellDef="let role">{{ role.Name }}</td>
+                <td mat-cell *matCellDef="let role">{{ role.name }}</td>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="usersAndPermissionsRoleColumns"></tr>
@@ -96,7 +96,7 @@ <h2>There are no roles yet</h2>
                 mat-row
                 *matRowDef="let role; columns: usersAndPermissionsRoleColumns"
                 class="plugin-role-row"
-                [class.plugin-role-row--active]="selectedUsersAndPermissionsRole?.Id === role.Id"
+                  [class.plugin-role-row--active]="selectedUsersAndPermissionsRole?.id === role.id"
                 (click)="selectUsersAndPermissionsRole(role)"
               ></tr>
             </table>
@@ -105,7 +105,7 @@ <h2>There are no roles yet</h2>
           <section class="plugin-role-details" aria-label="Role details">
             @if (selectedUsersAndPermissionsRole) {
               <header class="plugin-role-details__header">
-                <h2>{{ selectedUsersAndPermissionsRole.Name }}</h2>
+                <h2>{{ selectedUsersAndPermissionsRole.name }}</h2>
               </header>
 
               @if (usersAndPermissionsRoleDetailsError) {
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.ts b/CCUI.DAPPI/src/app/settings/settings.component.ts
index 7033bb0..6af4676 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.ts
+++ b/CCUI.DAPPI/src/app/settings/settings.component.ts
@@ -132,14 +132,16 @@ export class SettingsComponent implements OnInit, OnDestroy {
       error?.error?.message
       || error?.error?.title
       || error?.error?.error
-      || 'Failed to load roles from /api/UsersAndPermissions/roles.'
+      || (error?.status
+        ? `Failed to load users and permissions data (${error.status}${error?.statusText ? ` ${error.statusText}` : ''})${error?.url ? `: ${error.url}` : '.'}`
+        : 'Failed to load users and permissions data.')
     );
   }
 
   selectUsersAndPermissionsRole(role: UsersAndPermissionsRoleItem): void {
     this.selectedUsersAndPermissionsRole = role;
     this.expandedControllers.clear();
-    this.loadUsersAndPermissionsRoleDetails(role.Name);
+    this.loadUsersAndPermissionsRoleDetails(role.name);
   }
 
   toggleController(controller: string): void {
@@ -186,9 +188,9 @@ export class SettingsComponent implements OnInit, OnDestroy {
               const rows = permissionItems
                 .map((permission) => ({
                   controller,
-                  permissionName: permission.PermissionName,
-                  description: permission.Description || '-',
-                  selected: permission.Selected,
+                  permissionName: permission.permissionName,
+                  description: permission.description || '-',
+                  selected: permission.selected,
                 }))
                 .sort((a, b) => a.permissionName.localeCompare(b.permissionName));
 

From e73938569c08ad822288d8cd16a4101bdda0523c Mon Sep 17 00:00:00 2001
From: Mihail <mihailkitrozoski@codechem.com>
Date: Wed, 25 Mar 2026 15:38:11 +0100
Subject: [PATCH 9/9] Revert "fix: use lowercase for interface properties"

This reverts commit 5f0637fbf92688ea8888824b3b8ff4fae2b3b515.
---
 .../users-and-permissions-plugin.service.ts   | 49 +++++--------------
 .../src/app/settings/settings.component.html  |  6 +--
 .../src/app/settings/settings.component.ts    | 12 ++---
 3 files changed, 19 insertions(+), 48 deletions(-)

diff --git a/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts b/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts
index bd9ce9c..03e1398 100644
--- a/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts
+++ b/CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts
@@ -1,18 +1,18 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { map, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 import { BASE_API_URL } from '../../../Constants';
 
 export interface UsersAndPermissionsRoleItem {
-  id: string;
-  name: string;
-  isDefaultForAuthenticatedUser: boolean;
+  Id: string;
+  Name: string;
+  IsDefaultForAuthenticatedUser: boolean;
 }
 
 export interface UsersAndPermissionsPermissionItem {
-  permissionName: string;
-  description: string;
-  selected: boolean;
+  PermissionName: string;
+  Description: string;
+  Selected: boolean;
 }
 
 export type UsersAndPermissionsRolePermissionsResponse = Record<
@@ -22,45 +22,18 @@ export type UsersAndPermissionsRolePermissionsResponse = Record<
 
 @Injectable({ providedIn: 'root' })
 export class UsersAndPermissionsPluginService {
-  private readonly endpoint = 'usersandpermissions';
-
   constructor(private http: HttpClient) {}
 
   getAllRoles(): Observable<UsersAndPermissionsRoleItem[]> {
-    return this.http.get<any[]>(`${BASE_API_URL}${this.endpoint}/roles`).pipe(
-      map((roles) => (roles ?? []).map((role) => this.normalizeRole(role)))
-    );
+    return this.http.get<UsersAndPermissionsRoleItem[]>(`${BASE_API_URL}usersandpermissions/roles`);
   }
 
   getRolePermissions(roleName: string): Observable<UsersAndPermissionsRolePermissionsResponse> {
     const params = new HttpParams().set('roleName', roleName);
 
-    return this.http.get<Record<string, any[]>>(`${BASE_API_URL}${this.endpoint}`, { params }).pipe(
-      map((response) =>
-        Object.fromEntries(
-          Object.entries(response ?? {}).map(([controller, permissions]) => [
-            controller,
-            (permissions ?? []).map((permission) => this.normalizePermission(permission)),
-          ])
-        )
-      )
+    return this.http.get<UsersAndPermissionsRolePermissionsResponse>(
+      `${BASE_API_URL}usersandpermissions`,
+      { params }
     );
   }
-
-  private normalizeRole(role: any): UsersAndPermissionsRoleItem {
-    return {
-      id: role?.id ?? role?.Id ?? '',
-      name: role?.name ?? role?.Name ?? '',
-      isDefaultForAuthenticatedUser:
-        role?.isDefaultForAuthenticatedUser ?? role?.IsDefaultForAuthenticatedUser ?? false,
-    };
-  }
-
-  private normalizePermission(permission: any): UsersAndPermissionsPermissionItem {
-    return {
-      permissionName: permission?.permissionName ?? permission?.PermissionName ?? '',
-      description: permission?.description ?? permission?.Description ?? '',
-      selected: permission?.selected ?? permission?.Selected ?? false,
-    };
-  }
 }
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.html b/CCUI.DAPPI/src/app/settings/settings.component.html
index f10a2d6..a2db8da 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.html
+++ b/CCUI.DAPPI/src/app/settings/settings.component.html
@@ -88,7 +88,7 @@ <h2>There are no roles yet</h2>
             <table mat-table [dataSource]="usersAndPermissionsRoles" class="plugin-roles-table">
               <ng-container matColumnDef="name">
                 <th mat-header-cell *matHeaderCellDef>Name</th>
-                <td mat-cell *matCellDef="let role">{{ role.name }}</td>
+                <td mat-cell *matCellDef="let role">{{ role.Name }}</td>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="usersAndPermissionsRoleColumns"></tr>
@@ -96,7 +96,7 @@ <h2>There are no roles yet</h2>
                 mat-row
                 *matRowDef="let role; columns: usersAndPermissionsRoleColumns"
                 class="plugin-role-row"
-                  [class.plugin-role-row--active]="selectedUsersAndPermissionsRole?.id === role.id"
+                [class.plugin-role-row--active]="selectedUsersAndPermissionsRole?.Id === role.Id"
                 (click)="selectUsersAndPermissionsRole(role)"
               ></tr>
             </table>
@@ -105,7 +105,7 @@ <h2>There are no roles yet</h2>
           <section class="plugin-role-details" aria-label="Role details">
             @if (selectedUsersAndPermissionsRole) {
               <header class="plugin-role-details__header">
-                <h2>{{ selectedUsersAndPermissionsRole.name }}</h2>
+                <h2>{{ selectedUsersAndPermissionsRole.Name }}</h2>
               </header>
 
               @if (usersAndPermissionsRoleDetailsError) {
diff --git a/CCUI.DAPPI/src/app/settings/settings.component.ts b/CCUI.DAPPI/src/app/settings/settings.component.ts
index 58a89b1..3685c44 100644
--- a/CCUI.DAPPI/src/app/settings/settings.component.ts
+++ b/CCUI.DAPPI/src/app/settings/settings.component.ts
@@ -132,16 +132,14 @@ export class SettingsComponent implements OnInit, OnDestroy {
       error?.error?.message
       || error?.error?.title
       || error?.error?.error
-      || (error?.status
-        ? `Failed to load users and permissions data (${error.status}${error?.statusText ? ` ${error.statusText}` : ''})${error?.url ? `: ${error.url}` : '.'}`
-        : 'Failed to load users and permissions data.')
+      || 'Failed to load roles from /api/UsersAndPermissions/roles.'
     );
   }
 
   selectUsersAndPermissionsRole(role: usersAndPermissionsRoleItem): void {
     this.selectedUsersAndPermissionsRole = role;
     this.expandedControllers.clear();
-    this.loadUsersAndPermissionsRoleDetails(role.name);
+    this.loadUsersAndPermissionsRoleDetails(role.Name);
   }
 
   toggleController(controller: string): void {
@@ -188,9 +186,9 @@ export class SettingsComponent implements OnInit, OnDestroy {
               const rows = permissionItems
                 .map((permission) => ({
                   controller,
-                  permissionName: permission.permissionName,
-                  description: permission.description || '-',
-                  selected: permission.selected,
+                  permissionName: permission.PermissionName,
+                  description: permission.Description || '-',
+                  selected: permission.Selected,
                 }))
                 .sort((a, b) => a.permissionName.localeCompare(b.permissionName));