From eb9d66e760724b33288667b010a7be75e85fd587 Mon Sep 17 00:00:00 2001
From: Karel De Smet <karel.de.smet@outlook.com>
Date: Tue, 30 Dec 2025 16:03:29 +0100
Subject: [PATCH] Task/improve user detail dialog routing in Admin Control
 panel (#6104)

* Improve user detail dialog routing in Admin Control panel

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../admin-users/admin-users.component.ts      | 26 ++++++++++++-------
 .../components/admin-users/admin-users.html   |  6 ++---
 .../src/app/pages/admin/admin-page.routes.ts  |  5 ++++
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7fe42255d..3eac30a5c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the routing of the user detail dialog in the users section of the admin control panel
 - Lifted the asset profile identifier editing restriction for `MANUAL` data sources in the asset profile details dialog of the admin control panel
 - Improved the language localization for German (`de`)
 - Upgraded `angular` from version `20.2.4` to `20.3.9`
diff --git a/apps/client/src/app/components/admin-users/admin-users.component.ts b/apps/client/src/app/components/admin-users/admin-users.component.ts
index 99fbe7901..1722b498f 100644
--- a/apps/client/src/app/components/admin-users/admin-users.component.ts
+++ b/apps/client/src/app/components/admin-users/admin-users.component.ts
@@ -18,6 +18,7 @@ import {
   User
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { internalRoutes } from '@ghostfolio/common/routes/routes';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { GfValueComponent } from '@ghostfolio/ui/value';
@@ -39,7 +40,7 @@ import {
   PageEvent
 } from '@angular/material/paginator';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
 import {
   differenceInSeconds,
@@ -69,7 +70,8 @@ import { takeUntil } from 'rxjs/operators';
     MatMenuModule,
     MatPaginatorModule,
     MatTableModule,
-    NgxSkeletonLoaderModule
+    NgxSkeletonLoaderModule,
+    RouterModule
   ],
   selector: 'gf-admin-users',
   styleUrls: ['./admin-users.scss'],
@@ -88,6 +90,8 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
   public info: InfoItem;
   public isLoading = false;
   public pageSize = DEFAULT_PAGE_SIZE;
+  public routerLinkAdminControlUsers =
+    internalRoutes.adminControl.subRoutes.users.routerLink;
   public totalItems = 0;
   public user: User;
 
@@ -136,11 +140,13 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       ];
     }
 
-    this.route.queryParams
+    this.route.paramMap
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
-        if (params['userDetailDialog'] && params['userId']) {
-          this.openUserDetailDialog(params['userId']);
+        const userId = params.get('userId');
+
+        if (userId) {
+          this.openUserDetailDialog(userId);
         }
       });
 
@@ -248,9 +254,9 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
   }
 
   public onOpenUserDetailDialog(userId: string) {
-    this.router.navigate([], {
-      queryParams: { userId, userDetailDialog: true }
-    });
+    this.router.navigate(
+      internalRoutes.adminControl.subRoutes.users.routerLink.concat(userId)
+    );
   }
 
   public ngOnDestroy() {
@@ -301,7 +307,9 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       .afterClosed()
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.router.navigate(['.'], { relativeTo: this.route });
+        this.router.navigate(
+          internalRoutes.adminControl.subRoutes.users.routerLink
+        );
       });
   }
 }
diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html
index ebcdc6f5f..0f9789feb 100644
--- a/apps/client/src/app/components/admin-users/admin-users.html
+++ b/apps/client/src/app/components/admin-users/admin-users.html
@@ -215,9 +215,9 @@
                 <ion-icon name="ellipsis-horizontal" />
               </button>
               <mat-menu #userMenu="matMenu" xPosition="before">
-                <button
+                <a
                   mat-menu-item
-                  (click)="onOpenUserDetailDialog(element.id)"
+                  [routerLink]="routerLinkAdminControlUsers.concat(element.id)"
                 >
                   <span class="align-items-center d-flex">
                     <ion-icon class="mr-2" name="person-outline" />
@@ -225,7 +225,7 @@
                       ><ng-container i18n>View Details</ng-container>...</span
                     >
                   </span>
-                </button>
+                </a>
                 @if (hasPermissionToImpersonateAllUsers) {
                   <button mat-menu-item (click)="onImpersonateUser(element.id)">
                     <span class="align-items-center d-flex">
diff --git a/apps/client/src/app/pages/admin/admin-page.routes.ts b/apps/client/src/app/pages/admin/admin-page.routes.ts
index 956e12c9a..c5309edbb 100644
--- a/apps/client/src/app/pages/admin/admin-page.routes.ts
+++ b/apps/client/src/app/pages/admin/admin-page.routes.ts
@@ -38,6 +38,11 @@ export const routes: Routes = [
         path: internalRoutes.adminControl.subRoutes.users.path,
         component: GfAdminUsersComponent,
         title: internalRoutes.adminControl.subRoutes.users.title
+      },
+      {
+        path: `${internalRoutes.adminControl.subRoutes.users.path}/:userId`,
+        component: GfAdminUsersComponent,
+        title: internalRoutes.adminControl.subRoutes.users.title
       }
     ],
     component: AdminPageComponent,