Task/modernize layout of overview tab in admin control panel (#6793)

* Modernize layout

* Update changelog

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Integrated a theme switcher into _Storybook_ to support toggling between the light and dark mode
 
+### Changed
+
+- Modernized the layout of the overview tab in the admin control panel
+
 ### Fixed
 
 - Optimized the spacing of the logo in the header

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

@@ -144,6 +144,21 @@ export class GfAdminOverviewComponent implements OnInit {
     });
   }
 
+  public get activitiesCountPerUser() {
+    if (!this.activitiesCount || !this.userCount) {
+      return undefined;
+    }
+
+    const formattedActivitiesCountPerUser = (
+      this.activitiesCount / this.userCount
+    ).toLocaleString(this.user?.settings?.locale, {
+      maximumFractionDigits: 2,
+      minimumFractionDigits: 2
+    });
+
+    return `(${formattedActivitiesCountPerUser} ${$localize`per User`})`;
+  }
+
   public ngOnInit() {
     this.fetchAdminData();
   }

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -1,38 +1,51 @@
 <div class="container">
+  <div class="mb-3 row">
+    <div class="col-lg-4 mb-3 mb-lg-0">
+      <mat-card appearance="outlined">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [enableCopyToClipboardButton]="true"
+            [value]="version"
+            >Version</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-lg-4 mb-3 mb-lg-0">
+      <mat-card appearance="outlined">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [locale]="user?.settings?.locale"
+            [value]="userCount"
+            >Users</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-lg-4">
+      <mat-card appearance="outlined">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [locale]="user?.settings?.locale"
+            [subLabel]="activitiesCountPerUser"
+            [value]="activitiesCount"
+            >Activities</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+
   <div class="row">
     <div class="col">
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
-          <div class="d-flex my-3">
-            <div class="w-50" i18n>Version</div>
-            <div class="w-50">
-              <gf-value
-                [enableCopyToClipboardButton]="true"
-                [value]="version"
-              />
-            </div>
-          </div>
-          <div class="d-flex my-3">
-            <div class="w-50" i18n>User Count</div>
-            <div class="w-50">
-              <gf-value [locale]="user?.settings?.locale" [value]="userCount" />
-            </div>
-          </div>
-          <div class="d-flex my-3">
-            <div class="w-50" i18n>Activity Count</div>
-            <div class="w-50">
-              <gf-value
-                [locale]="user?.settings?.locale"
-                [value]="activitiesCount"
-              />
-              @if (activitiesCount && userCount) {
-                <div>
-                  {{ activitiesCount / userCount | number: '1.2-2' }}
-                  <span i18n>per User</span>
-                </div>
-              }
-            </div>
-          </div>
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Signup</div>
             <div class="w-50">