feat: improve user detail dialog routing in Admin Control panel

- Change from query parameters to path segments for user ID
- Update URL structure from /admin/users?userId={id}&userDetailDialog=true to /admin/users/{id}
- Add route parameter handling with timing control for data loading
- Fix dialog opening race condition by implementing pending user ID logic
- Maintain backward compatibility with existing dialog functionality

Resolves #5833

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -88,6 +88,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
   public totalItems = 0;
   public user: User;
 
+  private pendingUserId: string | null = null;
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
@@ -133,11 +134,18 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       ];
     }
 
-    this.route.queryParams
+    this.route.params
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
-        if (params['userDetailDialog'] && params['userId']) {
+        if (params['userId']) {
-          this.openUserDetailDialog(params['userId']);
+          const userId = params['userId'] as string;
+          // Wait for users to be loaded before opening dialog
+          if (this.dataSource.data.length > 0) {
+            this.openUserDetailDialog(userId);
+          } else {
+            // Store the userId to open dialog after users are loaded
+            this.pendingUserId = userId;
+          }
         }
       });
 
@@ -245,9 +253,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
   }
 
   public onOpenUserDetailDialog(userId: string) {
-    this.router.navigate([], {
+    this.router.navigate(['./', userId], { relativeTo: this.route });
-      queryParams: { userId, userDetailDialog: true }
-    });
   }
 
   public ngOnDestroy() {
@@ -275,6 +281,12 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
         this.isLoading = false;
 
         this.changeDetectorRef.markForCheck();
+
+        // Open dialog if there's a pending user ID
+        if (this.pendingUserId) {
+          this.openUserDetailDialog(this.pendingUserId);
+          this.pendingUserId = null;
+        }
       });
   }
 
@@ -284,7 +296,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
     });
 
     if (!userData) {
-      this.router.navigate(['.'], { relativeTo: this.route });
+      this.router.navigate(['../'], { relativeTo: this.route });
       return;
     }
 
@@ -304,7 +316,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
         this.fetchUsers();
-        this.router.navigate(['.'], { relativeTo: this.route });
+        this.router.navigate(['../'], { relativeTo: this.route });
       });
   }
 }

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,