From 594da5b92b84bfdc0815cd48c5e8e31ab79a71c9 Mon Sep 17 00:00:00 2001
From: Bernhard Windisch <bwi@cocoar.dev>
Date: Sat, 10 Oct 2026 10:55:16 +0200
Subject: [PATCH 1/4] feat(dashboard): statistics, charts and a per-user
 arrangement with a realm default

The dashboard becomes a catalog of widgets on a 12-column grid. Which widgets
show, in which order and how wide resolves in three layers: the user's own
arrangement, the realm default an admin set, the layout built into the app.

Backend
- GET /api/dashboard/stats: counts plus per-day login and security-event
  series, aggregated in SQL and bucketed by the viewer's calendar day. Each
  block is computed only when the caller holds the permission guarding the
  matching list surface and is omitted otherwise.
- GET/PUT/DELETE /api/dashboard/layout for the caller's own arrangement;
  PUT/DELETE /api/admin/dashboard/default-layout (realm-settings:write) for
  the realm default. A layout is shape-checked only and grants nothing.
- A permanent erase drops the user's arrangement.

Frontend
- TrendChart (line/area with crosshair tooltip) and DonutChart as plain SVG
  components on the design-system tokens, no chart dependency.
- Thirteen widgets; an edit mode to reorder, resize, remove and add them, and
  for realm-settings:write to save or remove the realm default.

The old "failed attempts, 24h" tile read a Level field the security-log
endpoint never returned; the number now comes from the statistics endpoint.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Dashboard/DashboardEndpointsTests.cs      |  251 ++++
 .../Features/Dashboard/DashboardEndpoints.cs  |  423 +++++++
 src/dotnet/Modgud.Api/Program.cs              |    1 +
 .../Modgud.Authentication/Gdpr/GdprService.cs |    5 +
 .../Dashboard/DashboardLayout.cs              |   43 +
 .../Configuration/MartenConfiguration.cs      |    7 +
 src/frontend-vue/public/i18n/de.json          |   83 +-
 .../src/views/dashboard/DashboardView.vue     | 1022 ++++++-----------
 .../src/views/dashboard/charts/DonutChart.vue |  184 +++
 .../src/views/dashboard/charts/TrendChart.vue |  296 +++++
 .../views/dashboard/charts/chart-theme.css    |   67 ++
 .../src/views/dashboard/dashboardStats.ts     |   71 ++
 .../src/views/dashboard/layout.ts             |   52 +
 .../src/views/dashboard/relativeTime.ts       |   18 +
 .../widgets/AccountSecurityWidget.vue         |   64 ++
 .../views/dashboard/widgets/CountsWidget.vue  |  143 +++
 .../dashboard/widgets/LoginMethodsWidget.vue  |   68 ++
 .../widgets/LoginProvidersWidget.vue          |   59 +
 .../dashboard/widgets/LoginsChartWidget.vue   |   78 ++
 .../dashboard/widgets/MySessionsWidget.vue    |   77 ++
 .../widgets/RecentActivityWidget.vue          |   66 ++
 .../widgets/SecurityEventsWidget.vue          |  107 ++
 .../views/dashboard/widgets/StatKpiWidget.vue |   79 ++
 .../views/dashboard/widgets/WidgetCard.vue    |  170 +++
 .../src/views/dashboard/widgets/registry.ts   |  138 +++
 25 files changed, 2862 insertions(+), 710 deletions(-)
 create mode 100644 src/dotnet/Modgud.Api.Tests/Dashboard/DashboardEndpointsTests.cs
 create mode 100644 src/dotnet/Modgud.Api/Features/Dashboard/DashboardEndpoints.cs
 create mode 100644 src/dotnet/Modgud.Domain/Dashboard/DashboardLayout.cs
 create mode 100644 src/frontend-vue/src/views/dashboard/charts/DonutChart.vue
 create mode 100644 src/frontend-vue/src/views/dashboard/charts/TrendChart.vue
 create mode 100644 src/frontend-vue/src/views/dashboard/charts/chart-theme.css
 create mode 100644 src/frontend-vue/src/views/dashboard/dashboardStats.ts
 create mode 100644 src/frontend-vue/src/views/dashboard/layout.ts
 create mode 100644 src/frontend-vue/src/views/dashboard/relativeTime.ts
 create mode 100644 src/frontend-vue/src/views/dashboard/widgets/AccountSecurityWidget.vue
 create mode 100644 src/frontend-vue/src/views/dashboard/widgets/CountsWidget.vue
 create mode 100644 src/frontend-vue/src/views/dashboard/widgets/LoginMethodsWidget.vue
 create mode 100644 src/frontend-vue/src/views/dashboard/widgets/LoginProvidersWidget.vue
 create mode 100644 src/frontend-vue/src/views/dashboard/widgets/LoginsChartWidget.vue
 create mode 100644 src/frontend-vue/src/views/dashboard/widgets/MySessionsWidget.vue
 create mode 100644 src/frontend-vue/src/views/dashboard/widgets/RecentActivityWidget.vue
 create mode 100644 src/frontend-vue/src/views/dashboard/widgets/SecurityEventsWidget.vue
 create mode 100644 src/frontend-vue/src/views/dashboard/widgets/StatKpiWidget.vue
 create mode 100644 src/frontend-vue/src/views/dashboard/widgets/WidgetCard.vue
 create mode 100644 src/frontend-vue/src/views/dashboard/widgets/registry.ts

diff --git a/src/dotnet/Modgud.Api.Tests/Dashboard/DashboardEndpointsTests.cs b/src/dotnet/Modgud.Api.Tests/Dashboard/DashboardEndpointsTests.cs
new file mode 100644
index 00000000..1eb5625c
--- /dev/null
+++ b/src/dotnet/Modgud.Api.Tests/Dashboard/DashboardEndpointsTests.cs
@@ -0,0 +1,251 @@
+using System.Net;
+using System.Net.Http.Json;
+using Modgud.Api.Features.Dashboard;
+using Modgud.Api.Tests.Infrastructure;
+using Modgud.Authentication.Audit;
+using Modgud.Domain.Dashboard;
+using Modgud.Infrastructure.Audit;
+
+namespace Modgud.Api.Tests.Dashboard;
+
+[Collection(IntegrationTestCollection.Name)]
+public class DashboardEndpointsTests(SharedPostgresFixture fixture) : IntegrationTestBase(fixture)
+{
+    // ── Statistics ──────────────────────────────────────────────────────────
+
+    [Fact]
+    public async Task Stats_bucket_logins_per_day_and_fold_failure_streaks_into_the_count()
+    {
+        var ct = TestContext.Current.CancellationToken;
+        var day = DateTimeOffset.UtcNow.Date.AddDays(-2);
+        var noon = new DateTimeOffset(day.AddHours(12), TimeSpan.Zero);
+
+        await using (var session = GetTenantedDocumentSession())
+        {
+            session.Store(
+                Login(noon, "password"),
+                Login(noon.AddMinutes(1), "password"),
+                Login(noon.AddMinutes(2), "password"),
+                Login(noon.AddMinutes(3), "magic_link"),
+                Audit(noon.AddMinutes(4), AuditEvents.LoginFailuresObserved, count: 4),
+                Audit(noon.AddMinutes(5), AuditEvents.LoginFailed),
+                // Not a login at all — must not leak into either series.
+                Audit(noon.AddMinutes(6), AuditEvents.AccountLockedOut),
+                // Outside the requested window.
+                Login(noon.AddDays(-60), "passkey"));
+            await session.SaveChangesAsync(ct);
+        }
+
+        var stats = await Client.GetFromJsonAsync<DashboardStatsDto>("/api/dashboard/stats?days=30&tz=UTC", ct);
+
+        Assert.NotNull(stats?.Logins);
+        Assert.Equal(30, stats!.Logins!.Series.Count);
+        Assert.Equal(DateOnly.FromDateTime(DateTime.UtcNow).ToString("yyyy-MM-dd"), stats.Logins.Series[^1].Day);
+
+        var bucket = Assert.Single(stats.Logins.Series, s => s.Day == day.ToString("yyyy-MM-dd"));
+        Assert.Equal(4, bucket.Succeeded);
+        Assert.Equal(5, bucket.Failed);
+
+        Assert.Equal(1, Assert.Single(stats.Logins.Methods, m => m.Method == "magic_link").Count);
+        Assert.DoesNotContain(stats.Logins.Methods, m => m.Method == "passkey");
+        Assert.Equal(5, stats.Logins.Failed);
+    }
+
+    [Fact]
+    public async Task Stats_bucket_by_the_viewers_calendar_day_not_utc()
+    {
+        var ct = TestContext.Current.CancellationToken;
+        // 23:30 UTC is already the next calendar day in Vienna (UTC+1/+2).
+        var utcDay = DateTimeOffset.UtcNow.Date.AddDays(-5);
+        var lateEvening = new DateTimeOffset(utcDay.AddHours(23).AddMinutes(30), TimeSpan.Zero);
+
+        await using (var session = GetTenantedDocumentSession())
+        {
+            session.Store(Login(lateEvening, "password"));
+            await session.SaveChangesAsync(ct);
+        }
+
+        var utc = await Client.GetFromJsonAsync<DashboardStatsDto>("/api/dashboard/stats?tz=UTC", ct);
+        var vienna = await Client.GetFromJsonAsync<DashboardStatsDto>("/api/dashboard/stats?tz=Europe/Vienna", ct);
+        var bogus = await Client.GetFromJsonAsync<DashboardStatsDto>("/api/dashboard/stats?tz=Not/A_Zone", ct);
+
+        Assert.Equal(1, utc!.Logins!.Series.Single(s => s.Day == utcDay.ToString("yyyy-MM-dd")).Succeeded);
+
+        Assert.Equal("Europe/Vienna", vienna!.TimeZone);
+        Assert.Equal(0, vienna.Logins!.Series.Single(s => s.Day == utcDay.ToString("yyyy-MM-dd")).Succeeded);
+        Assert.Equal(1, vienna.Logins.Series.Single(s => s.Day == utcDay.AddDays(1).ToString("yyyy-MM-dd")).Succeeded);
+
+        // An unknown zone buckets in UTC rather than failing the dashboard.
+        Assert.Equal("UTC", bogus!.TimeZone);
+    }
+
+    [Fact]
+    public async Task Stats_split_security_events_by_severity_and_rank_the_ones_needing_attention()
+    {
+        var ct = TestContext.Current.CancellationToken;
+        var day = DateTimeOffset.UtcNow.Date.AddDays(-3);
+        var noon = new DateTimeOffset(day.AddHours(12), TimeSpan.Zero);
+
+        await using (var session = GetTenantedDocumentSession())
+        {
+            session.Store(
+                Security(noon, AuditEvents.LoginFailedUnknownUser, AuditSeverity.Warning),
+                Security(noon.AddMinutes(1), AuditEvents.LoginFailedUnknownUser, AuditSeverity.Warning),
+                Security(noon.AddMinutes(2), AuditEvents.RefreshTokenReuseDetected, AuditSeverity.Error),
+                Security(noon.AddMinutes(3), AuditEvents.SigningKeyRotated, AuditSeverity.Info));
+            await session.SaveChangesAsync(ct);
+        }
+
+        var stats = await Client.GetFromJsonAsync<DashboardStatsDto>("/api/dashboard/stats?tz=UTC", ct);
+
+        var bucket = Assert.Single(stats!.Security!.Series, s => s.Day == day.ToString("yyyy-MM-dd"));
+        Assert.Equal(1, bucket.Info);
+        Assert.Equal(2, bucket.Warning);
+        Assert.Equal(1, bucket.Error);
+
+        Assert.Equal(2, Assert.Single(
+            stats.Security.TopEventTypes, t => t.EventType == AuditEvents.LoginFailedUnknownUser).Count);
+        // Routine Info events are not "needs attention".
+        Assert.DoesNotContain(stats.Security.TopEventTypes, t => t.EventType == AuditEvents.SigningKeyRotated);
+    }
+
+    [Fact]
+    public async Task Stats_count_what_the_list_surfaces_show()
+    {
+        var ct = TestContext.Current.CancellationToken;
+        await Factory.CreateTestUserWithIdentityAsync("Plain", "Person", "PP", "pp@test.com");
+        await Factory.WaitForProjectionsAsync();
+
+        var stats = await Client.GetFromJsonAsync<DashboardStatsDto>("/api/dashboard/stats", ct);
+        var users = await Client.GetFromJsonAsync<List<object>>("/api/user", ct);
+        var roles = await Client.GetFromJsonAsync<List<object>>("/api/role", ct);
+
+        Assert.Equal(users!.Count, stats!.Counts.Users);
+        Assert.Equal(roles!.Count, stats.Counts.Roles);
+        Assert.True(stats.Counts.ActiveSessions >= 1, "the calling admin's own session is active");
+        Assert.Equal(0, stats.Counts.PendingChangeRequests);
+    }
+
+    [Fact]
+    public async Task Stats_withhold_every_block_the_caller_has_no_permission_for()
+    {
+        var ct = TestContext.Current.CancellationToken;
+        await Factory.CreateTestUserWithIdentityAsync("Plain", "Person", "PP", "pp@test.com");
+        var plain = await CreateAuthenticatedClientAsync("pp", DefaultPassword);
+
+        var stats = await plain.GetFromJsonAsync<DashboardStatsDto>("/api/dashboard/stats", ct);
+
+        Assert.NotNull(stats);
+        Assert.Equal(new DashboardCountsDto(null, null, null, null, null, null, null, null, null, null), stats!.Counts);
+        Assert.Null(stats.Logins);
+        Assert.Null(stats.Security);
+    }
+
+    // ── Layout ──────────────────────────────────────────────────────────────
+
+    [Fact]
+    public async Task Layout_is_per_user_and_resets_to_nothing()
+    {
+        var ct = TestContext.Current.CancellationToken;
+        await Factory.CreateTestUserWithIdentityAsync("Plain", "Person", "PP", "pp@test.com");
+        var plain = await CreateAuthenticatedClientAsync("pp", DefaultPassword);
+
+        var initial = await plain.GetFromJsonAsync<DashboardLayoutsDto>("/api/dashboard/layout", ct);
+        Assert.Null(initial!.User);
+        Assert.Null(initial.RealmDefault);
+
+        var saved = await plain.PutAsJsonAsync("/api/dashboard/layout", Layout(("my-sessions", "m"), ("logins-chart", "xl")), ct);
+        Assert.Equal(HttpStatusCode.NoContent, saved.StatusCode);
+
+        var mine = await plain.GetFromJsonAsync<DashboardLayoutsDto>("/api/dashboard/layout", ct);
+        Assert.Equal(
+            [new DashboardWidgetPlacement("my-sessions", "m"), new DashboardWidgetPlacement("logins-chart", "xl")],
+            mine!.User);
+
+        // Another user's dashboard is untouched by it.
+        var theirs = await Client.GetFromJsonAsync<DashboardLayoutsDto>("/api/dashboard/layout", ct);
+        Assert.Null(theirs!.User);
+
+        Assert.Equal(HttpStatusCode.NoContent, (await plain.DeleteAsync("/api/dashboard/layout", ct)).StatusCode);
+        Assert.Null((await plain.GetFromJsonAsync<DashboardLayoutsDto>("/api/dashboard/layout", ct))!.User);
+    }
+
+    [Fact]
+    public async Task Realm_default_needs_realm_settings_write_and_reaches_every_user()
+    {
+        var ct = TestContext.Current.CancellationToken;
+        await Factory.CreateTestUserWithIdentityAsync("Plain", "Person", "PP", "pp@test.com");
+        var plain = await CreateAuthenticatedClientAsync("pp", DefaultPassword);
+        var layout = Layout(("account-security", "l"));
+
+        var refused = await plain.PutAsJsonAsync("/api/admin/dashboard/default-layout", layout, ct);
+        Assert.Equal(HttpStatusCode.Forbidden, refused.StatusCode);
+        Assert.Equal(HttpStatusCode.Forbidden,
+            (await plain.DeleteAsync("/api/admin/dashboard/default-layout", ct)).StatusCode);
+
+        var accepted = await Client.PutAsJsonAsync("/api/admin/dashboard/default-layout", layout, ct);
+        Assert.Equal(HttpStatusCode.NoContent, accepted.StatusCode);
+
+        var seen = await plain.GetFromJsonAsync<DashboardLayoutsDto>("/api/dashboard/layout", ct);
+        Assert.Null(seen!.User);
+        Assert.Equal([new DashboardWidgetPlacement("account-security", "l")], seen.RealmDefault);
+
+        Assert.Equal(HttpStatusCode.NoContent,
+            (await Client.DeleteAsync("/api/admin/dashboard/default-layout", ct)).StatusCode);
+        Assert.Null((await plain.GetFromJsonAsync<DashboardLayoutsDto>("/api/dashboard/layout", ct))!.RealmDefault);
+    }
+
+    [Theory]
+    [InlineData("logins-chart", "huge")]
+    [InlineData("Not A Widget", "m")]
+    [InlineData("", "m")]
+    public async Task Layout_rejects_a_malformed_placement(string widget, string size)
+    {
+        var ct = TestContext.Current.CancellationToken;
+
+        var response = await Client.PutAsJsonAsync("/api/dashboard/layout", Layout((widget, size)), ct);
+
+        Assert.Equal(HttpStatusCode.BadRequest, response.StatusCode);
+        Assert.Contains("Dashboard.InvalidLayout", await response.Content.ReadAsStringAsync(ct));
+        Assert.Null((await Client.GetFromJsonAsync<DashboardLayoutsDto>("/api/dashboard/layout", ct))!.User);
+    }
+
+    [Fact]
+    public async Task Layout_rejects_the_same_widget_twice()
+    {
+        var ct = TestContext.Current.CancellationToken;
+
+        var response = await Client.PutAsJsonAsync(
+            "/api/dashboard/layout", Layout(("logins-chart", "m"), ("logins-chart", "xl")), ct);
+
+        Assert.Equal(HttpStatusCode.BadRequest, response.StatusCode);
+    }
+
+    // ── Helpers ─────────────────────────────────────────────────────────────
+
+    private static SaveDashboardLayoutDto Layout(params (string Widget, string Size)[] widgets) =>
+        new(widgets.Select(w => new DashboardWidgetPlacement(w.Widget, w.Size)).ToList());
+
+    private static AuthAuditView Login(DateTimeOffset at, string method) =>
+        Audit(at, AuditEvents.LoginSucceeded) with { Method = method };
+
+    private static AuthAuditView Audit(DateTimeOffset at, string eventType, int? count = null) => new()
+    {
+        Id = Guid.NewGuid(),
+        Timestamp = at,
+        Category = AuditCategories.Authentication,
+        EventType = eventType,
+        UserId = Guid.NewGuid(),
+        Count = count,
+        Level = eventType == AuditEvents.LoginSucceeded ? "Info" : "Warning",
+    };
+
+    private static RealmSecurityAuditEvent Security(DateTimeOffset at, string eventType, AuditSeverity severity) => new()
+    {
+        Timestamp = at,
+        EventType = eventType,
+        Category = AuditEvents.CategoryOf(eventType),
+        Severity = severity,
+        OutcomeCode = AuditOutcomes.Observed,
+    };
+}
diff --git a/src/dotnet/Modgud.Api/Features/Dashboard/DashboardEndpoints.cs b/src/dotnet/Modgud.Api/Features/Dashboard/DashboardEndpoints.cs
new file mode 100644
index 00000000..9fff51ad
--- /dev/null
+++ b/src/dotnet/Modgud.Api/Features/Dashboard/DashboardEndpoints.cs
@@ -0,0 +1,423 @@
+using System.Text.RegularExpressions;
+using Marten;
+using Microsoft.AspNetCore.Mvc;
+using Modgud.Authentication.Audit;
+using Modgud.Authentication.Domain;
+using Modgud.Authentication.Domain.LoginProviders;
+using Modgud.Authentication.ExtensionMethods;
+using Modgud.Authentication.RealmSettings;
+using Modgud.Authorization.Apps;
+using Modgud.Authorization.AspNetCore;
+using Modgud.Authorization.Principals;
+using Modgud.Authorization.Roles;
+using Modgud.Authorization.Services;
+using Modgud.Domain.Dashboard;
+using Modgud.Domain.OAuth.Applications;
+using Modgud.Domain.Realms;
+using Modgud.Infrastructure.Audit;
+using Modgud.Infrastructure.Persistence.Marten.Projections.Users;
+using Modgud.Permissions;
+
+namespace Modgud.Api.Features.Dashboard;
+
+/// <summary>
+/// Backs the dashboard: one aggregated statistics read, plus the stored widget
+/// arrangement (per user, with a realm default an admin can set).
+///
+/// <para><b>Statistics are gated per block, not per endpoint.</b> Any signed-in
+/// user may call <c>/dashboard/stats</c>; each number is computed only when the
+/// caller holds the permission that guards the corresponding list surface
+/// (<c>user:read</c> for the user count, <c>audit-log:read</c> for the login
+/// series, …) and is <c>null</c> otherwise. The dashboard therefore never shows
+/// a figure the caller could not have counted themselves.</para>
+/// </summary>
+public static partial class DashboardEndpoints
+{
+    private const int DefaultDays = 30;
+    private const int MinDays = 7;
+    private const int MaxDays = 90;
+
+    public static WebApplication MapDashboardEndpoints(this WebApplication app, string path)
+    {
+        var group = app.MapGroup($"{path}/dashboard")
+            .WithTags("Dashboard")
+            .RequireAuthorization();
+
+        group.MapGet("stats", GetStatsAsync).WithName("Dashboard_Stats");
+
+        // ── Layout: the caller's own arrangement ─────────────────────────
+        group.MapGet("layout", async (HttpContext http, IQuerySession session, CancellationToken ct) =>
+        {
+            var userId = http.GetUserId();
+            if (userId is null) return Results.Unauthorized();
+
+            var user = await session.LoadAsync<DashboardLayout>(DashboardLayout.UserId(userId.Value), ct);
+            var realm = await session.LoadAsync<DashboardLayout>(DashboardLayout.RealmDefaultId, ct);
+            return Results.Ok(new DashboardLayoutsDto(user?.Widgets, realm?.Widgets));
+        })
+        .WithName("Dashboard_Layout_Get");
+
+        group.MapPut("layout", async (
+            [FromBody] SaveDashboardLayoutDto body,
+            HttpContext http,
+            IDocumentSession session,
+            CancellationToken ct) =>
+        {
+            var userId = http.GetUserId();
+            if (userId is null) return Results.Unauthorized();
+            return await SaveAsync(session, DashboardLayout.UserId(userId.Value), body, ct);
+        })
+        .WithName("Dashboard_Layout_Save");
+
+        group.MapDelete("layout", async (HttpContext http, IDocumentSession session, CancellationToken ct) =>
+        {
+            var userId = http.GetUserId();
+            if (userId is null) return Results.Unauthorized();
+            return await DeleteAsync(session, DashboardLayout.UserId(userId.Value), ct);
+        })
+        .WithName("Dashboard_Layout_Reset");
+
+        // ── Layout: the realm default ────────────────────────────────────
+        // A realm-wide setting, so it rides the realm-settings permission
+        // rather than introducing a resource of its own.
+        var admin = app.MapGroup($"{path}/admin/dashboard")
+            .WithTags("Dashboard")
+            .RequireAuthorization();
+
+        admin.MapPut("default-layout", async (
+            [FromBody] SaveDashboardLayoutDto body,
+            IDocumentSession session,
+            CancellationToken ct) =>
+            await SaveAsync(session, DashboardLayout.RealmDefaultId, body, ct))
+        .WithName("Dashboard_DefaultLayout_Save")
+        .RequiresPermission("realm-settings:write");
+
+        admin.MapDelete("default-layout", async (IDocumentSession session, CancellationToken ct) =>
+            await DeleteAsync(session, DashboardLayout.RealmDefaultId, ct))
+        .WithName("Dashboard_DefaultLayout_Reset")
+        .RequiresPermission("realm-settings:write");
+
+        return app;
+    }
+
+    // ───────────────────────────────────────────── Layout ──────────────────
+
+    private static async Task<IResult> SaveAsync(
+        IDocumentSession session, string id, SaveDashboardLayoutDto body, CancellationToken ct)
+    {
+        if (Validate(body) is { } problem)
+            return Results.BadRequest(new { Error = "Dashboard.InvalidLayout", Message = problem });
+
+        session.Store(new DashboardLayout
+        {
+            Id = id,
+            Widgets = body.Widgets!,
+            UpdatedAt = DateTimeOffset.UtcNow,
+        });
+        await session.SaveChangesAsync(ct);
+        return Results.NoContent();
+    }
+
+    private static async Task<IResult> DeleteAsync(IDocumentSession session, string id, CancellationToken ct)
+    {
+        session.Delete<DashboardLayout>(id);
+        await session.SaveChangesAsync(ct);
+        return Results.NoContent();
+    }
+
+    /// <summary>Shape check only — the widget catalog is the frontend's, so an
+    /// unknown id is stored as-is and ignored at render time.</summary>
+    private static string? Validate(SaveDashboardLayoutDto body)
+    {
+        if (body.Widgets is null) return "Widgets is required.";
+        if (body.Widgets.Count > DashboardLayout.MaxWidgets)
+            return $"A layout holds at most {DashboardLayout.MaxWidgets} widgets.";
+
+        var seen = new HashSet<string>(StringComparer.Ordinal);
+        foreach (var placement in body.Widgets)
+        {
+            if (placement is null || placement.Widget is null || !WidgetIdPattern().IsMatch(placement.Widget))
+                return "Widget ids are lower-case letters, digits and dashes (1-64 characters).";
+            if (placement.Size is null || !DashboardWidgetPlacement.Sizes.Contains(placement.Size))
+                return $"Size must be one of: {string.Join(", ", DashboardWidgetPlacement.Sizes.Order())}.";
+            if (!seen.Add(placement.Widget))
+                return $"Widget '{placement.Widget}' is listed twice.";
+        }
+
+        return null;
+    }
+
+    [GeneratedRegex("^[a-z0-9][a-z0-9-]{0,63}$")]
+    private static partial Regex WidgetIdPattern();
+
+    // ───────────────────────────────────────────── Statistics ──────────────
+
+    private static async Task<IResult> GetStatsAsync(
+        HttpContext http,
+        IDocumentSession session,
+        IPermissionService permissions,
+        IRealmSettingsService realmSettings,
+        int? days,
+        string? tz,
+        CancellationToken ct)
+    {
+        var userId = http.GetUserId();
+        if (userId is null) return Results.Unauthorized();
+
+        var grants = await permissions.GetUserPermissionsAsync(userId.Value, AppSlugs.Modgud, ct);
+        bool Can(string permission) => PermissionEvaluator.Evaluate(grants, permission);
+
+        var now = DateTimeOffset.UtcNow;
+        var window = Math.Clamp(days ?? DefaultDays, MinDays, MaxDays);
+        var (zoneId, zone) = ResolveZone(tz);
+
+        var counts = new DashboardCountsDto(
+            Users: Can("user:read")
+                ? await session.Query<UserView>().CountAsync(u => !u.IsDeleted, ct) : null,
+            ServiceAccounts: Can("service-account:read")
+                ? await session.Query<ServiceAccount>().CountAsync(s => !s.IsDeleted, ct) : null,
+            Groups: Can("authorization-group:read")
+                ? await session.Query<Modgud.Authorization.Principals.Group>().CountAsync(g => !g.IsDeleted, ct) : null,
+            Roles: Can("permission-role:read")
+                ? await session.Query<PermissionRole>().CountAsync(r => !r.IsDeleted, ct) : null,
+            Apps: Can("app:read")
+                ? await session.Query<App>().CountAsync(a => !a.IsDeleted, ct) : null,
+            OAuthClients: Can("oauth-client:read")
+                ? await session.Query<OAuthApplicationState>().CountAsync(c => !c.IsDeleted, ct) : null,
+            LoginProviders: Can("login-provider:read")
+                ? await session.Query<LoginProvider>().CountAsync(p => !p.IsDeleted, ct) : null,
+            LoginProvidersEnabled: Can("login-provider:read")
+                ? await session.Query<LoginProvider>().CountAsync(p => !p.IsDeleted && p.Enabled, ct) : null,
+            ActiveSessions: Can("session:read")
+                ? await session.Query<UserSession>().CountAsync(s => s.ExpiresAt > now && s.AbsoluteExpiresAt > now, ct) : null,
+            PendingChangeRequests: Can("user:write")
+                ? await session.Query<UserChangeRequest>().CountAsync(
+                    r => r.Status == ChangeRequestStatus.AdminApprovalPending
+                      || r.Status == ChangeRequestStatus.EmailVerificationPending, ct)
+                : null);
+
+        LoginStatsDto? logins = null;
+        if (Can("audit-log:read"))
+        {
+            // Same view bound as the audit grid: never chart further back than
+            // the realm lets an admin read.
+            var visible = ((await realmSettings.LoadAsync(ct)).Audit ?? AuditSettings.Defaults).VisibilityWindowDays;
+            logins = await LoadLoginsAsync(session, Math.Min(window, Math.Max(1, visible)), zoneId, zone, now, ct);
+        }
+
+        var security = Can("auth-log:read")
+            ? await LoadSecurityAsync(session, window, zoneId, zone, now, ct)
+            : null;
+
+        return Results.Ok(new DashboardStatsDto(window, zoneId, counts, logins, security));
+    }
+
+    /// <summary>One <c>group by</c> row, shipped back as JSON so Marten's
+    /// serializer materialises it like any other document.</summary>
+    private sealed record Bucket(string Day, string? Key, string? Sub, int N);
+
+    private const string LoginBucketsSql = """
+        select jsonb_build_object('Day', b.day, 'Key', b.key, 'Sub', b.sub, 'N', b.n)
+        from (
+            select to_char(((d.data ->> 'Timestamp')::timestamptz at time zone ?)::date, 'YYYY-MM-DD') as day,
+                   d.data ->> 'EventType' as key,
+                   d.data ->> 'Method' as sub,
+                   sum(coalesce((d.data ->> 'Count')::int, 1))::int as n
+            from mt_doc_auth_audit_view d
+            where d.data ->> 'Category' = ?
+              and (d.data ->> 'Timestamp')::timestamptz >= ?
+            group by 1, 2, 3
+        ) b
+        """;
+
+    private const string SecurityBucketsSql = """
+        select jsonb_build_object('Day', b.day, 'Key', b.key, 'Sub', b.sub, 'N', b.n)
+        from (
+            select to_char(((d.data ->> 'Timestamp')::timestamptz at time zone ?)::date, 'YYYY-MM-DD') as day,
+                   d.data ->> 'Severity' as key,
+                   d.data ->> 'EventType' as sub,
+                   count(*)::int as n
+            from mt_doc_realm_security_audit_event d
+            where (d.data ->> 'Timestamp')::timestamptz >= ?
+            group by 1, 2, 3
+        ) b
+        """;
+
+    private static async Task<LoginStatsDto> LoadLoginsAsync(
+        IDocumentSession session, int days, string zoneId, TimeZoneInfo zone, DateTimeOffset now, CancellationToken ct)
+    {
+        var (dayKeys, since) = Window(days, zone, now);
+
+        // The raw SQL below bypasses Marten's lazy schema creation.
+        await session.Database.EnsureStorageExistsAsync(typeof(AuthAuditView), ct);
+        var buckets = await session.QueryAsync<Bucket>(
+            LoginBucketsSql, ct, zoneId, AuditCategories.Authentication, since);
+
+        var succeeded = dayKeys.ToDictionary(d => d, _ => 0);
+        var failed = dayKeys.ToDictionary(d => d, _ => 0);
+        var methods = new Dictionary<string, int>(StringComparer.Ordinal);
+        foreach (var b in buckets)
+        {
+            if (!succeeded.ContainsKey(b.Day)) continue;
+            switch (b.Key)
+            {
+                case AuditEvents.LoginSucceeded:
+                    succeeded[b.Day] += b.N;
+                    var method = string.IsNullOrEmpty(b.Sub) ? "unknown" : b.Sub;
+                    methods[method] = methods.GetValueOrDefault(method) + b.N;
+                    break;
+                // A failure is either a single row or a streak summary carrying
+                // its count — the SQL already folded Count into N.
+                case AuditEvents.LoginFailed or AuditEvents.LoginFailuresObserved:
+                    failed[b.Day] += b.N;
+                    break;
+            }
+        }
+
+        var dayAgo = now.AddHours(-24);
+        var failedLast24h = (await session.Query<AuthAuditView>()
+                .Where(x => x.Timestamp >= dayAgo
+                    && (x.EventType == AuditEvents.LoginFailed || x.EventType == AuditEvents.LoginFailuresObserved))
+                .Select(x => x.Count)
+                .ToListAsync(ct))
+            .Sum(count => count ?? 1);
+
+        return new LoginStatsDto(
+            days,
+            succeeded.Values.Sum(),
+            failed.Values.Sum(),
+            failedLast24h,
+            dayKeys.Select(d => new LoginDayDto(d, succeeded[d], failed[d])).ToList(),
+            methods.OrderByDescending(m => m.Value).ThenBy(m => m.Key, StringComparer.Ordinal)
+                .Select(m => new LoginMethodDto(m.Key, m.Value)).ToList());
+    }
+
+    private static async Task<SecurityStatsDto> LoadSecurityAsync(
+        IDocumentSession session, int days, string zoneId, TimeZoneInfo zone, DateTimeOffset now, CancellationToken ct)
+    {
+        var (dayKeys, since) = Window(days, zone, now);
+
+        await session.Database.EnsureStorageExistsAsync(typeof(RealmSecurityAuditEvent), ct);
+        var buckets = await session.QueryAsync<Bucket>(SecurityBucketsSql, ct, zoneId, since);
+
+        var info = dayKeys.ToDictionary(d => d, _ => 0);
+        var warning = dayKeys.ToDictionary(d => d, _ => 0);
+        var error = dayKeys.ToDictionary(d => d, _ => 0);
+        var attentionByType = new Dictionary<string, int>(StringComparer.Ordinal);
+        foreach (var b in buckets)
+        {
+            if (!info.ContainsKey(b.Day)) continue;
+            var target = b.Key switch
+            {
+                nameof(AuditSeverity.Error) => error,
+                nameof(AuditSeverity.Warning) => warning,
+                _ => info,
+            };
+            target[b.Day] += b.N;
+
+            if (!ReferenceEquals(target, info) && !string.IsNullOrEmpty(b.Sub))
+                attentionByType[b.Sub] = attentionByType.GetValueOrDefault(b.Sub) + b.N;
+        }
+
+        var dayAgo = now.AddHours(-24);
+        var attentionLast24h = await session.Query<RealmSecurityAuditEvent>()
+            .CountAsync(x => x.Timestamp >= dayAgo && x.Severity != AuditSeverity.Info, ct);
+
+        return new SecurityStatsDto(
+            days,
+            info.Values.Sum(),
+            warning.Values.Sum(),
+            error.Values.Sum(),
+            attentionLast24h,
+            dayKeys.Select(d => new SecurityDayDto(d, info[d], warning[d], error[d])).ToList(),
+            attentionByType.OrderByDescending(e => e.Value).ThenBy(e => e.Key, StringComparer.Ordinal)
+                .Take(5).Select(e => new SecurityEventTypeDto(e.Key, e.Value)).ToList());
+    }
+
+    /// <summary>The viewer's last <paramref name="days"/> calendar days (today
+    /// included) as <c>yyyy-MM-dd</c> keys, and the UTC instant the first begins.</summary>
+    private static (List<string> DayKeys, DateTimeOffset Since) Window(int days, TimeZoneInfo zone, DateTimeOffset now)
+    {
+        var today = DateOnly.FromDateTime(TimeZoneInfo.ConvertTime(now, zone).DateTime);
+        var first = today.AddDays(-(days - 1));
+
+        var midnight = first.ToDateTime(TimeOnly.MinValue, DateTimeKind.Unspecified);
+        // A zone whose DST jump skips midnight has no 00:00 on that date.
+        if (zone.IsInvalidTime(midnight)) midnight = midnight.AddHours(1);
+        var since = new DateTimeOffset(TimeZoneInfo.ConvertTimeToUtc(midnight, zone), TimeSpan.Zero);
+
+        var keys = Enumerable.Range(0, days)
+            .Select(i => first.AddDays(i).ToString("yyyy-MM-dd"))
+            .ToList();
+        return (keys, since);
+    }
+
+    /// <summary>Accepts an IANA zone id (what the browser reports and what
+    /// PostgreSQL's <c>AT TIME ZONE</c> understands); anything else buckets in UTC.</summary>
+    private static (string Id, TimeZoneInfo Zone) ResolveZone(string? tz)
+    {
+        if (tz is not null && IanaZonePattern().IsMatch(tz)
+            && TimeZoneInfo.TryFindSystemTimeZoneById(tz, out var zone))
+            return (tz, zone);
+        return ("UTC", TimeZoneInfo.Utc);
+    }
+
+    [GeneratedRegex(@"^[A-Za-z][A-Za-z0-9_+\-]*(/[A-Za-z0-9_+\-]+){1,2}$")]
+    private static partial Regex IanaZonePattern();
+}
+
+public sealed record DashboardLayoutsDto(
+    List<DashboardWidgetPlacement>? User,
+    List<DashboardWidgetPlacement>? RealmDefault);
+
+public sealed record SaveDashboardLayoutDto(List<DashboardWidgetPlacement>? Widgets);
+
+/// <summary><paramref name="Days"/> is the requested window; a block may cover
+/// fewer days (see <see cref="LoginStatsDto.Days"/>).</summary>
+public sealed record DashboardStatsDto(
+    int Days,
+    string TimeZone,
+    DashboardCountsDto Counts,
+    LoginStatsDto? Logins,
+    SecurityStatsDto? Security);
+
+/// <summary>Each count is <c>null</c> when the caller lacks the permission that
+/// guards the matching list.</summary>
+public sealed record DashboardCountsDto(
+    int? Users,
+    int? ServiceAccounts,
+    int? Groups,
+    int? Roles,
+    int? Apps,
+    int? OAuthClients,
+    int? LoginProviders,
+    int? LoginProvidersEnabled,
+    int? ActiveSessions,
+    int? PendingChangeRequests);
+
+/// <summary>Sign-ins of known accounts, from the realm's audit trail. Attempts
+/// against identifiers matching no account are security events, not logins.</summary>
+public sealed record LoginStatsDto(
+    int Days,
+    int Succeeded,
+    int Failed,
+    int FailedLast24h,
+    List<LoginDayDto> Series,
+    List<LoginMethodDto> Methods);
+
+public sealed record LoginDayDto(string Day, int Succeeded, int Failed);
+
+public sealed record LoginMethodDto(string Method, int Count);
+
+public sealed record SecurityStatsDto(
+    int Days,
+    int Info,
+    int Warning,
+    int Error,
+    int AttentionLast24h,
+    List<SecurityDayDto> Series,
+    List<SecurityEventTypeDto> TopEventTypes);
+
+public sealed record SecurityDayDto(string Day, int Info, int Warning, int Error);
+
+public sealed record SecurityEventTypeDto(string EventType, int Count);
diff --git a/src/dotnet/Modgud.Api/Program.cs b/src/dotnet/Modgud.Api/Program.cs
index 597396bc..f001cc7d 100644
--- a/src/dotnet/Modgud.Api/Program.cs
+++ b/src/dotnet/Modgud.Api/Program.cs
@@ -1499,6 +1499,7 @@
     Modgud.Api.Features.Admin.Jobs.JobsEndpoints.MapJobsEndpoints(app, "api");
     Modgud.Api.Features.Inbox.InboxEndpoints.MapInboxEndpoints(app, "api");
     Modgud.Api.Features.Inbox.InboxSettingsEndpoints.MapInboxSettingsEndpoints(app, "api");
