Feature/extend user detail dialog (#5844)

* Extend user detail dialog

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Extended the user detail dialog in the users section of the admin control panel
+
 ### Fixed
 
 - Ensured the locale is available in the settings dialog to customize the rule thresholds of the _X-ray_ page

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

@@ -278,9 +278,9 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       });
   }
 
-  private openUserDetailDialog(userId: string) {
+  private openUserDetailDialog(aUserId: string) {
     const userData = this.dataSource.data.find(({ id }) => {
-      return id === userId;
+      return id === aUserId;
     });
 
     if (!userData) {
@@ -293,6 +293,7 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
       data: {
         userData,
         deviceType: this.deviceType,
+        hasPermissionForSubscription: this.hasPermissionForSubscription,
         locale: this.user?.settings?.locale
       } as UserDetailDialogParams,
       height: this.deviceType === 'mobile' ? '98vh' : '60vh',

apps/client/src/app/components/user-detail-dialog/interfaces/interfaces.ts

@@ -2,6 +2,7 @@ import { AdminUsers } from '@ghostfolio/common/interfaces';
 
 export interface UserDetailDialogParams {
   deviceType: string;
+  hasPermissionForSubscription: boolean;
   locale: string;
   userData: AdminUsers['users'][0];
 }

apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html

@@ -8,9 +8,9 @@
   <div class="container p-0">
     <div class="mb-3 row">
       <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [value]="data.userData.id"
-          >User ID</gf-value
-        >
+        <gf-value i18n size="medium" [value]="data.userData.id">
+          User ID
+        </gf-value>
       </div>
       <div class="col-6 mb-3">
         <gf-value
@@ -19,10 +19,75 @@
           [isDate]="true"
           [locale]="data.locale"
           [value]="data.userData.createdAt"
-          >Registration Date</gf-value
         >
+          Registration Date
+        </gf-value>
       </div>
     </div>
+
+    <div class="mb-3 row">
+      <div class="col-6 mb-3">
+        <gf-value i18n size="medium" [value]="data.userData.role">
+          Role
+        </gf-value>
+      </div>
+      @if (data.hasPermissionForSubscription) {
+        <div class="col-6 mb-3">
+          <gf-value i18n size="medium" [value]="data.userData.country">
+            Country
+          </gf-value>
+        </div>
+      }
+    </div>
+
+    <div class="mb-3 row">
+      <div class="col-6 mb-3">
+        <gf-value
+          i18n
+          size="medium"
+          [locale]="data.locale"
+          [value]="data.userData.accountCount"
+        >
+          Accounts
+        </gf-value>
+      </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          i18n
+          size="medium"
+          [locale]="data.locale"
+          [value]="data.userData.activityCount"
+        >
+          Activities
+        </gf-value>
+      </div>
+    </div>
+
+    @if (data.hasPermissionForSubscription) {
+      <div class="mb-3 row">
+        <div class="col-6 mb-3">
+          <gf-value
+            i18n
+            size="medium"
+            [locale]="data.locale"
+            [precision]="0"
+            [value]="data.userData.engagement"
+          >
+            Engagement per Day
+          </gf-value>
+        </div>
+        <div class="col-6 mb-3">
+          <gf-value
+            i18n
+            size="medium"
+            [locale]="data.locale"
+            [value]="data.userData.dailyApiRequests"
+          >
+            API Requests Today
+          </gf-value>
+        </div>
+      </div>
+    }
   </div>
 </div>