From e399702992a3fed3377f62a74a2b26c90e4f59a8 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 27 Apr 2026 17:30:36 +0200
Subject: [PATCH] Task/modernize layout of overview tab in admin control panel
 (#6793)

* Modernize layout

* Update changelog
---
 CHANGELOG.md                                  |  4 +
 .../admin-overview.component.ts               | 15 ++++
 .../admin-overview/admin-overview.html        | 73 +++++++++++--------
 3 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4c16ad76..1664e56d4 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.component.ts b/apps/client/src/app/components/admin-overview/admin-overview.component.ts
index ff55bb2bc..9b92c5b11 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.component.ts
+++ b/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();
   }
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html
index 3a8a81024..5514c57d0 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/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">