+    Modgud.Api.Features.Dashboard.DashboardEndpoints.MapDashboardEndpoints(app, "api");
 
     // Account & Setup Endpoints (have additional strict "auth" rate limit)
     app.MapAccountEndpoints("api");
diff --git a/src/dotnet/Modgud.Authentication/Gdpr/GdprService.cs b/src/dotnet/Modgud.Authentication/Gdpr/GdprService.cs
index 1f5698c3..222fe81e 100644
--- a/src/dotnet/Modgud.Authentication/Gdpr/GdprService.cs
+++ b/src/dotnet/Modgud.Authentication/Gdpr/GdprService.cs
@@ -318,6 +318,11 @@ private async Task<ErrorOr<bool>> PerformPermanentEraseAsync(Guid userId, Guid?
         //    ADR 0026 — a test account's fixed-code hash goes with the account.
         session.Delete<TestAccountEmailCode>(userId);
 
+        //    The user's own dashboard arrangement — no PII in it, but it is keyed
+        //    on the user id and has no reason to outlive the account.
+        session.Delete<Modgud.Domain.Dashboard.DashboardLayout>(
+            Modgud.Domain.Dashboard.DashboardLayout.UserId(userId));
+
         //    External identity links carry Email, DisplayName, and the raw IdP
         //    claim payload on their OWN streams (keyed by link id). Drop the
         //    projection doc here; the PII-bearing events are masked + archived
diff --git a/src/dotnet/Modgud.Domain/Dashboard/DashboardLayout.cs b/src/dotnet/Modgud.Domain/Dashboard/DashboardLayout.cs
new file mode 100644
index 00000000..56cf2925
--- /dev/null
+++ b/src/dotnet/Modgud.Domain/Dashboard/DashboardLayout.cs
@@ -0,0 +1,43 @@
+namespace Modgud.Domain.Dashboard;
+
+/// <summary>
+/// A stored dashboard arrangement: which widgets, in which order, how wide.
+/// Two kinds share this document, told apart by <see cref="Id"/>:
+/// <list type="bullet">
+///   <item><description><see cref="RealmDefaultId"/> — the realm's default, set by an admin.</description></item>
+///   <item><description><see cref="UserId(Guid)"/> — one user's own arrangement.</description></item>
+/// </list>
+/// The dashboard resolves user layout → realm default → the default built into
+/// the frontend, so a realm with neither document still shows a dashboard.
+///
+/// <para><b>A layout grants nothing.</b> Widget ids are opaque to the server; the
+/// catalog lives in the frontend, and each widget's data is gated by the
+/// permission on the endpoint that serves it. A layout naming a widget the viewer
+/// may not see simply renders without it.</para>
+///
+/// Persistence binding lives in <c>MartenConfiguration</c> so Domain stays free
+/// of Marten attributes.
+/// </summary>
+public sealed class DashboardLayout
+{
+    public const string RealmDefaultId = "realm-default";
+
+    /// <summary>Upper bound on stored placements — far above any real catalog.</summary>
+    public const int MaxWidgets = 60;
+
+    public static string UserId(Guid userId) => $"user:{userId:N}";
+
+    public string Id { get; set; } = "";
+
+    public List<DashboardWidgetPlacement> Widgets { get; set; } = [];
+
+    public DateTimeOffset UpdatedAt { get; set; }
+}
+
+/// <summary>One widget on the dashboard. List order is display order.</summary>
+public sealed record DashboardWidgetPlacement(string Widget, string Size)
+{
+    /// <summary>Column spans the grid understands (see the frontend's size map).</summary>
+    public static readonly IReadOnlySet<string> Sizes =
+        new HashSet<string>(StringComparer.Ordinal) { "xs", "s", "m", "l", "xl", "full" };
+}
diff --git a/src/dotnet/Modgud.Infrastructure/Persistence/Marten/Configuration/MartenConfiguration.cs b/src/dotnet/Modgud.Infrastructure/Persistence/Marten/Configuration/MartenConfiguration.cs
index 916c730d..449cb7dd 100644
--- a/src/dotnet/Modgud.Infrastructure/Persistence/Marten/Configuration/MartenConfiguration.cs
+++ b/src/dotnet/Modgud.Infrastructure/Persistence/Marten/Configuration/MartenConfiguration.cs
@@ -118,6 +118,13 @@ public static void ConfigureDocumentStore(this StoreOptions options)
         options.Schema.For<Modgud.Application.Inbox.InboxRetentionSettings>()
             .Identity(x => x.Id);
 
+        // Dashboard arrangements — the realm default (fixed id) and one per user
+        // ("user:<id>"). Plain documents; the widget catalog itself lives in the
+        // frontend.
+        options.Schema.For<Modgud.Domain.Dashboard.DashboardLayout>()
+            .DocumentAlias("dashboard_layout")
+            .Identity(x => x.Id);
+
         // Authentication-specific Marten setup (documents + events + projections)
         // is wired via UseModgudAuthentication(), called from AddInfrastructure's
         // additionalMartenConfig callback so Infrastructure stays unaware of Authentication.
diff --git a/src/frontend-vue/public/i18n/de.json b/src/frontend-vue/public/i18n/de.json
index 76535423..5abc42f3 100644
--- a/src/frontend-vue/public/i18n/de.json
+++ b/src/frontend-vue/public/i18n/de.json
@@ -2637,10 +2637,6 @@
   },
   "dashboard": {
     "title": "Dashboard",
-    "section": {
-      "personal": "Mein Konto",
-      "operations": "Realm-Betrieb"
-    },
     "welcomeTitle": "Willkommen bei Modgud",
     "welcomeBody": "Du bist angemeldet als",
     "errors": {
@@ -2654,12 +2650,10 @@
     },
     "kpi": {
       "attention": "Achtung",
-      "activeSessions": "Aktive Sitzungen",
-      "securityScore": "Sicherheits-Score",
-      "userCount": "User im Realm",
-      "failedLast24h": "Fehlversuche 24h",
+      "failedLast24h": "Fehlgeschlagene Anmeldungen, 24 h",
       "pendingChangeRequests": "Offene Anfragen",
-      "activeLoginProviders": "Login-Provider aktiv"
+      "realmSessions": "Aktive Sitzungen im Realm",
+      "securityAttention": "Sicherheitsereignisse, 24 h"
     },
     "security": {
       "title": "Account-Sicherheit",
@@ -2682,10 +2676,11 @@
       "unknownDevice": "Unbekanntes Gerät",
       "unknownBrowser": "Browser",
       "deviceLabel": "{browser} auf {os}",
-      "cta": "Sessions verwalten →"
+      "cta": "Sessions verwalten →",
+      "app": "App"
     },
     "systemActivity": {
-      "title": "System-Aktivität",
+      "title": "Letzte Sicherheitsereignisse",
       "none": "Noch keine Ereignisse.",
       "cta": "Vollständig anzeigen →"
     },
@@ -2696,6 +2691,72 @@
       "disabled": "Deaktiviert",
       "system": "System",
       "cta": "Verwalten →"
+    },
+    "directory": {
+      "title": "Verzeichnis"
+    },
+    "applications": {
+      "title": "Anwendungen & Anmeldung",
+      "enabled": "{n} aktiviert"
+    },
+    "logins": {
+      "title": "Anmeldungen",
+      "succeeded": "Erfolgreich",
+      "failed": "Fehlgeschlagen",
+      "subtitle": "Bekannte Konten, letzte {n} Tage",
+      "cta": "Audit-Log öffnen →"
+    },
+    "loginMethods": {
+      "title": "Anmeldemethoden",
+      "subtitle": "Erfolgreiche Anmeldungen, letzte {n} Tage",
+      "none": "Keine Anmeldungen in diesem Zeitraum.",
+      "total": "Anmeldungen",
+      "method": {
+        "password": "Passwort",
+        "passkey": "Passkey",
+        "external": "Externer Provider",
+        "magic_link": "Login-Link",
+        "email_otp": "E-Mail-Code",
+        "mfa": "Mit zweitem Faktor",
+        "other": "Sonstige"
+      }
+    },
+    "securityEvents": {
+      "title": "Sicherheitsereignisse",
+      "subtitle": "Letzte {n} Tage",
+      "none": "Keine Sicherheitsereignisse in diesem Zeitraum.",
+      "cta": "Sicherheits-Log öffnen →",
+      "total": "Ereignisse",
+      "error": "Fehler",
+      "warning": "Warnungen",
+      "info": "Hinweise",
+      "top": "Häufigste Warnungen und Fehler"
+    },
+    "customize": {
+      "start": "Anpassen",
+      "hint": "Widgets per Ziehen umsortieren, in der Breite ändern oder entfernen. Diese Anordnung gilt nur für dich.",
+      "reset": "Zurück zum Standard",
+      "add": "Hinzufügen:",
+      "allPlaced": "Alle verfügbaren Widgets sind auf dem Dashboard.",
+      "empty": "Keine Widgets auf dem Dashboard.",
+      "moveEarlier": "Nach vorne",
+      "moveLater": "Nach hinten",
+      "narrower": "Schmaler",
+      "wider": "Breiter",
+      "remove": "Entfernen",
+      "saved": "Dein Dashboard wurde gespeichert.",
+      "resetDone": "Dein Dashboard folgt wieder dem Standard.",
+      "saveFailed": "Das Dashboard konnte nicht gespeichert werden.",
+      "realmHintSet": "Dieser Realm hat einen eigenen Standard. Wer sein Dashboard nie angepasst hat, sieht ihn.",
+      "realmHintUnset": "Dieser Realm nutzt den eingebauten Standard. Du kannst die Anordnung unten zum Standard für alle machen, die ihr Dashboard nie angepasst haben.",
+      "saveDefault": "Als Realm-Standard speichern",
+      "saveDefaultTitle": "Als Realm-Standard verwenden?",
+      "saveDefaultMessage": "Alle in diesem Realm, die ihr Dashboard nicht selbst angepasst haben, bekommen diese Anordnung. Jeder sieht weiterhin nur die Widgets, für die er berechtigt ist.",
+      "defaultSaved": "Als Standard für diesen Realm gespeichert.",
+      "removeDefault": "Realm-Standard entfernen",
+      "removeDefaultTitle": "Realm-Standard entfernen?",
+      "removeDefaultMessage": "Wer kein eigenes Dashboard hat, bekommt wieder die eingebaute Anordnung.",
+      "defaultRemoved": "Der Realm-Standard wurde entfernt; es gilt die eingebaute Anordnung."
     }
   },
   "grid": {
diff --git a/src/frontend-vue/src/views/dashboard/DashboardView.vue b/src/frontend-vue/src/views/dashboard/DashboardView.vue
index 2c58303b..e5cc7a53 100644
--- a/src/frontend-vue/src/views/dashboard/DashboardView.vue
+++ b/src/frontend-vue/src/views/dashboard/DashboardView.vue
@@ -1,31 +1,17 @@
 <script setup lang="ts">
-import { computed, onMounted, watch, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from '@cocoar/vue-localization'
-import { CoarNotice, CoarCard, CoarIcon, CoarSpinner, CoarTag } from '@cocoar/vue-ui'
+import { CoarButton, CoarIcon, CoarPopconfirm, CoarSpinner, useToast } from '@cocoar/vue-ui'
 import { useUI } from '@/composables/useUI'
 import { useHttpClient } from '@/composables/useHttpClient'
 import { useAuthStore } from '@/stores/auth.store'
-import { useLoginProviderStore } from '@/stores/loginProvider.store'
-import type { ClientSessionDto, SessionDto, SessionListDto } from '@/models/session'
-import type { UserDto } from '@/models/user'
-import type { KpiTile } from './kpiTile'
-import KpiCard from './KpiCard.vue'
+import { useDashboardStats } from './dashboardStats'
+import { resolveLayout, type WidgetDefinition, type WidgetPlacement } from './layout'
+import { BUILT_IN_LAYOUT, WIDGETS, WIDGET_CATALOG } from './widgets/registry'
 
 const { t, language } = useI18n()
-const router = useRouter()
 const authStore = useAuthStore()
-const loginProviderStore = useLoginProviderStore()
-
-// ─── Per-card permission gates ───────────────────────────────────────────
-// Each admin card/tile is gated on the *specific* permission that backs its
-// data fetch — mirrors how AdminView's sidebar items work and avoids the bug
-// where a help-desk user (who has user:read + auth-log:read but nothing else)
-// would see the full admin face just because she holds *some* admin perm.
-const canSeeUsers = computed(() => authStore.hasPermission('user:read'))
-const canSeeAuthLog = computed(() => authStore.hasPermission('auth-log:read'))
-const canSeeChangeRequests = computed(() => authStore.hasPermission('user:write'))
-const canSeeLoginProviders = computed(() => authStore.hasPermission('login-provider:read'))
+const toast = useToast()
 
 const ui = useUI()
 watch(language, () => ui.set((ctx) => {
@@ -34,763 +20,401 @@ watch(language, () => ui.set((ctx) => {
   ctx.content.container = true
 }), { immediate: true })
 
-// ─── Account-Sicherheit ──────────────────────────────────────────────────
-// We need passkey count from /api/account/passkey to know whether a passkey
-// is registered — Has2FA + TwoFactorMethods on AuthUser tell us about TOTP /
-// email / passkey-as-2FA, but the dashboard checklist treats passkeys as a
-// separate "passwordless" capability and surfaces them independently.
-interface PasskeyDto { Id: string; DisplayName: string; CreatedAt: string; LastUsedAt: string | null }
-const passkeysHttp = useHttpClient('/api/account/passkey')
-const passkeyCount = ref<number | null>(null)
-const passkeysError = ref(false)
-
-async function loadPasskeys() {
-  try {
-    const list = await passkeysHttp.get<PasskeyDto[]>()
-    passkeyCount.value = list.length
-  } catch {
-    passkeysError.value = true
-    passkeyCount.value = 0
-  }
-}
+// ─── Which widgets, in which order ───────────────────────────────────────
+// Three layers, first one present wins: the viewer's own arrangement, the
+// realm default an admin set, the layout built into the app. Whatever wins is
+// then filtered down to the widgets this viewer may see.
+const layoutHttp = useHttpClient('/api/dashboard/layout')
+const defaultLayoutHttp = useHttpClient('/api/admin/dashboard/default-layout')
 
-interface SecurityItem {
-  /** Stable key — used as Vue list key + i18n suffix. */
-  key: 'email' | 'mfa' | 'passkey'
-  ok: boolean
-  /** While the underlying data isn't loaded yet we don't want to flash a
-   *  red "missing" state — keep the row in a neutral pending state. */
-  pending?: boolean
-  label: string
-  /** Pastel tag tone used in the list — green = OK, amber = missing,
-   *  rose = expired/error. We never use rose for the security checklist
-   *  today, but keeping the union open mirrors the task brief. */
-  tagVariant: 'success' | 'warning' | 'error' | 'neutral'
-  tagLabel: string
-}
-
-const securityItems = computed<SecurityItem[]>(() => {
-  const items: SecurityItem[] = []
-
-  const hasEmail = !!authStore.user?.Email
-  items.push({
-    key: 'email',
-    ok: hasEmail,
-    label: t('dashboard.security.emailLabel', {}, 'E-Mail hinterlegt'),
-    tagVariant: hasEmail ? 'success' : 'warning',
-    tagLabel: hasEmail
-      ? t('dashboard.security.statusOk', {}, 'OK')
-      : t('dashboard.security.statusMissing', {}, 'fehlt'),
-  })
-
-  const has2fa = authStore.user?.Has2FA === true
-  items.push({
-    key: 'mfa',
-    ok: has2fa,
-    label: t('dashboard.security.mfaLabel', {}, 'Zwei-Faktor-Authentisierung'),
-    tagVariant: has2fa ? 'success' : 'warning',
-    tagLabel: has2fa
-      ? t('dashboard.security.statusOk', {}, 'OK')
-      : t('dashboard.security.statusMissing', {}, 'fehlt'),
-  })
-
-  const passkeyPending = passkeyCount.value === null && !passkeysError.value
-  const hasPasskey = (passkeyCount.value ?? 0) > 0
-  items.push({
-    key: 'passkey',
-    ok: hasPasskey,
-    pending: passkeyPending,
-    label: t('dashboard.security.passkeyLabel', {}, 'Passkey hinterlegt'),
-    tagVariant: passkeyPending ? 'neutral' : (hasPasskey ? 'success' : 'warning'),
-    tagLabel: passkeyPending
-      ? '…'
-      : (hasPasskey
-        ? t('dashboard.security.statusOk', {}, 'OK')
-        : t('dashboard.security.statusMissing', {}, 'fehlt')),
-  })
-
-  return items
-})
-
-const securityScoreReady = computed(() =>
-  passkeyCount.value !== null || passkeysError.value,
-)
-const securityScoreActive = computed(() => securityItems.value.filter(i => i.ok).length)
-const securityScoreTotal = computed(() => securityItems.value.length)
-const securityScoreAllGood = computed(() =>
-  securityScoreReady.value && securityScoreActive.value === securityScoreTotal.value,
-)
+const userLayout = ref<WidgetPlacement[] | null>(null)
+const realmDefault = ref<WidgetPlacement[] | null>(null)
+const layoutLoading = ref(true)
 
-function goToProfileSecurity() {
-  router.push('/profile')
+function canSee(def: WidgetDefinition): boolean {
+  return def.requirePermissions.length === 0
+    || def.requirePermissions.some(p => authStore.hasPermission(p))
 }
 
-// ─── Aktive Sessions ──────────────────────────────────────────────────────
-const sessionsHttp = useHttpClient('/api/auth/sessions')
-const browserSessions = ref<SessionDto[]>([])
-const clientSessions = ref<ClientSessionDto[]>([])
-const sessionsLoading = ref(true)
-const sessionsError = ref(false)
+const baseLayout = computed(() => realmDefault.value ?? BUILT_IN_LAYOUT)
+const activeLayout = computed(() =>
+  resolveLayout(userLayout.value ?? baseLayout.value, WIDGET_CATALOG, canSee))
 
-async function loadSessions() {
+const { load: loadStats } = useDashboardStats()
+
+onMounted(async () => {
+  loadStats()
   try {
-    const res = await sessionsHttp.get<SessionListDto>()
-    browserSessions.value = res.Sessions ?? []
-    clientSessions.value = res.ClientSessions ?? []
+    // The API leaves a layer out of the response when nobody stored it.
+    const stored = await layoutHttp.get<{ User?: WidgetPlacement[] | null; RealmDefault?: WidgetPlacement[] | null }>()
+    userLayout.value = stored.User ?? null
+    realmDefault.value = stored.RealmDefault ?? null
   } catch {
-    sessionsError.value = true
+    // Without the stored layouts the built-in one still gives a working dashboard.
   } finally {
-    sessionsLoading.value = false
+    layoutLoading.value = false
   }
-}
-
-type DashboardSession =
-  | (SessionDto & { Kind: 'Browser' })
-  | (ClientSessionDto & { Kind: 'Client' })
+})
 
-const sessions = computed<DashboardSession[]>(() => [
-  ...browserSessions.value.map(s => ({ ...s, Kind: 'Browser' as const })),
-  ...clientSessions.value.map(s => ({ ...s, Kind: 'Client' as const })),
-].sort((a, b) => new Date(b.LastActiveAt).getTime() - new Date(a.LastActiveAt).getTime()))
-const topSessions = computed(() => sessions.value.slice(0, 3))
-const extraSessionCount = computed(() => Math.max(0, sessions.value.length - 3))
+// ─── Customising ─────────────────────────────────────────────────────────
+const editing = ref(false)
+const draft = ref<WidgetPlacement[]>([])
+const saving = ref(false)
+const canManageDefault = computed(() => authStore.hasPermission('realm-settings:write'))
 
-function deviceLabel(s: DashboardSession): string {
-  if (s.Kind === 'Client')
-    return s.ClientDisplayName || s.ClientId
+const shown = computed(() => editing.value ? draft.value : activeLayout.value)
+const available = computed(() =>
+  WIDGETS.filter(def => canSee(def) && !draft.value.some(p => p.Widget === def.id)))
 
-  // KPI-style "Browser auf Gerät" — the screenshot's row label uses
-  // "Chrome auf Windows" rather than the older "Browser · OS" form.
-  const browser = s.Browser || t('dashboard.sessions.unknownBrowser', {}, 'Browser')
-  const os = s.OperatingSystem || s.DeviceType || t('dashboard.sessions.unknownDevice', {}, 'Unknown Device')
-  return t('dashboard.sessions.deviceLabel', { browser, os }, '{browser} auf {os}')
+function title(def: WidgetDefinition): string {
+  return t(def.titleKey, {}, def.titleEn)
 }
-
-function relativeTime(iso: string): string {
-  const then = new Date(iso).getTime()
-  const diffSec = Math.max(0, Math.floor((Date.now() - then) / 1000))
-  if (diffSec < 60) return t('dashboard.time.justNow', {}, 'gerade eben')
-  const diffMin = Math.floor(diffSec / 60)
-  if (diffMin < 60) return t('dashboard.time.minutesAgo', { n: diffMin }, 'vor {n} Min.')
-  const diffH = Math.floor(diffMin / 60)
-  if (diffH < 24) return t('dashboard.time.hoursAgo', { n: diffH }, 'vor {n} Std.')
-  const diffD = Math.floor(diffH / 24)
-  if (diffD < 30) return t('dashboard.time.daysAgo', { n: diffD }, 'vor {n} Tagen')
-  return new Date(iso).toLocaleDateString()
+function definition(placement: WidgetPlacement): WidgetDefinition {
+  return WIDGET_CATALOG.get(placement.Widget)!
 }
 
-function goToProfileSessions() {
-  router.push('/profile')
+function startEditing() {
+  draft.value = activeLayout.value.map(p => ({ ...p }))
+  editing.value = true
 }
 
-// ─── Admin: User count ──────────────────────────────────────────────────
-const usersHttp = useHttpClient('/api/user')
-const userCount = ref<number | null>(null)
-const userCountError = ref(false)
-
-async function loadUserCount() {
-  try {
-    const res = await usersHttp.get<UserDto[]>()
-    userCount.value = res.length
-  } catch {
-    userCountError.value = true
-  }
+function move(from: number, to: number) {
+  if (to < 0 || to >= draft.value.length || from === to) return
+  const next = [...draft.value]
+  next.splice(to, 0, ...next.splice(from, 1))
+  draft.value = next
 }
 
-// ─── Admin: Auth log (drives both System-Aktivität + failed-24h counter) ──
-interface AuthLogEntry {
-  Timestamp: string
-  Level: string
-  Message: string
-  UserName: string | null
-  Ip: string | null
+/** Steps a widget to the next narrower / wider size it supports. */
+function resize(index: number, step: -1 | 1) {
+  const placement = draft.value[index]
+  if (!placement) return
+  const sizes = definition(placement).sizes
+  const next = sizes[sizes.indexOf(placement.Size) + step]
+  if (next) draft.value = draft.value.map((p, i) => i === index ? { ...p, Size: next } : p)
 }
-const authLogHttp = useHttpClient('/api/admin/auth-log')
-const authLog = ref<AuthLogEntry[]>([])
-const authLogLoading = ref(true)
-const authLogError = ref(false)
-
-async function loadAuthLog() {
-  try {
-    // Pull a window large enough to count failures across 24h on a busy realm
-    // without paging — the endpoint defaults to 200, we ask for 500 to give
-    // the failed-24h counter some headroom. The "System activity" card only
-    // displays the first 10 of these.
-    authLog.value = await authLogHttp.setQueryParameter('limit', '500').get<AuthLogEntry[]>()
-  } catch {
-    authLogError.value = true
-  } finally {
-    authLogLoading.value = false
-  }
+function canResize(placement: WidgetPlacement, step: -1 | 1): boolean {
+  const sizes = definition(placement).sizes
+  return sizes[sizes.indexOf(placement.Size) + step] !== undefined
 }
 
-const failedLogins24h = computed(() => {
-  if (authLogError.value) return null
-  const cutoff = Date.now() - 24 * 60 * 60 * 1000
-  return authLog.value.filter(e =>
-    (e.Level === 'Warning' || e.Level === 'Error') &&
-    new Date(e.Timestamp).getTime() >= cutoff,
-  ).length
-})
-
-const recentSystemActivity = computed(() => authLog.value.slice(0, 10))
-
-function authLogLevelVariant(level: string): 'neutral' | 'warning' | 'error' {
-  if (level === 'Error') return 'error'
-  if (level === 'Warning') return 'warning'
-  return 'neutral'
+function remove(index: number) {
+  draft.value = draft.value.filter((_, i) => i !== index)
 }
-
-function goToAuthLog() {
-  router.push('/admin/auth-log')
+function add(def: WidgetDefinition) {
+  draft.value = [...draft.value, { Widget: def.id, Size: def.defaultSize }]
 }
 
-function goToUsers() {
-  router.push('/admin/users')
+// Drag to reorder: the list reorders as the dragged widget passes over another.
+const dragIndex = ref<number | null>(null)
+function onDragStart(index: number, event: DragEvent) {
+  dragIndex.value = index
+  event.dataTransfer?.setData('text/plain', draft.value[index]?.Widget ?? '')
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
 }
-
-// ─── Admin: Pending Change Requests ──────────────────────────────────────
-interface ChangeRequestRow {
-  Id: string
-  UserId: string
-  UserLabel: string
-  Type: string
-  Status: 'EmailVerificationPending' | 'AdminApprovalPending' | 'Approved' | 'Rejected'
-  RequestedAt: string
-  UpdatedAt: string
+function onDragOver(index: number) {
+  if (dragIndex.value === null || dragIndex.value === index) return
+  move(dragIndex.value, index)
+  dragIndex.value = index
 }
-const changeRequestsHttp = useHttpClient('/api/admin/change-requests')
-const changeRequests = ref<ChangeRequestRow[]>([])
-const changeRequestsLoading = ref(true)
-const changeRequestsError = ref(false)
 
-async function loadChangeRequests() {
+async function run(action: () => Promise<void>, done: string) {
+  saving.value = true
   try {
-    // Default `includeTerminal=false` already filters out Approved/Rejected,
-    // so the list IS the pending count.
-    changeRequests.value = await changeRequestsHttp.get<ChangeRequestRow[]>()
+    await action()
+    toast.success(done)
   } catch {
-    changeRequestsError.value = true
+    toast.error(t('dashboard.customize.saveFailed', {}, 'The dashboard could not be saved.'))
   } finally {
-    changeRequestsLoading.value = false
+    saving.value = false
   }
 }
 
-function goToChangeRequests() {
-  router.push('/admin/change-requests')
+function save() {
+  return run(async () => {
+    await layoutHttp.put({ Widgets: draft.value })
+    userLayout.value = draft.value
+    editing.value = false
+  }, t('dashboard.customize.saved', {}, 'Your dashboard was saved.'))
 }
 
-// ─── Admin: Login-Provider-Status ─────────────────────────────────────────
-const providersLoading = ref(true)
-const providersError = ref(false)
-
-async function loadLoginProviders() {
-  try {
-    await loginProviderStore.loadAll()
-  } catch {
-    providersError.value = true
-  } finally {
-    providersLoading.value = false
-  }
+function resetMine() {
+  return run(async () => {
+    await layoutHttp.delete()
+    userLayout.value = null
+    editing.value = false
+  }, t('dashboard.customize.resetDone', {}, 'Your dashboard follows the default again.'))
 }
 
-const loginProviders = computed(() => loginProviderStore.providers)
-
-const activeOidcProviderCount = computed(() =>
-  loginProviders.value.filter(p => p.Type === 'Oidc' && p.Enabled).length,
-)
-
-function goToLoginProvider(id: string) {
-  // Provider detail is a URL-fragment-routed modal mounted by LoginProviderList
-  // (`useRoutedModals()` reads the hash). Navigate to the list with the id in
-  // the hash so the modal pops on arrival, matching the in-page click behavior.
-  router.push({ path: '/admin/login-providers', hash: `#${id}` })
-}
-
-// ─── KPI tiles ────────────────────────────────────────────────────────────
-// Tiles are split into two declarative lists — personal (always shown) and
-// operational (permission-gated) — each rendered in its own labelled section
-// below. KpiTile/TileTone live in ./kpiTile; the card markup in ./KpiCard.vue.
-const personalKpiTiles = computed<KpiTile[]>(() => {
-  const tiles: KpiTile[] = []
-
-  // Personal tiles ---------------------------------------------------------
-  const sessionsValue = sessionsError.value
-    ? '–'
-    : (sessionsLoading.value ? null : String(sessions.value.length))
-  tiles.push({
-    key: 'activeSessions',
-    icon: 'monitor',
-    tone: 'sky',
-    value: sessionsValue,
-    loading: sessionsLoading.value && !sessionsError.value,
-    caption: t('dashboard.kpi.activeSessions', {}, 'Active Sessions'),
-    onClick: goToProfileSessions,
-  })
-
-  // Security score: render once we know the passkey count (or its error).
-  // Until then we leave value null so the tile shows the placeholder dash.
-  const scoreValue = securityScoreReady.value
-    ? `${securityScoreActive.value} / ${securityScoreTotal.value}`
-    : null
-  tiles.push({
-    key: 'securityScore',
-    icon: 'shield',
-    tone: securityScoreAllGood.value ? 'emerald' : 'amber',
-    value: scoreValue,
-    warn: securityScoreReady.value && !securityScoreAllGood.value,
-    loading: !securityScoreReady.value,
-    caption: t('dashboard.kpi.securityScore', {}, 'Sicherheits-Score'),
-    onClick: goToProfileSecurity,
-  })
-
-  return tiles
-})
-
-// Operational tiles — each gated on its own permission. Rendered in the separate
-// "Realm-Betrieb" band so they never share a row with the personal tiles.
-const opsKpiTiles = computed<KpiTile[]>(() => {
-  const tiles: KpiTile[] = []
-
-  if (canSeeUsers.value) {
-    const userCountValue = userCountError.value
-      ? '–'
-      : (userCount.value === null ? null : String(userCount.value))
-    tiles.push({
-      key: 'userCount',
-      icon: 'users',
-      tone: 'violet',
-      value: userCountValue,
-      loading: userCount.value === null && !userCountError.value,
-      caption: t('dashboard.kpi.userCount', {}, 'User im Realm'),
-      onClick: goToUsers,
-    })
-  }
-
-  if (canSeeAuthLog.value) {
-    const failed = failedLogins24h.value
-    const failedValue = authLogError.value
-      ? '–'
-      : (authLogLoading.value ? null : String(failed ?? 0))
-    tiles.push({
-      key: 'failedLast24h',
-      icon: 'shield-alert',
-      tone: 'rose',
-      value: failedValue,
-      bad: !authLogLoading.value && !authLogError.value && (failed ?? 0) > 0,
-      loading: authLogLoading.value && !authLogError.value,
-      caption: t('dashboard.kpi.failedLast24h', {}, 'Fehlversuche 24h'),
-      onClick: goToAuthLog,
-    })
-  }
-
-  if (canSeeChangeRequests.value) {
-    const pendingValue = changeRequestsError.value
-      ? '–'
-      : (changeRequestsLoading.value ? null : String(changeRequests.value.length))
-    const pendingCount = changeRequests.value.length
-    tiles.push({
-      key: 'pendingChangeRequests',
-      icon: 'inbox',
-      tone: 'amber',
-      value: pendingValue,
-      warn: !changeRequestsLoading.value && !changeRequestsError.value && pendingCount > 0,
-      loading: changeRequestsLoading.value && !changeRequestsError.value,
-      caption: t('dashboard.kpi.pendingChangeRequests', {}, 'Offene Anfragen'),
-      onClick: goToChangeRequests,
-    })
-  }
-
-  if (canSeeLoginProviders.value) {
-    const providersValue = providersError.value
-      ? '–'
-      : (providersLoading.value ? null : String(activeOidcProviderCount.value))
-    tiles.push({
-      key: 'activeLoginProviders',
-      icon: 'log-in',
-      tone: 'blue',
-      value: providersValue,
-      loading: providersLoading.value && !providersError.value,
-      caption: t('dashboard.kpi.activeLoginProviders', {}, 'Active Login Providers'),
-      onClick: () => router.push('/admin/login-providers'),
-    })
-  }
-
-  return tiles
-})
+function saveAsRealmDefault() {
+  return run(async () => {
+    await defaultLayoutHttp.put({ Widgets: draft.value })
+    realmDefault.value = draft.value.map(p => ({ ...p }))
+  }, t('dashboard.customize.defaultSaved', {}, 'Saved as the default for this realm.'))
+}
 
-// Personal pair is always exactly 2 → always the centered --user grid. The ops
-// band fans out to the wide grid once it has >2 tiles, otherwise stays centered
-// so a lone ops tile doesn't float alone in a 6-column row.
-const opsGridWide = computed(() => opsKpiTiles.value.length > 2)
-
-// Show the second list-card row (System-Aktivität / Login-Provider) only if at
-// least one of those cards is visible to the viewer. Both are gated below too,
-// so the row container collapses cleanly when nothing's visible.
-const showAdminListRow = computed(() => canSeeAuthLog.value || canSeeLoginProviders.value)
-
-// The whole "Realm-Betrieb" band (heading + ops KPI grid + ops list cards) shows
-// only if the viewer has at least one ops tile or list card; otherwise it
-// collapses entirely (no dangling heading) for personal-only viewers.
-const hasOpsSection = computed(() => opsKpiTiles.value.length > 0 || showAdminListRow.value)
-
-// (KPI card markup + tone palette now live in ./KpiCard.vue.)
-
-// ─── Bootstrap ────────────────────────────────────────────────────────────
-onMounted(() => {
-  // Personal cards — always.
-  loadPasskeys()
-  loadSessions()
-
-  // Admin cards — fire each fetch only when the viewer actually holds the
-  // permission that backs it. Skipping these for non-eligible users avoids
-  // 403 noise and prevents the bug where a help-desk user (who only holds
-  // user:read + auth-log:read) would see the full admin face.
-  if (canSeeUsers.value) loadUserCount()
-  if (canSeeAuthLog.value) loadAuthLog()
-  if (canSeeChangeRequests.value) loadChangeRequests()
-  if (canSeeLoginProviders.value) loadLoginProviders()
-})
+function removeRealmDefault() {
+  return run(async () => {
+    await defaultLayoutHttp.delete()
+    realmDefault.value = null
+  }, t('dashboard.customize.defaultRemoved', {}, 'The realm default was removed; the built-in layout applies.'))
+}
 </script>
 
 <template>
-  <div class="w-full py-6 space-y-6">
-    <!-- ─── Section: Mein Konto (personal) ─── -->
-    <section class="dashboard-section">
-      <h2 class="dashboard-section__heading">{{ t('dashboard.section.personal', {}, 'My account') }}</h2>
-
-      <!-- Personal KPI tiles — always exactly two → centered pair. -->
-      <div class="kpi-grid kpi-grid--user">
-        <KpiCard v-for="tile in personalKpiTiles" :key="tile.key" :tile="tile" />
+  <div class="w-full py-6">
+    <div v-if="layoutLoading" class="dash-loading"><CoarSpinner size="m" /></div>
+
+    <template v-else>
+      <div v-if="!editing" class="dash-toolbar">
+        <CoarButton size="s" variant="ghost" icon-start="sliders-horizontal" @click="startEditing">
+          {{ t('dashboard.customize.start', {}, 'Customize') }}
+        </CoarButton>
       </div>
 
-      <!-- Personal list cards: Account-Sicherheit + Aktive Sessions -->
-      <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
-        <!-- Account-Sicherheit -->
-        <CoarCard elevated>
-          <div class="p-4">
-            <h3 class="list-card__heading">
-              <CoarIcon name="shield-check" size="s" class="mr-1 inline-block align-text-bottom" />
-              {{ t('dashboard.security.title', {}, 'Account Security') }}
-            </h3>
-            <div class="space-y-1">
-              <button
-                v-for="item in securityItems"
-                :key="item.key"
-                type="button"
-                class="list-row"
-                :class="{ 'list-row--strong': !item.ok && !item.pending }"
-                @click="goToProfileSecurity"
-              >
-                <span class="list-row__label">{{ item.label }}</span>
-                <span class="list-row__meta">
-                  <CoarSpinner v-if="item.pending" size="s" />
-                  <CoarTag v-else :variant="item.tagVariant" size="s">
-                    {{ item.tagLabel }}
-                  </CoarTag>
-                </span>
-              </button>
-            </div>
-            <div class="list-card__footer">
-              <button type="button" class="list-card__cta" @click="goToProfileSecurity">
-                {{ t('dashboard.security.cta', {}, 'To Profile →') }}
-              </button>
-            </div>
+      <!-- ─── Edit panel ─── -->
+      <section v-else class="dash-edit" :aria-label="t('dashboard.customize.start', {}, 'Customize')">
+        <div class="dash-edit__row">
+          <p class="dash-edit__hint">
+            {{ t('dashboard.customize.hint', {}, 'Drag widgets to reorder them, change their width or remove them. This arrangement is yours alone.') }}
+          </p>
+          <div class="dash-edit__actions">
+            <CoarButton size="s" variant="ghost" :disabled="saving" @click="editing = false">
+              {{ t('common.cancel', {}, 'Cancel') }}
+            </CoarButton>
+            <CoarButton v-if="userLayout" size="s" variant="ghost" :disabled="saving" @click="resetMine">
+              {{ t('dashboard.customize.reset', {}, 'Back to default') }}
+            </CoarButton>
+            <CoarButton size="s" :loading="saving" @click="save">
+              {{ t('common.save', {}, 'Save') }}
+            </CoarButton>
           </div>
-        </CoarCard>
-
-        <!-- Aktive Sessions -->
-        <CoarCard elevated>
-          <div class="p-4">
-            <h3 class="list-card__heading">
-              <CoarIcon name="monitor" size="s" class="mr-1 inline-block align-text-bottom" />
-              {{ t('dashboard.sessions.title', {}, 'Active Sessions') }}
-            </h3>
-            <div v-if="sessionsLoading" class="list-card__loading">
-              <CoarSpinner size="m" />
-            </div>
-            <CoarNotice v-else-if="sessionsError" variant="error">
-              {{ t('dashboard.errors.loadFailed', {}, 'Failed to load the data.') }}
-            </CoarNotice>
-            <div v-else-if="sessions.length === 0" class="list-card__empty">
-              {{ t('dashboard.sessions.none', {}, 'No sessions.') }}
-            </div>
-            <div v-else class="space-y-1">
-              <button
-                v-for="s in topSessions"
-                :key="s.Id"
-                type="button"
-                class="list-row"
-                :class="{ 'list-row--strong': s.Kind === 'Browser' && s.IsCurrent }"
-                @click="goToProfileSessions"
-              >
-                <span class="list-row__label">{{ deviceLabel(s) }}</span>
-                <span class="list-row__meta">
-                  <CoarTag v-if="s.Kind === 'Browser' && s.IsCurrent" variant="success" size="s">
-                    {{ t('dashboard.sessions.thisDevice', {}, 'This Device') }}
-                  </CoarTag>
-                  <CoarTag v-else-if="s.Kind === 'Client'" variant="neutral" size="s">
-                    {{ t('dashboard.sessions.app', {}, 'App') }}
-                  </CoarTag>
-                  <CoarTag variant="neutral" size="s">{{ relativeTime(s.LastActiveAt) }}</CoarTag>
-                </span>
-              </button>
-              <div v-if="extraSessionCount > 0" class="list-row__more">
-                {{ t('dashboard.sessions.more', { n: extraSessionCount }, '+{n} weitere') }}
-              </div>
-            </div>
-            <div class="list-card__footer">
-              <button type="button" class="list-card__cta" @click="goToProfileSessions">
-                {{ t('dashboard.sessions.cta', {}, 'Sessions verwalten →') }}
-              </button>
-            </div>
-          </div>
-        </CoarCard>
-      </div>
-    </section>
-
-    <!-- ─── Section: Realm-Betrieb (operational) ─── -->
-    <section v-if="hasOpsSection" class="dashboard-section">
-      <h2 class="dashboard-section__heading">{{ t('dashboard.section.operations', {}, 'Realm operations') }}</h2>
+        </div>
 
-      <!-- Operational KPI tiles -->
-      <div v-if="opsKpiTiles.length" class="kpi-grid" :class="opsGridWide ? 'kpi-grid--admin' : 'kpi-grid--user'">
-        <KpiCard v-for="tile in opsKpiTiles" :key="tile.key" :tile="tile" />
-      </div>
+        <div class="dash-edit__catalog">
+          <span class="dash-edit__label">{{ t('dashboard.customize.add', {}, 'Add:') }}</span>
+          <span v-if="available.length === 0" class="dash-edit__none">
+            {{ t('dashboard.customize.allPlaced', {}, 'Every available widget is on the dashboard.') }}
+          </span>
+          <button v-for="def in available" :key="def.id" type="button" class="dash-edit__chip" @click="add(def)">
+            <CoarIcon name="plus" size="s" />
+            {{ title(def) }}
+          </button>
+        </div>
 
-      <!-- Operational list cards: System-Aktivität + Login-Provider -->
-      <template v-if="showAdminListRow">
-        <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
-          <!-- System-Aktivität (last 10 AuthLog rows) -->
-          <CoarCard v-if="canSeeAuthLog" elevated>
-            <div class="p-4">
-              <h3 class="list-card__heading">
-                <CoarIcon name="scroll-text" size="s" class="mr-1 inline-block align-text-bottom" />
-                {{ t('dashboard.systemActivity.title', {}, 'System Activity') }}
-              </h3>
-              <div v-if="authLogLoading" class="list-card__loading">
-                <CoarSpinner size="m" />
-              </div>
-              <CoarNotice v-else-if="authLogError" variant="error">
-                {{ t('dashboard.errors.loadFailed', {}, 'Failed to load the data.') }}
-              </CoarNotice>
-              <div v-else-if="authLog.length === 0" class="list-card__empty">
-                {{ t('dashboard.systemActivity.none', {}, 'No events yet.') }}
-              </div>
-              <div v-else class="space-y-1">
-                <button
-                  v-for="(e, idx) in recentSystemActivity"
-                  :key="idx"
-                  type="button"
-                  class="list-row"
-                  :class="{ 'list-row--strong': e.Level === 'Error' }"
-                  @click="goToAuthLog"
-                >
-                  <span class="list-row__label">
-                    <span class="list-row__title">{{ e.Message }}</span>
-                    <span v-if="e.UserName" class="list-row__sub">{{ e.UserName }}</span>
-                  </span>
-                  <span class="list-row__meta">
-                    <CoarTag :variant="authLogLevelVariant(e.Level)" size="s">
-                      {{ relativeTime(e.Timestamp) }}
-                    </CoarTag>
-                  </span>
-                </button>
-              </div>
-              <div class="list-card__footer">
-                <button type="button" class="list-card__cta" @click="goToAuthLog">
-                  {{ t('dashboard.systemActivity.cta', {}, 'View all →') }}
-                </button>
-              </div>
-            </div>
-          </CoarCard>
-
-          <!-- Login-Provider -->
-          <CoarCard v-if="canSeeLoginProviders" elevated>
-            <div class="p-4">
-              <h3 class="list-card__heading">
-                <CoarIcon name="log-in" size="s" class="mr-1 inline-block align-text-bottom" />
-                {{ t('dashboard.loginProviderStatus.title', {}, 'Login-Provider') }}
-              </h3>
-              <div v-if="providersLoading" class="list-card__loading">
-                <CoarSpinner size="m" />
-              </div>
-              <CoarNotice v-else-if="providersError" variant="error">
-                {{ t('dashboard.errors.loadFailed', {}, 'Failed to load the data.') }}
-              </CoarNotice>
-              <div v-else-if="loginProviders.length === 0" class="list-card__empty">
-                {{ t('dashboard.loginProviderStatus.none', {}, 'No providers configured.') }}
-              </div>
-              <div v-else class="space-y-1">
-                <button
-                  v-for="p in loginProviders"
-                  :key="p.Id"
-                  type="button"
-                  class="list-row"
-                  @click="goToLoginProvider(p.Id)"
-                >
-                  <span class="list-row__label">
-                    <span
-                      class="provider-dot"
-                      :class="p.Enabled ? 'provider-dot--on' : 'provider-dot--off'"
-                      :title="p.Enabled
-                        ? t('dashboard.loginProviderStatus.enabled', {}, 'Enabled')
-                        : t('dashboard.loginProviderStatus.disabled', {}, 'Disabled')"
-                    />
-                    <span class="list-row__title">{{ p.DisplayName }}</span>
-                  </span>
-                  <span class="list-row__meta">
-                    <!-- Text status next to the colour dot (status not by colour alone). -->
-                    <CoarTag :variant="p.Enabled ? 'success' : 'neutral'" size="s">
-                      {{ p.Enabled
-                        ? t('dashboard.loginProviderStatus.enabled', {}, 'Enabled')
-                        : t('dashboard.loginProviderStatus.disabled', {}, 'Disabled') }}
-                    </CoarTag>
-                    <CoarTag v-if="p.Type === 'Internal'" variant="neutral" size="s">
-                      {{ t('dashboard.loginProviderStatus.system', {}, 'System') }}
-                    </CoarTag>
-                    <CoarTag v-else variant="info" size="s">{{ p.Flavor }}</CoarTag>
-                  </span>
-                </button>
-              </div>
-            </div>
-          </CoarCard>
+        <div v-if="canManageDefault" class="dash-edit__row dash-edit__row--realm">
+          <p class="dash-edit__hint">
+            {{ realmDefault
+              ? t('dashboard.customize.realmHintSet', {}, 'This realm has its own default. Users who never arranged their dashboard see it.')
+              : t('dashboard.customize.realmHintUnset', {}, 'This realm uses the built-in default. You can make the arrangement below the default for everyone who never arranged their own.') }}
+          </p>
+          <div class="dash-edit__actions">
+            <CoarPopconfirm
+              v-if="realmDefault"
+              :title="t('dashboard.customize.removeDefaultTitle', {}, 'Remove the realm default?')"
+              :message="t('dashboard.customize.removeDefaultMessage', {}, 'Users without their own arrangement go back to the built-in layout.')"
+              @confirmed="removeRealmDefault">
+              <CoarButton size="s" variant="ghost" :disabled="saving">
+                {{ t('dashboard.customize.removeDefault', {}, 'Remove realm default') }}
+              </CoarButton>
+            </CoarPopconfirm>
+            <CoarPopconfirm
+              :title="t('dashboard.customize.saveDefaultTitle', {}, 'Use as the realm default?')"
+              :message="t('dashboard.customize.saveDefaultMessage', {}, 'Everyone in this realm who has not arranged their own dashboard gets this arrangement. Each user still only sees the widgets they have permission for.')"
+              @confirmed="saveAsRealmDefault">
+              <CoarButton size="s" variant="secondary" :disabled="saving">
+                {{ t('dashboard.customize.saveDefault', {}, 'Save as realm default') }}
+              </CoarButton>
+            </CoarPopconfirm>
+          </div>
         </div>
-      </template>
-    </section>
+      </section>
+
+      <p v-if="shown.length === 0" class="dash-empty">
+        {{ t('dashboard.customize.empty', {}, 'No widgets on the dashboard.') }}
+      </p>
+
+      <div class="dash-grid" :class="{ 'dash-grid--editing': editing }">
+        <div
+          v-for="(placement, index) in shown"
+          :key="placement.Widget"
+          class="dash-cell"
+          :class="[`dash-cell--${placement.Size}`, { 'dash-cell--dragging': editing && dragIndex === index }]"
+          :draggable="editing"
+          @dragstart="onDragStart(index, $event)"
+          @dragover.prevent="onDragOver(index)"
+          @drop.prevent
+          @dragend="dragIndex = null"
+        >
+          <div v-if="editing" class="dash-cell__bar">
+            <CoarIcon name="grip-vertical" size="s" class="dash-cell__grip" />
+            <span class="dash-cell__name">{{ title(definition(placement)) }}</span>
+            <CoarButton
+              size="s" variant="ghost" icon-start="arrow-left" :disabled="index === 0"
+              :title="t('dashboard.customize.moveEarlier', {}, 'Move earlier')" @click="move(index, index - 1)" />
+            <CoarButton
+              size="s" variant="ghost" icon-start="arrow-right" :disabled="index === shown.length - 1"
+              :title="t('dashboard.customize.moveLater', {}, 'Move later')" @click="move(index, index + 1)" />
+            <CoarButton
+              size="s" variant="ghost" icon-start="minus" :disabled="!canResize(placement, -1)"
+              :title="t('dashboard.customize.narrower', {}, 'Narrower')" @click="resize(index, -1)" />
+            <CoarButton
+              size="s" variant="ghost" icon-start="plus" :disabled="!canResize(placement, 1)"
+              :title="t('dashboard.customize.wider', {}, 'Wider')" @click="resize(index, 1)" />
+            <CoarButton
+              size="s" variant="ghost" icon-start="x"
+              :title="t('dashboard.customize.remove', {}, 'Remove')" @click="remove(index)" />
+          </div>
+          <!-- While arranging, the widget is a preview: not clickable, not focusable. -->
+          <div class="dash-cell__content" :inert="editing || undefined">
+            <component :is="definition(placement).component" v-bind="definition(placement).props" />
+          </div>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
 <style scoped>
-/* KPI grid: 2-column for end-users, fans out to 6-column on lg viewports
-   when admin tiles are present. */
-.kpi-grid {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-@media (min-width: 1024px) {
-  .kpi-grid--user { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 32rem; margin: 0 auto; }
-  .kpi-grid--admin { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-}
-
-/* Dashboard section bands — "Mein Konto" / "Realm-Betrieb". The wrapping
-   <section> groups its heading with its own grids/cards so the page-level
-   space-y-6 gap falls BETWEEN the two bands, while inside a band the heading sits
-   tight above its content. (KPI card styles now live in ./KpiCard.vue.) */
-.dashboard-section > * + * {
-  margin-top: 1rem;
-}
-.dashboard-section__heading {
-  font-size: 1.0625rem;
-  font-weight: 600;
-  color: var(--coar-text-neutral-primary, #111827);
+.dash-loading {
+  display: flex;
+  justify-content: center;
+  padding: 3rem 0;
 }
-/* Tighten the heading → first-content gap (wins over the 1rem rule above by
-   source order at equal specificity). */
-.dashboard-section__heading + * {
-  margin-top: 0.5rem;
+.dash-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.5rem;
 }
-
-/* List card heading: ALL-CAPS small text + leading icon. */
-.list-card__heading {
-  font-size: 0.875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.dash-empty {
+  padding: 2rem 0;
+  text-align: center;
   color: var(--coar-text-neutral-secondary, #6b7280);
-  margin-bottom: 0.75rem;
 }
 
-/* List rows: button-based, hover-tinted. */
-.list-row {
+/* ── Grid: 12 columns; a size is a column span. Narrower viewports fold the
+      spans down so nothing gets thinner than it can lay out. ── */
+.dash-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 1rem;
+}
+.dash-cell {
+  min-width: 0;
   display: flex;
+  flex-direction: column;
+}
+.dash-cell__content {
+  flex: 1;
+  min-height: 0;
+}
+.dash-cell--xs { grid-column: span 2; }
+.dash-cell--s { grid-column: span 3; }
+.dash-cell--m { grid-column: span 4; }
+.dash-cell--l { grid-column: span 6; }
+.dash-cell--xl { grid-column: span 8; }
+.dash-cell--full { grid-column: span 12; }
+
+@media (max-width: 1279px) {
+  .dash-cell--xs { grid-column: span 3; }
+  .dash-cell--s { grid-column: span 3; }
+  .dash-cell--m { grid-column: span 6; }
+  .dash-cell--l { grid-column: span 6; }
+  .dash-cell--xl { grid-column: span 12; }
+}
+@media (max-width: 767px) {
+  .dash-cell--xs,
+  .dash-cell--s { grid-column: span 6; }
+  .dash-cell--m,
+  .dash-cell--l { grid-column: span 12; }
+}
+
+/* ── Edit mode ── */
+.dash-edit {
+  margin-bottom: 1rem;
+  padding: 0.75rem 1rem;
+  border: 1px dashed var(--coar-border-neutral-secondary, #cbd5e1);
+  border-radius: 0.5rem;
+  background: var(--coar-background-neutral-primary, #ffffff);
+}
+.dash-edit__row {
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
-  width: 100%;
-  padding: 0.5rem 0.5rem;
-  border-radius: 0.375rem;
-  text-align: left;
-  font-size: 0.875rem;
-  transition: background-color 0.1s;
-  cursor: pointer;
-  border: none;
-  background: none;
-  color: inherit;
+  gap: 0.5rem 1rem;
 }
-.list-row:hover {
-  background-color: var(--coar-background-neutral-tertiary, rgba(0, 0, 0, 0.04));
+.dash-edit__row--realm {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--coar-border-neutral-tertiary, rgba(0, 0, 0, 0.08));
 }
-.list-row--strong .list-row__title,
-.list-row--strong > .list-row__label {
-  font-weight: 600;
+.dash-edit__hint {
+  flex: 1 1 18rem;
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--coar-text-neutral-secondary, #6b7280);
 }
-
-.list-row__label {
-  flex: 1;
-  min-width: 0;
+.dash-edit__actions {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
   gap: 0.5rem;
 }
-.list-row__title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.dash-edit__catalog {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 0.75rem;
+  font-size: 0.8125rem;
 }
-.list-row__sub {
-  font-size: 0.75rem;
+.dash-edit__label,
+.dash-edit__none {
   color: var(--coar-text-neutral-secondary, #6b7280);
-  margin-left: 0.5rem;
-  flex-shrink: 0;
 }
-.list-row__meta {
+.dash-edit__chip {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
-  flex-shrink: 0;
-  font-size: 0.75rem;
+  gap: 0.25rem;
+  padding: 0.25rem 0.625rem 0.25rem 0.375rem;
+  border: 1px solid var(--coar-border-neutral-secondary, #cbd5e1);
+  border-radius: 9999px;
+  background: transparent;
+  color: inherit;
+  font-size: 0.8125rem;
+  cursor: pointer;
 }
-.list-row__more {
-  font-size: 0.75rem;
-  color: var(--coar-text-neutral-secondary, #9ca3af);
-  padding: 0.25rem 0.5rem;
+.dash-edit__chip:hover,
+.dash-edit__chip:focus-visible {
+  border-color: var(--coar-accent, #1077be);
 }
 
-.list-card__loading {
+.dash-grid--editing .dash-cell {
+  border: 1px dashed var(--coar-border-neutral-secondary, #cbd5e1);
+  border-radius: 0.625rem;
+  padding: 0.25rem;
+  cursor: grab;
+}
+.dash-cell--dragging {
+  opacity: 0.4;
+}
+.dash-cell__bar {
   display: flex;
-  justify-content: center;
-  padding: 1rem 0;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0 0.125rem 0.25rem 0.25rem;
 }
-.list-card__empty {
-  font-size: 0.875rem;
+.dash-cell__grip {
   color: var(--coar-text-neutral-secondary, #9ca3af);
-  padding: 0.5rem 0.5rem;
-  text-align: center;
-}
-.list-card__footer {
-  margin-top: 0.5rem;
-  padding: 0 0.5rem;
 }
-.list-card__cta {
+.dash-cell__name {
+  flex: 1;
+  min-width: 0;
+  margin-left: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: 0.8125rem;
-  color: var(--coar-text-link, #2563eb);
-  background: transparent;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-}
-.list-card__cta:hover {
-  text-decoration: underline;
-}
-
-.provider-dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 9999px;
-  flex-shrink: 0;
+  font-weight: 600;
 }
-.provider-dot--on  { background: #22c55e; }
-.provider-dot--off { background: var(--coar-border-neutral-tertiary, #d1d5db); }
 </style>
diff --git a/src/frontend-vue/src/views/dashboard/charts/DonutChart.vue b/src/frontend-vue/src/views/dashboard/charts/DonutChart.vue
new file mode 100644
index 00000000..84020922
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/charts/DonutChart.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import './chart-theme.css'
+
+/** One slice. `color` is a CSS colour (use a --chart-* variable). */
+export interface DonutSegment {
+  key: string
+  label: string
+  value: number
+  color: string
+}
+
+const props = defineProps<{
+  segments: DonutSegment[]
+  /** Caption under the total in the middle of the ring. */
+  totalLabel: string
+  /** BCP-47 tag for numbers. */
+  locale: string
+  /** Accessible name of the chart. */
+  label: string
+}>()
+
+const SIZE = 132
+const STROKE = 16
+const RADIUS = (SIZE - STROKE) / 2
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS
+// Touching slices are separated by a gap in the surface colour, not a border.
+const GAP = 2
+
+const numberFormat = computed(() => new Intl.NumberFormat(props.locale))
+const total = computed(() => props.segments.reduce((sum, s) => sum + s.value, 0))
+
+const arcs = computed(() => {
+  const visible = props.segments.filter(s => s.value > 0)
+  const gap = visible.length > 1 ? GAP : 0
+  let offset = 0
+  return visible.map(s => {
+    const length = (s.value / total.value) * CIRCUMFERENCE
+    const arc = {
+      ...s,
+      dash: `${Math.max(0.5, length - gap)} ${CIRCUMFERENCE}`,
+      offset: -offset,
+    }
+    offset += length
+    return arc
+  })
+})
+
+const rows = computed(() => props.segments.map(s => ({
+  ...s,
+  count: numberFormat.value.format(s.value),
+  share: total.value > 0 ? `${Math.round((s.value / total.value) * 100)} %` : '–',
+})))
+
+const active = ref<string | null>(null)
+</script>
+
+<template>
+  <div class="dash-chart donut">
+    <div class="donut__ring" role="img" :aria-label="label">
+      <svg :width="SIZE" :height="SIZE" :viewBox="`0 0 ${SIZE} ${SIZE}`" aria-hidden="true">
+        <circle :cx="SIZE / 2" :cy="SIZE / 2" :r="RADIUS" class="donut__track" :stroke-width="STROKE" />
+        <g :transform="`rotate(-90 ${SIZE / 2} ${SIZE / 2})`">
+          <circle
+            v-for="arc in arcs" :key="arc.key"
+            :cx="SIZE / 2" :cy="SIZE / 2" :r="RADIUS"
+            class="donut__arc"
+            :class="{ 'donut__arc--dim': active !== null && active !== arc.key }"
+            :stroke="arc.color" :stroke-width="STROKE"
+            :stroke-dasharray="arc.dash" :stroke-dashoffset="arc.offset"
+            @pointerenter="active = arc.key"
+            @pointerleave="active = null"
+          />
+        </g>
+      </svg>
+      <div class="donut__center">
+        <div class="donut__total">{{ numberFormat.format(total) }}</div>
+        <div class="donut__total-label">{{ totalLabel }}</div>
+      </div>
+    </div>
+
+    <!-- The legend carries every value, so nothing is readable by colour or hover alone. -->
+    <ul class="donut__legend">
+      <li
+        v-for="row in rows" :key="row.key"
+        class="donut__row"
+        :class="{ 'donut__row--active': active === row.key }"
+        @pointerenter="active = row.key"
+        @pointerleave="active = null"
+      >
+        <span class="dash-chart__swatch" :style="{ background: row.color }" />
+        <span class="donut__row-label">
+          <slot name="label" :segment="row">{{ row.label }}</slot>
+        </span>
+        <span class="donut__row-value">{{ row.count }}</span>
+        <span class="donut__row-share">{{ row.share }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.donut {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+.donut__ring {
+  position: relative;
+  flex-shrink: 0;
+  line-height: 0;
+}
+.donut__track {
+  fill: none;
+  stroke: var(--chart-grid);
+}
+.donut__arc {
+  fill: none;
+  transition: opacity 0.12s ease;
+}
+.donut__arc--dim { opacity: 0.35; }
+
+.donut__center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.1;
+  pointer-events: none;
+}
+.donut__total {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--chart-ink);
+}
+.donut__total-label {
+  font-size: 0.6875rem;
+  color: var(--chart-ink-secondary);
+}
+
+.donut__legend {
+  flex: 1 1 9rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.8125rem;
+}
+.donut__row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.375rem;
+  border-radius: 0.25rem;
+  color: var(--chart-ink);
+}
+.donut__row--active {
+  background: var(--coar-background-neutral-tertiary, rgba(0, 0, 0, 0.04));
+}
+.donut__row-label {
+  flex: 1;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.donut__row-value {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.donut__row-share {
+  width: 2.25rem;
+  text-align: right;
+  color: var(--chart-ink-secondary);
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/src/frontend-vue/src/views/dashboard/charts/TrendChart.vue b/src/frontend-vue/src/views/dashboard/charts/TrendChart.vue
new file mode 100644
index 00000000..eabe1894
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/charts/TrendChart.vue
@@ -0,0 +1,296 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import './chart-theme.css'
+
+/** One line over the shared day axis. `color` is a CSS colour (use a --chart-* variable). */
+export interface TrendSeries {
+  key: string
+  label: string
+  color: string
+  values: number[]
+  /** Lays a light wash under the line — for the series the chart is about. */
+  area?: boolean
+}
+
+const props = defineProps<{
+  /** ISO days (yyyy-MM-dd), oldest first; one entry per value. */
+  days: string[]
+  series: TrendSeries[]
+  /** BCP-47 tag for dates and numbers. */
+  locale: string
+  /** Accessible name of the chart. */
+  label: string
+}>()
+
+const HEIGHT = 200
+const PAD = { top: 10, right: 12, bottom: 22, left: 36 }
+
+// Drawn at the element's real pixel width so text and 2px lines are never scaled.
+const root = ref<HTMLElement | null>(null)
+const width = ref(600)
+let observer: ResizeObserver | null = null
+onMounted(() => {
+  if (!root.value) return
+  width.value = root.value.clientWidth || width.value
+  observer = new ResizeObserver((entries) => { width.value = entries[0]?.contentRect.width || width.value })
+  observer.observe(root.value)
+})
+onBeforeUnmount(() => observer?.disconnect())
+
+const plotW = computed(() => Math.max(1, width.value - PAD.left - PAD.right))
+const plotH = HEIGHT - PAD.top - PAD.bottom
+
+/** A round axis maximum (1, 2 or 5 × a power of ten, at least 4 so ticks stay whole). */
+const yMax = computed(() => {
+  const max = Math.max(0, ...props.series.flatMap(s => s.values))
+  if (max <= 4) return 4
+  const magnitude = 10 ** Math.floor(Math.log10(max))
+  return [1, 2, 4, 6, 8, 10].map(m => m * magnitude).find(step => step >= max) ?? max
+})
+
+const numberFormat = computed(() => new Intl.NumberFormat(props.locale))
+const yTicks = computed(() => [0, yMax.value / 2, yMax.value].map(value => ({
+  value,
+  label: numberFormat.value.format(value),
+  y: y(value),
+})))
+
+function x(index: number): number {
+  const last = Math.max(1, props.days.length - 1)
+  return PAD.left + (index / last) * plotW.value
+}
+function y(value: number): number {
+  return PAD.top + plotH - (value / yMax.value) * plotH
+}
+
+const paths = computed(() => props.series.map(s => {
+  const points = s.values.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`)
+  const line = `M${points.join('L')}`
+  const baseline = y(0).toFixed(1)
+  return {
+    ...s,
+    line,
+    fill: s.area && points.length > 1
+      ? `${line}L${x(s.values.length - 1).toFixed(1)},${baseline}L${x(0).toFixed(1)},${baseline}Z`
+      : null,
+  }
+}))
+
+function parseDay(day: string): Date {
+  const [yy = 0, mm = 1, dd = 1] = day.split('-').map(Number)
+  return new Date(yy, mm - 1, dd)
+}
+const shortDate = computed(() => new Intl.DateTimeFormat(props.locale, { day: 'numeric', month: 'short' }))
+const longDate = computed(() => new Intl.DateTimeFormat(props.locale, { weekday: 'short', day: 'numeric', month: 'long' }))
+
+/** First, middle and last day — enough to orient without crowding the axis. */
+const xTicks = computed(() => {
+  const n = props.days.length
+  if (n === 0) return []
+  const picks = n < 3 ? [0, n - 1] : [0, Math.floor((n - 1) / 2), n - 1]
+  return [...new Set(picks)].map((i, pos, all) => ({
+    x: x(i),
+    label: shortDate.value.format(parseDay(props.days[i]!)),
+    anchor: pos === 0 ? 'start' : pos === all.length - 1 ? 'end' : 'middle',
+  }))
+})
+
+// ── Hover: a crosshair snaps to the nearest day; the reader aims at a date,
+//    never at a 2px line. ─────────────────────────────────────────────────
+const hover = ref<number | null>(null)
+
+function onPointerMove(event: PointerEvent) {
+  if (!root.value || props.days.length === 0) return
+  const offset = event.clientX - root.value.getBoundingClientRect().left - PAD.left
+  const last = props.days.length - 1
+  hover.value = Math.min(last, Math.max(0, Math.round((offset / plotW.value) * last)))
+}
+
+function onKeydown(event: KeyboardEvent) {
+  const last = props.days.length - 1
+  if (last < 0) return
+  if (event.key === 'ArrowLeft') hover.value = Math.max(0, (hover.value ?? last) - 1)
+  else if (event.key === 'ArrowRight') hover.value = Math.min(last, (hover.value ?? -1) + 1)
+  else if (event.key === 'Escape') hover.value = null
+  else return
+  event.preventDefault()
+}
+
+const tooltip = computed(() => {
+  const i = hover.value
+  const day = i === null ? undefined : props.days[i]
+  if (i === null || day === undefined) return null
+  const px = x(i)
+  return {
+    x: px,
+    // Flip to the other side of the crosshair before it would leave the card.
+    flip: px > width.value / 2,
+    date: longDate.value.format(parseDay(day)),
+    rows: props.series.map(s => ({
+      key: s.key,
+      label: s.label,
+      color: s.color,
+      value: numberFormat.value.format(s.values[i] ?? 0),
+      y: y(s.values[i] ?? 0),
+    })),
+  }
+})
+</script>
+
+<template>
+  <div class="dash-chart trend">
+    <div v-if="series.length > 1" class="dash-chart__legend">
+      <span v-for="s in series" :key="s.key" class="dash-chart__legend-item">
+        <span class="dash-chart__swatch" :style="{ background: s.color }" />
+        {{ s.label }}
+      </span>
+    </div>
+
+    <div
+      ref="root"
+      class="trend__plot"
+      tabindex="0"
+      role="img"
+      :aria-label="label"
+      @pointermove="onPointerMove"
+      @pointerleave="hover = null"
+      @blur="hover = null"
+      @keydown="onKeydown"
+    >
+      <svg :width="width" :height="HEIGHT" :viewBox="`0 0 ${width} ${HEIGHT}`" aria-hidden="true">
+        <g v-for="tick in yTicks" :key="tick.value">
+          <line
+            :x1="PAD.left" :x2="width - PAD.right" :y1="tick.y" :y2="tick.y"
+            :class="tick.value === 0 ? 'trend__axis' : 'trend__grid'"
+          />
+          <text :x="PAD.left - 8" :y="tick.y" class="trend__tick" text-anchor="end" dominant-baseline="middle">
+            {{ tick.label }}
+          </text>
+        </g>
+        <text
+          v-for="tick in xTicks" :key="tick.x"
+          :x="tick.x" :y="HEIGHT - 5" class="trend__tick" :text-anchor="tick.anchor"
+        >{{ tick.label }}</text>
+
+        <template v-for="p in paths" :key="p.key">
+          <path v-if="p.fill" :d="p.fill" :fill="p.color" fill-opacity="0.1" />
+          <path :d="p.line" :stroke="p.color" class="trend__line" />
+        </template>
+
+        <g v-if="tooltip">
+          <line :x1="tooltip.x" :x2="tooltip.x" :y1="PAD.top" :y2="PAD.top + plotH" class="trend__crosshair" />
+          <circle
+            v-for="row in tooltip.rows" :key="row.key"
+            :cx="tooltip.x" :cy="row.y" r="4" :fill="row.color" class="trend__dot"
+          />
+        </g>
+      </svg>
+
+      <div
+        v-if="tooltip"
+        class="trend__tooltip"
+        :class="{ 'trend__tooltip--flip': tooltip.flip }"
+        :style="{ left: `${tooltip.x}px` }"
+      >
+        <div class="trend__tooltip-date">{{ tooltip.date }}</div>
+        <div v-for="row in tooltip.rows" :key="row.key" class="trend__tooltip-row">
+          <span class="dash-chart__swatch" :style="{ background: row.color }" />
+          <span class="trend__tooltip-label">{{ row.label }}</span>
+          <span class="trend__tooltip-value">{{ row.value }}</span>
+        </div>
+      </div>
+    </div>
+
+    <table class="dash-chart__table">
+      <caption>{{ label }}</caption>
+      <thead>
+        <tr>
+          <th scope="col" />
+          <th v-for="s in series" :key="s.key" scope="col">{{ s.label }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(day, i) in days" :key="day">
+          <th scope="row">{{ day }}</th>
+          <td v-for="s in series" :key="s.key">{{ s.values[i] ?? 0 }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.trend {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  position: relative;
+}
+.trend__plot {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  border-radius: 0.25rem;
+  touch-action: pan-y;
+}
+.trend__plot:focus-visible {
+  outline: 2px solid var(--coar-accent, #1077be);
+  outline-offset: 2px;
+}
+.trend__plot svg {
+  display: block;
+}
+
+.trend__grid { stroke: var(--chart-grid); stroke-width: 1; }
+.trend__axis { stroke: var(--chart-axis); stroke-width: 1; }
+.trend__tick {
+  fill: var(--chart-muted);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.trend__line {
+  fill: none;
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+.trend__crosshair { stroke: var(--chart-axis); stroke-width: 1; }
+/* The ring in the surface colour keeps a marker legible where lines cross. */
+.trend__dot { stroke: var(--chart-surface); stroke-width: 2; }
+
+.trend__tooltip {
+  position: absolute;
+  top: 0;
+  transform: translateX(12px);
+  pointer-events: none;
+  z-index: 1;
+  min-width: 9rem;
+  padding: 0.5rem 0.625rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--coar-border-neutral-tertiary, rgba(11, 11, 11, 0.1));
+  background: var(--chart-surface);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  font-size: 0.75rem;
+  color: var(--chart-ink);
+}
+.trend__tooltip--flip {
+  transform: translateX(calc(-100% - 12px));
+}
+.trend__tooltip-date {
+  margin-bottom: 0.25rem;
+  color: var(--chart-ink-secondary);
+  white-space: nowrap;
+}
+.trend__tooltip-row {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  white-space: nowrap;
+}
+.trend__tooltip-label { flex: 1; }
+.trend__tooltip-value {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  margin-left: 0.75rem;
+}
+</style>
diff --git a/src/frontend-vue/src/views/dashboard/charts/chart-theme.css b/src/frontend-vue/src/views/dashboard/charts/chart-theme.css
new file mode 100644
index 00000000..7846ef8b
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/charts/chart-theme.css
@@ -0,0 +1,67 @@
+/* Chart colours by role. The categorical slots are assigned in this fixed order
+   and never cycled; the order is what keeps neighbouring series apart for
+   colour-vision deficiencies. Status colours are reserved for severity and are
+   always paired with an icon or a label. Dark values are separate steps of the
+   same hues, chosen for the dark surface. */
+.dash-chart {
+  --chart-surface: var(--coar-background-neutral-secondary, #ffffff);
+  --chart-ink: var(--coar-text-neutral-primary, #0b0b0b);
+  --chart-ink-secondary: var(--coar-text-neutral-secondary, #52514e);
+  --chart-muted: #898781;
+  --chart-grid: #e1e0d9;
+  --chart-axis: #c3c2b7;
+
+  --chart-series-1: #2a78d6;
+  --chart-series-2: #eb6834;
+  --chart-series-3: #1baf7a;
+  --chart-series-4: #eda100;
+  --chart-series-5: #e87ba4;
+  --chart-series-6: #008300;
+  --chart-series-other: #898781;
+
+  --chart-status-neutral: #c3c2b7;
+  --chart-status-warning: #fab219;
+  --chart-status-critical: #d03b3b;
+}
+
+.dark-mode .dash-chart {
+  --chart-grid: #2c2c2a;
+  --chart-axis: #383835;
+
+  --chart-series-1: #3987e5;
+  --chart-series-2: #d95926;
+  --chart-series-3: #199e70;
+  --chart-series-4: #c98500;
+  --chart-series-5: #d55181;
+
+  --chart-status-neutral: #52514e;
+}
+
+/* The table twin of a chart: read by assistive tech, invisible otherwise. */
+.dash-chart__table {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.dash-chart__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+  font-size: 0.75rem;
+  color: var(--chart-ink-secondary);
+}
+.dash-chart__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.dash-chart__swatch {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
diff --git a/src/frontend-vue/src/views/dashboard/dashboardStats.ts b/src/frontend-vue/src/views/dashboard/dashboardStats.ts
new file mode 100644
index 00000000..dad6640a
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/dashboardStats.ts
@@ -0,0 +1,71 @@
+import { ref } from 'vue'
+import { useHttpClient } from '@/composables/useHttpClient'
+
+// Mirrors DashboardStatsDto in Modgud.Api/Features/Dashboard/DashboardEndpoints.cs.
+// Every block the viewer has no permission for arrives as null.
+
+export interface DashboardCounts {
+  Users: number | null
+  ServiceAccounts: number | null
+  Groups: number | null
+  Roles: number | null
+  Apps: number | null
+  OAuthClients: number | null
+  LoginProviders: number | null
+  LoginProvidersEnabled: number | null
+  ActiveSessions: number | null
+  PendingChangeRequests: number | null
+}
+
+export interface LoginStats {
+  Days: number
+  Succeeded: number
+  Failed: number
+  FailedLast24h: number
+  Series: { Day: string; Succeeded: number; Failed: number }[]
+  Methods: { Method: string; Count: number }[]
+}
+
+export interface SecurityStats {
+  Days: number
+  Info: number
+  Warning: number
+  Error: number
+  AttentionLast24h: number
+  Series: { Day: string; Info: number; Warning: number; Error: number }[]
+  TopEventTypes: { EventType: string; Count: number }[]
+}
+
+export interface DashboardStats {
+  Days: number
+  TimeZone: string
+  Counts: DashboardCounts
+  Logins: LoginStats | null
+  Security: SecurityStats | null
+}
+
+// One read backs every statistics widget, so the state is shared rather than
+// fetched per widget.
+const stats = ref<DashboardStats | null>(null)
+const loading = ref(false)
+const failed = ref(false)
+
+async function load() {
+  loading.value = true
+  failed.value = false
+  try {
+    // The browser's zone, so "today" on the chart is the viewer's today.
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone
+    stats.value = await useHttpClient('/api/dashboard/stats')
+      .setQueryParameter('tz', tz)
+      .get<DashboardStats>()
+  } catch {
+    failed.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+export function useDashboardStats() {
+  return { stats, loading, failed, load }
+}
diff --git a/src/frontend-vue/src/views/dashboard/layout.ts b/src/frontend-vue/src/views/dashboard/layout.ts
new file mode 100644
index 00000000..e764ed61
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/layout.ts
@@ -0,0 +1,52 @@
+import type { Component } from 'vue'
+
+/** Width of a widget on the 12-column dashboard grid. */
+export type WidgetSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'full'
+
+/** One widget on the dashboard. List order is display order. */
+export interface WidgetPlacement {
+  Widget: string
+  Size: WidgetSize
+}
+
+export interface WidgetDefinition {
+  id: string
+  /** i18n key + English fallback for the catalog and the edit chrome. */
+  titleKey: string
+  titleEn: string
+  icon: string
+  /**
+   * The viewer needs ANY of these to see the widget. Empty = everyone. This
+   * only decides visibility — the data itself is gated by the endpoint.
+   */
+  requirePermissions: string[]
+  /** Widths the widget lays out well at, narrowest first. */
+  sizes: WidgetSize[]
+  defaultSize: WidgetSize
+  component: Component
+  props?: Record<string, unknown>
+}
+
+/**
+ * Turns a stored layout into what this viewer actually gets: placements whose
+ * widget still exists and which they may see, each at a size the widget supports.
+ * A layout can therefore never show more than the catalog and permissions allow.
+ */
+export function resolveLayout(
+  stored: WidgetPlacement[],
+  catalog: Map<string, WidgetDefinition>,
+  canSee: (def: WidgetDefinition) => boolean,
+): WidgetPlacement[] {
+  const seen = new Set<string>()
+  const result: WidgetPlacement[] = []
+  for (const placement of stored) {
+    const def = catalog.get(placement.Widget)
+    if (!def || seen.has(def.id) || !canSee(def)) continue
+    seen.add(def.id)
+    result.push({
+      Widget: def.id,
+      Size: def.sizes.includes(placement.Size) ? placement.Size : def.defaultSize,
+    })
+  }
+  return result
+}
diff --git a/src/frontend-vue/src/views/dashboard/relativeTime.ts b/src/frontend-vue/src/views/dashboard/relativeTime.ts
new file mode 100644
index 00000000..fc222450
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/relativeTime.ts
@@ -0,0 +1,18 @@
+import { useI18n } from '@cocoar/vue-localization'
+
+/** "5 min ago"-style timestamps for the dashboard's list widgets. */
+export function useRelativeTime() {
+  const { t, language } = useI18n()
+
+  return function relativeTime(iso: string): string {
+    const diffSec = Math.max(0, Math.floor((Date.now() - new Date(iso).getTime()) / 1000))
+    if (diffSec < 60) return t('dashboard.time.justNow', {}, 'just now')
+    const diffMin = Math.floor(diffSec / 60)
+    if (diffMin < 60) return t('dashboard.time.minutesAgo', { n: diffMin }, '{n} min ago')
+    const diffH = Math.floor(diffMin / 60)
+    if (diffH < 24) return t('dashboard.time.hoursAgo', { n: diffH }, '{n} h ago')
+    const diffD = Math.floor(diffH / 24)
+    if (diffD < 30) return t('dashboard.time.daysAgo', { n: diffD }, '{n} days ago')
+    return new Date(iso).toLocaleDateString(language.value)
+  }
+}
diff --git a/src/frontend-vue/src/views/dashboard/widgets/AccountSecurityWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/AccountSecurityWidget.vue
new file mode 100644
index 00000000..62874448
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/widgets/AccountSecurityWidget.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from '@cocoar/vue-localization'
+import { CoarSpinner, CoarTag } from '@cocoar/vue-ui'
+import { useHttpClient } from '@/composables/useHttpClient'
+import { useAuthStore } from '@/stores/auth.store'
+import WidgetCard from './WidgetCard.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const authStore = useAuthStore()
+
+// Has2FA on the signed-in user covers TOTP / e-mail / passkey-as-second-factor;
+// the checklist shows a registered passkey as its own, passwordless capability.
+const passkeyCount = ref<number | null>(null)
+onMounted(async () => {
+  try {
+    passkeyCount.value = (await useHttpClient('/api/account/passkey').get<unknown[]>()).length
+  } catch {
+    passkeyCount.value = 0
+  }
+})
+
+const items = computed(() => {
+  const ok = t('dashboard.security.statusOk', {}, 'OK')
+  const missing = t('dashboard.security.statusMissing', {}, 'missing')
+  const row = (key: string, label: string, done: boolean, pending = false) => ({
+    key,
+    label,
+    pending,
+    strong: !done && !pending,
+    variant: done ? 'success' as const : 'warning' as const,
+    tag: done ? ok : missing,
+  })
+  return [
+    row('email', t('dashboard.security.emailLabel', {}, 'E-mail address on file'), !!authStore.user?.Email),
+    row('mfa', t('dashboard.security.mfaLabel', {}, 'Two-factor authentication'), authStore.user?.Has2FA === true),
+    row('passkey', t('dashboard.security.passkeyLabel', {}, 'Passkey registered'),
+      (passkeyCount.value ?? 0) > 0, passkeyCount.value === null),
+  ]
+})
+</script>
+
+<template>
+  <WidgetCard
+    :title="t('dashboard.security.title', {}, 'Account security')"
+    icon="shield-check"
+    :cta="t('dashboard.security.cta', {}, 'To profile →')"
+    @open="router.push('/profile')"
+  >
+    <button
+      v-for="item in items" :key="item.key"
+      type="button" class="widget-row" :class="{ 'widget-row--strong': item.strong }"
+      @click="router.push('/profile')"
+    >
+      <span class="widget-row__label">{{ item.label }}</span>
+      <span class="widget-row__meta">
+        <CoarSpinner v-if="item.pending" size="s" />
+        <CoarTag v-else :variant="item.variant" size="s">{{ item.tag }}</CoarTag>
+      </span>
+    </button>
+  </WidgetCard>
+</template>
diff --git a/src/frontend-vue/src/views/dashboard/widgets/CountsWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/CountsWidget.vue
new file mode 100644
index 00000000..de055f16
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/widgets/CountsWidget.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from '@cocoar/vue-localization'
+import { CoarIcon } from '@cocoar/vue-ui'
+import { useDashboardStats, type DashboardCounts } from '../dashboardStats'
+import WidgetCard from './WidgetCard.vue'
+
+/** A group of "how many are there" tiles, each a shortcut to its list. */
+export type CountsGroup = 'directory' | 'applications'
+
+const props = defineProps<{ group: CountsGroup }>()
+
+const { t, language } = useI18n()
+const router = useRouter()
+const { stats, loading, failed } = useDashboardStats()
+
+interface TileSpec {
+  key: keyof DashboardCounts
+  icon: string
+  label: string
+  to: string
+  /** Extra line under the label, e.g. "3 enabled". */
+  note?: string
+}
+
+const groups = computed<Record<CountsGroup, { title: string; icon: string; tiles: TileSpec[] }>>(() => {
+  const enabled = stats.value?.Counts.LoginProvidersEnabled
+  return {
+    directory: {
+      title: t('dashboard.directory.title', {}, 'Directory'),
+      icon: 'users',
+      tiles: [
+        { key: 'Users', icon: 'users', label: t('nav.users', {}, 'Users'), to: '/admin/users' },
+        { key: 'ServiceAccounts', icon: 'cpu', label: t('admin.serviceAccounts.title', {}, 'Service Accounts'), to: '/admin/service-accounts' },
+        { key: 'Groups', icon: 'users-round', label: t('nav.groups', {}, 'Groups'), to: '/admin/groups' },
+        { key: 'Roles', icon: 'shield', label: t('nav.roles', {}, 'Roles'), to: '/admin/roles' },
+      ],
+    },
+    applications: {
+      title: t('dashboard.applications.title', {}, 'Applications & sign-in'),
+      icon: 'layout-grid',
+      tiles: [
+        { key: 'Apps', icon: 'layout-grid', label: t('admin.apps.title', {}, 'Applications'), to: '/admin/apps' },
+        { key: 'OAuthClients', icon: 'app-window', label: t('admin.oauthClients.title', {}, 'OAuth Clients'), to: '/admin/oauth/clients' },
+        {
+          key: 'LoginProviders',
+          icon: 'log-in',
+          label: t('admin.loginProviders.title', {}, 'Login Providers'),
+          to: '/admin/login-providers',
+          note: enabled != null ? t('dashboard.applications.enabled', { n: enabled }, '{n} enabled') : undefined,
+        },
+      ],
+    },
+  }
+})
+
+const group = computed(() => groups.value[props.group])
+const numberFormat = computed(() => new Intl.NumberFormat(language.value))
+
+// A count the viewer has no permission for arrives as null — its tile is left out.
+const tiles = computed(() => group.value.tiles.flatMap(tile => {
+  const count = stats.value?.Counts[tile.key]
+  return count == null ? [] : [{ ...tile, value: numberFormat.value.format(count) }]
+}))
+</script>
+
+<template>
+  <WidgetCard :title="group.title" :icon="group.icon" :loading="loading && !stats" :failed="failed">
+    <div class="counts">
+      <button v-for="tile in tiles" :key="tile.key" type="button" class="counts__tile" @click="router.push(tile.to)">
+        <span class="counts__icon"><CoarIcon :name="tile.icon" size="s" /></span>
+        <span class="counts__value">{{ tile.value }}</span>
+        <span class="counts__label">{{ tile.label }}</span>
+        <span v-if="tile.note" class="counts__note">{{ tile.note }}</span>
+        <CoarIcon name="arrow-right" size="s" class="counts__arrow" />
+      </button>
+    </div>
+  </WidgetCard>
+</template>
+
+<style scoped>
+.counts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
+  gap: 0.75rem;
+}
+.counts__tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+  padding: 0.75rem;
+  border: 1px solid var(--coar-border-neutral-tertiary, rgba(0, 0, 0, 0.08));
+  border-radius: 0.5rem;
+  background: var(--coar-background-neutral-secondary, #f9fafb);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+.counts__tile:hover,
+.counts__tile:focus-visible {
+  border-color: var(--coar-accent, #1077be);
+}
+.counts__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin-bottom: 0.375rem;
+  border-radius: 0.5rem;
+  background: var(--coar-background-neutral-tertiary, rgba(0, 0, 0, 0.05));
+  color: var(--coar-text-neutral-secondary, #6b7280);
+}
+.counts__value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.1;
+}
+.counts__label,
+.counts__note {
+  font-size: 0.8125rem;
+  color: var(--coar-text-neutral-secondary, #6b7280);
+}
+.counts__note {
+  font-size: 0.75rem;
+}
+.counts__arrow {
+  position: absolute;
+  top: 0.625rem;
+  right: 0.625rem;
+  opacity: 0;
+  color: var(--coar-text-neutral-secondary, #9ca3af);
+  transition: opacity 0.15s ease;
+}
+.counts__tile:hover .counts__arrow,
+.counts__tile:focus-visible .counts__arrow {
+  opacity: 1;
+}
+</style>
diff --git a/src/frontend-vue/src/views/dashboard/widgets/LoginMethodsWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/LoginMethodsWidget.vue
new file mode 100644
index 00000000..c63d13d6
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/widgets/LoginMethodsWidget.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from '@cocoar/vue-localization'
+import { useDashboardStats } from '../dashboardStats'
+import DonutChart, { type DonutSegment } from '../charts/DonutChart.vue'
+import WidgetCard from './WidgetCard.vue'
+
+const { t, language } = useI18n()
+const { stats, loading, failed } = useDashboardStats()
+
+// Colour follows the method, never its rank — a method keeps its colour whether
+// or not the others occur. Codes are ModgudMeters.LoginMethod on the backend.
+const METHODS: Record<string, { color: string; en: string }> = {
+  password: { color: 'var(--chart-series-1)', en: 'Password' },
+  passkey: { color: 'var(--chart-series-2)', en: 'Passkey' },
+  external: { color: 'var(--chart-series-3)', en: 'External provider' },
+  magic_link: { color: 'var(--chart-series-4)', en: 'Login link' },
+  email_otp: { color: 'var(--chart-series-5)', en: 'E-mail code' },
+  mfa: { color: 'var(--chart-series-6)', en: 'With second factor' },
+}
+
+const logins = computed(() => stats.value?.Logins ?? null)
+
+const segments = computed<DonutSegment[]>(() => {
+  const known: DonutSegment[] = []
+  let other = 0
+  for (const { Method, Count } of logins.value?.Methods ?? []) {
+    const spec = METHODS[Method]
+    if (!spec) { other += Count; continue }
+    known.push({
+      key: Method,
+      label: t(`dashboard.loginMethods.method.${Method}`, {}, spec.en),
+      value: Count,
+      color: spec.color,
+    })
+  }
+  if (other > 0) {
+    known.push({
+      key: 'other',
+      label: t('dashboard.loginMethods.method.other', {}, 'Other'),
+      value: other,
+      color: 'var(--chart-series-other)',
+    })
+  }
+  return known
+})
+
+const title = computed(() => t('dashboard.loginMethods.title', {}, 'Sign-in methods'))
+</script>
+
+<template>
+  <WidgetCard
+    :title="title"
+    icon="key-round"
+    :subtitle="logins ? t('dashboard.loginMethods.subtitle', { n: logins.Days }, 'Successful sign-ins, last {n} days') : undefined"
+    :loading="loading && !stats"
+    :failed="failed"
+    :empty="logins && segments.length === 0 ? t('dashboard.loginMethods.none', {}, 'No sign-ins in this period.') : null"
+  >
+    <DonutChart
+      v-if="logins"
+      :segments="segments"
+      :total-label="t('dashboard.loginMethods.total', {}, 'sign-ins')"
+      :locale="language"
+      :label="title"
+    />
+  </WidgetCard>
+</template>
diff --git a/src/frontend-vue/src/views/dashboard/widgets/LoginProvidersWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/LoginProvidersWidget.vue
new file mode 100644
index 00000000..ce06254b
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/widgets/LoginProvidersWidget.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from '@cocoar/vue-localization'
+import { CoarTag } from '@cocoar/vue-ui'
+import { useLoginProviderStore } from '@/stores/loginProvider.store'
+import WidgetCard from './WidgetCard.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const store = useLoginProviderStore()
+
+const loading = ref(true)
+const failed = ref(false)
+const providers = computed(() => store.providers)
+
+onMounted(async () => {
+  try {
+    await store.loadAll()
+  } catch {
+    failed.value = true
+  } finally {
+    loading.value = false
+  }
+})
+
+// The provider detail is a URL-fragment modal on the list page — the id in the
+// hash opens it on arrival.
+function open(id: string) {
+  router.push({ path: '/admin/login-providers', hash: `#${id}` })
+}
+</script>
+
+<template>
+  <WidgetCard
+    :title="t('dashboard.loginProviderStatus.title', {}, 'Login providers')"
+    icon="log-in"
+    :loading="loading"
+    :failed="failed"
+    :empty="providers.length === 0 ? t('dashboard.loginProviderStatus.none', {}, 'No providers configured.') : null"
+    :cta="t('dashboard.loginProviderStatus.cta', {}, 'Manage →')"
+    @open="router.push('/admin/login-providers')"
+  >
+    <button v-for="p in providers" :key="p.Id" type="button" class="widget-row" @click="open(p.Id)">
+      <span class="widget-row__label"><span class="widget-row__title">{{ p.DisplayName }}</span></span>
+      <span class="widget-row__meta">
+        <CoarTag :variant="p.Enabled ? 'success' : 'neutral'" size="s">
+          {{ p.Enabled
+            ? t('dashboard.loginProviderStatus.enabled', {}, 'Enabled')
+            : t('dashboard.loginProviderStatus.disabled', {}, 'Disabled') }}
+        </CoarTag>
+        <CoarTag v-if="p.Type === 'Internal'" variant="neutral" size="s">
+          {{ t('dashboard.loginProviderStatus.system', {}, 'System') }}
+        </CoarTag>
+        <CoarTag v-else variant="info" size="s">{{ p.Flavor }}</CoarTag>
+      </span>
+    </button>
+  </WidgetCard>
+</template>
diff --git a/src/frontend-vue/src/views/dashboard/widgets/LoginsChartWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/LoginsChartWidget.vue
new file mode 100644
index 00000000..32e86ec6
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/widgets/LoginsChartWidget.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from '@cocoar/vue-localization'
+import { useDashboardStats } from '../dashboardStats'
+import TrendChart, { type TrendSeries } from '../charts/TrendChart.vue'
+import WidgetCard from './WidgetCard.vue'
+
+const { t, language } = useI18n()
+const router = useRouter()
+const { stats, loading, failed } = useDashboardStats()
+
+const logins = computed(() => stats.value?.Logins ?? null)
+const numberFormat = computed(() => new Intl.NumberFormat(language.value))
+
+const title = computed(() => t('dashboard.logins.title', {}, 'Sign-ins'))
+
+const succeededLabel = computed(() => t('dashboard.logins.succeeded', {}, 'Successful'))
+const failedLabel = computed(() => t('dashboard.logins.failed', {}, 'Failed'))
+
+const series = computed<TrendSeries[]>(() => [
+  {
+    key: 'succeeded',
+    label: succeededLabel.value,
+    color: 'var(--chart-series-1)',
+    values: logins.value?.Series.map(d => d.Succeeded) ?? [],
+    area: true,
+  },
+  {
+    key: 'failed',
+    label: failedLabel.value,
+    color: 'var(--chart-series-2)',
+    values: logins.value?.Series.map(d => d.Failed) ?? [],
+  },
+])
+</script>
+
+<template>
+  <WidgetCard
+    :title="title"
+    icon="activity"
+    :subtitle="logins ? t('dashboard.logins.subtitle', { n: logins.Days }, 'Known accounts, last {n} days') : undefined"
+    :loading="loading && !stats"
+    :failed="failed"
+    :cta="t('dashboard.logins.cta', {}, 'Open audit log →')"
+    @open="router.push('/admin/logs')"
+  >
+    <template v-if="logins" #aside>
+      <div class="logins__totals">
+        <span><strong>{{ numberFormat.format(logins.Succeeded) }}</strong> {{ succeededLabel }}</span>
+        <span><strong>{{ numberFormat.format(logins.Failed) }}</strong> {{ failedLabel }}</span>
+      </div>
+    </template>
+
+    <TrendChart
+      v-if="logins"
+      :days="logins.Series.map(d => d.Day)"
+      :series="series"
+      :locale="language"
+      :label="title"
+    />
+  </WidgetCard>
+</template>
+
+<style scoped>
+.logins__totals {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0 1rem;
+  font-size: 0.8125rem;
+  color: var(--coar-text-neutral-secondary, #6b7280);
+}
+.logins__totals strong {
+  font-weight: 700;
+  color: var(--coar-text-neutral-primary, #111827);
+}
+</style>
diff --git a/src/frontend-vue/src/views/dashboard/widgets/MySessionsWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/MySessionsWidget.vue
new file mode 100644
index 00000000..0cdcbc4e
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/widgets/MySessionsWidget.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from '@cocoar/vue-localization'
+import { CoarTag } from '@cocoar/vue-ui'
+import { useHttpClient } from '@/composables/useHttpClient'
+import type { ClientSessionDto, SessionDto, SessionListDto } from '@/models/session'
+import { useRelativeTime } from '../relativeTime'
+import WidgetCard from './WidgetCard.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const relativeTime = useRelativeTime()
+
+type Row = (SessionDto & { Kind: 'Browser' }) | (ClientSessionDto & { Kind: 'Client' })
+
+const rows = ref<Row[]>([])
+const loading = ref(true)
+const failed = ref(false)
+
+onMounted(async () => {
+  try {
+    const res = await useHttpClient('/api/auth/sessions').get<SessionListDto>()
+    rows.value = [
+      ...(res.Sessions ?? []).map(s => ({ ...s, Kind: 'Browser' as const })),
+      ...(res.ClientSessions ?? []).map(s => ({ ...s, Kind: 'Client' as const })),
+    ].sort((a, b) => new Date(b.LastActiveAt).getTime() - new Date(a.LastActiveAt).getTime())
+  } catch {
+    failed.value = true
+  } finally {
+    loading.value = false
+  }
+})
+
+const top = computed(() => rows.value.slice(0, 3))
+const extra = computed(() => Math.max(0, rows.value.length - 3))
+
+function label(s: Row): string {
+  if (s.Kind === 'Client') return s.ClientDisplayName || s.ClientId
+  const browser = s.Browser || t('dashboard.sessions.unknownBrowser', {}, 'Browser')
+  const os = s.OperatingSystem || s.DeviceType || t('dashboard.sessions.unknownDevice', {}, 'unknown device')
+  return t('dashboard.sessions.deviceLabel', { browser, os }, '{browser} on {os}')
+}
+</script>
+
+<template>
+  <WidgetCard
+    :title="t('dashboard.sessions.title', {}, 'Active sessions')"
+    icon="monitor"
+    :loading="loading"
+    :failed="failed"
+    :empty="rows.length === 0 ? t('dashboard.sessions.none', {}, 'No sessions.') : null"
+    :cta="t('dashboard.sessions.cta', {}, 'Manage sessions →')"
+    @open="router.push('/profile')"
+  >
+    <button
+      v-for="s in top" :key="s.Id"
+      type="button" class="widget-row"
+      :class="{ 'widget-row--strong': s.Kind === 'Browser' && s.IsCurrent }"
+      @click="router.push('/profile')"
+    >
+      <span class="widget-row__label"><span class="widget-row__title">{{ label(s) }}</span></span>
+      <span class="widget-row__meta">
+        <CoarTag v-if="s.Kind === 'Browser' && s.IsCurrent" variant="success" size="s">
+          {{ t('dashboard.sessions.thisDevice', {}, 'This device') }}
+        </CoarTag>
+        <CoarTag v-else-if="s.Kind === 'Client'" variant="neutral" size="s">
+          {{ t('dashboard.sessions.app', {}, 'App') }}
+        </CoarTag>
+        <CoarTag variant="neutral" size="s">{{ relativeTime(s.LastActiveAt) }}</CoarTag>
+      </span>
+    </button>
+    <div v-if="extra > 0" class="widget-row__more">
+      {{ t('dashboard.sessions.more', { n: extra }, '+{n} more') }}
+    </div>
+  </WidgetCard>
+</template>
diff --git a/src/frontend-vue/src/views/dashboard/widgets/RecentActivityWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/RecentActivityWidget.vue
new file mode 100644
index 00000000..bc334db7
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/widgets/RecentActivityWidget.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from '@cocoar/vue-localization'
+import { CoarTag } from '@cocoar/vue-ui'
+import { useHttpClient } from '@/composables/useHttpClient'
+import { useRelativeTime } from '../relativeTime'
+import WidgetCard from './WidgetCard.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const relativeTime = useRelativeTime()
+
+// The fields this widget reads from RealmSecurityLogDto (AuthLogEndpoints.cs).
+interface SecurityLogRow {
+  Id: string
+  Timestamp: string
+  Severity: 'Info' | 'Warning' | 'Error'
+  Actor: string
+  Message: string
+}
+
+const rows = ref<SecurityLogRow[]>([])
+const loading = ref(true)
+const failed = ref(false)
+
+onMounted(async () => {
+  try {
+    rows.value = await useHttpClient('/api/admin/auth-log').setQueryParameter('limit', '8').get<SecurityLogRow[]>()
+  } catch {
+    failed.value = true
+  } finally {
+    loading.value = false
+  }
+})
+
+function variant(severity: SecurityLogRow['Severity']): 'neutral' | 'warning' | 'error' {
+  return severity === 'Error' ? 'error' : severity === 'Warning' ? 'warning' : 'neutral'
+}
+</script>
+
+<template>
+  <WidgetCard
+    :title="t('dashboard.systemActivity.title', {}, 'Recent security events')"
+    icon="scroll-text"
+    :loading="loading"
+    :failed="failed"
+    :empty="rows.length === 0 ? t('dashboard.systemActivity.none', {}, 'No events yet.') : null"
+    :cta="t('dashboard.systemActivity.cta', {}, 'View all →')"
+    @open="router.push('/admin/logs')"
+  >
+    <button
+      v-for="row in rows" :key="row.Id"
+      type="button" class="widget-row" :class="{ 'widget-row--strong': row.Severity === 'Error' }"
+      @click="router.push('/admin/logs')"
+    >
+      <span class="widget-row__label">
+        <span class="widget-row__title">{{ row.Message }}</span>
+        <span class="widget-row__sub">{{ row.Actor }}</span>
+      </span>
+      <span class="widget-row__meta">
+        <CoarTag :variant="variant(row.Severity)" size="s">{{ relativeTime(row.Timestamp) }}</CoarTag>
+      </span>
+    </button>
+  </WidgetCard>
+</template>
diff --git a/src/frontend-vue/src/views/dashboard/widgets/SecurityEventsWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/SecurityEventsWidget.vue
new file mode 100644
index 00000000..945c2e60
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/widgets/SecurityEventsWidget.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from '@cocoar/vue-localization'
+import { CoarIcon } from '@cocoar/vue-ui'
+import { useDashboardStats } from '../dashboardStats'
+import DonutChart, { type DonutSegment } from '../charts/DonutChart.vue'
+import WidgetCard from './WidgetCard.vue'
+
+const { t, language } = useI18n()
+const router = useRouter()
+const { stats, loading, failed } = useDashboardStats()
+
+const security = computed(() => stats.value?.Security ?? null)
+const numberFormat = computed(() => new Intl.NumberFormat(language.value))
+
+// Severity is a state, so it wears the reserved status colours — and an icon,
+// because colour alone must not carry it.
+const ICONS: Record<string, string> = { error: 'x-circle', warning: 'triangle-alert', info: 'info' }
+
+const segments = computed<DonutSegment[]>(() => {
+  const s = security.value
+  if (!s) return []
+  return [
+    { key: 'error', label: t('dashboard.securityEvents.error', {}, 'Errors'), value: s.Error, color: 'var(--chart-status-critical)' },
+    { key: 'warning', label: t('dashboard.securityEvents.warning', {}, 'Warnings'), value: s.Warning, color: 'var(--chart-status-warning)' },
+    { key: 'info', label: t('dashboard.securityEvents.info', {}, 'Informational'), value: s.Info, color: 'var(--chart-status-neutral)' },
+  ]
+})
+
+const total = computed(() => segments.value.reduce((sum, s) => sum + s.value, 0))
+
+/** "security.login_failed_unknown_user" → "Login failed unknown user", unless translated. */
+function eventLabel(code: string): string {
+  const words = code.slice(code.indexOf('.') + 1).replace(/_/g, ' ')
+  return t(`dashboard.securityEvents.type.${code}`, {}, words.charAt(0).toUpperCase() + words.slice(1))
+}
+
+const title = computed(() => t('dashboard.securityEvents.title', {}, 'Security events'))
+</script>
+
+<template>
+  <WidgetCard
+    :title="title"
+    icon="shield-alert"
+    :subtitle="security ? t('dashboard.securityEvents.subtitle', { n: security.Days }, 'Last {n} days') : undefined"
+    :loading="loading && !stats"
+    :failed="failed"
+    :empty="security && total === 0 ? t('dashboard.securityEvents.none', {}, 'No security events in this period.') : null"
+    :cta="t('dashboard.securityEvents.cta', {}, 'Open security log →')"
+    @open="router.push('/admin/logs')"
+  >
+    <template v-if="security">
+      <DonutChart
+        :segments="segments"
+        :total-label="t('dashboard.securityEvents.total', {}, 'events')"
+        :locale="language"
+        :label="title"
+      >
+        <template #label="{ segment }">
+          <CoarIcon :name="ICONS[segment.key]" size="s" />
+          {{ segment.label }}
+        </template>
+      </DonutChart>
+
+      <div v-if="security.TopEventTypes.length" class="top-events">
+        <div class="top-events__heading">
+          {{ t('dashboard.securityEvents.top', {}, 'Most frequent warnings and errors') }}
+        </div>
+        <div v-for="event in security.TopEventTypes" :key="event.EventType" class="top-events__row">
+          <span class="top-events__label">{{ eventLabel(event.EventType) }}</span>
+          <span class="top-events__count">{{ numberFormat.format(event.Count) }}</span>
+        </div>
+      </div>
+    </template>
+  </WidgetCard>
+</template>
+
+<style scoped>
+.top-events {
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--coar-border-neutral-tertiary, rgba(0, 0, 0, 0.08));
+  font-size: 0.8125rem;
+}
+.top-events__heading {
+  margin-bottom: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--coar-text-neutral-secondary, #6b7280);
+}
+.top-events__row {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.1875rem 0;
+}
+.top-events__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.top-events__count {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/src/frontend-vue/src/views/dashboard/widgets/StatKpiWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/StatKpiWidget.vue
new file mode 100644
index 00000000..3d99fdd0
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/widgets/StatKpiWidget.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from '@cocoar/vue-localization'
+import { useDashboardStats } from '../dashboardStats'
+import type { KpiTile, TileTone } from '../kpiTile'
+import KpiCard from '../KpiCard.vue'
+
+/** A single headline number from the dashboard statistics. */
+export type StatKpiKind = 'activeSessions' | 'failedLogins' | 'securityAttention' | 'pendingRequests'
+
+const props = defineProps<{ kind: StatKpiKind }>()
+
+const { t, language } = useI18n()
+const router = useRouter()
+const { stats, loading, failed } = useDashboardStats()
+
+interface Spec {
+  icon: string
+  tone: TileTone
+  caption: string
+  to: string
+  value: number | null | undefined
+  /** How a non-zero value reads; unset = just a number. */
+  nonZero?: 'warn' | 'bad'
+}
+
+const spec = computed<Spec>(() => {
+  switch (props.kind) {
+    case 'activeSessions':
+      return {
+        icon: 'monitor', tone: 'sky', to: '/admin/users',
+        caption: t('dashboard.kpi.realmSessions', {}, 'Active sessions in the realm'),
+        value: stats.value?.Counts.ActiveSessions,
+      }
+    case 'failedLogins':
+      return {
+        icon: 'shield-alert', tone: 'rose', to: '/admin/logs', nonZero: 'bad',
+        caption: t('dashboard.kpi.failedLast24h', {}, 'Failed sign-ins, 24 h'),
+        value: stats.value?.Logins?.FailedLast24h,
+      }
+    case 'securityAttention':
+      return {
+        icon: 'triangle-alert', tone: 'amber', to: '/admin/logs', nonZero: 'warn',
+        caption: t('dashboard.kpi.securityAttention', {}, 'Security events, 24 h'),
+        value: stats.value?.Security?.AttentionLast24h,
+      }
+    default:
+      return {
+        icon: 'inbox', tone: 'violet', to: '/admin/change-requests', nonZero: 'warn',
+        caption: t('dashboard.kpi.pendingChangeRequests', {}, 'Open requests'),
+        value: stats.value?.Counts.PendingChangeRequests,
+      }
+  }
+})
+
+const numberFormat = computed(() => new Intl.NumberFormat(language.value))
+
+const tile = computed<KpiTile>(() => {
+  const s = spec.value
+  const pending = loading.value && !stats.value
+  const value = s.value ?? null
+  return {
+    key: props.kind,
+    icon: s.icon,
+    tone: s.tone,
+    caption: s.caption,
+    loading: pending,
+    value: pending ? null : (failed.value || value === null ? '–' : numberFormat.value.format(value)),
+    bad: s.nonZero === 'bad' && (value ?? 0) > 0,
+    warn: s.nonZero === 'warn' && (value ?? 0) > 0,
+    onClick: () => router.push(s.to),
+  }
+})
+</script>
+
+<template>
+  <KpiCard :tile="tile" class="h-full" />
+</template>
diff --git a/src/frontend-vue/src/views/dashboard/widgets/WidgetCard.vue b/src/frontend-vue/src/views/dashboard/widgets/WidgetCard.vue
new file mode 100644
index 00000000..dffb20e0
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/widgets/WidgetCard.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { CoarCard, CoarIcon, CoarNotice, CoarSpinner } from '@cocoar/vue-ui'
+import { useI18n } from '@cocoar/vue-localization'
+
+/** The shared frame of a dashboard widget: heading, body states, footer link. */
+defineProps<{
+  title: string
+  icon: string
+  /** Quiet line under the heading — what the numbers cover. */
+  subtitle?: string
+  loading?: boolean
+  failed?: boolean
+  /** Shown instead of the body when there is nothing to show. */
+  empty?: string | null
+  /** Footer link label; emits `open` when clicked. */
+  cta?: string
+}>()
+
+defineEmits<{ open: [] }>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <CoarCard elevated class="widget-card">
+    <div class="widget-card__inner">
+      <header class="widget-card__header">
+        <h3 class="widget-card__title">
+          <CoarIcon :name="icon" size="s" />
+          {{ title }}
+        </h3>
+        <slot name="aside" />
+      </header>
+      <p v-if="subtitle" class="widget-card__subtitle">{{ subtitle }}</p>
+
+      <div class="widget-card__body">
+        <div v-if="loading" class="widget-card__state">
+          <CoarSpinner size="m" />
+        </div>
+        <CoarNotice v-else-if="failed" variant="error">
+          {{ t('dashboard.errors.loadFailed', {}, 'Failed to load the data.') }}
+        </CoarNotice>
+        <div v-else-if="empty" class="widget-card__state widget-card__state--empty">{{ empty }}</div>
+        <slot v-else />
+      </div>
+
+      <footer v-if="cta" class="widget-card__footer">
+        <button type="button" class="widget-card__cta" @click="$emit('open')">{{ cta }}</button>
+      </footer>
+    </div>
+  </CoarCard>
+</template>
+
+<style scoped>
+.widget-card {
+  height: 100%;
+}
+.widget-card__inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 1rem;
+}
+.widget-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.widget-card__title {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--coar-text-neutral-secondary, #6b7280);
+}
+.widget-card__subtitle {
+  margin: 0.125rem 0 0;
+  font-size: 0.75rem;
+  color: var(--coar-text-neutral-secondary, #6b7280);
+}
+.widget-card__body {
+  flex: 1;
+  min-width: 0;
+  margin-top: 0.75rem;
+}
+.widget-card__state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 4rem;
+}
+.widget-card__state--empty {
+  font-size: 0.875rem;
+  color: var(--coar-text-neutral-secondary, #9ca3af);
+  text-align: center;
+}
+.widget-card__footer {
+  margin-top: 0.75rem;
+}
+.widget-card__cta {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-size: 0.8125rem;
+  color: var(--coar-text-link, #2563eb);
+  cursor: pointer;
+}
+.widget-card__cta:hover {
+  text-decoration: underline;
+}
+
+/* Rows shared by the list-style widgets. */
+:deep(.widget-row) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: none;
+  color: inherit;
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+:deep(.widget-row:hover) {
+  background-color: var(--coar-background-neutral-tertiary, rgba(0, 0, 0, 0.04));
+}
+:deep(.widget-row--strong .widget-row__label) {
+  font-weight: 600;
+}
+:deep(.widget-row__label) {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  overflow: hidden;
+}
+:deep(.widget-row__title) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:deep(.widget-row__sub) {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  color: var(--coar-text-neutral-secondary, #6b7280);
+}
+:deep(.widget-row__meta) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+  font-size: 0.75rem;
+}
+:deep(.widget-row__more) {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  color: var(--coar-text-neutral-secondary, #9ca3af);
+}
+</style>
diff --git a/src/frontend-vue/src/views/dashboard/widgets/registry.ts b/src/frontend-vue/src/views/dashboard/widgets/registry.ts
new file mode 100644
index 00000000..badd118c
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/widgets/registry.ts
@@ -0,0 +1,138 @@
+import type { WidgetDefinition, WidgetPlacement } from '../layout'
+import AccountSecurityWidget from './AccountSecurityWidget.vue'
+import CountsWidget from './CountsWidget.vue'
+import LoginMethodsWidget from './LoginMethodsWidget.vue'
+import LoginProvidersWidget from './LoginProvidersWidget.vue'
+import LoginsChartWidget from './LoginsChartWidget.vue'
+import MySessionsWidget from './MySessionsWidget.vue'
+import RecentActivityWidget from './RecentActivityWidget.vue'
+import SecurityEventsWidget from './SecurityEventsWidget.vue'
+import StatKpiWidget from './StatKpiWidget.vue'
+
+/**
+ * Every widget the dashboard can show. Ids are persisted in stored layouts —
+ * never rename one; a removed id simply drops out of the layouts that name it.
+ * `requirePermissions` mirrors the backend strings exactly.
+ */
+export const WIDGETS: WidgetDefinition[] = [
+  // ── Personal — every signed-in user ──────────────────────────────────
+  {
+    id: 'account-security',
+    titleKey: 'dashboard.security.title', titleEn: 'Account security', icon: 'shield-check',
+    requirePermissions: [],
+    sizes: ['m', 'l', 'xl', 'full'], defaultSize: 'l',
+    component: AccountSecurityWidget,
+  },
+  {
+    id: 'my-sessions',
+    titleKey: 'dashboard.sessions.title', titleEn: 'Active sessions', icon: 'monitor',
+    requirePermissions: [],
+    sizes: ['m', 'l', 'xl', 'full'], defaultSize: 'l',
+    component: MySessionsWidget,
+  },
+
+  // ── Realm operations — each gated on what backs its data ─────────────
+  {
+    id: 'kpi-active-sessions',
+    titleKey: 'dashboard.kpi.realmSessions', titleEn: 'Active sessions in the realm', icon: 'monitor',
+    requirePermissions: ['session:read'],
+    sizes: ['xs', 's', 'm'], defaultSize: 's',
+    component: StatKpiWidget, props: { kind: 'activeSessions' },
+  },
+  {
+    id: 'kpi-failed-logins',
+    titleKey: 'dashboard.kpi.failedLast24h', titleEn: 'Failed sign-ins, 24 h', icon: 'shield-alert',
+    requirePermissions: ['audit-log:read'],
+    sizes: ['xs', 's', 'm'], defaultSize: 's',
+    component: StatKpiWidget, props: { kind: 'failedLogins' },
+  },
+  {
+    id: 'kpi-security-attention',
+    titleKey: 'dashboard.kpi.securityAttention', titleEn: 'Security events, 24 h', icon: 'triangle-alert',
+    requirePermissions: ['auth-log:read'],
+    sizes: ['xs', 's', 'm'], defaultSize: 's',
+    component: StatKpiWidget, props: { kind: 'securityAttention' },
+  },
+  {
+    id: 'kpi-pending-requests',
+    titleKey: 'dashboard.kpi.pendingChangeRequests', titleEn: 'Open requests', icon: 'inbox',
+    requirePermissions: ['user:write'],
+    sizes: ['xs', 's', 'm'], defaultSize: 's',
+    component: StatKpiWidget, props: { kind: 'pendingRequests' },
+  },
+  {
+    id: 'logins-chart',
+    titleKey: 'dashboard.logins.title', titleEn: 'Sign-ins', icon: 'activity',
+    requirePermissions: ['audit-log:read'],
+    sizes: ['l', 'xl', 'full'], defaultSize: 'xl',
+    component: LoginsChartWidget,
+  },
+  {
+    id: 'login-methods',
+    titleKey: 'dashboard.loginMethods.title', titleEn: 'Sign-in methods', icon: 'key-round',
+    requirePermissions: ['audit-log:read'],
+    sizes: ['m', 'l'], defaultSize: 'm',
+    component: LoginMethodsWidget,
+  },
+  {
+    id: 'directory',
+    titleKey: 'dashboard.directory.title', titleEn: 'Directory', icon: 'users',
+    requirePermissions: ['user:read', 'service-account:read', 'authorization-group:read', 'permission-role:read'],
+    sizes: ['m', 'l', 'xl', 'full'], defaultSize: 'l',
+    component: CountsWidget, props: { group: 'directory' },
+  },
+  {
+    id: 'applications',
+    titleKey: 'dashboard.applications.title', titleEn: 'Applications & sign-in', icon: 'layout-grid',
+    requirePermissions: ['app:read', 'oauth-client:read', 'login-provider:read'],
+    sizes: ['m', 'l', 'xl', 'full'], defaultSize: 'l',
+    component: CountsWidget, props: { group: 'applications' },
+  },
+  {
+    id: 'security-events',
+    titleKey: 'dashboard.securityEvents.title', titleEn: 'Security events', icon: 'shield-alert',
+    requirePermissions: ['auth-log:read'],
+    sizes: ['m', 'l'], defaultSize: 'm',
+    component: SecurityEventsWidget,
+  },
+  {
+    id: 'recent-activity',
+    titleKey: 'dashboard.systemActivity.title', titleEn: 'Recent security events', icon: 'scroll-text',
+    requirePermissions: ['auth-log:read'],
+    sizes: ['l', 'xl', 'full'], defaultSize: 'xl',
+    component: RecentActivityWidget,
+  },
+  {
+    id: 'login-providers',
+    titleKey: 'dashboard.loginProviderStatus.title', titleEn: 'Login providers', icon: 'log-in',
+    requirePermissions: ['login-provider:read'],
+    sizes: ['m', 'l', 'xl'], defaultSize: 'l',
+    component: LoginProvidersWidget,
+  },
+]
+
+export const WIDGET_CATALOG = new Map(WIDGETS.map(w => [w.id, w]))
+
+/**
+ * What a realm shows before anyone arranged anything — the last of the three
+ * layers (own layout → realm default → this). Rows on the 12-column grid add up
+ * for a viewer who sees everything; with fewer permissions the rest closes ranks.
+ */
+export const BUILT_IN_LAYOUT: WidgetPlacement[] = [
+  { Widget: 'account-security', Size: 'l' },
+  { Widget: 'my-sessions', Size: 'l' },
+
+  { Widget: 'kpi-active-sessions', Size: 's' },
+  { Widget: 'kpi-failed-logins', Size: 's' },
+  { Widget: 'kpi-security-attention', Size: 's' },
+  { Widget: 'kpi-pending-requests', Size: 's' },
+
+  { Widget: 'logins-chart', Size: 'xl' },
+  { Widget: 'login-methods', Size: 'm' },
+
+  { Widget: 'directory', Size: 'l' },
+  { Widget: 'applications', Size: 'l' },
+
+  { Widget: 'security-events', Size: 'm' },
+  { Widget: 'recent-activity', Size: 'xl' },
+]

From 8068efe85936658e265f09c48c09e1a1a5f078d9 Mon Sep 17 00:00:00 2001
From: Bernhard Windisch <bwi@cocoar.dev>
Date: Sat, 10 Oct 2026 15:47:13 +0200
Subject: [PATCH 2/4] fix(dashboard): count tiles one step lighter than their
 card; donut legend drops below the ring when narrow

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/views/dashboard/charts/DonutChart.vue            | 2 +-
 .../src/views/dashboard/widgets/CountsWidget.vue         | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/frontend-vue/src/views/dashboard/charts/DonutChart.vue b/src/frontend-vue/src/views/dashboard/charts/DonutChart.vue
index 84020922..69a987e0 100644
--- a/src/frontend-vue/src/views/dashboard/charts/DonutChart.vue
+++ b/src/frontend-vue/src/views/dashboard/charts/DonutChart.vue
@@ -143,7 +143,7 @@ const active = ref<string | null>(null)
 }
 
 .donut__legend {
-  flex: 1 1 9rem;
+  flex: 1 1 15rem;
   min-width: 0;
   margin: 0;
   padding: 0;
diff --git a/src/frontend-vue/src/views/dashboard/widgets/CountsWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/CountsWidget.vue
index de055f16..2983b2e0 100644
--- a/src/frontend-vue/src/views/dashboard/widgets/CountsWidget.vue
+++ b/src/frontend-vue/src/views/dashboard/widgets/CountsWidget.vue
@@ -94,15 +94,18 @@ const tiles = computed(() => group.value.tiles.flatMap(tile => {
   padding: 0.75rem;
   border: 1px solid var(--coar-border-neutral-tertiary, rgba(0, 0, 0, 0.08));
   border-radius: 0.5rem;
-  background: var(--coar-background-neutral-secondary, #f9fafb);
+  /* One step lighter than the card it sits on, so the tile reads as a surface
+     of its own rather than an outline. */
+  background: var(--coar-background-neutral-primary, #ffffff);
   color: inherit;
   text-align: left;
   cursor: pointer;
-  transition: border-color 0.15s ease;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 .counts__tile:hover,
 .counts__tile:focus-visible {
   border-color: var(--coar-accent, #1077be);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 .counts__icon {
   display: flex;
@@ -112,7 +115,7 @@ const tiles = computed(() => group.value.tiles.flatMap(tile => {
   height: 1.75rem;
   margin-bottom: 0.375rem;
   border-radius: 0.5rem;
-  background: var(--coar-background-neutral-tertiary, rgba(0, 0, 0, 0.05));
+  background: var(--coar-background-neutral-secondary, rgba(0, 0, 0, 0.05));
   color: var(--coar-text-neutral-secondary, #6b7280);
 }
 .counts__value {

From 564f279ca30231bc74053e453b781d5cb17ff8ee Mon Sep 17 00:00:00 2001
From: Bernhard Windisch <bwi@cocoar.dev>
Date: Sat, 10 Oct 2026 16:03:59 +0200
Subject: [PATCH 3/4] feat(dashboard): per-widget settings, more counts and two
 personal widgets

- A placement can carry options (option key -> chosen values). In edit mode a
  gear opens the widget's settings: which counts the directory and
  applications widgets show, how many rows the list widgets show.
- Counts for positions (behind the PositionTerminals feature), OAuth APIs and
  OAuth scopes, each behind the permission of its list.
- GET /api/dashboard/my-apps: the clients the caller holds a valid
  authorization with, one row per client.
- New personal widgets "My apps" and "My passkeys".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Dashboard/DashboardEndpointsTests.cs      | 79 ++++++++++++++-
 .../Features/Dashboard/DashboardEndpoints.cs  | 98 ++++++++++++++++++
 .../Dashboard/DashboardLayout.cs              | 16 ++-
 src/frontend-vue/public/i18n/de.json          | 18 +++-
 .../src/views/dashboard/DashboardView.vue     | 99 ++++++++++++++++++-
 .../src/views/dashboard/dashboardStats.ts     |  3 +
 .../src/views/dashboard/layout.ts             | 45 +++++++++
 .../views/dashboard/widgets/CountsWidget.vue  | 22 ++++-
 .../views/dashboard/widgets/MyAppsWidget.vue  | 73 ++++++++++++++
 .../dashboard/widgets/MyPasskeysWidget.vue    | 38 +++++++
 .../dashboard/widgets/MySessionsWidget.vue    |  8 +-
 .../widgets/RecentActivityWidget.vue          | 12 ++-
 .../src/views/dashboard/widgets/registry.ts   | 78 +++++++++++++--
 13 files changed, 563 insertions(+), 26 deletions(-)
 create mode 100644 src/frontend-vue/src/views/dashboard/widgets/MyAppsWidget.vue
 create mode 100644 src/frontend-vue/src/views/dashboard/widgets/MyPasskeysWidget.vue

diff --git a/src/dotnet/Modgud.Api.Tests/Dashboard/DashboardEndpointsTests.cs b/src/dotnet/Modgud.Api.Tests/Dashboard/DashboardEndpointsTests.cs
index 1eb5625c..2347986b 100644
--- a/src/dotnet/Modgud.Api.Tests/Dashboard/DashboardEndpointsTests.cs
+++ b/src/dotnet/Modgud.Api.Tests/Dashboard/DashboardEndpointsTests.cs
@@ -4,6 +4,8 @@
 using Modgud.Api.Tests.Infrastructure;
 using Modgud.Authentication.Audit;
 using Modgud.Domain.Dashboard;
+using Modgud.Domain.OAuth.Applications;
+using Modgud.Domain.OAuth.Storage;
 using Modgud.Infrastructure.Audit;
 
 namespace Modgud.Api.Tests.Dashboard;
@@ -136,7 +138,7 @@ public async Task Stats_withhold_every_block_the_caller_has_no_permission_for()
         var stats = await plain.GetFromJsonAsync<DashboardStatsDto>("/api/dashboard/stats", ct);
 
         Assert.NotNull(stats);
-        Assert.Equal(new DashboardCountsDto(null, null, null, null, null, null, null, null, null, null), stats!.Counts);
+        Assert.Equal(new DashboardCountsDto(null, null, null, null, null, null, null, null, null, null, null, null, null), stats!.Counts);
         Assert.Null(stats.Logins);
         Assert.Null(stats.Security);
     }
@@ -195,6 +197,71 @@ public async Task Realm_default_needs_realm_settings_write_and_reaches_every_use
         Assert.Null((await plain.GetFromJsonAsync<DashboardLayoutsDto>("/api/dashboard/layout", ct))!.RealmDefault);
     }
 
+    [Fact]
+    public async Task Layout_keeps_a_widgets_options()
+    {
+        var ct = TestContext.Current.CancellationToken;
+        var body = new SaveDashboardLayoutDto(
+        [
+            new DashboardWidgetPlacement("directory", "l", new() { ["show"] = ["Users", "Positions"] }),
+            new DashboardWidgetPlacement("my-sessions", "m"),
+        ]);
+
+        Assert.Equal(HttpStatusCode.NoContent, (await Client.PutAsJsonAsync("/api/dashboard/layout", body, ct)).StatusCode);
+
+        var stored = (await Client.GetFromJsonAsync<DashboardLayoutsDto>("/api/dashboard/layout", ct))!.User!;
+        Assert.Equal(["Users", "Positions"], stored[0].Options!["show"]);
+        Assert.Null(stored[1].Options);
+    }
+
+    [Theory]
+    [InlineData("show me", "Users")]
+    [InlineData("show", "<script>")]
+    public async Task Layout_rejects_malformed_options(string key, string value)
+    {
+        var ct = TestContext.Current.CancellationToken;
+        var body = new SaveDashboardLayoutDto(
+            [new DashboardWidgetPlacement("directory", "l", new() { [key] = [value] })]);
+
+        var response = await Client.PutAsJsonAsync("/api/dashboard/layout", body, ct);
+
+        Assert.Equal(HttpStatusCode.BadRequest, response.StatusCode);
+    }
+
+    [Fact]
+    public async Task My_apps_lists_only_the_callers_own_valid_grants_one_row_per_client()
+    {
+        var ct = TestContext.Current.CancellationToken;
+        var other = await Factory.CreateTestUserWithIdentityAsync("Plain", "Person", "PP", "pp@test.com");
+        var app = new Modgud.Authorization.Apps.App { Id = Guid.NewGuid(), Slug = "notes", DisplayName = "Notes" };
+        var client = new OAuthApplicationState
+        {
+            Id = Guid.NewGuid(), ClientId = "notes-web", DisplayName = "Notes Web", AppIds = [app.Id],
+        };
+        var bare = new OAuthApplicationState { Id = Guid.NewGuid(), ClientId = "cli-tool" };
+        var now = DateTimeOffset.UtcNow;
+
+        await using (var session = GetTenantedDocumentSession())
+        {
+            session.Store(app);
+            session.Store(client, bare);
+            session.Store(
+                Grant(DefaultUser!.Id, client.Id, now.AddDays(-9)),
+                Grant(DefaultUser.Id, client.Id, now.AddDays(-1)),
+                Grant(DefaultUser.Id, bare.Id, now.AddDays(-3)),
+                Grant(DefaultUser.Id, bare.Id, now.AddDays(-2), status: "revoked"),
+                Grant(other.Id, client.Id, now));
+            await session.SaveChangesAsync(ct);
+        }
+
+        var mine = await Client.GetFromJsonAsync<List<MyAppDto>>("/api/dashboard/my-apps", ct);
+
+        Assert.Equal(["Notes Web", "cli-tool"], mine!.Select(m => m.Name));
+        Assert.Equal("Notes", mine[0].AppName);
+        Assert.Null(mine[1].AppName);
+        Assert.True(mine[0].FirstAuthorizedAt < mine[0].LastAuthorizedAt);
+    }
+
     [Theory]
     [InlineData("logins-chart", "huge")]
     [InlineData("Not A Widget", "m")]
@@ -226,6 +293,16 @@ public async Task Layout_rejects_the_same_widget_twice()
     private static SaveDashboardLayoutDto Layout(params (string Widget, string Size)[] widgets) =>
         new(widgets.Select(w => new DashboardWidgetPlacement(w.Widget, w.Size)).ToList());
 
+    private static OpenIddictAuthorizationDocument Grant(
+        Guid user, Guid client, DateTimeOffset at, string status = "valid") => new()
+    {
+        ApplicationId = client.ToString(),
+        Subject = user.ToString(),
+        Status = status,
+        Type = "permanent",
+        CreationDate = at,
+    };
+
     private static AuthAuditView Login(DateTimeOffset at, string method) =>
         Audit(at, AuditEvents.LoginSucceeded) with { Method = method };
 
diff --git a/src/dotnet/Modgud.Api/Features/Dashboard/DashboardEndpoints.cs b/src/dotnet/Modgud.Api/Features/Dashboard/DashboardEndpoints.cs
index 9fff51ad..d70e1921 100644
--- a/src/dotnet/Modgud.Api/Features/Dashboard/DashboardEndpoints.cs
+++ b/src/dotnet/Modgud.Api/Features/Dashboard/DashboardEndpoints.cs
@@ -12,7 +12,10 @@
 using Modgud.Authorization.Roles;
 using Modgud.Authorization.Services;
 using Modgud.Domain.Dashboard;
+using Modgud.Domain.OAuth.Apis;
 using Modgud.Domain.OAuth.Applications;
+using Modgud.Domain.OAuth.Scopes;
+using Modgud.Domain.OAuth.Storage;
 using Modgud.Domain.Realms;
 using Modgud.Infrastructure.Audit;
 using Modgud.Infrastructure.Persistence.Marten.Projections.Users;
@@ -44,6 +47,7 @@ public static WebApplication MapDashboardEndpoints(this WebApplication app, stri
             .RequireAuthorization();
 
         group.MapGet("stats", GetStatsAsync).WithName("Dashboard_Stats");
+        group.MapGet("my-apps", GetMyAppsAsync).WithName("Dashboard_MyApps");
 
         // ── Layout: the caller's own arrangement ─────────────────────────
         group.MapGet("layout", async (HttpContext http, IQuerySession session, CancellationToken ct) =>
@@ -142,6 +146,27 @@ private static async Task<IResult> DeleteAsync(IDocumentSession session, string
                 return $"Size must be one of: {string.Join(", ", DashboardWidgetPlacement.Sizes.Order())}.";
             if (!seen.Add(placement.Widget))
                 return $"Widget '{placement.Widget}' is listed twice.";
+            if (ValidateOptions(placement.Options) is { } optionProblem)
+                return optionProblem;
+        }
+
+        return null;
+    }
+
+    private static string? ValidateOptions(Dictionary<string, List<string>>? options)
+    {
+        if (options is null) return null;
+        if (options.Count > DashboardWidgetPlacement.MaxOptions)
+            return $"A widget holds at most {DashboardWidgetPlacement.MaxOptions} options.";
+
+        foreach (var (key, values) in options)
+        {
+            if (!OptionTokenPattern().IsMatch(key))
+                return "Option keys are letters, digits and dashes (1-64 characters).";
+            if (values is null || values.Count > DashboardWidgetPlacement.MaxOptionValues)
+                return $"An option holds at most {DashboardWidgetPlacement.MaxOptionValues} values.";
+            if (values.Any(v => v is null || !OptionTokenPattern().IsMatch(v)))
+                return "Option values are letters, digits and dashes (1-64 characters).";
         }
 
         return null;
@@ -150,6 +175,61 @@ private static async Task<IResult> DeleteAsync(IDocumentSession session, string
     [GeneratedRegex("^[a-z0-9][a-z0-9-]{0,63}$")]
     private static partial Regex WidgetIdPattern();
 
+    [GeneratedRegex("^[A-Za-z0-9][A-Za-z0-9-]{0,63}$")]
+    private static partial Regex OptionTokenPattern();
+
+    // ───────────────────────────────────────────── My apps ─────────────────
+
+    private const int MyAppsScan = 500;
+
+    /// <summary>
+    /// The OAuth clients the caller has a valid authorization with — "where have
+    /// I signed in with this account". Strictly the caller's own grants; one row
+    /// per client however many authorizations it holds.
+    /// </summary>
+    private static async Task<IResult> GetMyAppsAsync(
+        HttpContext http, IQuerySession session, CancellationToken ct)
+    {
+        var userId = http.GetUserId();
+        if (userId is null) return Results.Unauthorized();
+
+        var subject = userId.Value.ToString();
+        var grants = await session.Query<OpenIddictAuthorizationDocument>()
+            .Where(x => x.Subject == subject && x.Status == OpenIddict.Abstractions.OpenIddictConstants.Statuses.Valid)
+            .OrderByDescending(x => x.CreationDate)
+            .Take(MyAppsScan)
+            .ToListAsync(ct);
+
+        var byClient = grants
+            .Where(g => Guid.TryParse(g.ApplicationId, out _))
+            .GroupBy(g => Guid.Parse(g.ApplicationId!))
+            .ToDictionary(g => g.Key, g => (First: g.Min(x => x.CreationDate), Last: g.Max(x => x.CreationDate)));
+
+        var clientKeys = byClient.Keys.ToList();
+        var clients = clientKeys.Count == 0
+            ? []
+            : await session.Query<OAuthApplicationState>()
+                .Where(c => clientKeys.Contains(c.Id) && !c.IsDeleted)
+                .ToListAsync(ct);
+
+        var appIds = clients.SelectMany(c => c.AppIds).Distinct().ToList();
+        var apps = appIds.Count == 0
+            ? new Dictionary<Guid, string>()
+            : (await session.Query<App>().Where(a => appIds.Contains(a.Id) && !a.IsDeleted).ToListAsync(ct))
+                .ToDictionary(a => a.Id, a => a.DisplayName);
+
+        var rows = clients
+            .Select(c => new MyAppDto(
+                string.IsNullOrWhiteSpace(c.DisplayName) ? c.ClientId : c.DisplayName,
+                c.AppIds.Select(id => apps.GetValueOrDefault(id)).FirstOrDefault(name => !string.IsNullOrEmpty(name)),
+                byClient[c.Id].First,
+                byClient[c.Id].Last))
+            .OrderByDescending(r => r.LastAuthorizedAt)
+            .ToList();
+
+        return Results.Ok(rows);
+    }
+
     // ───────────────────────────────────────────── Statistics ──────────────
 
     private static async Task<IResult> GetStatsAsync(
@@ -157,6 +237,7 @@ private static async Task<IResult> GetStatsAsync(
         IDocumentSession session,
         IPermissionService permissions,
         IRealmSettingsService realmSettings,
+        AppSettings settings,
         int? days,
         string? tz,
         CancellationToken ct)
@@ -176,6 +257,8 @@ private static async Task<IResult> GetStatsAsync(
                 ? await session.Query<UserView>().CountAsync(u => !u.IsDeleted, ct) : null,
             ServiceAccounts: Can("service-account:read")
                 ? await session.Query<ServiceAccount>().CountAsync(s => !s.IsDeleted, ct) : null,
+            Positions: settings.Features.PositionTerminals && Can("position:read")
+                ? await session.Query<PositionPrincipal>().CountAsync(p => !p.IsDeleted, ct) : null,
             Groups: Can("authorization-group:read")
                 ? await session.Query<Modgud.Authorization.Principals.Group>().CountAsync(g => !g.IsDeleted, ct) : null,
             Roles: Can("permission-role:read")
@@ -184,6 +267,10 @@ private static async Task<IResult> GetStatsAsync(
                 ? await session.Query<App>().CountAsync(a => !a.IsDeleted, ct) : null,
             OAuthClients: Can("oauth-client:read")
                 ? await session.Query<OAuthApplicationState>().CountAsync(c => !c.IsDeleted, ct) : null,
+            OAuthApis: Can("oauth-api:read")
+                ? await session.Query<OAuthApiState>().CountAsync(a => !a.IsDeleted, ct) : null,
+            OAuthScopes: Can("oauth-scope:read")
+                ? await session.Query<OAuthScopeState>().CountAsync(s => !s.IsDeleted, ct) : null,
             LoginProviders: Can("login-provider:read")
                 ? await session.Query<LoginProvider>().CountAsync(p => !p.IsDeleted, ct) : null,
             LoginProvidersEnabled: Can("login-provider:read")
@@ -372,6 +459,14 @@ public sealed record DashboardLayoutsDto(
 
 public sealed record SaveDashboardLayoutDto(List<DashboardWidgetPlacement>? Widgets);
 
+/// <summary>A client the caller authorized. <paramref name="AppName"/> is the
+/// Application the client belongs to, when it belongs to one.</summary>
+public sealed record MyAppDto(
+    string Name,
+    string? AppName,
+    DateTimeOffset? FirstAuthorizedAt,
+    DateTimeOffset? LastAuthorizedAt);
+
 /// <summary><paramref name="Days"/> is the requested window; a block may cover
 /// fewer days (see <see cref="LoginStatsDto.Days"/>).</summary>
 public sealed record DashboardStatsDto(
@@ -386,10 +481,13 @@ public sealed record DashboardStatsDto(
 public sealed record DashboardCountsDto(
     int? Users,
     int? ServiceAccounts,
+    int? Positions,
     int? Groups,
     int? Roles,
     int? Apps,
     int? OAuthClients,
+    int? OAuthApis,
+    int? OAuthScopes,
     int? LoginProviders,
     int? LoginProvidersEnabled,
     int? ActiveSessions,
diff --git a/src/dotnet/Modgud.Domain/Dashboard/DashboardLayout.cs b/src/dotnet/Modgud.Domain/Dashboard/DashboardLayout.cs
index 56cf2925..0f82fe1f 100644
--- a/src/dotnet/Modgud.Domain/Dashboard/DashboardLayout.cs
+++ b/src/dotnet/Modgud.Domain/Dashboard/DashboardLayout.cs
@@ -34,9 +34,21 @@ public sealed class DashboardLayout
     public DateTimeOffset UpdatedAt { get; set; }
 }
 
-/// <summary>One widget on the dashboard. List order is display order.</summary>
-public sealed record DashboardWidgetPlacement(string Widget, string Size)
+/// <summary>
+/// One widget on the dashboard. List order is display order.
+/// <paramref name="Options"/> are the widget's own settings (which tiles a
+/// counts widget shows, how many rows a list shows): option key → chosen values.
+/// Like the widget id they are the frontend's vocabulary — an option the widget
+/// does not know is ignored, and no option reveals data the endpoints withhold.
+/// </summary>
+public sealed record DashboardWidgetPlacement(
+    string Widget,
+    string Size,
+    Dictionary<string, List<string>>? Options = null)
 {
+    public const int MaxOptions = 8;
+    public const int MaxOptionValues = 24;
+
     /// <summary>Column spans the grid understands (see the frontend's size map).</summary>
     public static readonly IReadOnlySet<string> Sizes =
         new HashSet<string>(StringComparer.Ordinal) { "xs", "s", "m", "l", "xl", "full" };
diff --git a/src/frontend-vue/public/i18n/de.json b/src/frontend-vue/public/i18n/de.json
index 5abc42f3..48c3a099 100644
--- a/src/frontend-vue/public/i18n/de.json
+++ b/src/frontend-vue/public/i18n/de.json
@@ -2653,7 +2653,8 @@
       "failedLast24h": "Fehlgeschlagene Anmeldungen, 24 h",
       "pendingChangeRequests": "Offene Anfragen",
       "realmSessions": "Aktive Sitzungen im Realm",
-      "securityAttention": "Sicherheitsereignisse, 24 h"
+      "securityAttention": "Sicherheitsereignisse, 24 h",
+      "myPasskeys": "Meine Passkeys"
     },
     "security": {
       "title": "Account-Sicherheit",
@@ -2756,7 +2757,20 @@
       "removeDefault": "Realm-Standard entfernen",
       "removeDefaultTitle": "Realm-Standard entfernen?",
       "removeDefaultMessage": "Wer kein eigenes Dashboard hat, bekommt wieder die eingebaute Anordnung.",
-      "defaultRemoved": "Der Realm-Standard wurde entfernt; es gilt die eingebaute Anordnung."
+      "defaultRemoved": "Der Realm-Standard wurde entfernt; es gilt die eingebaute Anordnung.",
+      "settings": "Einstellungen"
+    },
+    "myApps": {
+      "title": "Meine Apps",
+      "subtitle": "Wo dieses Konto angemeldet ist",
+      "none": "Du hast dich mit diesem Konto noch bei keiner App angemeldet."
+    },
+    "counts": {
+      "none": "Nichts zum Anzeigen ausgewählt."
+    },
+    "options": {
+      "show": "Anzeigen",
+      "rows": "Zeilen"
     }
   },
   "grid": {
diff --git a/src/frontend-vue/src/views/dashboard/DashboardView.vue b/src/frontend-vue/src/views/dashboard/DashboardView.vue
index e5cc7a53..4fa8622e 100644
--- a/src/frontend-vue/src/views/dashboard/DashboardView.vue
+++ b/src/frontend-vue/src/views/dashboard/DashboardView.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from '@cocoar/vue-localization'
-import { CoarButton, CoarIcon, CoarPopconfirm, CoarSpinner, useToast } from '@cocoar/vue-ui'
+import {
+  CoarButton, CoarCheckbox, CoarIcon, CoarPopconfirm, CoarSegmentedControl, CoarSpinner, useToast,
+} from '@cocoar/vue-ui'
 import { useUI } from '@/composables/useUI'
 import { useHttpClient } from '@/composables/useHttpClient'
+import { useAppConfigStore } from '@/stores/appconfig.store'
 import { useAuthStore } from '@/stores/auth.store'
 import { useDashboardStats } from './dashboardStats'
-import { resolveLayout, type WidgetDefinition, type WidgetPlacement } from './layout'
+import {
+  resolveLayout, resolveOptions,
+  type WidgetDefinition, type WidgetOptionChoice, type WidgetOptionDefinition, type WidgetPlacement,
+} from './layout'
 import { BUILT_IN_LAYOUT, WIDGETS, WIDGET_CATALOG } from './widgets/registry'
 
 const { t, language } = useI18n()
 const authStore = useAuthStore()
+const appConfig = useAppConfigStore()
 const toast = useToast()
 
 const ui = useUI()
@@ -73,11 +80,50 @@ function definition(placement: WidgetPlacement): WidgetDefinition {
   return WIDGET_CATALOG.get(placement.Widget)!
 }
 
+/** What the widget component is rendered with: its fixed props plus its resolved options. */
+function widgetProps(placement: WidgetPlacement): Record<string, unknown> {
+  const def = definition(placement)
+  return def.options
+    ? { ...def.props, options: resolveOptions(def, placement.Options) }
+    : { ...def.props }
+}
+
 function startEditing() {
   draft.value = activeLayout.value.map(p => ({ ...p }))
+  configuring.value = null
   editing.value = true
 }
 
+// ─── A widget's own settings ─────────────────────────────────────────────
+/** Id of the widget whose settings panel is open, if any. */
+const configuring = ref<string | null>(null)
+
+/** A choice is offered only where it can ever show something for this viewer. */
+function availableChoices(option: WidgetOptionDefinition): WidgetOptionChoice[] {
+  return option.choices.filter(choice =>
+    (!choice.requireFeature || appConfig.config.Features[choice.requireFeature])
+    && (!choice.requirePermissions || choice.requirePermissions.some(p => authStore.hasPermission(p))))
+}
+
+function chosen(placement: WidgetPlacement, option: WidgetOptionDefinition): string[] {
+  return resolveOptions(definition(placement), placement.Options)[option.key] ?? []
+}
+
+function setOption(index: number, option: WidgetOptionDefinition, values: string[]) {
+  draft.value = draft.value.map((p, i) =>
+    i === index ? { ...p, Options: { ...p.Options, [option.key]: values } } : p)
+}
+
+function toggleChoice(index: number, option: WidgetOptionDefinition, value: string, on: boolean) {
+  const placement = draft.value[index]
+  if (!placement) return
+  const current = chosen(placement, option)
+  // Kept in the catalog's order, so the widget shows tiles in a stable sequence.
+  setOption(index, option, option.choices
+    .map(c => c.value)
+    .filter(v => v === value ? on : current.includes(v)))
+}
+
 function move(from: number, to: number) {
   if (to < 0 || to >= draft.value.length || from === to) return
   const next = [...draft.value]
@@ -261,13 +307,36 @@ function removeRealmDefault() {
             <CoarButton
               size="s" variant="ghost" icon-start="plus" :disabled="!canResize(placement, 1)"
               :title="t('dashboard.customize.wider', {}, 'Wider')" @click="resize(index, 1)" />
+            <CoarButton
+              v-if="definition(placement).options"
+              size="s" :variant="configuring === placement.Widget ? 'secondary' : 'ghost'" icon-start="settings"
+              :title="t('dashboard.customize.settings', {}, 'Settings')"
+              @click="configuring = configuring === placement.Widget ? null : placement.Widget" />
             <CoarButton
               size="s" variant="ghost" icon-start="x"
               :title="t('dashboard.customize.remove', {}, 'Remove')" @click="remove(index)" />
           </div>
+
+          <div v-if="editing && configuring === placement.Widget" class="dash-cell__settings">
+            <div v-for="option in definition(placement).options" :key="option.key" class="dash-cell__option">
+              <span class="dash-cell__option-label">{{ t(option.labelKey, {}, option.labelEn) }}</span>
+              <div v-if="option.kind === 'multi'" class="dash-cell__choices">
+                <CoarCheckbox
+                  v-for="choice in availableChoices(option)" :key="choice.value"
+                  :label="t(choice.labelKey, {}, choice.labelEn)"
+                  :model-value="chosen(placement, option).includes(choice.value)"
+                  @update:model-value="toggleChoice(index, option, choice.value, $event)" />
+              </div>
+              <CoarSegmentedControl
+                v-else
+                :options="availableChoices(option).map(c => ({ value: c.value, label: t(c.labelKey, {}, c.labelEn) }))"
+                :model-value="chosen(placement, option)[0] ?? ''"
+                @update:model-value="setOption(index, option, [$event])" />
+            </div>
+          </div>
           <!-- While arranging, the widget is a preview: not clickable, not focusable. -->
           <div class="dash-cell__content" :inert="editing || undefined">
-            <component :is="definition(placement).component" v-bind="definition(placement).props" />
+            <component :is="definition(placement).component" v-bind="widgetProps(placement)" />
           </div>
         </div>
       </div>
@@ -404,6 +473,30 @@ function removeRealmDefault() {
   gap: 0.125rem;
   padding: 0 0.125rem 0.25rem 0.25rem;
 }
+.dash-cell__settings {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  margin: 0 0.25rem 0.375rem;
+  padding: 0.625rem 0.75rem;
+  border-radius: 0.375rem;
+  background: var(--coar-background-neutral-primary, #ffffff);
+  font-size: 0.8125rem;
+  cursor: default;
+}
+.dash-cell__option {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.dash-cell__option-label {
+  font-weight: 600;
+}
+.dash-cell__choices {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem 1rem;
+}
 .dash-cell__grip {
   color: var(--coar-text-neutral-secondary, #9ca3af);
 }
diff --git a/src/frontend-vue/src/views/dashboard/dashboardStats.ts b/src/frontend-vue/src/views/dashboard/dashboardStats.ts
index dad6640a..a013c964 100644
--- a/src/frontend-vue/src/views/dashboard/dashboardStats.ts
+++ b/src/frontend-vue/src/views/dashboard/dashboardStats.ts
@@ -7,10 +7,13 @@ import { useHttpClient } from '@/composables/useHttpClient'
 export interface DashboardCounts {
   Users: number | null
   ServiceAccounts: number | null
+  Positions: number | null
   Groups: number | null
   Roles: number | null
   Apps: number | null
   OAuthClients: number | null
+  OAuthApis: number | null
+  OAuthScopes: number | null
   LoginProviders: number | null
   LoginProvidersEnabled: number | null
   ActiveSessions: number | null
diff --git a/src/frontend-vue/src/views/dashboard/layout.ts b/src/frontend-vue/src/views/dashboard/layout.ts
index e764ed61..a05b27eb 100644
--- a/src/frontend-vue/src/views/dashboard/layout.ts
+++ b/src/frontend-vue/src/views/dashboard/layout.ts
@@ -3,10 +3,35 @@ import type { Component } from 'vue'
 /** Width of a widget on the 12-column dashboard grid. */
 export type WidgetSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'full'
 
+/** A widget's own settings: option key → chosen values. */
+export type WidgetOptions = Record<string, string[]>
+
 /** One widget on the dashboard. List order is display order. */
 export interface WidgetPlacement {
   Widget: string
   Size: WidgetSize
+  /** Only what differs from nothing-chosen-yet; absent = the widget's defaults. */
+  Options?: WidgetOptions | null
+}
+
+export interface WidgetOptionChoice {
+  value: string
+  labelKey: string
+  labelEn: string
+  /** Offered only to viewers holding ANY of these (the data is gated server-side anyway). */
+  requirePermissions?: string[]
+  /** Offered only while this deployment feature is on. */
+  requireFeature?: 'PageBuilder' | 'PositionTerminals'
+}
+
+/** One setting of a widget: pick several (`multi`) or exactly one (`single`). */
+export interface WidgetOptionDefinition {
+  key: string
+  labelKey: string
+  labelEn: string
+  kind: 'multi' | 'single'
+  choices: WidgetOptionChoice[]
+  defaults: string[]
 }
 
 export interface WidgetDefinition {
@@ -25,6 +50,25 @@ export interface WidgetDefinition {
   defaultSize: WidgetSize
   component: Component
   props?: Record<string, unknown>
+  /** Settings the user can change; the component receives them as its `options` prop. */
+  options?: WidgetOptionDefinition[]
+}
+
+/**
+ * The complete option values a widget renders with: what the placement stores,
+ * reduced to choices the widget knows, with defaults filling the rest.
+ */
+export function resolveOptions(def: WidgetDefinition, stored?: WidgetOptions | null): WidgetOptions {
+  const result: WidgetOptions = {}
+  for (const option of def.options ?? []) {
+    const known = new Set(option.choices.map(c => c.value))
+    const chosen = stored?.[option.key]?.filter(v => known.has(v))
+    if (chosen === undefined) result[option.key] = [...option.defaults]
+    else if (option.kind === 'single') result[option.key] = chosen.length ? [chosen[0]!] : [...option.defaults]
+    // An empty multi-selection is a choice, not a missing one.
+    else result[option.key] = option.choices.map(c => c.value).filter(v => chosen.includes(v))
+  }
+  return result
 }
 
 /**
@@ -46,6 +90,7 @@ export function resolveLayout(
     result.push({
       Widget: def.id,
       Size: def.sizes.includes(placement.Size) ? placement.Size : def.defaultSize,
+      ...(def.options && placement.Options ? { Options: placement.Options } : {}),
     })
   }
   return result
diff --git a/src/frontend-vue/src/views/dashboard/widgets/CountsWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/CountsWidget.vue
index 2983b2e0..f47ce18b 100644
--- a/src/frontend-vue/src/views/dashboard/widgets/CountsWidget.vue
+++ b/src/frontend-vue/src/views/dashboard/widgets/CountsWidget.vue
@@ -4,12 +4,17 @@ import { useRouter } from 'vue-router'
 import { useI18n } from '@cocoar/vue-localization'
 import { CoarIcon } from '@cocoar/vue-ui'
 import { useDashboardStats, type DashboardCounts } from '../dashboardStats'
+import type { WidgetOptions } from '../layout'
 import WidgetCard from './WidgetCard.vue'
 
 /** A group of "how many are there" tiles, each a shortcut to its list. */
 export type CountsGroup = 'directory' | 'applications'
 
-const props = defineProps<{ group: CountsGroup }>()
+const props = defineProps<{
+  group: CountsGroup
+  /** `show`: the count keys to display, as chosen in the widget's settings. */
+  options: WidgetOptions
+}>()
 
 const { t, language } = useI18n()
 const router = useRouter()
@@ -33,6 +38,7 @@ const groups = computed<Record<CountsGroup, { title: string; icon: string; tiles
       tiles: [
         { key: 'Users', icon: 'users', label: t('nav.users', {}, 'Users'), to: '/admin/users' },
         { key: 'ServiceAccounts', icon: 'cpu', label: t('admin.serviceAccounts.title', {}, 'Service Accounts'), to: '/admin/service-accounts' },
+        { key: 'Positions', icon: 'briefcase', label: t('admin.positions.title', {}, 'Positions'), to: '/admin/positions' },
         { key: 'Groups', icon: 'users-round', label: t('nav.groups', {}, 'Groups'), to: '/admin/groups' },
         { key: 'Roles', icon: 'shield', label: t('nav.roles', {}, 'Roles'), to: '/admin/roles' },
       ],
@@ -43,6 +49,8 @@ const groups = computed<Record<CountsGroup, { title: string; icon: string; tiles
       tiles: [
         { key: 'Apps', icon: 'layout-grid', label: t('admin.apps.title', {}, 'Applications'), to: '/admin/apps' },
         { key: 'OAuthClients', icon: 'app-window', label: t('admin.oauthClients.title', {}, 'OAuth Clients'), to: '/admin/oauth/clients' },
+        { key: 'OAuthApis', icon: 'server', label: t('admin.oauthApis.title', {}, 'OAuth APIs'), to: '/admin/oauth/apis' },
+        { key: 'OAuthScopes', icon: 'tags', label: t('admin.oauthScopes.title', {}, 'OAuth Scopes'), to: '/admin/oauth/scopes' },
         {
           key: 'LoginProviders',
           icon: 'log-in',
@@ -58,15 +66,23 @@ const groups = computed<Record<CountsGroup, { title: string; icon: string; tiles
 const group = computed(() => groups.value[props.group])
 const numberFormat = computed(() => new Intl.NumberFormat(language.value))
 
-// A count the viewer has no permission for arrives as null — its tile is left out.
+// Shown: what the settings select, minus counts the viewer has no permission
+// for (those arrive as null).
 const tiles = computed(() => group.value.tiles.flatMap(tile => {
+  if (!props.options.show?.includes(tile.key)) return []
   const count = stats.value?.Counts[tile.key]
   return count == null ? [] : [{ ...tile, value: numberFormat.value.format(count) }]
 }))
 </script>
 
 <template>
-  <WidgetCard :title="group.title" :icon="group.icon" :loading="loading && !stats" :failed="failed">
+  <WidgetCard
+    :title="group.title"
+    :icon="group.icon"
+    :loading="loading && !stats"
+    :failed="failed"
+    :empty="stats && tiles.length === 0 ? t('dashboard.counts.none', {}, 'Nothing selected to show.') : null"
+  >
     <div class="counts">
       <button v-for="tile in tiles" :key="tile.key" type="button" class="counts__tile" @click="router.push(tile.to)">
         <span class="counts__icon"><CoarIcon :name="tile.icon" size="s" /></span>
diff --git a/src/frontend-vue/src/views/dashboard/widgets/MyAppsWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/MyAppsWidget.vue
new file mode 100644
index 00000000..c713c359
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/widgets/MyAppsWidget.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from '@cocoar/vue-localization'
+import { CoarTag } from '@cocoar/vue-ui'
+import { useHttpClient } from '@/composables/useHttpClient'
+import type { WidgetOptions } from '../layout'
+import { useRelativeTime } from '../relativeTime'
+import WidgetCard from './WidgetCard.vue'
+
+const props = defineProps<{ options: WidgetOptions }>()
+
+const { t } = useI18n()
+const relativeTime = useRelativeTime()
+
+// Mirrors MyAppDto (DashboardEndpoints.cs): the clients this account authorized.
+interface MyApp {
+  Name: string
+  AppName?: string | null
+  FirstAuthorizedAt?: string | null
+  LastAuthorizedAt?: string | null
+}
+
+const apps = ref<MyApp[]>([])
+const loading = ref(true)
+const failed = ref(false)
+
+onMounted(async () => {
+  try {
+    apps.value = await useHttpClient('/api/dashboard/my-apps').get<MyApp[]>()
+  } catch {
+    failed.value = true
+  } finally {
+    loading.value = false
+  }
+})
+
+const limit = computed(() => Number(props.options.rows?.[0]) || 5)
+const top = computed(() => apps.value.slice(0, limit.value))
+const extra = computed(() => Math.max(0, apps.value.length - limit.value))
+</script>
+
+<template>
+  <WidgetCard
+    :title="t('dashboard.myApps.title', {}, 'My apps')"
+    icon="app-window"
+    :subtitle="t('dashboard.myApps.subtitle', {}, 'Where this account is signed in')"
+    :loading="loading"
+    :failed="failed"
+    :empty="apps.length === 0 ? t('dashboard.myApps.none', {}, 'You have not signed in to any app with this account yet.') : null"
+  >
+    <div v-for="app in top" :key="app.Name" class="widget-row my-app">
+      <span class="widget-row__label">
+        <span class="widget-row__title">{{ app.Name }}</span>
+        <span v-if="app.AppName && app.AppName !== app.Name" class="widget-row__sub">{{ app.AppName }}</span>
+      </span>
+      <span v-if="app.LastAuthorizedAt" class="widget-row__meta">
+        <CoarTag variant="neutral" size="s">{{ relativeTime(app.LastAuthorizedAt) }}</CoarTag>
+      </span>
+    </div>
+    <div v-if="extra > 0" class="widget-row__more">
+      {{ t('dashboard.sessions.more', { n: extra }, '+{n} more') }}
+    </div>
+  </WidgetCard>
+</template>
+
+<style scoped>
+/* Informational rows — nothing to open, so no pointer and no hover wash. */
+.my-app,
+.my-app:hover {
+  cursor: default;
+  background: none;
+}
+</style>
diff --git a/src/frontend-vue/src/views/dashboard/widgets/MyPasskeysWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/MyPasskeysWidget.vue
new file mode 100644
index 00000000..7d7bae5e
--- /dev/null
+++ b/src/frontend-vue/src/views/dashboard/widgets/MyPasskeysWidget.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from '@cocoar/vue-localization'
+import { useHttpClient } from '@/composables/useHttpClient'
+import type { KpiTile } from '../kpiTile'
+import KpiCard from '../KpiCard.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+
+const count = ref<number | null>(null)
+const failed = ref(false)
+
+onMounted(async () => {
+  try {
+    count.value = (await useHttpClient('/api/account/passkey').get<unknown[]>()).length
+  } catch {
+    failed.value = true
+  }
+})
+
+const tile = computed<KpiTile>(() => ({
+  key: 'myPasskeys',
+  icon: 'fingerprint',
+  tone: count.value ? 'emerald' : 'amber',
+  caption: t('dashboard.kpi.myPasskeys', {}, 'My passkeys'),
+  loading: count.value === null && !failed.value,
+  value: failed.value ? '–' : (count.value === null ? null : String(count.value)),
+  // No passkey yet is worth a nudge, not an alarm.
+  warn: count.value === 0,
+  onClick: () => router.push('/profile'),
+}))
+</script>
+
+<template>
+  <KpiCard :tile="tile" class="h-full" />
+</template>
diff --git a/src/frontend-vue/src/views/dashboard/widgets/MySessionsWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/MySessionsWidget.vue
index 0cdcbc4e..93f01ef2 100644
--- a/src/frontend-vue/src/views/dashboard/widgets/MySessionsWidget.vue
+++ b/src/frontend-vue/src/views/dashboard/widgets/MySessionsWidget.vue
@@ -5,9 +5,12 @@ import { useI18n } from '@cocoar/vue-localization'
 import { CoarTag } from '@cocoar/vue-ui'
 import { useHttpClient } from '@/composables/useHttpClient'
 import type { ClientSessionDto, SessionDto, SessionListDto } from '@/models/session'
+import type { WidgetOptions } from '../layout'
 import { useRelativeTime } from '../relativeTime'
 import WidgetCard from './WidgetCard.vue'
 
+const props = defineProps<{ options: WidgetOptions }>()
+
 const { t } = useI18n()
 const router = useRouter()
 const relativeTime = useRelativeTime()
@@ -32,8 +35,9 @@ onMounted(async () => {
   }
 })
 
-const top = computed(() => rows.value.slice(0, 3))
-const extra = computed(() => Math.max(0, rows.value.length - 3))
+const limit = computed(() => Number(props.options.rows?.[0]) || 3)
+const top = computed(() => rows.value.slice(0, limit.value))
+const extra = computed(() => Math.max(0, rows.value.length - limit.value))
 
 function label(s: Row): string {
   if (s.Kind === 'Client') return s.ClientDisplayName || s.ClientId
diff --git a/src/frontend-vue/src/views/dashboard/widgets/RecentActivityWidget.vue b/src/frontend-vue/src/views/dashboard/widgets/RecentActivityWidget.vue
index bc334db7..37e8073a 100644
--- a/src/frontend-vue/src/views/dashboard/widgets/RecentActivityWidget.vue
+++ b/src/frontend-vue/src/views/dashboard/widgets/RecentActivityWidget.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from '@cocoar/vue-localization'
 import { CoarTag } from '@cocoar/vue-ui'
 import { useHttpClient } from '@/composables/useHttpClient'
+import type { WidgetOptions } from '../layout'
 import { useRelativeTime } from '../relativeTime'
 import WidgetCard from './WidgetCard.vue'
 
+const props = defineProps<{ options: WidgetOptions }>()
+
 const { t } = useI18n()
 const router = useRouter()
 const relativeTime = useRelativeTime()
@@ -20,13 +23,16 @@ interface SecurityLogRow {
   Message: string
 }
 
-const rows = ref<SecurityLogRow[]>([])
+// Loaded once at the largest choice; the setting only trims what is shown.
+const MAX_ROWS = 15
+const all = ref<SecurityLogRow[]>([])
+const rows = computed(() => all.value.slice(0, Number(props.options.rows?.[0]) || 8))
 const loading = ref(true)
 const failed = ref(false)
 
 onMounted(async () => {
   try {
-    rows.value = await useHttpClient('/api/admin/auth-log').setQueryParameter('limit', '8').get<SecurityLogRow[]>()
+    all.value = await useHttpClient('/api/admin/auth-log').setQueryParameter('limit', String(MAX_ROWS)).get<SecurityLogRow[]>()
   } catch {
     failed.value = true
   } finally {
diff --git a/src/frontend-vue/src/views/dashboard/widgets/registry.ts b/src/frontend-vue/src/views/dashboard/widgets/registry.ts
index badd118c..cfdf35fa 100644
--- a/src/frontend-vue/src/views/dashboard/widgets/registry.ts
+++ b/src/frontend-vue/src/views/dashboard/widgets/registry.ts
@@ -1,18 +1,31 @@
-import type { WidgetDefinition, WidgetPlacement } from '../layout'
+import type { WidgetDefinition, WidgetOptionDefinition, WidgetPlacement } from '../layout'
 import AccountSecurityWidget from './AccountSecurityWidget.vue'
 import CountsWidget from './CountsWidget.vue'
 import LoginMethodsWidget from './LoginMethodsWidget.vue'
 import LoginProvidersWidget from './LoginProvidersWidget.vue'
 import LoginsChartWidget from './LoginsChartWidget.vue'
+import MyAppsWidget from './MyAppsWidget.vue'
+import MyPasskeysWidget from './MyPasskeysWidget.vue'
 import MySessionsWidget from './MySessionsWidget.vue'
 import RecentActivityWidget from './RecentActivityWidget.vue'
 import SecurityEventsWidget from './SecurityEventsWidget.vue'
 import StatKpiWidget from './StatKpiWidget.vue'
 
+/** "How many rows" — the one setting the list widgets share. */
+function rowsOption(choices: number[], fallback: number): WidgetOptionDefinition {
+  return {
+    key: 'rows',
+    labelKey: 'dashboard.options.rows', labelEn: 'Rows',
+    kind: 'single',
+    choices: choices.map(n => ({ value: String(n), labelKey: `dashboard.options.rowCount.${n}`, labelEn: String(n) })),
+    defaults: [String(fallback)],
+  }
+}
+
 /**
- * Every widget the dashboard can show. Ids are persisted in stored layouts —
- * never rename one; a removed id simply drops out of the layouts that name it.
- * `requirePermissions` mirrors the backend strings exactly.
+ * Every widget the dashboard can show. Ids, option keys and choice values are
+ * persisted in stored layouts — never rename one; a removed one simply drops out
+ * of the layouts that name it. `requirePermissions` mirrors the backend strings.
  */
 export const WIDGETS: WidgetDefinition[] = [
   // ── Personal — every signed-in user ──────────────────────────────────
@@ -20,15 +33,31 @@ export const WIDGETS: WidgetDefinition[] = [
     id: 'account-security',
     titleKey: 'dashboard.security.title', titleEn: 'Account security', icon: 'shield-check',
     requirePermissions: [],
-    sizes: ['m', 'l', 'xl', 'full'], defaultSize: 'l',
+    sizes: ['m', 'l', 'xl', 'full'], defaultSize: 'm',
     component: AccountSecurityWidget,
   },
   {
     id: 'my-sessions',
     titleKey: 'dashboard.sessions.title', titleEn: 'Active sessions', icon: 'monitor',
     requirePermissions: [],
-    sizes: ['m', 'l', 'xl', 'full'], defaultSize: 'l',
+    sizes: ['m', 'l', 'xl', 'full'], defaultSize: 'm',
     component: MySessionsWidget,
+    options: [rowsOption([3, 5, 10], 3)],
+  },
+  {
+    id: 'my-apps',
+    titleKey: 'dashboard.myApps.title', titleEn: 'My apps', icon: 'app-window',
+    requirePermissions: [],
+    sizes: ['m', 'l', 'xl', 'full'], defaultSize: 'm',
+    component: MyAppsWidget,
+    options: [rowsOption([3, 5, 10], 5)],
+  },
+  {
+    id: 'kpi-my-passkeys',
+    titleKey: 'dashboard.kpi.myPasskeys', titleEn: 'My passkeys', icon: 'fingerprint',
+    requirePermissions: [],
+    sizes: ['xs', 's', 'm'], defaultSize: 's',
+    component: MyPasskeysWidget,
   },
 
   // ── Realm operations — each gated on what backs its data ─────────────
@@ -77,16 +106,43 @@ export const WIDGETS: WidgetDefinition[] = [
   {
     id: 'directory',
     titleKey: 'dashboard.directory.title', titleEn: 'Directory', icon: 'users',
-    requirePermissions: ['user:read', 'service-account:read', 'authorization-group:read', 'permission-role:read'],
+    requirePermissions: ['user:read', 'service-account:read', 'position:read', 'authorization-group:read', 'permission-role:read'],
     sizes: ['m', 'l', 'xl', 'full'], defaultSize: 'l',
     component: CountsWidget, props: { group: 'directory' },
+    // Choice values are the count keys of the statistics endpoint.
+    options: [{
+      key: 'show',
+      labelKey: 'dashboard.options.show', labelEn: 'Show',
+      kind: 'multi',
+      choices: [
+        { value: 'Users', labelKey: 'nav.users', labelEn: 'Users', requirePermissions: ['user:read'] },
+        { value: 'ServiceAccounts', labelKey: 'admin.serviceAccounts.title', labelEn: 'Service Accounts', requirePermissions: ['service-account:read'] },
+        { value: 'Positions', labelKey: 'admin.positions.title', labelEn: 'Positions', requirePermissions: ['position:read'], requireFeature: 'PositionTerminals' },
+        { value: 'Groups', labelKey: 'nav.groups', labelEn: 'Groups', requirePermissions: ['authorization-group:read'] },
+        { value: 'Roles', labelKey: 'nav.roles', labelEn: 'Roles', requirePermissions: ['permission-role:read'] },
+      ],
+      defaults: ['Users', 'ServiceAccounts', 'Positions', 'Groups', 'Roles'],
+    }],
   },
   {
     id: 'applications',
     titleKey: 'dashboard.applications.title', titleEn: 'Applications & sign-in', icon: 'layout-grid',
-    requirePermissions: ['app:read', 'oauth-client:read', 'login-provider:read'],
+    requirePermissions: ['app:read', 'oauth-client:read', 'oauth-api:read', 'oauth-scope:read', 'login-provider:read'],
     sizes: ['m', 'l', 'xl', 'full'], defaultSize: 'l',
     component: CountsWidget, props: { group: 'applications' },
+    options: [{
+      key: 'show',
+      labelKey: 'dashboard.options.show', labelEn: 'Show',
+      kind: 'multi',
+      choices: [
+        { value: 'Apps', labelKey: 'admin.apps.title', labelEn: 'Applications', requirePermissions: ['app:read'] },
+        { value: 'OAuthClients', labelKey: 'admin.oauthClients.title', labelEn: 'OAuth Clients', requirePermissions: ['oauth-client:read'] },
+        { value: 'OAuthApis', labelKey: 'admin.oauthApis.title', labelEn: 'OAuth APIs', requirePermissions: ['oauth-api:read'] },
+        { value: 'OAuthScopes', labelKey: 'admin.oauthScopes.title', labelEn: 'OAuth Scopes', requirePermissions: ['oauth-scope:read'] },
+        { value: 'LoginProviders', labelKey: 'admin.loginProviders.title', labelEn: 'Login Providers', requirePermissions: ['login-provider:read'] },
+      ],
+      defaults: ['Apps', 'OAuthClients', 'LoginProviders'],
+    }],
   },
   {
     id: 'security-events',
@@ -101,6 +157,7 @@ export const WIDGETS: WidgetDefinition[] = [
     requirePermissions: ['auth-log:read'],
     sizes: ['l', 'xl', 'full'], defaultSize: 'xl',
     component: RecentActivityWidget,
+    options: [rowsOption([5, 8, 15], 8)],
   },
   {
     id: 'login-providers',
@@ -119,8 +176,9 @@ export const WIDGET_CATALOG = new Map(WIDGETS.map(w => [w.id, w]))
  * for a viewer who sees everything; with fewer permissions the rest closes ranks.
  */
 export const BUILT_IN_LAYOUT: WidgetPlacement[] = [
-  { Widget: 'account-security', Size: 'l' },
-  { Widget: 'my-sessions', Size: 'l' },
+  { Widget: 'account-security', Size: 'm' },
+  { Widget: 'my-sessions', Size: 'm' },
+  { Widget: 'my-apps', Size: 'm' },
 
   { Widget: 'kpi-active-sessions', Size: 's' },
   { Widget: 'kpi-failed-logins', Size: 's' },

From b3ba0fbdfcb6cdac80b29e61c9f247fd4b4e3024 Mon Sep 17 00:00:00 2001
From: Bernhard Windisch <bwi@cocoar.dev>
Date: Sat, 10 Oct 2026 16:09:54 +0200
Subject: [PATCH 4/4] fix(dashboard): whitespace below the last row

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/frontend-vue/src/views/dashboard/DashboardView.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/frontend-vue/src/views/dashboard/DashboardView.vue b/src/frontend-vue/src/views/dashboard/DashboardView.vue
index 4fa8622e..0cd3e444 100644
--- a/src/frontend-vue/src/views/dashboard/DashboardView.vue
+++ b/src/frontend-vue/src/views/dashboard/DashboardView.vue
@@ -367,6 +367,8 @@ function removeRealmDefault() {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 1rem;
+  /* Breathing room below the last row when scrolled to the end. */
+  padding-bottom: 2rem;
 }
 .dash-cell {
   min-width: 0;