From 0001fe8748121df77996b165dac5b67694c864cd Mon Sep 17 00:00:00 2001
From: x42en <0x42en@gmail.com>
Date: Sun, 17 May 2026 01:31:41 +0200
Subject: [PATCH 1/7] feat(auth): implement login history tracking and activity
 analytics

Introduces a new `login_history` table to track successful OAuth token
issuances, enabling detailed user activity monitoring and application
usage analytics.

Key changes:
- Added `login_history` table to track user, application, session,
  IP, and user agent for every login event.
- Implemented `recordLogin` service to capture login events during
  the OAuth flow.
- Denormalized `last_login_at` on the `user` table for efficient
  "last seen" lookups in admin listings.
- Added new admin API endpoints for retrieving application activity
  statistics, login series data, and paginated user login history.
- Enhanced frontend with new UI components: `Sparkline` for activity
  trends, `AppIconStack` for application visualization, and a
  refactored `DataTable` with improved sorting and density controls.
- Updated admin views (Dashboard, Applications, Users, Sessions) to
  display real-time activity, login history, and enriched user/session
  metadata.
---
 drizzle/0001_many_weapon_omega.sql            |   14 +
 drizzle/meta/_journal.json                    |    7 +
 frontend/src/api/applications.ts              |   12 +-
 frontend/src/api/stats.ts                     |   65 +
 frontend/src/components/ui/AppIconStack.vue   |   74 +
 frontend/src/components/ui/DataTable.vue      |  283 +-
 frontend/src/components/ui/Sparkline.vue      |   63 +
 .../components/users/UserAppHistoryModal.vue  |   95 +
 frontend/src/i18n/en.ts                       |   34 +
 frontend/src/i18n/fr.ts                       |   34 +
 frontend/src/types/data-table.ts              |   40 +
 frontend/src/types/index.ts                   |   33 +
 frontend/src/views/ApplicationDetailView.vue  |  158 +-
 frontend/src/views/ApplicationsView.vue       |   41 +-
 frontend/src/views/DashboardView.vue          |  191 +-
 frontend/src/views/UsersView.vue              |  162 +-
 src/auth.ts                                   |   26 +
 src/db/auth-schema.ts                         |    5 +
 src/db/schema.ts                              |   27 +
 src/index.ts                                  |    2 +
 src/migrate.ts                                |   11 +-
 src/routes/admin/applications.ts              |   76 +-
 src/routes/admin/sessions.test.ts             |  132 +
 src/routes/admin/sessions.ts                  |   67 +-
 src/routes/admin/stats.test.ts                |  172 ++
 src/routes/admin/stats.ts                     |  174 ++
 src/routes/admin/users.ts                     |   76 +-
 src/services/login-history.test.ts            |   66 +
 src/services/login-history.ts                 |   38 +
 test_output.txt                               | 2466 +++++++++++++++++
 30 files changed, 4469 insertions(+), 175 deletions(-)
 create mode 100644 drizzle/0001_many_weapon_omega.sql
 create mode 100644 frontend/src/api/stats.ts
 create mode 100644 frontend/src/components/ui/AppIconStack.vue
 create mode 100644 frontend/src/components/ui/Sparkline.vue
 create mode 100644 frontend/src/components/users/UserAppHistoryModal.vue
 create mode 100644 frontend/src/types/data-table.ts
 create mode 100644 src/routes/admin/sessions.test.ts
 create mode 100644 src/routes/admin/stats.test.ts
 create mode 100644 src/routes/admin/stats.ts
 create mode 100644 src/services/login-history.test.ts
 create mode 100644 src/services/login-history.ts
 create mode 100644 test_output.txt

diff --git a/drizzle/0001_many_weapon_omega.sql b/drizzle/0001_many_weapon_omega.sql
new file mode 100644
index 0000000..b34e609
--- /dev/null
+++ b/drizzle/0001_many_weapon_omega.sql
@@ -0,0 +1,14 @@
+CREATE TABLE "login_history" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"user_id" text NOT NULL,
+	"application_id" uuid,
+	"session_id" text,
+	"logged_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"ip_address" text,
+	"user_agent" text
+);
+--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "last_login_at" timestamp;--> statement-breakpoint
+ALTER TABLE "login_history" ADD CONSTRAINT "login_history_application_id_applications_id_fk" FOREIGN KEY ("application_id") REFERENCES "public"."applications"("id") ON DELETE set null ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "login_history_user_logged_idx" ON "login_history" USING btree ("user_id","logged_at");--> statement-breakpoint
+CREATE INDEX "login_history_app_logged_idx" ON "login_history" USING btree ("application_id","logged_at");
\ No newline at end of file
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
index a883156..88ca20f 100644
--- a/drizzle/meta/_journal.json
+++ b/drizzle/meta/_journal.json
@@ -8,6 +8,13 @@
       "when": 1776085749779,
       "tag": "0000_initial_schema",
       "breakpoints": false
+    },
+    {
+      "idx": 1,
+      "version": "7",
+      "when": 1778972820706,
+      "tag": "0001_many_weapon_omega",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/frontend/src/api/applications.ts b/frontend/src/api/applications.ts
index fea33d4..6157336 100644
--- a/frontend/src/api/applications.ts
+++ b/frontend/src/api/applications.ts
@@ -1,5 +1,5 @@
 import { apiFetch, USE_MOCK } from './client';
-import type { Application, ApplicationCreateResponse, UserApplication, AppRole, AppPermission, SubscriptionPlan, SubscriptionPlanPrice } from '@/types';
+import type { Application, ApplicationCreateResponse, UserApplication, AppRole, AppPermission, SubscriptionPlan, SubscriptionPlanPrice, LoginHistoryResponse } from '@/types';
 import { MOCK_APPLICATIONS, MOCK_ROLES, MOCK_PERMISSIONS, MOCK_PLANS, MOCK_USER_APPLICATIONS } from '@/mocks/data';
 
 export async function listApplications(): Promise<{ applications: Application[] }> {
@@ -101,6 +101,16 @@ export async function listAppUsers(appId: string): Promise<{ users: UserApplicat
   return apiFetch<{ users: UserApplication[] }>(`/admin/applications/${appId}/users`);
 }
 
+export async function getUserLoginHistory(appId: string, userId: string, params: { page?: number; limit?: number } = {}): Promise<LoginHistoryResponse> {
+  if (USE_MOCK) {
+    return { entries: [], total: 0, page: params.page ?? 1, limit: params.limit ?? 20 };
+  }
+  const qs = new URLSearchParams();
+  if (params.page) qs.set('page', String(params.page));
+  if (params.limit) qs.set('limit', String(params.limit));
+  return apiFetch<LoginHistoryResponse>(`/admin/applications/${appId}/users/${userId}/history?${qs}`);
+}
+
 export async function grantAppAccess(appId: string, body: { userId: string; roleId?: string }): Promise<{ access: UserApplication }> {
   if (USE_MOCK) {
     const access: UserApplication = { userId: body.userId, applicationId: appId, isActive: true, subscriptionPlanId: null, createdAt: new Date().toISOString(), name: null, email: null, roleId: body.roleId ?? null };
diff --git a/frontend/src/api/stats.ts b/frontend/src/api/stats.ts
new file mode 100644
index 0000000..976cda9
--- /dev/null
+++ b/frontend/src/api/stats.ts
@@ -0,0 +1,65 @@
+import { apiFetch, USE_MOCK } from './client';
+
+export interface ActiveUsersResponse {
+  count: number;
+}
+
+export interface LoginsSeriesPoint {
+  date: string;
+  count: number;
+}
+
+export interface LoginsResponse {
+  range: '7d' | '30d';
+  series: LoginsSeriesPoint[];
+  total: number;
+}
+
+export interface AppActivityEntry {
+  appId: string;
+  online: number;
+  last7dLogins: number;
+  sparkline: number[];
+}
+
+export interface ApplicationsActivityResponse {
+  applications: AppActivityEntry[];
+}
+
+function mockSeries(days: number): LoginsSeriesPoint[] {
+  const out: LoginsSeriesPoint[] = [];
+  const now = new Date();
+  for (let i = days - 1; i >= 0; i--) {
+    const d = new Date(now);
+    d.setUTCDate(d.getUTCDate() - i);
+    const date = d.toISOString().slice(0, 10);
+    out.push({ date, count: Math.floor(Math.random() * 8) });
+  }
+  return out;
+}
+
+export async function getActiveUsers(): Promise<ActiveUsersResponse> {
+  if (USE_MOCK) return { count: Math.floor(Math.random() * 12) };
+  return apiFetch<ActiveUsersResponse>('/admin/stats/active-users');
+}
+
+export async function getLogins(params: { range?: '7d' | '30d'; appId?: string } = {}): Promise<LoginsResponse> {
+  const range = params.range ?? '7d';
+  if (USE_MOCK) {
+    const series = mockSeries(range === '7d' ? 7 : 30);
+    return { range, series, total: series.reduce((a, b) => a + b.count, 0) };
+  }
+  const qs = new URLSearchParams();
+  qs.set('range', range);
+  if (params.appId) qs.set('appId', params.appId);
+  return apiFetch<LoginsResponse>(`/admin/stats/logins?${qs}`);
+}
+
+export async function getApplicationsActivity(): Promise<ApplicationsActivityResponse> {
+  if (USE_MOCK) {
+    return {
+      applications: [],
+    };
+  }
+  return apiFetch<ApplicationsActivityResponse>('/admin/stats/applications-activity');
+}
diff --git a/frontend/src/components/ui/AppIconStack.vue b/frontend/src/components/ui/AppIconStack.vue
new file mode 100644
index 0000000..e9fe040
--- /dev/null
+++ b/frontend/src/components/ui/AppIconStack.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { AppWindow } from 'lucide-vue-next';
+import type { UserAppSummary } from '@/types';
+
+const props = withDefaults(defineProps<{
+  apps: UserAppSummary[];
+  /** Maximum number of icons rendered inline before being collapsed into a counter. */
+  max?: number;
+  /** Size of each icon avatar in pixels. */
+  size?: number;
+}>(), {
+  max: 3,
+  size: 22,
+});
+
+const visible = computed(() => props.apps.slice(0, props.max));
+const overflow = computed(() => Math.max(0, props.apps.length - props.max));
+const open = ref(false);
+
+function close() { open.value = false; }
+</script>
+
+<template>
+  <div v-if="apps.length === 0" class="text-xs text-surface-600">—</div>
+  <div v-else class="relative inline-flex items-center">
+    <button
+      type="button"
+      class="inline-flex items-center"
+      @click.stop="open = !open"
+    >
+      <span
+        v-for="(app, idx) in visible"
+        :key="app.id"
+        :style="{
+          width: `${size}px`,
+          height: `${size}px`,
+          marginLeft: idx === 0 ? '0' : '-6px',
+          zIndex: visible.length - idx,
+        }"
+        class="inline-flex items-center justify-center rounded-full bg-surface-800 border border-surface-700/60 ring-1 ring-surface-900 overflow-hidden text-surface-300"
+        :title="app.name"
+      >
+        <img v-if="app.icon" :src="app.icon" :alt="app.name" class="w-full h-full object-cover" />
+        <AppWindow v-else class="w-3 h-3" />
+      </span>
+      <span
+        v-if="overflow > 0"
+        :style="{ height: `${size}px`, marginLeft: '-6px' }"
+        class="inline-flex items-center justify-center px-1.5 rounded-full bg-surface-800 border border-surface-700/60 ring-1 ring-surface-900 text-[10px] font-medium text-surface-400"
+      >
+        +{{ overflow }}
+      </span>
+    </button>
+
+    <div
+      v-if="open"
+      v-click-outside="close"
+      class="absolute z-30 top-full left-0 mt-1 w-56 bg-surface-800 border border-surface-700/50 rounded-xl shadow-xl py-1"
+    >
+      <div
+        v-for="app in apps"
+        :key="app.id"
+        class="flex items-center gap-2 px-3 py-2 text-sm text-surface-300 hover:bg-surface-700/40"
+      >
+        <span class="w-5 h-5 rounded-md bg-surface-700/60 inline-flex items-center justify-center overflow-hidden">
+          <img v-if="app.icon" :src="app.icon" :alt="app.name" class="w-full h-full object-cover" />
+          <AppWindow v-else class="w-3 h-3 text-surface-400" />
+        </span>
+        <span class="truncate">{{ app.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/ui/DataTable.vue b/frontend/src/components/ui/DataTable.vue
index b7fc0d9..2ba2ea9 100644
--- a/frontend/src/components/ui/DataTable.vue
+++ b/frontend/src/components/ui/DataTable.vue
@@ -1,44 +1,269 @@
-<script setup lang="ts">
-withDefaults(defineProps<{
+<script setup lang="ts" generic="Row extends Record<string, unknown>">
+import { computed, ref, watch } from 'vue';
+import { ChevronUp, ChevronDown, ChevronsUpDown, Columns3, Rows3, Rows4 } from 'lucide-vue-next';
+import type { ColumnDef, SortState } from '@/types/data-table';
+
+const props = withDefaults(defineProps<{
+  /** Optional column-driven mode. When provided, the table auto-renders headers and rows. */
+  columns?: ColumnDef<Row>[];
+  /** Row data — required when `columns` is provided. */
+  items?: Row[];
+  /** Stable row key accessor. */
+  rowKey?: (row: Row) => string | number;
+  /** When true, shows a shimmering skeleton body. */
   loading?: boolean;
+  /** When true (and not loading), shows the `empty` slot. */
   empty?: boolean;
+  /** Number of skeleton rows when loading. */
   skeletonRows?: number;
+  /**
+   * Number of skeleton columns. Defaults to `columns.length` when column
+   * mode is active and to 4 otherwise (legacy slot mode).
+   */
   skeletonCols?: number;
+  /** Controlled sort state. Omit for uncontrolled internal sort. */
+  sort?: SortState | null;
+  /** Show the built-in toolbar above the table when the toolbar slot is used. */
+  toolbar?: boolean;
+  /** Allow users to toggle column visibility (built-in dropdown). */
+  enableColumnVisibility?: boolean;
+  /** Allow users to switch between comfortable and compact row density. */
+  enableDensityToggle?: boolean;
 }>(), {
   loading: false,
   empty: false,
   skeletonRows: 5,
-  skeletonCols: 4,
+  sort: null,
+  toolbar: false,
+  enableColumnVisibility: false,
+  enableDensityToggle: false,
+});
+
+const emit = defineEmits<{
+  (e: 'update:sort', value: SortState | null): void;
+  (e: 'row-click', row: Row): void;
+}>();
+
+const density = ref<'comfortable' | 'compact'>('comfortable');
+function toggleDensity() {
+  density.value = density.value === 'comfortable' ? 'compact' : 'comfortable';
+}
+const cellPaddingClass = computed(() => density.value === 'compact' ? 'px-3 py-1.5' : 'px-4 py-3');
+const headerPaddingClass = computed(() => density.value === 'compact' ? 'px-3 py-2' : 'px-4 py-3');
+
+const hiddenKeys = ref<Set<string>>(new Set(
+  (props.columns ?? []).filter(c => c.hidden).map(c => c.key),
+));
+function toggleColumn(key: string) {
+  const next = new Set(hiddenKeys.value);
+  if (next.has(key)) next.delete(key); else next.add(key);
+  hiddenKeys.value = next;
+}
+const visibleColumns = computed(() => (props.columns ?? []).filter(c => !hiddenKeys.value.has(c.key)));
+const showVisibilityMenu = ref(false);
+
+const internalSort = ref<SortState | null>(props.sort ?? null);
+watch(() => props.sort, v => { internalSort.value = v; });
+const activeSort = computed<SortState | null>(() => props.sort !== undefined && props.sort !== null
+  ? props.sort
+  : internalSort.value);
+
+function cycleSort(col: ColumnDef<Row>) {
+  if (!col.sortable) return;
+  const current = activeSort.value;
+  let next: SortState | null;
+  if (!current || current.key !== col.key) next = { key: col.key, direction: 'asc' };
+  else if (current.direction === 'asc') next = { key: col.key, direction: 'desc' };
+  else next = null;
+  internalSort.value = next;
+  emit('update:sort', next);
+}
+
+function readField(row: Row, field: string): unknown {
+  return field.split('.').reduce<unknown>((acc, part) => {
+    if (acc === null || acc === undefined) return undefined;
+    return (acc as Record<string, unknown>)[part];
+  }, row);
+}
+
+function getCellValue(row: Row, col: ColumnDef<Row>): unknown {
+  if (col.accessor) return col.accessor(row);
+  if (col.field) return readField(row, col.field);
+  return undefined;
+}
+
+const sortedItems = computed<Row[]>(() => {
+  const items = props.items ?? [];
+  const s = activeSort.value;
+  if (props.sort !== null && props.sort !== undefined) return items;
+  if (!s) return items;
+  const col = (props.columns ?? []).find(c => c.key === s.key);
+  if (!col) return items;
+  const factor = s.direction === 'asc' ? 1 : -1;
+  return [...items].sort((a, b) => {
+    const av = getCellValue(a, col);
+    const bv = getCellValue(b, col);
+    if (av === bv) return 0;
+    if (av === undefined || av === null) return 1;
+    if (bv === undefined || bv === null) return -1;
+    if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * factor;
+    return String(av).localeCompare(String(bv)) * factor;
+  });
 });
+
+const colCount = computed(() => props.columns
+  ? visibleColumns.value.length
+  : (props.skeletonCols ?? 4));
+
+function alignClass(col: ColumnDef<Row>): string {
+  if (col.align === 'right') return 'text-right';
+  if (col.align === 'center') return 'text-center';
+  return 'text-left';
+}
+
+function responsiveClass(col: ColumnDef<Row>): string {
+  if (!col.responsive) return '';
+  return `hidden ${col.responsive}:table-cell`;
+}
+
+function defaultRowKey(row: Row, idx: number): string | number {
+  if (props.rowKey) return props.rowKey(row);
+  const id = (row as Record<string, unknown>).id;
+  if (typeof id === 'string' || typeof id === 'number') return id;
+  return idx;
+}
 </script>
 
 <template>
-  <div class="rounded-xl overflow-hidden border border-surface-700/50 bg-surface-900/40">
-    <div class="overflow-x-auto">
-      <table class="w-full">
-        <thead>
-          <tr class="border-b border-surface-700/50 bg-surface-800/30">
-            <slot name="head" />
-          </tr>
-        </thead>
-        <tbody v-if="loading">
-          <tr v-for="i in skeletonRows" :key="i" class="border-b border-surface-800/50 last:border-0">
-            <td v-for="j in skeletonCols" :key="j" class="px-4 py-3">
-              <div class="h-4 bg-gradient-to-r from-surface-800 via-surface-700 to-surface-800 bg-[length:200%_100%] animate-shimmer rounded-md" :style="{ width: j === 1 ? '140px' : '90px' }" />
-            </td>
-          </tr>
-        </tbody>
-        <tbody v-else-if="empty">
-          <tr>
-            <td :colspan="skeletonCols" class="py-0">
-              <slot name="empty" />
-            </td>
-          </tr>
-        </tbody>
-        <tbody v-else>
-          <slot />
-        </tbody>
-      </table>
+  <div class="space-y-3">
+    <div v-if="toolbar || enableColumnVisibility || enableDensityToggle" class="flex items-center gap-2 flex-wrap">
+      <div class="flex-1 min-w-0">
+        <slot name="toolbar" />
+      </div>
+      <div v-if="enableDensityToggle" class="flex items-center">
+        <button
+          type="button"
+          @click="toggleDensity"
+          class="p-2 rounded-lg text-surface-500 hover:text-surface-300 hover:bg-surface-800/60 transition-colors"
+          :title="density === 'compact' ? 'Comfortable density' : 'Compact density'"
+        >
+          <component :is="density === 'compact' ? Rows4 : Rows3" class="w-4 h-4" />
+        </button>
+      </div>
+      <div v-if="enableColumnVisibility && columns" class="relative">
+        <button
+          type="button"
+          @click="showVisibilityMenu = !showVisibilityMenu"
+          class="p-2 rounded-lg text-surface-500 hover:text-surface-300 hover:bg-surface-800/60 transition-colors"
+          title="Toggle columns"
+        >
+          <Columns3 class="w-4 h-4" />
+        </button>
+        <div
+          v-if="showVisibilityMenu"
+          class="absolute right-0 mt-1 w-52 bg-surface-800 border border-surface-700/50 rounded-xl shadow-xl z-20 py-1"
+          v-click-outside="() => (showVisibilityMenu = false)"
+        >
+          <label
+            v-for="col in columns"
+            :key="col.key"
+            class="flex items-center gap-2 px-3 py-2 text-sm text-surface-300 hover:bg-surface-700/40 cursor-pointer"
+          >
+            <input
+              type="checkbox"
+              :checked="!hiddenKeys.has(col.key)"
+              @change="toggleColumn(col.key)"
+              class="rounded border-surface-600 bg-surface-900 text-primary-500 focus:ring-primary-500/30"
+            />
+            <span class="truncate">{{ col.label }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-xl overflow-hidden border border-surface-700/50 bg-surface-900/40">
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="border-b border-surface-700/50 bg-surface-800/30">
+              <template v-if="columns">
+                <th
+                  v-for="col in visibleColumns"
+                  :key="col.key"
+                  :class="[
+                    headerPaddingClass,
+                    'text-xs font-medium text-surface-500 uppercase tracking-wide',
+                    alignClass(col),
+                    responsiveClass(col),
+                    col.width,
+                    col.sortable ? 'cursor-pointer select-none hover:text-surface-300' : '',
+                  ]"
+                  @click="cycleSort(col)"
+                >
+                  <span class="inline-flex items-center gap-1.5">
+                    <component v-if="col.icon" :is="col.icon" class="w-3.5 h-3.5" />
+                    <span>{{ col.label }}</span>
+                    <template v-if="col.sortable">
+                      <ChevronUp
+                        v-if="activeSort?.key === col.key && activeSort.direction === 'asc'"
+                        class="w-3.5 h-3.5"
+                      />
+                      <ChevronDown
+                        v-else-if="activeSort?.key === col.key && activeSort.direction === 'desc'"
+                        class="w-3.5 h-3.5"
+                      />
+                      <ChevronsUpDown v-else class="w-3.5 h-3.5 opacity-50" />
+                    </template>
+                  </span>
+                </th>
+              </template>
+              <slot v-else name="head" />
+            </tr>
+          </thead>
+
+          <tbody v-if="loading">
+            <tr v-for="i in skeletonRows" :key="i" class="border-b border-surface-800/50 last:border-0">
+              <td v-for="j in colCount" :key="j" :class="cellPaddingClass">
+                <div
+                  class="h-4 bg-gradient-to-r from-surface-800 via-surface-700 to-surface-800 bg-[length:200%_100%] animate-shimmer rounded-md"
+                  :style="{ width: j === 1 ? '140px' : '90px' }"
+                />
+              </td>
+            </tr>
+          </tbody>
+
+          <tbody v-else-if="empty || (columns && sortedItems.length === 0)">
+            <tr>
+              <td :colspan="colCount" class="py-0">
+                <slot name="empty" />
+              </td>
+            </tr>
+          </tbody>
+
+          <tbody v-else-if="columns">
+            <tr
+              v-for="(row, idx) in sortedItems"
+              :key="defaultRowKey(row, idx)"
+              class="border-b border-surface-800/50 last:border-0 hover:bg-surface-800/20 transition-colors"
+              @click="emit('row-click', row)"
+            >
+              <td
+                v-for="col in visibleColumns"
+                :key="col.key"
+                :class="[cellPaddingClass, alignClass(col), responsiveClass(col)]"
+              >
+                <slot :name="`cell-${col.key}`" :row="row" :value="getCellValue(row, col)">
+                  <span class="text-sm text-surface-300">{{ getCellValue(row, col) ?? '—' }}</span>
+                </slot>
+              </td>
+            </tr>
+          </tbody>
+
+          <tbody v-else>
+            <slot />
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/ui/Sparkline.vue b/frontend/src/components/ui/Sparkline.vue
new file mode 100644
index 0000000..c5e7aff
--- /dev/null
+++ b/frontend/src/components/ui/Sparkline.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+  values: number[];
+  width?: number;
+  height?: number;
+  color?: string;
+  fill?: string;
+}>(), {
+  width: 80,
+  height: 24,
+  color: '#10b981',
+  fill: 'rgba(16,185,129,0.15)',
+});
+
+const path = computed(() => {
+  const vs = props.values;
+  if (!vs.length) return '';
+  const max = Math.max(...vs, 1);
+  const min = Math.min(...vs, 0);
+  const range = max - min || 1;
+  const stepX = props.width / Math.max(vs.length - 1, 1);
+  return vs.map((v, i) => {
+    const x = i * stepX;
+    const y = props.height - ((v - min) / range) * props.height;
+    return `${i === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)}`;
+  }).join(' ');
+});
+
+const areaPath = computed(() => {
+  if (!path.value) return '';
+  return `${path.value} L${props.width},${props.height} L0,${props.height} Z`;
+});
+
+const empty = computed(() => props.values.length === 0 || props.values.every(v => v === 0));
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    :viewBox="`0 0 ${width} ${height}`"
+    class="block"
+    role="img"
+    aria-label="Activity sparkline"
+  >
+    <template v-if="!empty">
+      <path :d="areaPath" :fill="fill" />
+      <path :d="path" :stroke="color" stroke-width="1.5" fill="none" stroke-linejoin="round" stroke-linecap="round" />
+    </template>
+    <line
+      v-else
+      :x1="0"
+      :y1="height / 2"
+      :x2="width"
+      :y2="height / 2"
+      stroke="rgba(148,163,184,0.25)"
+      stroke-width="1"
+      stroke-dasharray="2 2"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/users/UserAppHistoryModal.vue b/frontend/src/components/users/UserAppHistoryModal.vue
new file mode 100644
index 0000000..78997b2
--- /dev/null
+++ b/frontend/src/components/users/UserAppHistoryModal.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import BaseModal from '@/components/ui/BaseModal.vue';
+import BaseButton from '@/components/ui/BaseButton.vue';
+import { Clock, Globe, Monitor } from 'lucide-vue-next';
+import { getUserLoginHistory } from '@/api/applications';
+import { parseUserAgent } from '@/composables/useUserAgent';
+import type { LoginHistoryEntry } from '@/types';
+
+const props = defineProps<{
+  open: boolean;
+  appId: string;
+  userId: string;
+  userName?: string | null;
+}>();
+
+const emit = defineEmits<{ (e: 'close'): void }>();
+
+const { t } = useI18n();
+const loading = ref(false);
+const entries = ref<LoginHistoryEntry[]>([]);
+const total = ref(0);
+const page = ref(1);
+const limit = 20;
+const error = ref<string | null>(null);
+
+async function load() {
+  loading.value = true;
+  error.value = null;
+  try {
+    const res = await getUserLoginHistory(props.appId, props.userId, { page: page.value, limit });
+    entries.value = res.entries;
+    total.value = res.total;
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to load login history';
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(() => [props.open, props.userId, props.appId], ([isOpen]) => {
+  if (isOpen) {
+    page.value = 1;
+    void load();
+  }
+}, { immediate: true });
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+}
+</script>
+
+<template>
+  <BaseModal :open="open" :title="userName ? `${t('users.history.title')} — ${userName}` : t('users.history.title')" size="lg" @close="emit('close')">
+    <div class="space-y-3">
+      <p class="text-xs text-surface-500">{{ t('users.history.description') }}</p>
+
+      <div v-if="loading" class="space-y-2">
+        <div v-for="i in 3" :key="i" class="h-12 rounded-lg bg-gradient-to-r from-surface-800 via-surface-700 to-surface-800 bg-[length:200%_100%] animate-shimmer" />
+      </div>
+
+      <p v-else-if="error" class="text-sm text-red-400">{{ error }}</p>
+
+      <div v-else-if="entries.length === 0" class="py-8 text-center text-sm text-surface-500">
+        {{ t('users.history.empty') }}
+      </div>
+
+      <div v-else class="rounded-xl border border-surface-700/50 overflow-hidden divide-y divide-surface-800/40">
+        <div v-for="e in entries" :key="e.id" class="px-4 py-3 flex items-start gap-3 hover:bg-surface-800/20 transition-colors">
+          <div class="shrink-0 w-8 h-8 rounded-lg bg-primary-500/10 flex items-center justify-center">
+            <Clock class="w-4 h-4 text-primary-400" />
+          </div>
+          <div class="flex-1 min-w-0 text-sm">
+            <p class="text-surface-200 font-medium">{{ formatDate(e.loggedAt) }}</p>
+            <p class="text-xs text-surface-500 mt-0.5 flex flex-wrap items-center gap-3">
+              <span v-if="e.ipAddress" class="inline-flex items-center gap-1"><Globe class="w-3 h-3" />{{ e.ipAddress }}</span>
+              <span v-if="e.userAgent" class="inline-flex items-center gap-1 truncate"><Monitor class="w-3 h-3" />
+                {{ parseUserAgent(e.userAgent).browser }} / {{ parseUserAgent(e.userAgent).os }}
+              </span>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="!loading && total > limit" class="flex items-center justify-between text-xs text-surface-500">
+        <span>{{ t('common.showing', { from: (page - 1) * limit + 1, to: Math.min(page * limit, total), total }) }}</span>
+        <div class="flex gap-2">
+          <BaseButton variant="outline" size="sm" :disabled="page === 1" @click="page--; load()">{{ t('common.previous') }}</BaseButton>
+          <BaseButton variant="outline" size="sm" :disabled="page * limit >= total" @click="page++; load()">{{ t('common.next') }}</BaseButton>
+        </div>
+      </div>
+    </div>
+  </BaseModal>
+</template>
diff --git a/frontend/src/i18n/en.ts b/frontend/src/i18n/en.ts
index e212769..f28abe4 100644
--- a/frontend/src/i18n/en.ts
+++ b/frontend/src/i18n/en.ts
@@ -82,6 +82,10 @@ export default {
     noMfaEnforced: 'MFA is not enforced platform-wide. Consider requiring it for sensitive applications.',
     lastRefreshed: 'Last refreshed',
     revoke: 'Revoke',
+    onlineNow: 'Online Now',
+    onlineNowSub: 'Active in the last 5 min',
+    loginsChart: 'Login Activity',
+    totalLogins: '{count} logins',
     timeRanges: {
       '7d': 'Last 7 days',
       '30d': 'Last 30 days',
@@ -124,6 +128,31 @@ export default {
     isMfaRequired: 'Force MFA',
     applications: 'Applications',
     password: 'Password',
+    lastLogin: 'Last login',
+    never: 'Never',
+    columns: {
+      name: 'Name',
+      role: 'Role',
+      verified: 'Verified',
+      mfa: '2FA',
+      applications: 'Applications',
+      lastLogin: 'Last login',
+      createdAt: 'Created',
+      actions: 'Actions',
+    },
+    history: {
+      title: 'Login history',
+      description: 'Each entry represents an OAuth token issuance for this user on this application.',
+      empty: 'No logins recorded yet.',
+      open: 'View login history',
+    },
+  },
+  dataTable: {
+    sortAsc: 'Sort ascending',
+    sortDesc: 'Sort descending',
+    clearSort: 'Clear sort',
+    columns: 'Columns',
+    density: 'Density',
   },
   organizations: {
     title: 'Organizations',
@@ -164,6 +193,11 @@ export default {
     title: 'Applications',
     subtitle: 'Manage OAuth2 applications',
     createApp: 'Create Application',
+    activity: {
+      online: 'Online',
+      last7d: '7-day logins',
+      sparklineEmpty: 'No recent activity',
+    },
     name: 'Name',
     slug: 'Slug (Client ID)',
     description: 'Description',
diff --git a/frontend/src/i18n/fr.ts b/frontend/src/i18n/fr.ts
index 5e98ab0..e66b494 100644
--- a/frontend/src/i18n/fr.ts
+++ b/frontend/src/i18n/fr.ts
@@ -82,6 +82,10 @@ export default {
     noMfaEnforced: 'L\'authentification MFA n\'est pas imposée à l\'échelle de la plateforme.',
     lastRefreshed: 'Dernière actualisation',
     revoke: 'Révoquer',
+    onlineNow: 'En ligne',
+    onlineNowSub: 'Actifs dans les 5 dernières minutes',
+    loginsChart: 'Activité des connexions',
+    totalLogins: '{count} connexions',
     timeRanges: {
       '7d': '7 derniers jours',
       '30d': '30 derniers jours',
@@ -124,6 +128,31 @@ export default {
     isMfaRequired: 'Forcer le MFA',
     applications: 'Applications',
     password: 'Mot de passe',
+    lastLogin: 'Dernière connexion',
+    never: 'Jamais',
+    columns: {
+      name: 'Nom',
+      role: 'Rôle',
+      verified: 'Vérifié',
+      mfa: '2FA',
+      applications: 'Applications',
+      lastLogin: 'Dernière connexion',
+      createdAt: 'Créé le',
+      actions: 'Actions',
+    },
+    history: {
+      title: 'Historique de connexion',
+      description: 'Chaque entrée correspond à l\'émission d\'un jeton OAuth pour cet utilisateur sur cette application.',
+      empty: 'Aucune connexion enregistrée.',
+      open: 'Voir l\'historique de connexion',
+    },
+  },
+  dataTable: {
+    sortAsc: 'Tri croissant',
+    sortDesc: 'Tri décroissant',
+    clearSort: 'Réinitialiser le tri',
+    columns: 'Colonnes',
+    density: 'Densité',
   },
   organizations: {
     title: 'Organisations',
@@ -164,6 +193,11 @@ export default {
     title: 'Applications',
     subtitle: 'Gérer les applications OAuth2',
     createApp: 'Créer une application',
+    activity: {
+      online: 'En ligne',
+      last7d: 'Connexions 7 j',
+      sparklineEmpty: 'Aucune activité récente',
+    },
     name: 'Nom',
     slug: 'Identifiant (Client ID)',
     description: 'Description',
diff --git a/frontend/src/types/data-table.ts b/frontend/src/types/data-table.ts
new file mode 100644
index 0000000..e3b1db2
--- /dev/null
+++ b/frontend/src/types/data-table.ts
@@ -0,0 +1,40 @@
+import type { Component } from 'vue';
+
+/**
+ * Column definition for the shared DataTable component.
+ *
+ * - `key`: stable identifier; matches the named slot `cell-<key>` if a
+ *   custom cell renderer is provided.
+ * - `field`: dot-path accessor on the row object used for default text
+ *   rendering and client-side sort. Optional when `cell-<key>` slot is used.
+ * - `responsive`: Tailwind responsive prefix that controls visibility — the
+ *   column is hidden below the breakpoint (e.g. `md` hides on mobile).
+ * - `align`: cell alignment; default `left`.
+ * - `sortable`: enables the sort caret in the header.
+ * - `width`: optional fixed width class (e.g. `w-32`, `w-[180px]`).
+ * - `hidden`: column-visibility toggle; managed by the table when the
+ *   visibility dropdown is rendered, or controlled externally.
+ */
+export interface ColumnDef<Row = Record<string, unknown>> {
+  key: string;
+  label: string;
+  field?: string;
+  responsive?: 'sm' | 'md' | 'lg' | 'xl';
+  align?: 'left' | 'right' | 'center';
+  sortable?: boolean;
+  width?: string;
+  hidden?: boolean;
+  icon?: Component;
+  /**
+   * Optional value extractor used by client-side sort and default text
+   * rendering when no `cell-<key>` slot is provided. Receives the full row.
+   */
+  accessor?: (row: Row) => unknown;
+}
+
+export type SortDirection = 'asc' | 'desc';
+
+export interface SortState {
+  key: string;
+  direction: SortDirection;
+}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 639b0ec..533de5d 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -16,6 +16,17 @@ export interface User {
   company: string | null
   position: string | null
   address: string | null
+  /** ISO timestamp of the most recent OAuth token issuance. Null when the user has never logged in. */
+  lastLoginAt?: string | null
+  /** Applications the user currently has active access to. Populated by /admin/users. */
+  applications?: UserAppSummary[]
+}
+
+export interface UserAppSummary {
+  id: string
+  name: string
+  slug: string
+  icon: string | null
 }
 
 export interface Session {
@@ -29,6 +40,10 @@ export interface Session {
   userId: string
   impersonatedBy: string | null
   activeOrganizationId: string | null
+  /** Enriched user identity (populated by /admin/sessions). */
+  user?: { id: string; name: string | null; email: string | null; image: string | null }
+  /** Applications this user has logged into during the session lifespan. */
+  applications?: UserAppSummary[]
 }
 
 export interface MfaSetupResult {
@@ -146,7 +161,25 @@ export interface UserApplication {
   createdAt: string
   name: string | null
   email: string | null
+  image?: string | null
   roleId: string | null
+  /** Most recent login of this user to this application. */
+  lastLoginAt?: string | null
+}
+
+export interface LoginHistoryEntry {
+  id: string
+  loggedAt: string
+  ipAddress: string | null
+  userAgent: string | null
+  sessionId: string | null
+}
+
+export interface LoginHistoryResponse {
+  entries: LoginHistoryEntry[]
+  total: number
+  page: number
+  limit: number
 }
 
 export interface UserApplicationDetail {
diff --git a/frontend/src/views/ApplicationDetailView.vue b/frontend/src/views/ApplicationDetailView.vue
index 1ffc08e..f043cf5 100644
--- a/frontend/src/views/ApplicationDetailView.vue
+++ b/frontend/src/views/ApplicationDetailView.vue
@@ -20,8 +20,13 @@ import ConfirmDialog from '@/components/ui/ConfirmDialog.vue';
 import BaseBadge from '@/components/ui/BaseBadge.vue';
 import CopyField from '@/components/ui/CopyField.vue';
 import UserAvatar from '@/components/ui/UserAvatar.vue';
+import DataTable from '@/components/ui/DataTable.vue';
+import UserAppHistoryModal from '@/components/users/UserAppHistoryModal.vue';
+import Sparkline from '@/components/ui/Sparkline.vue';
+import { getApplicationsActivity, getLogins, type AppActivityEntry } from '@/api/stats';
 import type { PlanFeature } from '@/types';
-import { ArrowLeft, Plus, Trash2, RefreshCw, Check, X, AlertTriangle, Code, TrendingUp } from 'lucide-vue-next';
+import type { ColumnDef } from '@/types/data-table';
+import { ArrowLeft, Plus, Trash2, RefreshCw, Check, X, AlertTriangle, Code, TrendingUp, History, Activity } from 'lucide-vue-next';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -73,6 +78,7 @@ const planFeatureEntries = ref<Array<{ key: string; usage: boolean; value: strin
 onMounted(async () => {
   await services.fetch();
   await loadAll();
+  void loadAppActivity();
 });
 
 async function loadAll() {
@@ -107,6 +113,56 @@ async function loadConsumption() {
   consumption.value = allAggs;
 }
 
+// — User-history modal state
+const historyModalOpen = ref(false);
+const historyModalUserId = ref<string | null>(null);
+const historyModalUserName = ref<string>('');
+function openHistory(ua: UserApplication) {
+  historyModalUserId.value = ua.userId;
+  historyModalUserName.value = getUserName(ua.userId);
+  historyModalOpen.value = true;
+}
+
+// — Activity strip (online + sparkline + 7d logins)
+const appActivity = ref<AppActivityEntry | null>(null);
+async function loadAppActivity() {
+  try {
+    const [activityRes, loginsRes] = await Promise.all([
+      getApplicationsActivity(),
+      getLogins({ range: '7d', appId }),
+    ]);
+    const entry = activityRes.applications.find(a => a.appId === appId);
+    if (entry) {
+      appActivity.value = entry;
+    } else {
+      // Fallback: synthesise a sparkline from the per-app logins endpoint.
+      appActivity.value = {
+        appId,
+        online: 0,
+        last7dLogins: loginsRes.total,
+        sparkline: loginsRes.series.map(p => p.count),
+      };
+    }
+  } catch {
+    // Silent — activity strip is non-critical.
+  }
+}
+
+const userColumns = computed<ColumnDef<UserApplication>[]>(() => [
+  { key: 'user', label: t('users.columns.name') },
+  { key: 'role', label: t('users.columns.role'), responsive: 'md' },
+  { key: 'plan', label: 'Plan', responsive: 'md' },
+  { key: 'status', label: 'Status', responsive: 'lg' },
+  { key: 'lastLogin', label: t('users.columns.lastLogin'), field: 'lastLoginAt', sortable: true, responsive: 'lg' },
+  { key: 'history', label: t('users.columns.history'), align: 'right' },
+  { key: 'actions', label: t('users.columns.actions'), align: 'right' },
+]);
+
+function formatLastLogin(iso: string | null | undefined): string {
+  if (!iso) return t('users.never');
+  return new Date(iso).toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' });
+}
+
 async function handleCreateRole() {
   formLoading.value = true;
   try {
@@ -585,6 +641,26 @@ const financialKpis = computed(() => {
         </div>
       </div>
 
+      <div v-if="appActivity" class="rounded-2xl bg-surface-900/60 border border-surface-700/40 px-5 py-3 flex items-center justify-between gap-5">
+        <div class="flex items-center gap-5 text-sm">
+          <div class="flex items-center gap-2">
+            <Activity
+              class="w-4 h-4"
+              :class="appActivity.online > 0 ? 'text-emerald-400' : 'text-surface-600'"
+            />
+            <span class="text-surface-200 font-semibold">{{ appActivity.online }}</span>
+            <span class="text-xs text-surface-500">{{ t('applications.activity.online') }}</span>
+          </div>
+          <div class="h-5 w-px bg-surface-700/60" />
+          <div class="flex items-center gap-2">
+            <TrendingUp class="w-4 h-4 text-primary-400" />
+            <span class="text-surface-200 font-semibold">{{ appActivity.last7dLogins }}</span>
+            <span class="text-xs text-surface-500">{{ t('applications.activity.last7d') }}</span>
+          </div>
+        </div>
+        <Sparkline :values="appActivity.sparkline" :width="140" :height="32" />
+      </div>
+
       <div class="flex gap-1 p-1 bg-surface-900/60 rounded-xl border border-surface-700/40 w-fit overflow-x-auto">
         <button
           v-for="tab in tabs"
@@ -681,29 +757,62 @@ const financialKpis = computed(() => {
           <div class="flex justify-end">
             <BaseButton size="sm" @click="showUserModal = true"><Plus class="w-3.5 h-3.5" />{{ t('appDetail.grantAccess') }}</BaseButton>
           </div>
-          <div class="rounded-2xl bg-surface-900/60 border border-surface-700/40 overflow-hidden">
-            <div v-if="!appUsers.length" class="px-5 py-8 text-center text-sm text-surface-500">No users with access</div>
-            <div v-else class="divide-y divide-surface-800/40">
-              <div v-for="ua in appUsers" :key="ua.userId" class="px-5 py-4 flex items-center gap-4 group" :class="{ 'opacity-60': isDeletedUser(ua.userId) }">
-                <UserAvatar :name="getUserName(ua.userId)" :image="getUserImage(ua.userId)" size="sm" />
-                <div class="flex-1 min-w-0">
+          <DataTable
+            :columns="userColumns"
+            :items="appUsers"
+            :loading="loading"
+            :empty="!loading && appUsers.length === 0"
+            :row-key="(u: UserApplication) => u.userId"
+            enable-column-visibility
+            enable-density-toggle
+          >
+            <template #empty>
+              <div class="px-5 py-8 text-center text-sm text-surface-500">No users with access</div>
+            </template>
+            <template #cell-user="{ row }">
+              <div class="flex items-center gap-3" :class="{ 'opacity-60': isDeletedUser((row as UserApplication).userId) }">
+                <UserAvatar :name="getUserName((row as UserApplication).userId)" :image="getUserImage((row as UserApplication).userId)" size="sm" />
+                <div class="min-w-0">
                   <div class="flex items-center gap-2">
-                    <p class="text-sm font-medium text-surface-200">{{ getUserName(ua.userId) }}</p>
-                    <BaseBadge v-if="isDeletedUser(ua.userId)" variant="error" size="sm">{{ t('appDetail.deletedUser') }}</BaseBadge>
+                    <p class="text-sm font-medium text-surface-200 truncate">{{ getUserName((row as UserApplication).userId) }}</p>
+                    <BaseBadge v-if="isDeletedUser((row as UserApplication).userId)" variant="error" size="sm">{{ t('appDetail.deletedUser') }}</BaseBadge>
                   </div>
-                  <p class="text-xs text-surface-500">{{ getUserEmail(ua.userId) }}</p>
-                </div>
-                <div class="flex items-center gap-2">
-                  <BaseBadge variant="neutral" size="sm">{{ getRoleName(ua.roleId) }}</BaseBadge>
-                  <BaseBadge variant="neutral" size="sm">{{ getPlanName(ua.subscriptionPlanId) }}</BaseBadge>
-                  <BaseBadge :variant="ua.isActive ? 'success' : 'neutral'" size="sm" dot>{{ ua.isActive ? t('common.active') : t('common.inactive') }}</BaseBadge>
+                  <p class="text-xs text-surface-500 truncate">{{ getUserEmail((row as UserApplication).userId) }}</p>
                 </div>
-                <button @click="selectedUserId = ua.userId; showDeleteUserConfirm = true" class="opacity-0 group-hover:opacity-100 p-1.5 rounded-lg text-red-500 hover:bg-red-500/10 transition-all">
-                  <Trash2 class="w-4 h-4" />
-                </button>
               </div>
-            </div>
-          </div>
+            </template>
+            <template #cell-role="{ row }">
+              <BaseBadge variant="neutral" size="sm">{{ getRoleName((row as UserApplication).roleId) }}</BaseBadge>
+            </template>
+            <template #cell-plan="{ row }">
+              <BaseBadge variant="neutral" size="sm">{{ getPlanName((row as UserApplication).subscriptionPlanId) }}</BaseBadge>
+            </template>
+            <template #cell-status="{ row }">
+              <BaseBadge :variant="(row as UserApplication).isActive ? 'success' : 'neutral'" size="sm" dot>
+                {{ (row as UserApplication).isActive ? t('common.active') : t('common.inactive') }}
+              </BaseBadge>
+            </template>
+            <template #cell-lastLogin="{ row }">
+              <span class="text-xs text-surface-500">{{ formatLastLogin((row as UserApplication).lastLoginAt) }}</span>
+            </template>
+            <template #cell-history="{ row }">
+              <button
+                @click="openHistory(row as UserApplication)"
+                class="p-1.5 rounded-lg text-surface-500 hover:text-surface-200 hover:bg-surface-700/50 transition-colors"
+                :title="t('users.history.title')"
+              >
+                <History class="w-4 h-4" />
+              </button>
+            </template>
+            <template #cell-actions="{ row }">
+              <button
+                @click="selectedUserId = (row as UserApplication).userId; showDeleteUserConfirm = true"
+                class="p-1.5 rounded-lg text-red-500 hover:bg-red-500/10 transition-all"
+              >
+                <Trash2 class="w-4 h-4" />
+              </button>
+            </template>
+          </DataTable>
         </div>
 
         <div v-if="activeTab === 'plans'" class="space-y-4">
@@ -1115,5 +1224,14 @@ const financialKpis = computed(() => {
     <ConfirmDialog :open="showRotateConfirm" :title="t('applications.rotateSecret')" :message="t('applications.rotateSecretConfirm')" :loading="formLoading" @confirm="handleRotate" @cancel="showRotateConfirm = false" />
     <ConfirmDialog :open="showDeletePermConfirm" :title="t('appDetail.deletePermission')" message="Delete this permission?" :loading="formLoading" @confirm="async () => { if (selectedPermId) { await appsApi.deletePermission(appId, selectedPermId); permissions = (await appsApi.listPermissions(appId)).permissions; showDeletePermConfirm = false; } }" @cancel="showDeletePermConfirm = false" />
     <ConfirmDialog :open="showDeletePlanConfirm" :title="t('appDetail.deletePlan')" message="Delete this plan?" :loading="formLoading" @confirm="async () => { if (selectedPlanId) { await appsApi.deletePlan(appId, selectedPlanId); plans = (await appsApi.listPlans(appId)).plans; showDeletePlanConfirm = false; } }" @cancel="showDeletePlanConfirm = false" />
+
+    <UserAppHistoryModal
+      v-if="historyModalUserId"
+      :open="historyModalOpen"
+      :app-id="appId"
+      :user-id="historyModalUserId"
+      :user-name="historyModalUserName"
+      @close="historyModalOpen = false"
+    />
   </AppLayout>
 </template>
diff --git a/frontend/src/views/ApplicationsView.vue b/frontend/src/views/ApplicationsView.vue
index 50460fe..fedbc9c 100644
--- a/frontend/src/views/ApplicationsView.vue
+++ b/frontend/src/views/ApplicationsView.vue
@@ -14,6 +14,8 @@ import CopyField from '@/components/ui/CopyField.vue';
 import EmptyState from '@/components/ui/EmptyState.vue';
 import EntityModal from '@/components/ui/EntityModal.vue';
 import ApplicationFormModal from '@/components/applications/ApplicationFormModal.vue';
+import Sparkline from '@/components/ui/Sparkline.vue';
+import { getApplicationsActivity, type AppActivityEntry } from '@/api/stats';
 import {
   Plus,
   AppWindow,
@@ -27,6 +29,7 @@ import {
   Globe,
   Lock,
   AlertTriangle,
+  Activity,
 } from 'lucide-vue-next';
 
 const { t } = useI18n();
@@ -47,7 +50,22 @@ const actionMenu = ref<string | null>(null);
 const filterActive = ref('');
 const filterType = ref('');
 
-onMounted(() => store.fetchApplications());
+onMounted(() => {
+  store.fetchApplications();
+  void loadActivity();
+});
+
+const activity = ref<Map<string, AppActivityEntry>>(new Map());
+async function loadActivity() {
+  try {
+    const res = await getApplicationsActivity();
+    const m = new Map<string, AppActivityEntry>();
+    res.applications.forEach(a => m.set(a.appId, a));
+    activity.value = m;
+  } catch {
+    // Silent — sparklines are decorative.
+  }
+}
 
 const filtered = computed(() => {
   let apps = store.applications;
@@ -277,6 +295,27 @@ function formatDate(iso: string) {
           <div class="text-xs text-surface-600">
             {{ app.redirectUris.length }} redirect URIs · {{ formatDate(app.createdAt) }}
           </div>
+
+          <div class="mt-3 pt-3 border-t border-surface-800/40 flex items-center justify-between">
+            <div class="flex items-center gap-3 text-xs">
+              <span
+                class="inline-flex items-center gap-1.5"
+                :class="(activity.get(app.id)?.online ?? 0) > 0 ? 'text-emerald-400' : 'text-surface-600'"
+                :title="t('applications.activity.online')"
+              >
+                <Activity class="w-3 h-3" />
+                {{ activity.get(app.id)?.online ?? 0 }}
+              </span>
+              <span class="text-surface-500">
+                {{ activity.get(app.id)?.last7dLogins ?? 0 }} · {{ t('applications.activity.last7d') }}
+              </span>
+            </div>
+            <Sparkline
+              :values="activity.get(app.id)?.sparkline ?? []"
+              :width="72"
+              :height="20"
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index 0641c01..08cc159 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useAuthStore } from '@/stores/auth';
@@ -8,14 +8,18 @@ import { listUsers } from '@/api/users';
 import { listSessions, revokeSession } from '@/api/sessions';
 import { listApplications } from '@/api/applications';
 import { listOrganizations } from '@/api/organizations';
+import { getActiveUsers, getLogins, type LoginsSeriesPoint } from '@/api/stats';
 import AppLayout from '@/components/layout/AppLayout.vue';
 import StatCard from '@/components/ui/StatCard.vue';
 import UserAvatar from '@/components/ui/UserAvatar.vue';
 import BaseButton from '@/components/ui/BaseButton.vue';
+import DataTable from '@/components/ui/DataTable.vue';
+import AppIconStack from '@/components/ui/AppIconStack.vue';
 import { parseUserAgent } from '@/composables/useUserAgent';
 import type { Session, User, Application, Organization } from '@/types';
+import type { ColumnDef } from '@/types/data-table';
 import {
-  Users, MonitorSmartphone, AppWindow, Building2,
+  Users, MonitorSmartphone, AppWindow, Building2, Activity,
   AlertTriangle, Info, UserPlus, Plus, Settings, Clock,
 } from 'lucide-vue-next';
 import { Line } from 'vue-chartjs';
@@ -36,9 +40,37 @@ const loading = ref(true);
 const timeRange = ref<'7d' | '30d'>('7d');
 const lastRefreshed = ref(new Date());
 
+const onlineCount = ref<number | null>(null);
+const loginsSeries = ref<LoginsSeriesPoint[]>([]);
+const loginsTotal = ref(0);
+const loginsLoading = ref(true);
+let onlinePollHandle: ReturnType<typeof setInterval> | null = null;
+
+async function fetchOnline() {
+  try {
+    const res = await getActiveUsers();
+    onlineCount.value = res.count;
+  } catch {
+    // Silent — KPI tolerates transient errors during polling.
+  }
+}
+
+async function fetchLogins() {
+  loginsLoading.value = true;
+  try {
+    const res = await getLogins({ range: timeRange.value });
+    loginsSeries.value = res.series;
+    loginsTotal.value = res.total;
+  } finally {
+    loginsLoading.value = false;
+  }
+}
+
 onMounted(async () => {
   await Promise.all([
     services.fetch(),
+    fetchOnline(),
+    fetchLogins(),
     (async () => {
       const [u, s, a, o] = await Promise.all([
         listUsers({ limit: 100 }),
@@ -54,6 +86,11 @@ onMounted(async () => {
     })(),
   ]);
   loading.value = false;
+  onlinePollHandle = setInterval(fetchOnline, 30_000);
+});
+
+onUnmounted(() => {
+  if (onlinePollHandle) clearInterval(onlinePollHandle);
 });
 
 const activeApplications = computed(() => applications.value.filter(a => a.isActive).length);
@@ -64,6 +101,15 @@ const userMap = computed(() => {
   return m;
 });
 
+const sessionColumns = computed<ColumnDef<Session>[]>(() => [
+  { key: 'user', label: t('users.columns.name') },
+  { key: 'apps', label: t('users.columns.applications'), responsive: 'md' },
+  { key: 'ipAddress', label: 'IP', field: 'ipAddress', responsive: 'md' },
+  { key: 'ua', label: 'Device', responsive: 'lg' },
+  { key: 'createdAt', label: t('users.columns.createdAt'), field: 'createdAt', sortable: true, responsive: 'lg' },
+  { key: 'actions', label: t('users.columns.actions'), align: 'right' },
+]);
+
 function generateDateLabels(days: number): string[] {
   return Array.from({ length: days }, (_, i) => {
     const d = new Date();
@@ -107,6 +153,24 @@ const userChartData = computed(() => ({
   }],
 }));
 
+const loginsChartData = computed(() => ({
+  labels: loginsSeries.value.map(p => {
+    const d = new Date(p.date);
+    return d.toLocaleDateString('en', { month: 'short', day: 'numeric' });
+  }),
+  datasets: [{
+    data: loginsSeries.value.map(p => p.count),
+    borderColor: '#10b981',
+    backgroundColor: 'rgba(16,185,129,0.08)',
+    fill: true,
+    tension: 0.4,
+    pointRadius: 3,
+    pointBackgroundColor: '#10b981',
+  }],
+}));
+
+watch(timeRange, () => { void fetchLogins(); });
+
 const hasNoProviders = computed(() => {
   const p = services.config?.providers;
   if (!p) return false;
@@ -129,7 +193,14 @@ void d;
 <template>
   <AppLayout :title="t('dashboard.title')" :subtitle="t('dashboard.subtitle')">
     <div class="space-y-6">
-      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      <div class="grid grid-cols-2 lg:grid-cols-5 gap-4">
+        <StatCard
+          :label="t('dashboard.onlineNow')"
+          :value="onlineCount ?? '—'"
+          :loading="loading && onlineCount === null"
+          :icon="Activity"
+          :sub="t('dashboard.onlineNowSub')"
+        />
         <StatCard :label="t('dashboard.totalUsers')" :value="loading ? '' : users.length" :loading="loading" :icon="Users" />
         <StatCard :label="t('dashboard.activeSessions')" :value="loading ? '' : sessions.length" :loading="loading" :icon="MonitorSmartphone" :sub="t('dashboard.lastRefreshed') + ' ' + lastRefreshed.toLocaleTimeString()" />
         <StatCard :label="t('dashboard.totalApplications')" :value="loading ? '' : applications.length" :loading="loading" :icon="AppWindow" :sub="`${activeApplications} ${t('common.active')}`" />
@@ -197,56 +268,84 @@ void d;
         </div>
       </div>
 
+      <div class="rounded-2xl bg-surface-900/60 border border-surface-700/40 p-5">
+        <div class="flex items-center justify-between mb-4">
+          <div>
+            <p class="text-sm font-semibold text-surface-200">{{ t('dashboard.loginsChart') }}</p>
+            <p class="text-xs text-surface-500 mt-0.5">{{ t('dashboard.totalLogins', { count: loginsTotal }) }}</p>
+          </div>
+          <div class="flex gap-1">
+            <button
+              v-for="r in (['7d', '30d'] as const)"
+              :key="`logins-${r}`"
+              @click="timeRange = r"
+              :class="['px-2.5 py-1 rounded-lg text-xs font-medium transition-colors', timeRange === r ? 'bg-emerald-600/20 text-emerald-300' : 'text-surface-500 hover:text-surface-300']"
+            >
+              {{ t(`dashboard.timeRanges.${r}`) }}
+            </button>
+          </div>
+        </div>
+        <div class="h-48">
+          <Line v-if="!loginsLoading" :data="loginsChartData" :options="chartOptions" />
+          <div v-else class="h-full bg-gradient-to-r from-surface-800 via-surface-700 to-surface-800 bg-[length:200%_100%] animate-shimmer rounded-xl" />
+        </div>
+      </div>
+
       <div class="rounded-2xl bg-surface-900/60 border border-surface-700/40 overflow-hidden">
         <div class="px-5 py-4 border-b border-surface-700/40 flex items-center justify-between">
           <p class="text-sm font-semibold text-surface-200">{{ t('dashboard.activeSessionsList') }}</p>
           <span class="text-xs text-surface-500">{{ sessions.length }} {{ t('common.total').toLowerCase() }}</span>
         </div>
-
-        <div v-if="loading" class="divide-y divide-surface-800/40">
-          <div v-for="i in 3" :key="i" class="px-5 py-4 flex items-center gap-4">
-            <div class="w-9 h-9 bg-gradient-to-r from-surface-800 via-surface-700 to-surface-800 bg-[length:200%_100%] animate-shimmer rounded-full" />
-            <div class="flex-1 space-y-2">
-              <div class="h-3.5 bg-gradient-to-r from-surface-800 via-surface-700 to-surface-800 bg-[length:200%_100%] animate-shimmer rounded w-32" />
-              <div class="h-3 bg-gradient-to-r from-surface-800 via-surface-700 to-surface-800 bg-[length:200%_100%] animate-shimmer rounded w-48" />
-            </div>
-          </div>
-        </div>
-
-        <div v-else-if="sessions.length === 0" class="px-5 py-10 text-center text-sm text-surface-500">
-          No active sessions
-        </div>
-
-        <div v-else class="divide-y divide-surface-800/40">
-          <div
-            v-for="session in sessions"
-            :key="session.id"
-            class="px-5 py-4 flex items-center gap-4 hover:bg-surface-800/20 transition-colors"
+        <div class="p-3">
+          <DataTable
+            :columns="sessionColumns"
+            :items="sessions"
+            :loading="loading"
+            :empty="!loading && sessions.length === 0"
+            :row-key="(s: Session) => s.id"
           >
-            <UserAvatar
-              :name="userMap.get(session.userId)?.name"
-              :image="userMap.get(session.userId)?.image"
-              size="sm"
-            />
-            <div class="flex-1 min-w-0">
-              <p class="text-sm font-medium text-surface-200">
-                {{ userMap.get(session.userId)?.name ?? t('common.unknown') }}
-                <span v-if="session.userId === auth.user?.id" class="ml-2 text-xs text-primary-400">(you)</span>
-              </p>
-              <p class="text-xs text-surface-500 mt-0.5">
-                {{ userMap.get(session.userId)?.email }} · {{ session.ipAddress ?? '—' }} ·
-                {{ parseUserAgent(session.userAgent).browser }} / {{ parseUserAgent(session.userAgent).os }}
-              </p>
-            </div>
-            <div class="text-right shrink-0 hidden sm:block">
-              <p class="text-xs text-surface-400 flex items-center gap-1">
+            <template #empty>
+              <div class="px-5 py-10 text-center text-sm text-surface-500">No active sessions</div>
+            </template>
+            <template #cell-user="{ row }">
+              <div class="flex items-center gap-3">
+                <UserAvatar
+                  :name="(row as Session).user?.name ?? userMap.get((row as Session).userId)?.name"
+                  :image="(row as Session).user?.image ?? userMap.get((row as Session).userId)?.image"
+                  size="sm"
+                />
+                <div class="min-w-0">
+                  <p class="text-sm font-medium text-surface-200 truncate">
+                    {{ (row as Session).user?.name ?? userMap.get((row as Session).userId)?.name ?? t('common.unknown') }}
+                    <span v-if="(row as Session).userId === auth.user?.id" class="ml-1 text-xs text-primary-400">(you)</span>
+                  </p>
+                  <p class="text-xs text-surface-500 truncate">
+                    {{ (row as Session).user?.email ?? userMap.get((row as Session).userId)?.email }}
+                  </p>
+                </div>
+              </div>
+            </template>
+            <template #cell-apps="{ row }">
+              <AppIconStack :apps="(row as Session).applications ?? []" />
+            </template>
+            <template #cell-ipAddress="{ row }">
+              <span class="text-xs text-surface-400">{{ (row as Session).ipAddress ?? '—' }}</span>
+            </template>
+            <template #cell-ua="{ row }">
+              <span class="text-xs text-surface-400">
+                {{ parseUserAgent((row as Session).userAgent).browser }} / {{ parseUserAgent((row as Session).userAgent).os }}
+              </span>
+            </template>
+            <template #cell-createdAt="{ row }">
+              <span class="text-xs text-surface-500 inline-flex items-center gap-1">
                 <Clock class="w-3 h-3" />
-                {{ formatDate(session.createdAt) }}
-              </p>
-              <p class="text-xs text-surface-600 mt-0.5">Expires {{ formatDate(session.expiresAt) }}</p>
-            </div>
-            <BaseButton variant="ghost" size="sm" @click="handleRevoke(session)">{{ t('dashboard.revoke') }}</BaseButton>
-          </div>
+                {{ formatDate((row as Session).createdAt) }}
+              </span>
+            </template>
+            <template #cell-actions="{ row }">
+              <BaseButton variant="ghost" size="sm" @click="handleRevoke(row as Session)">{{ t('dashboard.revoke') }}</BaseButton>
+            </template>
+          </DataTable>
         </div>
       </div>
     </div>
diff --git a/frontend/src/views/UsersView.vue b/frontend/src/views/UsersView.vue
index fbd4b46..b1a4685 100644
--- a/frontend/src/views/UsersView.vue
+++ b/frontend/src/views/UsersView.vue
@@ -17,7 +17,9 @@ import BaseBadge from '@/components/ui/BaseBadge.vue';
 import UserAvatar from '@/components/ui/UserAvatar.vue';
 import DataTable from '@/components/ui/DataTable.vue';
 import EmptyState from '@/components/ui/EmptyState.vue';
+import AppIconStack from '@/components/ui/AppIconStack.vue';
 import { UserPlus, Search, CheckCircle, XCircle, Shield, ShieldAlert, User as UserIcon, MoreHorizontal, Eye, Pencil, Trash2, Ban, CheckCircle2 } from 'lucide-vue-next';
+import type { ColumnDef } from '@/types/data-table';
 import { useAuthStore } from '@/stores/auth';
 
 const { t } = useI18n();
@@ -198,6 +200,22 @@ function formatDate(iso: string) {
   return new Date(iso).toLocaleDateString(undefined, { dateStyle: 'medium' });
 }
 
+function formatLastLogin(iso: string | null | undefined): string {
+  if (!iso) return t('users.never');
+  return new Date(iso).toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' });
+}
+
+const userColumns = computed<ColumnDef<User>[]>(() => [
+  { key: 'name', label: t('users.columns.name'), field: 'name', sortable: true },
+  { key: 'role', label: t('users.columns.role'), field: 'role', sortable: true, responsive: 'md' },
+  { key: 'applications', label: t('users.columns.applications'), responsive: 'lg', accessor: (r) => r.applications?.length ?? 0 },
+  { key: 'lastLogin', label: t('users.columns.lastLogin'), field: 'lastLoginAt', sortable: true, responsive: 'lg' },
+  { key: 'verified', label: t('users.columns.verified'), field: 'emailVerified', responsive: 'xl' },
+  { key: 'mfa', label: t('users.columns.mfa'), field: 'twoFactorEnabled', responsive: 'xl' },
+  { key: 'createdAt', label: t('users.columns.createdAt'), field: 'createdAt', sortable: true, responsive: 'xl' },
+  { key: 'actions', label: t('users.columns.actions'), align: 'right' },
+]);
+
 const menuPos = ref({ top: 0, left: 0 });
 const MENU_WIDTH = 176; // w-44
 
@@ -264,16 +282,15 @@ const editModalTags = computed(() => {
         </BaseButton>
       </div>
 
-      <DataTable :loading="store.loading" :empty="!store.loading && filteredUsers.length === 0" :skeleton-cols="6">
-        <template #head>
-          <th class="px-4 py-3 text-left text-xs font-medium text-surface-500 uppercase tracking-wide">{{ t('users.name') }}</th>
-          <th class="px-4 py-3 text-left text-xs font-medium text-surface-500 uppercase tracking-wide hidden md:table-cell">{{ t('users.role') }}</th>
-          <th class="px-4 py-3 text-left text-xs font-medium text-surface-500 uppercase tracking-wide hidden lg:table-cell">{{ t('users.verified') }}</th>
-          <th class="px-4 py-3 text-left text-xs font-medium text-surface-500 uppercase tracking-wide hidden lg:table-cell">{{ t('users.mfa') }}</th>
-          <th class="px-4 py-3 text-left text-xs font-medium text-surface-500 uppercase tracking-wide hidden xl:table-cell">{{ t('users.createdAt') }}</th>
-          <th class="px-4 py-3 text-right text-xs font-medium text-surface-500 uppercase tracking-wide">{{ t('common.actions') }}</th>
-        </template>
-
+      <DataTable
+        :columns="userColumns"
+        :items="filteredUsers"
+        :loading="store.loading"
+        :empty="!store.loading && filteredUsers.length === 0"
+        :row-key="(u: User) => u.id"
+        enable-column-visibility
+        enable-density-toggle
+      >
         <template #empty>
           <EmptyState :title="t('users.noUsers')" :message="t('users.noUsersMessage')">
             <template #action>
@@ -285,69 +302,76 @@ const editModalTags = computed(() => {
           </EmptyState>
         </template>
 
-        <tr
-          v-for="user in filteredUsers"
-          :key="user.id"
-          class="border-b border-surface-800/40 last:border-0 hover:bg-surface-800/20 transition-colors"
-        >
-          <td class="px-4 py-3">
-            <div class="flex items-center gap-3">
-              <UserAvatar :name="user.name" :image="user.image" size="sm" />
-              <div class="min-w-0">
-                <div class="flex items-center gap-2">
-                  <p class="text-sm font-medium text-surface-200 truncate">{{ user.name }}</p>
-                  <BaseBadge v-if="user.banned" variant="error" size="sm">{{ t('users.banned') }}</BaseBadge>
-                </div>
-                <p class="text-xs text-surface-500 truncate">{{ user.email }}</p>
+        <template #cell-name="{ row }">
+          <div class="flex items-center gap-3">
+            <UserAvatar :name="(row as User).name" :image="(row as User).image" size="sm" />
+            <div class="min-w-0">
+              <div class="flex items-center gap-2">
+                <p class="text-sm font-medium text-surface-200 truncate">{{ (row as User).name }}</p>
+                <BaseBadge v-if="(row as User).banned" variant="error" size="sm">{{ t('users.banned') }}</BaseBadge>
               </div>
+              <p class="text-xs text-surface-500 truncate">{{ (row as User).email }}</p>
             </div>
-          </td>
-          <td class="px-4 py-3 hidden md:table-cell">
-            <BaseBadge :variant="roleBadgeVariant(user.role)">
-              <ShieldAlert v-if="user.role === 'superadmin'" class="w-3 h-3" />
-              <Shield v-else-if="user.role === 'admin'" class="w-3 h-3" />
-              <UserIcon v-else class="w-3 h-3" />
-              {{ user.role ? t(`users.${user.role}`) : t('users.user') }}
-            </BaseBadge>
-          </td>
-          <td class="px-4 py-3 hidden lg:table-cell">
-            <CheckCircle v-if="user.emailVerified" class="w-4 h-4 text-emerald-400" />
-            <XCircle v-else class="w-4 h-4 text-surface-600" />
-          </td>
-          <td class="px-4 py-3 hidden lg:table-cell">
-            <CheckCircle v-if="user.twoFactorEnabled" class="w-4 h-4 text-emerald-400" />
-            <XCircle v-else class="w-4 h-4 text-surface-600" />
-          </td>
-          <td class="px-4 py-3 hidden xl:table-cell">
-            <span class="text-xs text-surface-500">{{ formatDate(user.createdAt) }}</span>
-          </td>
-          <td class="px-4 py-3 text-right">
-            <div class="flex items-center justify-end gap-1">
-              <div class="relative">
-                <button
-                  @click.stop="toggleMenu(user, $event)"
-                  class="p-1.5 rounded-lg text-surface-500 hover:text-surface-300 hover:bg-surface-700/50 transition-colors"
+          </div>
+        </template>
+
+        <template #cell-role="{ row }">
+          <BaseBadge :variant="roleBadgeVariant((row as User).role)">
+            <ShieldAlert v-if="(row as User).role === 'superadmin'" class="w-3 h-3" />
+            <Shield v-else-if="(row as User).role === 'admin'" class="w-3 h-3" />
+            <UserIcon v-else class="w-3 h-3" />
+            {{ (row as User).role ? t(`users.${(row as User).role}`) : t('users.user') }}
+          </BaseBadge>
+        </template>
+
+        <template #cell-applications="{ row }">
+          <AppIconStack :apps="(row as User).applications ?? []" />
+        </template>
+
+        <template #cell-lastLogin="{ row }">
+          <span class="text-xs text-surface-500">{{ formatLastLogin((row as User).lastLoginAt) }}</span>
+        </template>
+
+        <template #cell-verified="{ row }">
+          <CheckCircle v-if="(row as User).emailVerified" class="w-4 h-4 text-emerald-400" />
+          <XCircle v-else class="w-4 h-4 text-surface-600" />
+        </template>
+
+        <template #cell-mfa="{ row }">
+          <CheckCircle v-if="(row as User).twoFactorEnabled" class="w-4 h-4 text-emerald-400" />
+          <XCircle v-else class="w-4 h-4 text-surface-600" />
+        </template>
+
+        <template #cell-createdAt="{ row }">
+          <span class="text-xs text-surface-500">{{ formatDate((row as User).createdAt) }}</span>
+        </template>
+
+        <template #cell-actions="{ row }">
+          <div class="flex items-center justify-end gap-1">
+            <div class="relative">
+              <button
+                @click.stop="toggleMenu(row as User, $event)"
+                class="p-1.5 rounded-lg text-surface-500 hover:text-surface-300 hover:bg-surface-700/50 transition-colors"
+              >
+                <MoreHorizontal class="w-4 h-4" />
+              </button>
+              <Teleport to="body">
+                <div
+                  v-if="actionMenuUser === (row as User).id"
+                  :style="{ position: 'fixed', top: `${menuPos.top}px`, left: `${menuPos.left}px` }"
+                  class="w-44 bg-surface-800 border border-surface-700/50 rounded-xl shadow-xl z-[100] overflow-hidden animate-slide-up"
+                  v-click-outside="() => actionMenuUser = null"
                 >
-                  <MoreHorizontal class="w-4 h-4" />
-                </button>
-                <Teleport to="body">
-                  <div
-                    v-if="actionMenuUser === user.id"
-                    :style="{ position: 'fixed', top: `${menuPos.top}px`, left: `${menuPos.left}px` }"
-                    class="w-44 bg-surface-800 border border-surface-700/50 rounded-xl shadow-xl z-[100] overflow-hidden animate-slide-up"
-                    v-click-outside="() => actionMenuUser = null"
-                  >
-                    <button @click="router.push(`/users/${user.id}`); actionMenuUser = null;" class="w-full text-left px-3 py-2.5 text-sm text-surface-300 hover:text-surface-100 hover:bg-surface-700/50 flex items-center gap-2"><Eye class="w-4 h-4" />{{ t('common.view') }}</button>
-                    <button @click="openEdit(user)" class="w-full text-left px-3 py-2.5 text-sm text-surface-300 hover:text-surface-100 hover:bg-surface-700/50 flex items-center gap-2"><Pencil class="w-4 h-4" />{{ t('users.editUser') }}</button>
-                    <button v-if="user.banned" @click="handleUnban(user)" class="w-full text-left px-3 py-2.5 text-sm text-emerald-400 hover:bg-surface-700/50 flex items-center gap-2"><CheckCircle2 class="w-4 h-4" />{{ t('users.enable') }}</button>
-                    <button v-else @click="openDisable(user)" class="w-full text-left px-3 py-2.5 text-sm text-amber-400 hover:bg-surface-700/50 flex items-center gap-2"><Ban class="w-4 h-4" />{{ t('users.disable') }}</button>
-                    <button @click="openDelete(user)" class="w-full text-left px-3 py-2.5 text-sm text-red-400 hover:bg-surface-700/50 flex items-center gap-2"><Trash2 class="w-4 h-4" />{{ t('users.deleteUser') }}</button>
-                  </div>
-                </Teleport>
-              </div>
+                  <button @click="router.push(`/users/${(row as User).id}`); actionMenuUser = null;" class="w-full text-left px-3 py-2.5 text-sm text-surface-300 hover:text-surface-100 hover:bg-surface-700/50 flex items-center gap-2"><Eye class="w-4 h-4" />{{ t('common.view') }}</button>
+                  <button @click="openEdit(row as User)" class="w-full text-left px-3 py-2.5 text-sm text-surface-300 hover:text-surface-100 hover:bg-surface-700/50 flex items-center gap-2"><Pencil class="w-4 h-4" />{{ t('users.editUser') }}</button>
+                  <button v-if="(row as User).banned" @click="handleUnban(row as User)" class="w-full text-left px-3 py-2.5 text-sm text-emerald-400 hover:bg-surface-700/50 flex items-center gap-2"><CheckCircle2 class="w-4 h-4" />{{ t('users.enable') }}</button>
+                  <button v-else @click="openDisable(row as User)" class="w-full text-left px-3 py-2.5 text-sm text-amber-400 hover:bg-surface-700/50 flex items-center gap-2"><Ban class="w-4 h-4" />{{ t('users.disable') }}</button>
+                  <button @click="openDelete(row as User)" class="w-full text-left px-3 py-2.5 text-sm text-red-400 hover:bg-surface-700/50 flex items-center gap-2"><Trash2 class="w-4 h-4" />{{ t('users.deleteUser') }}</button>
+                </div>
+              </Teleport>
             </div>
-          </td>
-        </tr>
+          </div>
+        </template>
       </DataTable>
 
       <div v-if="store.total > 20" class="flex items-center justify-between text-sm text-surface-500">
diff --git a/src/auth.ts b/src/auth.ts
index 17263aa..964ec0b 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -22,6 +22,7 @@ import {
 } from "./services/email.js";
 import { userMustSetupMfa } from "./services/mfa.js";
 import { isSocialProviderAllowed } from "./services/social-providers.js";
+import { recordLogin } from "./services/login-history.js";
 import { APIError } from "better-auth";
 
 const schema = { ...authSchema, ...customSchema };
@@ -148,6 +149,9 @@ export const auth = betterAuth({
       company: { type: "string", required: false },
       position: { type: "string", required: false },
       address: { type: "string", required: false },
+      // Surfaced to admin listings as "last seen". Written by
+      // services/login-history.ts on every successful OAuth token issuance.
+      lastLoginAt: { type: "date", required: false },
     },
   },
   plugins: [
@@ -371,6 +375,28 @@ export const auth = betterAuth({
         if (scopes.includes("org") && referenceId) {
           (claims as Record<string, unknown>).org_id = referenceId;
         }
+        // Record this token issuance as a login event for analytics / last-seen
+        // tracking. Fire-and-forget — a failure here must never block token
+        // issuance for the downstream client. The OAuth issuance callback does
+        // not surface request headers, so ipAddress / userAgent stay null;
+        // they remain available on the parent session row when needed.
+        if (clientId) {
+          const [appRow] = await db
+            .select({ id: applications.id })
+            .from(applications)
+            .where(eq(applications.slug, clientId))
+            .limit(1);
+          if (appRow) {
+            try {
+              await recordLogin({ userId: user.id, applicationId: appRow.id });
+            } catch (err) {
+              console.warn(
+                "[login-history] failed to record login",
+                { userId: user.id, clientId, err: String(err) },
+              );
+            }
+          }
+        }
         return { ...claims, ...appAttrs };
       },
       // Same data in /oauth2/userinfo response.
diff --git a/src/db/auth-schema.ts b/src/db/auth-schema.ts
index eac0e9b..a842ab2 100644
--- a/src/db/auth-schema.ts
+++ b/src/db/auth-schema.ts
@@ -30,6 +30,11 @@ export const user = pgTable("user", {
   company: text("company"),
   position: text("position"),
   address: text("address"),
+  // Denormalised timestamp of the user's most recent successful login,
+  // updated by recordLogin() in src/services/login-history.ts. Allows the
+  // admin users listing to render a "last seen" column without joining the
+  // login_history table.
+  lastLoginAt: timestamp("last_login_at"),
 });
 
 export const session = pgTable(
diff --git a/src/db/schema.ts b/src/db/schema.ts
index 9fa56f8..de3951e 100644
--- a/src/db/schema.ts
+++ b/src/db/schema.ts
@@ -254,3 +254,30 @@ export const consumptionAggregates = pgTable(
   },
   (t) => [primaryKey({ columns: [t.userId, t.applicationId, t.key] })],
 );
+
+// ── Login History ─────────────────────────────────────────────────────────────
+// Append-only log of successful login events. One row per OAuth token
+// issuance to an application (applicationId set) and one row per direct
+// sign-in to the auth-service admin dashboard (applicationId null).
+// Powers session→app attribution, last-login columns, per-app history modal,
+// and dashboard/app-card activity charts.
+export const loginHistory = pgTable(
+  "login_history",
+  {
+    id: uuid("id").primaryKey().defaultRandom(),
+    userId: text("user_id").notNull(),
+    applicationId: uuid("application_id").references(() => applications.id, {
+      onDelete: "set null",
+    }),
+    sessionId: text("session_id"),
+    loggedAt: timestamp("logged_at", { withTimezone: true })
+      .defaultNow()
+      .notNull(),
+    ipAddress: text("ip_address"),
+    userAgent: text("user_agent"),
+  },
+  (t) => [
+    index("login_history_user_logged_idx").on(t.userId, t.loggedAt),
+    index("login_history_app_logged_idx").on(t.applicationId, t.loggedAt),
+  ],
+);
diff --git a/src/index.ts b/src/index.ts
index cf8e064..7c37d48 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -26,6 +26,7 @@ import { plansRoutes } from "./routes/admin/plans.js";
 import { adminConsumptionRoutes } from "./routes/admin/adminConsumption.js";
 import { usersRoutes } from "./routes/admin/users.js";
 import { sessionsRoutes } from "./routes/admin/sessions.js";
+import { statsRoutes } from "./routes/admin/stats.js";
 import { servicesRoutes } from "./routes/admin/services.js";
 import { consumptionRoutes } from "./routes/consumption.js";
 import { userRoutes } from "./routes/user.js";
@@ -399,6 +400,7 @@ await fastify.register(plansRoutes, { prefix: "/api/admin" });
 await fastify.register(adminConsumptionRoutes, { prefix: "/api/admin" });
 await fastify.register(usersRoutes, { prefix: "/api/admin/users" });
 await fastify.register(sessionsRoutes, { prefix: "/api/admin/sessions" });
+await fastify.register(statsRoutes, { prefix: "/api/admin/stats" });
 await fastify.register(servicesRoutes, { prefix: "/api/admin/services" });
 await fastify.register(organizationsRoutes, { prefix: "/api/admin/organizations" });
 await fastify.register(consumptionRoutes, { prefix: "/api/consumption" });
diff --git a/src/migrate.ts b/src/migrate.ts
index 3660c5a..774c2bd 100644
--- a/src/migrate.ts
+++ b/src/migrate.ts
@@ -22,7 +22,16 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
  * Migrations that ship after a clean baseline and only ever run through this
  * runner do not need a probe.
  */
-const POST_BASELINE_PROBES: { tag: string; probe: ReturnType<typeof sql> }[] = [];
+const POST_BASELINE_PROBES: { tag: string; probe: ReturnType<typeof sql> }[] = [
+  {
+    // 0001 introduces the `login_history` table and the `user.last_login_at`
+    // column. Detect the table — it is the most distinctive artefact and
+    // cheaper than checking a column on a hot table.
+    tag: "0001_many_weapon_omega",
+    probe: sql`SELECT 1 FROM information_schema.tables
+               WHERE table_schema = 'public' AND table_name = 'login_history'`,
+  },
+];
 
 /**
  * Ensures `__drizzle_migrations` is consistent with the migrations folder.
diff --git a/src/routes/admin/applications.ts b/src/routes/admin/applications.ts
index e671ac4..a0e251e 100644
--- a/src/routes/admin/applications.ts
+++ b/src/routes/admin/applications.ts
@@ -12,13 +12,14 @@ import {
   consumptionEntries,
   subscriptionPlans,
   userSubscriptions,
+  loginHistory,
 } from "../../db/schema.js";
 import {
   assignDefaultRoleIfNeeded,
   assignDefaultPlanIfNeeded,
 } from "../../services/claims.js";
 import { oauthClient, user as userTable } from "../../db/auth-schema.js";
-import { and, eq, inArray } from "drizzle-orm";
+import { and, count, desc, eq, inArray, max } from "drizzle-orm";
 import { ERR } from "../../errors.js";
 import { auth } from "../../auth.js";
 import { randomBytes, createHash } from "node:crypto";
@@ -545,7 +546,10 @@ export async function applicationRoutes(
 
   // ── App ↔ User access management ─────────────────────────────────────────────
 
-  // GET /api/admin/applications/:id/users — list all users associated with this app
+  // GET /api/admin/applications/:id/users — list all users associated with this app.
+  // Augments each row with `lastLoginAt` scoped to this application (computed
+  // from `login_history`). A single grouped sub-select keeps this to one round
+  // trip even when the membership list is large.
   fastify.get<{ Params: { id: string } }>("/:id/users", async (req, reply) => {
     const rows = await db
       .select({
@@ -555,6 +559,7 @@ export async function applicationRoutes(
         createdAt: userApplications.createdAt,
         name: userTable.name,
         email: userTable.email,
+        image: userTable.image,
         roleId: userAppRoles.roleId,
       })
       .from(userApplications)
@@ -568,9 +573,74 @@ export async function applicationRoutes(
       )
       .where(eq(userApplications.applicationId, req.params.id));
 
-    await reply.send({ users: rows });
+    const userIds = Array.from(new Set(rows.map((r) => r.userId)));
+    const lastLoginByUser = new Map<string, Date>();
+    if (userIds.length > 0) {
+      const lastLogins = await db
+        .select({
+          userId: loginHistory.userId,
+          lastLoginAt: max(loginHistory.loggedAt),
+        })
+        .from(loginHistory)
+        .where(
+          and(
+            eq(loginHistory.applicationId, req.params.id),
+            inArray(loginHistory.userId, userIds),
+          ),
+        )
+        .groupBy(loginHistory.userId);
+      for (const r of lastLogins) {
+        if (r.lastLoginAt) lastLoginByUser.set(r.userId, r.lastLoginAt);
+      }
+    }
+
+    const enriched = rows.map((r) => ({
+      ...r,
+      lastLoginAt: lastLoginByUser.get(r.userId) ?? null,
+    }));
+
+    await reply.send({ users: enriched });
   });
 
+  // GET /api/admin/applications/:id/users/:userId/history — paginated login
+  // history for a single user inside a single application. Powers the history
+  // modal opened from the row-action icon in the app users tab.
+  fastify.get<{ Params: { id: string; userId: string } }>(
+    "/:id/users/:userId/history",
+    async (req, reply) => {
+      const query = req.query as Record<string, string>;
+      const page = Math.max(1, parseInt(query.page ?? "1", 10));
+      const limit = Math.min(100, Math.max(1, parseInt(query.limit ?? "20", 10)));
+      const offset = (page - 1) * limit;
+
+      const where = and(
+        eq(loginHistory.applicationId, req.params.id),
+        eq(loginHistory.userId, req.params.userId),
+      );
+
+      const [{ total }] = await db
+        .select({ total: count() })
+        .from(loginHistory)
+        .where(where);
+
+      const entries = await db
+        .select({
+          id: loginHistory.id,
+          loggedAt: loginHistory.loggedAt,
+          ipAddress: loginHistory.ipAddress,
+          userAgent: loginHistory.userAgent,
+          sessionId: loginHistory.sessionId,
+        })
+        .from(loginHistory)
+        .where(where)
+        .orderBy(desc(loginHistory.loggedAt))
+        .limit(limit)
+        .offset(offset);
+
+      await reply.send({ entries, total, page, limit });
+    },
+  );
+
   // POST /api/admin/applications/:id/users — grant a user access to this app
   fastify.post<{ Params: { id: string } }>("/:id/users", async (req, reply) => {
     const parsed = grantUserAccessSchema.safeParse(req.body);
diff --git a/src/routes/admin/sessions.test.ts b/src/routes/admin/sessions.test.ts
new file mode 100644
index 0000000..ee06229
--- /dev/null
+++ b/src/routes/admin/sessions.test.ts
@@ -0,0 +1,132 @@
+import { describe, it, expect, vi, beforeAll, afterAll, beforeEach } from "vitest";
+import Fastify from "fastify";
+import { sessionsRoutes } from "./sessions.js";
+
+vi.mock("better-auth/node", () => ({ fromNodeHeaders: vi.fn(() => ({})) }));
+
+const { mockDb, mockGetSession, makeChain } = vi.hoisted(() => {
+  function makeChain(result: unknown[] = []): Record<string, unknown> {
+    const p = Promise.resolve(result);
+    const c: Record<string, unknown> = {
+      from: () => c,
+      where: () => c,
+      leftJoin: () => c,
+      innerJoin: () => c,
+      orderBy: () => c,
+      limit: () => c,
+      offset: () => c,
+      groupBy: () => c,
+      then: p.then.bind(p),
+      catch: p.catch.bind(p),
+      finally: p.finally.bind(p),
+    };
+    return c;
+  }
+  const mockDb = {
+    select: vi.fn(() => makeChain()),
+    selectDistinct: vi.fn(() => makeChain()),
+  };
+  const mockGetSession = vi.fn();
+  return { mockDb, mockGetSession, makeChain };
+});
+
+vi.mock("../../db/index.js", () => ({ db: mockDb }));
+vi.mock("../../auth.js", () => ({
+  auth: { api: { getSession: mockGetSession } },
+}));
+
+const adminSession = { user: { id: "admin-1", role: "admin" } };
+
+describe("Admin — sessionsRoutes", () => {
+  const app = Fastify();
+
+  beforeAll(async () => {
+    await app.register(sessionsRoutes);
+    await app.ready();
+  });
+
+  afterAll(() => app.close());
+
+  beforeEach(() => {
+    mockDb.select.mockImplementation(() => makeChain());
+    mockDb.selectDistinct.mockImplementation(() => makeChain());
+  });
+
+  it("GET / → 401 when not authenticated", async () => {
+    mockGetSession.mockResolvedValueOnce(null);
+    const res = await app.inject({ method: "GET", url: "/" });
+    expect(res.statusCode).toBe(401);
+  });
+
+  it("GET / → 403 when authenticated as regular user", async () => {
+    mockGetSession.mockResolvedValueOnce({ user: { id: "u1", role: "user" } });
+    const res = await app.inject({ method: "GET", url: "/" });
+    expect(res.statusCode).toBe(403);
+  });
+
+  it("GET / → 200 with empty list when no active sessions", async () => {
+    mockGetSession.mockResolvedValueOnce(adminSession);
+    mockDb.select
+      .mockImplementationOnce(() => makeChain([{ total: 0 }])) // count
+      .mockImplementationOnce(() => makeChain([])); // list
+    const res = await app.inject({ method: "GET", url: "/" });
+    expect(res.statusCode).toBe(200);
+    const body = JSON.parse(res.body) as {
+      total: number;
+      sessions: unknown[];
+    };
+    expect(body.total).toBe(0);
+    expect(body.sessions).toEqual([]);
+  });
+
+  it("GET / → enriches sessions with user info and applications array", async () => {
+    mockGetSession.mockResolvedValueOnce(adminSession);
+    const createdAt = new Date("2026-05-17T10:00:00Z");
+    const expiresAt = new Date("2026-05-18T10:00:00Z");
+    mockDb.select
+      .mockImplementationOnce(() => makeChain([{ total: 1 }]))
+      .mockImplementationOnce(() =>
+        makeChain([
+          {
+            id: "sess-1",
+            userId: "user-1",
+            userAgent: "UA",
+            ipAddress: "1.2.3.4",
+            createdAt,
+            expiresAt,
+            userName: "Alice",
+            userEmail: "alice@example.com",
+            userImage: null,
+          },
+        ]),
+      );
+    mockDb.selectDistinct.mockImplementationOnce(() =>
+      makeChain([
+        {
+          userId: "user-1",
+          id: "app-1",
+          name: "App 1",
+          slug: "app-1",
+          icon: null,
+        },
+      ]),
+    );
+
+    const res = await app.inject({ method: "GET", url: "/" });
+    expect(res.statusCode).toBe(200);
+    const body = JSON.parse(res.body) as {
+      total: number;
+      sessions: {
+        id: string;
+        user: { name: string; email: string };
+        applications: { id: string; slug: string }[];
+      }[];
+    };
+    expect(body.total).toBe(1);
+    expect(body.sessions[0]?.user.name).toBe("Alice");
+    expect(body.sessions[0]?.user.email).toBe("alice@example.com");
+    expect(body.sessions[0]?.applications).toEqual([
+      { id: "app-1", name: "App 1", slug: "app-1", icon: null },
+    ]);
+  });
+});
diff --git a/src/routes/admin/sessions.ts b/src/routes/admin/sessions.ts
index e48f84f..bb30b7c 100644
--- a/src/routes/admin/sessions.ts
+++ b/src/routes/admin/sessions.ts
@@ -1,8 +1,9 @@
 import type { FastifyInstance, FastifyRequest, FastifyReply } from "fastify";
 import { fromNodeHeaders } from "better-auth/node";
 import { db } from "../../db/index.js";
-import { session as sessionTable } from "../../db/auth-schema.js";
-import { gt, count } from "drizzle-orm";
+import { session as sessionTable, user as userTable } from "../../db/auth-schema.js";
+import { applications, loginHistory } from "../../db/schema.js";
+import { and, count, desc, eq, gt, gte, inArray } from "drizzle-orm";
 import { ERR } from "../../errors.js";
 import { auth } from "../../auth.js";
 
@@ -32,6 +33,10 @@ export async function sessionsRoutes(fastify: FastifyInstance): Promise<void> {
   fastify.addHook("preHandler", requireAdmin);
 
   // GET /api/admin/sessions
+  // Returns active (non-expired) sessions enriched with their user identity
+  // and the list of applications the user logged into since the session was
+  // created. SSO means one session can serve multiple apps, so the linkage is
+  // many-to-many through login_history.
   fastify.get("/", async (req, reply) => {
     const query = req.query as Record<string, string>;
     const page = Math.max(1, parseInt(query.page ?? "1", 10));
@@ -52,12 +57,68 @@ export async function sessionsRoutes(fastify: FastifyInstance): Promise<void> {
         ipAddress: sessionTable.ipAddress,
         createdAt: sessionTable.createdAt,
         expiresAt: sessionTable.expiresAt,
+        userName: userTable.name,
+        userEmail: userTable.email,
+        userImage: userTable.image,
       })
       .from(sessionTable)
+      .leftJoin(userTable, eq(sessionTable.userId, userTable.id))
       .where(gt(sessionTable.expiresAt, now))
+      .orderBy(desc(sessionTable.createdAt))
       .limit(limit)
       .offset(offset);
 
-    await reply.send({ total, sessions: list, page, limit });
+    // Bulk-resolve the apps each user logged into since their oldest visible
+    // session was created. Cheap distinct query on the (userId, loggedAt) index.
+    const userIds = Array.from(new Set(list.map((s) => s.userId)));
+    const oldestSessionStart = list.reduce<Date | null>((min, s) => {
+      if (!min || s.createdAt < min) return s.createdAt;
+      return min;
+    }, null);
+    const appsByUser = new Map<
+      string,
+      { id: string; name: string; slug: string; icon: string | null }[]
+    >();
+    if (userIds.length > 0 && oldestSessionStart) {
+      const rows = await db
+        .selectDistinct({
+          userId: loginHistory.userId,
+          id: applications.id,
+          name: applications.name,
+          slug: applications.slug,
+          icon: applications.icon,
+        })
+        .from(loginHistory)
+        .innerJoin(applications, eq(loginHistory.applicationId, applications.id))
+        .where(
+          and(
+            inArray(loginHistory.userId, userIds),
+            gte(loginHistory.loggedAt, oldestSessionStart),
+          ),
+        );
+      for (const r of rows) {
+        const arr = appsByUser.get(r.userId) ?? [];
+        arr.push({ id: r.id, name: r.name, slug: r.slug, icon: r.icon });
+        appsByUser.set(r.userId, arr);
+      }
+    }
+
+    const sessions = list.map((s) => ({
+      id: s.id,
+      userId: s.userId,
+      userAgent: s.userAgent,
+      ipAddress: s.ipAddress,
+      createdAt: s.createdAt,
+      expiresAt: s.expiresAt,
+      user: {
+        id: s.userId,
+        name: s.userName,
+        email: s.userEmail,
+        image: s.userImage,
+      },
+      applications: appsByUser.get(s.userId) ?? [],
+    }));
+
+    await reply.send({ total, sessions, page, limit });
   });
 }
diff --git a/src/routes/admin/stats.test.ts b/src/routes/admin/stats.test.ts
new file mode 100644
index 0000000..19e7b8f
--- /dev/null
+++ b/src/routes/admin/stats.test.ts
@@ -0,0 +1,172 @@
+import { describe, it, expect, vi, beforeAll, afterAll, beforeEach } from "vitest";
+import Fastify from "fastify";
+import { statsRoutes } from "./stats.js";
+
+vi.mock("better-auth/node", () => ({ fromNodeHeaders: vi.fn(() => ({})) }));
+
+const { mockDb, mockGetSession, makeChain } = vi.hoisted(() => {
+  function makeChain(result: unknown[] = []): Record<string, unknown> {
+    const p = Promise.resolve(result);
+    const c: Record<string, unknown> = {
+      from: () => c,
+      where: () => c,
+      leftJoin: () => c,
+      innerJoin: () => c,
+      orderBy: () => c,
+      limit: () => c,
+      offset: () => c,
+      groupBy: () => c,
+      then: p.then.bind(p),
+      catch: p.catch.bind(p),
+      finally: p.finally.bind(p),
+    };
+    return c;
+  }
+  const mockDb = {
+    select: vi.fn(() => makeChain()),
+    execute: vi.fn<(...args: unknown[]) => Promise<unknown[]>>(() => Promise.resolve([])),
+  };
+  const mockGetSession = vi.fn();
+  return { mockDb, mockGetSession, makeChain };
+});
+
+vi.mock("../../db/index.js", () => ({ db: mockDb }));
+vi.mock("../../auth.js", () => ({
+  auth: { api: { getSession: mockGetSession } },
+}));
+
+const adminSession = { user: { id: "admin-1", role: "admin" } };
+
+describe("Admin — statsRoutes", () => {
+  const app = Fastify();
+
+  beforeAll(async () => {
+    await app.register(statsRoutes);
+    await app.ready();
+  });
+
+  afterAll(() => app.close());
+
+  beforeEach(() => {
+    mockDb.select.mockImplementation(() => makeChain());
+    mockDb.execute.mockImplementation(() => Promise.resolve([]));
+  });
+
+  // ── Auth guard ─────────────────────────────────────────────────────────
+
+  it("GET /active-users → 401 when not authenticated", async () => {
+    mockGetSession.mockResolvedValueOnce(null);
+    const res = await app.inject({ method: "GET", url: "/active-users" });
+    expect(res.statusCode).toBe(401);
+  });
+
+  it("GET /active-users → 403 when authenticated as regular user", async () => {
+    mockGetSession.mockResolvedValueOnce({ user: { id: "u1", role: "user" } });
+    const res = await app.inject({ method: "GET", url: "/active-users" });
+    expect(res.statusCode).toBe(403);
+  });
+
+  // ── /active-users ──────────────────────────────────────────────────────
+
+  it("GET /active-users → returns distinct online count", async () => {
+    mockGetSession.mockResolvedValueOnce(adminSession);
+    mockDb.select.mockImplementationOnce(() => makeChain([{ online: 3 }]));
+    const res = await app.inject({ method: "GET", url: "/active-users" });
+    expect(res.statusCode).toBe(200);
+    expect(JSON.parse(res.body)).toEqual({ online: 3 });
+  });
+
+  // ── /logins ────────────────────────────────────────────────────────────
+
+  it("GET /logins → 400 on invalid range", async () => {
+    mockGetSession.mockResolvedValueOnce(adminSession);
+    const res = await app.inject({ method: "GET", url: "/logins?range=99d" });
+    expect(res.statusCode).toBe(400);
+  });
+
+  it("GET /logins → returns dense 7-day zero-filled series by default", async () => {
+    mockGetSession.mockResolvedValueOnce(adminSession);
+    mockDb.execute.mockResolvedValueOnce([]);
+    const res = await app.inject({ method: "GET", url: "/logins" });
+    expect(res.statusCode).toBe(200);
+    const body = JSON.parse(res.body) as {
+      range: string;
+      series: { date: string; count: number }[];
+      total: number;
+    };
+    expect(body.range).toBe("7d");
+    expect(body.series).toHaveLength(7);
+    expect(body.series.every((p) => p.count === 0)).toBe(true);
+    expect(body.total).toBe(0);
+  });
+
+  it("GET /logins → returns dense 30-day series when range=30d", async () => {
+    mockGetSession.mockResolvedValueOnce(adminSession);
+    mockDb.execute.mockResolvedValueOnce([]);
+    const res = await app.inject({ method: "GET", url: "/logins?range=30d" });
+    expect(res.statusCode).toBe(200);
+    const body = JSON.parse(res.body) as { series: unknown[] };
+    expect(body.series).toHaveLength(30);
+  });
+
+  it("GET /logins → backfills sparse raw rows into dense series", async () => {
+    mockGetSession.mockResolvedValueOnce(adminSession);
+    const today = new Date();
+    today.setUTCHours(0, 0, 0, 0);
+    const todayKey = today.toISOString().slice(0, 10);
+    mockDb.execute.mockResolvedValueOnce([{ day: todayKey, count: 5 }]);
+    const res = await app.inject({ method: "GET", url: "/logins" });
+    const body = JSON.parse(res.body) as {
+      series: { date: string; count: number }[];
+      total: number;
+    };
+    expect(body.total).toBe(5);
+    expect(body.series[body.series.length - 1]).toEqual({
+      date: todayKey,
+      count: 5,
+    });
+  });
+
+  // ── /applications-activity ─────────────────────────────────────────────
+
+  it("GET /applications-activity → empty list when no applications", async () => {
+    mockGetSession.mockResolvedValueOnce(adminSession);
+    mockDb.select.mockImplementationOnce(() => makeChain([]));
+    const res = await app.inject({
+      method: "GET",
+      url: "/applications-activity",
+    });
+    expect(res.statusCode).toBe(200);
+    expect(JSON.parse(res.body)).toEqual({ applications: [] });
+  });
+
+  it("GET /applications-activity → returns sparkline + KPI per app", async () => {
+    mockGetSession.mockResolvedValueOnce(adminSession);
+    mockDb.select.mockImplementationOnce(() =>
+      makeChain([{ id: "app-1" }, { id: "app-2" }]),
+    );
+    mockDb.execute
+      .mockResolvedValueOnce([{ appId: "app-1", day: "2026-05-17", count: 4 }])
+      .mockResolvedValueOnce([{ appId: "app-1", online: 2 }]);
+    const res = await app.inject({
+      method: "GET",
+      url: "/applications-activity",
+    });
+    expect(res.statusCode).toBe(200);
+    const body = JSON.parse(res.body) as {
+      applications: {
+        appId: string;
+        online: number;
+        last7dLogins: number;
+        sparkline: unknown[];
+      }[];
+    };
+    expect(body.applications).toHaveLength(2);
+    const app1 = body.applications.find((a) => a.appId === "app-1");
+    expect(app1?.online).toBe(2);
+    expect(app1?.sparkline).toHaveLength(7);
+    const app2 = body.applications.find((a) => a.appId === "app-2");
+    expect(app2?.online).toBe(0);
+    expect(app2?.last7dLogins).toBe(0);
+  });
+});
diff --git a/src/routes/admin/stats.ts b/src/routes/admin/stats.ts
new file mode 100644
index 0000000..12d77b1
--- /dev/null
+++ b/src/routes/admin/stats.ts
@@ -0,0 +1,174 @@
+import type { FastifyInstance, FastifyRequest, FastifyReply } from "fastify";
+import { fromNodeHeaders } from "better-auth/node";
+import { z } from "zod";
+import { db } from "../../db/index.js";
+import { session as sessionTable } from "../../db/auth-schema.js";
+import { applications, loginHistory } from "../../db/schema.js";
+import { and, countDistinct, eq, gt, gte, sql } from "drizzle-orm";
+import { ERR } from "../../errors.js";
+import { auth } from "../../auth.js";
+
+async function requireAdmin(
+  req: FastifyRequest,
+  reply: FastifyReply,
+): Promise<void> {
+  const session = await auth.api.getSession({
+    headers: fromNodeHeaders(req.headers),
+  });
+  if (!session) {
+    await reply.status(401).send(ERR.AUTH_001().toJSON());
+    return;
+  }
+  const role = (session.user as Record<string, unknown>).role as
+    | string
+    | undefined;
+  if (role !== "admin" && role !== "superadmin") {
+    await reply
+      .status(403)
+      .send(ERR.AUTH_001("Insufficient permissions").toJSON());
+    return;
+  }
+}
+
+const rangeSchema = z.enum(["7d", "30d"]).default("7d");
+const loginsQuerySchema = z.object({
+  range: rangeSchema.optional(),
+  appId: z.string().uuid().optional(),
+});
+
+function rangeToDays(range: "7d" | "30d"): number {
+  return range === "30d" ? 30 : 7;
+}
+
+/**
+ * Build a dense [{ date, count }] series for the given range, filling missing
+ * days with zero so chart libraries do not need to interpolate.
+ */
+function denseSeries(
+  raw: { day: string; count: number }[],
+  days: number,
+): { date: string; count: number }[] {
+  const byDay = new Map(raw.map((r) => [r.day, r.count]));
+  const out: { date: string; count: number }[] = [];
+  const today = new Date();
+  today.setUTCHours(0, 0, 0, 0);
+  for (let i = days - 1; i >= 0; i--) {
+    const d = new Date(today);
+    d.setUTCDate(today.getUTCDate() - i);
+    const key = d.toISOString().slice(0, 10);
+    out.push({ date: key, count: byDay.get(key) ?? 0 });
+  }
+  return out;
+}
+
+export async function statsRoutes(fastify: FastifyInstance): Promise<void> {
+  fastify.addHook("preHandler", requireAdmin);
+
+  // GET /api/admin/stats/active-users
+  // Distinct users with at least one non-expired session — i.e. currently online.
+  fastify.get("/active-users", async (_req, reply) => {
+    const now = new Date();
+    const [{ online }] = await db
+      .select({ online: countDistinct(sessionTable.userId) })
+      .from(sessionTable)
+      .where(gt(sessionTable.expiresAt, now));
+    await reply.send({ online });
+  });
+
+  // GET /api/admin/stats/logins?range=7d|30d&appId=<uuid>
+  // Daily login counts (per-app or platform-wide). Dense series — zero-filled
+  // for days with no logins so the frontend chart renders a continuous axis.
+  fastify.get("/logins", async (req, reply) => {
+    const parsed = loginsQuerySchema.safeParse(req.query);
+    if (!parsed.success) {
+      throw ERR.APP_001("Invalid stats query", parsed.error.flatten());
+    }
+    const range = parsed.data.range ?? "7d";
+    const days = rangeToDays(range);
+    const since = new Date();
+    since.setUTCDate(since.getUTCDate() - (days - 1));
+    since.setUTCHours(0, 0, 0, 0);
+
+    const conditions = [gte(loginHistory.loggedAt, since)];
+    if (parsed.data.appId) {
+      conditions.push(eq(loginHistory.applicationId, parsed.data.appId));
+    }
+
+    // Raw aggregate via sql`` because date_trunc is not exposed by the typed
+    // builder; the input is server-controlled (no user concatenation).
+    const rows = (await db.execute(
+      sql`SELECT to_char(date_trunc('day', logged_at AT TIME ZONE 'UTC'), 'YYYY-MM-DD') AS day,
+                 COUNT(*)::int AS count
+          FROM login_history
+          WHERE ${and(...conditions)}
+          GROUP BY day
+          ORDER BY day ASC`,
+    )) as { day: string; count: number }[];
+
+    const series = denseSeries(rows, days);
+    const total = series.reduce((acc, r) => acc + r.count, 0);
+    await reply.send({ range, series, total });
+  });
+
+  // GET /api/admin/stats/applications-activity
+  // One bulk row per application: { appId, online (distinct users via this app
+  // in active sessions ≈ logins in the last 24h), last7dLogins, sparkline[7] }.
+  // Used by the applications grid to avoid N+1 calls for per-card stats.
+  fastify.get("/applications-activity", async (_req, reply) => {
+    const since = new Date();
+    since.setUTCDate(since.getUTCDate() - 6);
+    since.setUTCHours(0, 0, 0, 0);
+
+    const apps = await db
+      .select({ id: applications.id })
+      .from(applications);
+
+    if (apps.length === 0) {
+      await reply.send({ applications: [] });
+      return;
+    }
+
+    const rows = (await db.execute(
+      sql`SELECT application_id AS "appId",
+                 to_char(date_trunc('day', logged_at AT TIME ZONE 'UTC'), 'YYYY-MM-DD') AS day,
+                 COUNT(*)::int AS count
+          FROM login_history
+          WHERE application_id IS NOT NULL
+            AND logged_at >= ${since}
+          GROUP BY application_id, day`,
+    )) as { appId: string; day: string; count: number }[];
+
+    // Online proxy: distinct users with a login event in the last 24h per app.
+    const online24h = new Date();
+    online24h.setUTCHours(online24h.getUTCHours() - 24);
+    const onlineRows = (await db.execute(
+      sql`SELECT application_id AS "appId",
+                 COUNT(DISTINCT user_id)::int AS online
+          FROM login_history
+          WHERE application_id IS NOT NULL
+            AND logged_at >= ${online24h}
+          GROUP BY application_id`,
+    )) as { appId: string; online: number }[];
+    const onlineByApp = new Map(onlineRows.map((r) => [r.appId, r.online]));
+
+    const byApp = new Map<string, { day: string; count: number }[]>();
+    for (const r of rows) {
+      const arr = byApp.get(r.appId) ?? [];
+      arr.push({ day: r.day, count: r.count });
+      byApp.set(r.appId, arr);
+    }
+
+    const result = apps.map((a) => {
+      const series = denseSeries(byApp.get(a.id) ?? [], 7);
+      const last7dLogins = series.reduce((acc, p) => acc + p.count, 0);
+      return {
+        appId: a.id,
+        online: onlineByApp.get(a.id) ?? 0,
+        last7dLogins,
+        sparkline: series,
+      };
+    });
+
+    await reply.send({ applications: result });
+  });
+}
diff --git a/src/routes/admin/users.ts b/src/routes/admin/users.ts
index 41a5fae..a88f21c 100644
--- a/src/routes/admin/users.ts
+++ b/src/routes/admin/users.ts
@@ -10,9 +10,10 @@ import {
   userSubscriptions,
   consumptionEntries,
   consumptionAggregates,
+  loginHistory,
 } from "../../db/schema.js";
 import { user as userTable } from "../../db/auth-schema.js";
-import { and, count, eq } from "drizzle-orm";
+import { and, count, eq, inArray, max } from "drizzle-orm";
 import { ERR } from "../../errors.js";
 import { auth } from "../../auth.js";
 
@@ -83,8 +84,79 @@ export async function usersRoutes(fastify: FastifyInstance): Promise<void> {
       },
     });
 
+    // Enrich each user with the list of applications they have access to and
+    // a fallback lastLoginAt (the user.lastLoginAt column is denormalised in
+    // recordLogin()). One grouped query per dimension keeps this O(1) round
+    // trips regardless of the page size.
+    const userIds = users.users.map((u) => u.id);
+    const appsByUser = new Map<
+      string,
+      { id: string; name: string; slug: string; icon: string | null }[]
+    >();
+    const lastLoginByUser = new Map<string, Date>();
+    if (userIds.length > 0) {
+      const accessRows = await db
+        .select({
+          userId: userApplications.userId,
+          id: applications.id,
+          name: applications.name,
+          slug: applications.slug,
+          icon: applications.icon,
+        })
+        .from(userApplications)
+        .innerJoin(
+          applications,
+          eq(userApplications.applicationId, applications.id),
+        )
+        .where(
+          and(
+            inArray(userApplications.userId, userIds),
+            eq(userApplications.isActive, true),
+          ),
+        );
+      for (const row of accessRows) {
+        const list = appsByUser.get(row.userId) ?? [];
+        list.push({
+          id: row.id,
+          name: row.name,
+          slug: row.slug,
+          icon: row.icon,
+        });
+        appsByUser.set(row.userId, list);
+      }
+
+      const lastLogins = await db
+        .select({
+          userId: loginHistory.userId,
+          lastLoginAt: max(loginHistory.loggedAt),
+        })
+        .from(loginHistory)
+        .where(inArray(loginHistory.userId, userIds))
+        .groupBy(loginHistory.userId);
+      for (const r of lastLogins) {
+        if (r.lastLoginAt) lastLoginByUser.set(r.userId, r.lastLoginAt);
+      }
+    }
+
+    const enriched = users.users.map((u) => {
+      const denormalised = (u as unknown as Record<string, unknown>)
+        .lastLoginAt as Date | string | null | undefined;
+      const fromHistory = lastLoginByUser.get(u.id) ?? null;
+      const denormalisedDate =
+        denormalised instanceof Date
+          ? denormalised
+          : typeof denormalised === "string"
+            ? new Date(denormalised)
+            : null;
+      return {
+        ...u,
+        applications: appsByUser.get(u.id) ?? [],
+        lastLoginAt: denormalisedDate ?? fromHistory,
+      };
+    });
+
     await reply.send({
-      users: users.users,
+      users: enriched,
       total: users.total,
       page,
       limit,
diff --git a/src/services/login-history.test.ts b/src/services/login-history.test.ts
new file mode 100644
index 0000000..a9d694b
--- /dev/null
+++ b/src/services/login-history.test.ts
@@ -0,0 +1,66 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+const insertValuesMock = vi.fn<(...args: unknown[]) => Promise<void>>(() => Promise.resolve());
+const updateSetMock = vi.fn<(...args: unknown[]) => unknown>();
+
+vi.mock("../db/index.js", () => {
+  return {
+    db: {
+      insert: vi.fn(() => ({ values: insertValuesMock })),
+      update: vi.fn(() => ({
+        set: updateSetMock.mockImplementation(() => ({
+          where: vi.fn(() => Promise.resolve()),
+        })),
+      })),
+    },
+  };
+});
+
+import { recordLogin } from "./login-history.js";
+
+describe("recordLogin", () => {
+  beforeEach(() => {
+    insertValuesMock.mockClear();
+    updateSetMock.mockClear();
+  });
+
+  it("inserts a login_history row with the provided context", async () => {
+    const loggedAt = new Date("2026-05-17T12:00:00Z");
+    await recordLogin({
+      userId: "user-1",
+      applicationId: "app-1",
+      sessionId: "sess-1",
+      ipAddress: "10.0.0.1",
+      userAgent: "Mozilla/5.0",
+      loggedAt,
+    });
+
+    expect(insertValuesMock).toHaveBeenCalledWith({
+      userId: "user-1",
+      applicationId: "app-1",
+      sessionId: "sess-1",
+      ipAddress: "10.0.0.1",
+      userAgent: "Mozilla/5.0",
+      loggedAt,
+    });
+  });
+
+  it("normalises missing optional fields to null", async () => {
+    await recordLogin({ userId: "user-2" });
+    const call = (insertValuesMock.mock.calls[0]?.[0] ?? {}) as Record<
+      string,
+      unknown
+    >;
+    expect(call.applicationId).toBeNull();
+    expect(call.sessionId).toBeNull();
+    expect(call.ipAddress).toBeNull();
+    expect(call.userAgent).toBeNull();
+    expect(call.loggedAt).toBeInstanceOf(Date);
+  });
+
+  it("updates user.lastLoginAt with the same timestamp", async () => {
+    const loggedAt = new Date("2026-05-17T13:30:00Z");
+    await recordLogin({ userId: "user-3", loggedAt });
+    expect(updateSetMock).toHaveBeenCalledWith({ lastLoginAt: loggedAt });
+  });
+});
diff --git a/src/services/login-history.ts b/src/services/login-history.ts
new file mode 100644
index 0000000..fb0dbac
--- /dev/null
+++ b/src/services/login-history.ts
@@ -0,0 +1,38 @@
+import { db } from "../db/index.js";
+import { loginHistory } from "../db/schema.js";
+import { user as userTable } from "../db/auth-schema.js";
+import { eq } from "drizzle-orm";
+
+export interface RecordLoginInput {
+  userId: string;
+  /** Null when the login is a direct admin-dashboard sign-in (no OAuth client). */
+  applicationId?: string | null;
+  sessionId?: string | null;
+  ipAddress?: string | null;
+  userAgent?: string | null;
+  /** Optional explicit timestamp — defaults to now(). Useful in tests. */
+  loggedAt?: Date;
+}
+
+/**
+ * Append a successful-login row to `login_history` and refresh the
+ * denormalised `user.last_login_at` timestamp. Both writes succeed or fail
+ * together; callers in token-issuance hot paths should not block on failures
+ * (see hook callers in src/auth.ts which wrap this call in try/catch with a
+ * warn-level log).
+ */
+export async function recordLogin(input: RecordLoginInput): Promise<void> {
+  const loggedAt = input.loggedAt ?? new Date();
+  await db.insert(loginHistory).values({
+    userId: input.userId,
+    applicationId: input.applicationId ?? null,
+    sessionId: input.sessionId ?? null,
+    ipAddress: input.ipAddress ?? null,
+    userAgent: input.userAgent ?? null,
+    loggedAt,
+  });
+  await db
+    .update(userTable)
+    .set({ lastLoginAt: loggedAt })
+    .where(eq(userTable.id, input.userId));
+}
diff --git a/test_output.txt b/test_output.txt
new file mode 100644
index 0000000..eef7087
--- /dev/null
+++ b/test_output.txt
@@ -0,0 +1,2466 @@
+
+> auth-service@0.1.24 test /home/user/Documents/Developments/Circle/auth-service
+> vitest run
+
+
+ RUN  v3.2.4 /home/user/Documents/Developments/Circle/auth-service
+
+ ❯ src/services/templates.test.ts (11 tests | 1 failed) 34ms
+   ✓ renderAuthPage > variable substitution > substitutes all standard variables 9ms
+   × renderAuthPage > variable substitution > renders empty OAUTH_QUERY when oauthQuery is not provided 13ms
+     → expected '<!DOCTYPE html>\n<html lang="en">\n<h…' to contain 'name="oauthQuery" value=""'
+   ✓ renderAuthPage > variable substitution > renders OAUTH_QUERY when oauthQuery is provided 1ms
+   ✓ renderAuthPage > variable substitution > HTML-escapes oauthQuery special characters 1ms
+   ✓ renderAuthPage > variable substitution > renders empty ERROR_MESSAGE when errorMessage is not provided 1ms
+   ✓ renderAuthPage > variable substitution > renders errorMessage when provided 1ms
+   ✓ renderAuthPage > register page > includes oauthQuery hidden input 1ms
+   ✓ renderAuthPage > per-application template override > falls back to built-in template when appSlug has no override 1ms
+   ✓ renderAuthPage > allowRegister substitution > renders ALLOW_REGISTER as 'true' when allowRegister is true 1ms
+   ✓ renderAuthPage > allowRegister substitution > renders ALLOW_REGISTER as 'false' when allowRegister is false 1ms
+   ✓ renderAuthPage > allowRegister substitution > defaults ALLOW_REGISTER to 'true' when allowRegister is omitted 1ms
+ ❯ src/routes/health.test.ts (1 test | 1 failed) 56ms
+   × GET /health > returns 200 with status ok 39ms
+     → expected 'undefined' to be 'string' // Object.is equality
+ ✓ src/routes/admin/roles.test.ts (9 tests) 113ms
+ ✓ src/routes/admin/stats.test.ts (9 tests) 86ms
+ ✓ src/routes/admin/organizations.test.ts (7 tests) 53ms
+ ✓ src/routes/admin/applications.test.ts (12 tests) 60ms
+ ✓ src/routes/admin/users.test.ts (8 tests) 71ms
+ ✓ src/services/mfa.test.ts (6 tests) 10ms
+ ✓ src/services/social-providers.test.ts (4 tests) 7ms
+ ✓ src/routes/admin/adminConsumption.test.ts (8 tests) 70ms
+stderr | src/tests/roles.integration.test.ts
+2026-05-16T23:11:42.705Z WARN [Better Auth]: Please ensure '/.well-known/oauth-authorization-server' exists. Upon completion, clear with silenceWarnings.oauthAuthServerConfig.
+2026-05-16T23:11:42.706Z WARN [Better Auth]: Please ensure '/.well-known/openid-configuration' exists. Upon completion, clear with silenceWarnings.openidConfig.
+
+ ✓ src/routes/admin/plans.test.ts (11 tests) 121ms
+stderr | src/tests/applications.integration.test.ts
+2026-05-16T23:11:42.943Z WARN [Better Auth]: Please ensure '/.well-known/oauth-authorization-server' exists. Upon completion, clear with silenceWarnings.oauthAuthServerConfig.
+2026-05-16T23:11:42.945Z WARN [Better Auth]: Please ensure '/.well-known/openid-configuration' exists. Upon completion, clear with silenceWarnings.openidConfig.
+
+ ❯ src/tests/roles.integration.test.ts (7 tests | 7 failed) 83ms
+   × rolesRoutes integration > 401 when not authenticated 26ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × rolesRoutes integration > GET roles → empty list 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × rolesRoutes integration > POST role → creates role 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × rolesRoutes integration > POST role → 409 on duplicate name in same app 2ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × rolesRoutes integration > POST role → new isDefault demotes existing default 16ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × rolesRoutes integration > DELETE role → 400 when role is assigned to users 9ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × rolesRoutes integration > DELETE role → 204 when role has no users 7ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+stderr | src/tests/adminConsumption.integration.test.ts
+2026-05-16T23:11:43.003Z WARN [Better Auth]: Please ensure '/.well-known/oauth-authorization-server' exists. Upon completion, clear with silenceWarnings.oauthAuthServerConfig.
+2026-05-16T23:11:43.004Z WARN [Better Auth]: Please ensure '/.well-known/openid-configuration' exists. Upon completion, clear with silenceWarnings.openidConfig.
+
+stderr | src/tests/users.integration.test.ts
+2026-05-16T23:11:43.040Z WARN [Better Auth]: Please ensure '/.well-known/oauth-authorization-server' exists. Upon completion, clear with silenceWarnings.oauthAuthServerConfig.
+2026-05-16T23:11:43.042Z WARN [Better Auth]: Please ensure '/.well-known/openid-configuration' exists. Upon completion, clear with silenceWarnings.openidConfig.
+
+stderr | src/tests/plans.integration.test.ts
+2026-05-16T23:11:43.059Z WARN [Better Auth]: Please ensure '/.well-known/oauth-authorization-server' exists. Upon completion, clear with silenceWarnings.oauthAuthServerConfig.
+2026-05-16T23:11:43.060Z WARN [Better Auth]: Please ensure '/.well-known/openid-configuration' exists. Upon completion, clear with silenceWarnings.openidConfig.
+
+stderr | src/tests/userSubscription.integration.test.ts
+2026-05-16T23:11:43.114Z WARN [Better Auth]: Please ensure '/.well-known/oauth-authorization-server' exists. Upon completion, clear with silenceWarnings.oauthAuthServerConfig.
+2026-05-16T23:11:43.115Z WARN [Better Auth]: Please ensure '/.well-known/openid-configuration' exists. Upon completion, clear with silenceWarnings.openidConfig.
+
+stderr | src/tests/consumption.integration.test.ts
+2026-05-16T23:11:43.132Z WARN [Better Auth]: Please ensure '/.well-known/oauth-authorization-server' exists. Upon completion, clear with silenceWarnings.oauthAuthServerConfig.
+2026-05-16T23:11:43.133Z WARN [Better Auth]: Please ensure '/.well-known/openid-configuration' exists. Upon completion, clear with silenceWarnings.openidConfig.
+
+stderr | src/tests/sessions.integration.test.ts
+2026-05-16T23:11:43.163Z WARN [Better Auth]: Please ensure '/.well-known/oauth-authorization-server' exists. Upon completion, clear with silenceWarnings.oauthAuthServerConfig.
+2026-05-16T23:11:43.164Z WARN [Better Auth]: Please ensure '/.well-known/openid-configuration' exists. Upon completion, clear with silenceWarnings.openidConfig.
+
+ ❯ src/tests/applications.integration.test.ts (8 tests | 8 failed) 80ms
+   × applicationRoutes integration > 401 when not authenticated 28ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × applicationRoutes integration > GET / → returns empty list initially 4ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × applicationRoutes integration > POST / → creates an application with default roles and plan 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × applicationRoutes integration > POST / → 409 on duplicate slug 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × applicationRoutes integration > POST / → public app has no clientSecret 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × applicationRoutes integration > POST / auto-assigns superadmins to new app 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × applicationRoutes integration > DELETE /:id → removes the application 4ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × applicationRoutes integration > GET /:id → 404 for unknown application 4ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ❯ src/tests/adminConsumption.integration.test.ts (8 tests | 8 failed) 80ms
+   × adminConsumptionRoutes integration > 401 when not authenticated 36ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × adminConsumptionRoutes integration > 403 when not admin 5ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × adminConsumptionRoutes integration > 400 when year query param is invalid 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × adminConsumptionRoutes integration > 400 when month is out of valid range 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × adminConsumptionRoutes integration > 404 when app does not exist 6ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × adminConsumptionRoutes integration > 200 with empty entries when no consumption data 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × adminConsumptionRoutes integration > 200 aggregates entries grouped by userId and key for the requested month 5ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × adminConsumptionRoutes integration > 200 excludes entries from other months 1ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ✓ src/services/claims.test.ts (7 tests) 8ms
+ ❯ src/tests/users.integration.test.ts (8 tests | 8 failed) 47ms
+   × Admin — usersRoutes integration > GET / → 401 when not authenticated 18ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × Admin — usersRoutes integration > GET / → 403 for regular user 2ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × Admin — usersRoutes integration > GET / → returns paginated users via auth.api.listUsers 2ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × Admin — usersRoutes integration > DELETE /:id → 400 USR_002 when deleting the last superadmin 2ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × Admin — usersRoutes integration > DELETE /:id → 204 when deleting a superadmin while another exists 2ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × Admin — usersRoutes integration > DELETE /:id → 204 when deleting a normal user 2ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × Admin — usersRoutes integration > DELETE /:id → 400 USR_003 when admin tries to delete themselves 1ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × Admin — usersRoutes integration > DELETE /:id → 404 when user not found 2ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ✓ src/routes/consumption.test.ts (3 tests) 32ms
+ ❯ src/tests/plans.integration.test.ts (12 tests | 12 failed) 109ms
+   × plansRoutes integration > 401 when not authenticated 27ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × plansRoutes integration > GET plans → 404 when application does not exist 2ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × plansRoutes integration > GET plans → empty list 1ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × plansRoutes integration > POST plan → creates plan 2ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × plansRoutes integration > POST plan → new isDefault demotes existing default 6ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × plansRoutes integration > DELETE plan → 400 when plan has active subscribers 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × plansRoutes integration > DELETE plan → 204 when no active subscribers 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × plansRoutes integration > POST price → 400 when amount is negative 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × plansRoutes integration > POST price → 201 when amount is 0 (free tier) 8ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × plansRoutes integration > POST price → 201 stores interval correctly for one_time 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × plansRoutes integration > POST price → 404 when plan does not exist 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × plansRoutes integration > POST plan with metered features → 201 stores features correctly 35ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ❯ src/tests/userSubscription.integration.test.ts (7 tests | 7 failed) 65ms
+   × userRoutes — GET /subscription > 401 when not authenticated 28ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × userRoutes — GET /subscription > 200 with empty subscriptions when user has no app access 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × userRoutes — GET /subscription > 200 with plan null when user has access but no plan assigned 8ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × userRoutes — GET /subscription > 200 with plan details when subscription plan is assigned 5ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × userRoutes — GET /subscription > 200 includes prices array in plan when prices exist 2ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × userRoutes — GET /subscription > 200 prices array is empty when plan has no prices 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × userRoutes — GET /subscription > 200 includes metered features in plan 1ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ❯ src/tests/consumption.integration.test.ts (9 tests | 9 failed) 71ms
+   × consumptionRoutes integration > POST / → 403 when not authenticated 22ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × consumptionRoutes integration > POST / → 404 when user+app relationship not found 2ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × consumptionRoutes integration > POST / → creates consumption entry and aggregate 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × consumptionRoutes integration > POST / → accumulates on subsequent calls 12ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × consumptionRoutes integration > POST / → 400 on invalid key format 5ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × consumptionRoutes integration > GET /:userId/:applicationId → returns all aggregates 4ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × consumptionRoutes integration > GET /:userId/:applicationId/:key → returns single aggregate 4ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × consumptionRoutes integration > GET /:userId/:applicationId/:key → 404 when not found 4ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × consumptionRoutes integration > DELETE /:userId/:applicationId/:key → removes aggregate and entries 4ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ❯ src/tests/sessions.integration.test.ts (5 tests | 5 failed) 56ms
+   × GET /api/admin/sessions — sessions integration > 401 when not authenticated 26ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × GET /api/admin/sessions — sessions integration > returns empty list when no active sessions 3ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × GET /api/admin/sessions — sessions integration > returns only active sessions, excludes expired ones 4ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × GET /api/admin/sessions — sessions integration > paginates correctly 7ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+   × GET /api/admin/sessions — sessions integration > response contains the `sessions` key (not `list`) 4ms
+     → Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ✓ src/services/login-history.test.ts (3 tests) 7ms
+
+⎯⎯⎯⎯⎯⎯ Failed Tests 66 ⎯⎯⎯⎯⎯⎯⎯
+
+ FAIL  src/routes/health.test.ts > GET /health > returns 200 with status ok
+AssertionError: expected 'undefined' to be 'string' // Object.is equality
+
+Expected: "string"
+Received: "undefined"
+
+ ❯ src/routes/health.test.ts:20:33
+     18|     const body = JSON.parse(res.body);
+     19|     expect(body.status).toBe("ok");
+     20|     expect(typeof body.version).toBe("string");
+       |                                 ^
+     21|   });
+     22| });
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/66]⎯
+
+ FAIL  src/services/templates.test.ts > renderAuthPage > variable substitution > renders empty OAUTH_QUERY when oauthQuery is not provided
+AssertionError: expected '<!DOCTYPE html>\n<html lang="en">\n<h…' to contain 'name="oauthQuery" value=""'
+
+- Expected
++ Received
+
+- name="oauthQuery" value=""
++ <!DOCTYPE html>
++ <html lang="en">
++ <head>
++   <meta charset="UTF-8" />
++   <meta name="viewport" content="width=device-width, initial-scale=1" />
++   <title>Sign in</title>
++   <link rel="preconnect" href="https://fonts.googleapis.com" />
++   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
++   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
++   <style>
++     :root {
++       --bg:             #f4f4f5;
++       --surface:        rgba(255,255,255,0.9);
++       --surface-inner:  #f4f4f5;
++       --border:         rgba(212,212,216,0.7);
++       --border-focus:   #2563eb;
++       --text:           #09090b;
++       --text-muted:     #71717a;
++       --text-subtle:    #a1a1aa;
++       --primary:        #2563eb;
++       --primary-hover:  #3b82f6;
++       --primary-glow:   rgba(37,99,235,0.15);
++       --danger:         #ef4444;
++       --danger-bg:      rgba(239,68,68,0.08);
++       --danger-border:  rgba(239,68,68,0.25);
++       --radius-sm: 4px; --radius: 7px; --radius-lg: 9px; --radius-xl: 12px;
++       --shadow-lg: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
++     }
++     @media (prefers-color-scheme: dark) {
++       :root {
++         --bg:             #09090b;
++         --surface:        rgba(24,24,27,0.6);
++         --surface-inner:  rgba(39,39,42,0.6);
++         --border:         rgba(63,63,70,0.4);
++         --border-focus:   #3b82f6;
++         --text:           #fafafa;
++         --text-muted:     #a1a1aa;
++         --text-subtle:    #52525b;
++         --primary:        #2563eb;
++         --primary-hover:  #3b82f6;
++         --primary-glow:   rgba(59,130,246,0.12);
++         --danger:         #f87171;
++         --danger-bg:      rgba(239,68,68,0.1);
++         --danger-border:  rgba(239,68,68,0.3);
++         --shadow-lg: 0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
++       }
++     }
++     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
++     body {
++       font-family: "Inter", system-ui, sans-serif;
++       background: var(--bg);
++       color: var(--text);
++       min-height: 100svh;
++       display: flex; align-items: center; justify-content: center;
++       padding: 1.5rem 1rem;
++       -webkit-font-smoothing: antialiased;
++     }
++     .auth-container { width: 100%; max-width: 22rem; display: flex; flex-direction: column; align-items: center; }
++     .auth-header { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 1.75rem; text-align: center; }
++     .auth-icon {
++       width: 3rem; height: 3rem; border-radius: var(--radius-xl);
++       background: var(--primary); color: #fff;
++       display: flex; align-items: center; justify-content: center;
++       box-shadow: 0 8px 20px rgba(37,99,235,0.35); margin-bottom: 0.25rem;
++       transition: transform .4s cubic-bezier(.4,0,.2,1);
++     }
++     .auth-icon svg { width: 1.375rem; height: 1.375rem; }
++     h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
++     .subtitle { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; }
++     .card {
++       background: var(--surface); border: 1px solid var(--border);
++       border-radius: var(--radius-xl); padding: 1.5rem; width: 100%;
++       box-shadow: var(--shadow-lg);
++       backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
++       overflow: hidden;
++     }
++
++     /* ── Slide-in viewport ─────────────────────────────────────────────── */
++     .slider-viewport { overflow: hidden; width: 100%; }
++     .slider {
++       display: flex; width: 200%;
++       transition: transform .45s cubic-bezier(.4,0,.2,1);
++     }
++     .slider > .step { flex: 0 0 50%; min-width: 0; }
++     /* A small inner padding so focus rings aren't clipped by overflow:hidden */
++     .slider > .step > .step-inner { padding: 2px; }
++     .slider.step-mfa { transform: translateX(-50%); }
++     @media (prefers-reduced-motion: reduce) {
++       .slider { transition: none; }
++       .auth-icon { transition: none; }
++     }
++
++     .form-group { margin-bottom: 1rem; }
++     label {
++       display: block; font-size: 0.8125rem; font-weight: 500;
++       color: var(--text-muted); margin-bottom: 0.375rem;
++     }
++     .label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.375rem; }
++     .label-row label { margin-bottom: 0; }
++     .label-link { font-size: 0.8125rem; color: var(--primary); text-decoration: none; font-weight: 500; }
++     .label-link:hover { color: var(--primary-hover); }
++     input[type="email"], input[type="password"], input[type="text"] {
++       width: 100%; padding: 0.5625rem 0.75rem;
++       border: 1px solid var(--border); border-radius: var(--radius);
++       font-size: 0.9375rem; font-family: inherit;
++       color: var(--text); background: var(--surface-inner);
++       outline: none; transition: border-color .15s, box-shadow .15s; line-height: 1.5;
++     }
++     input::placeholder { color: var(--text-subtle); }
++     input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--primary-glow); }
++     .btn {
++       display: flex; align-items: center; justify-content: center; gap: 0.5rem;
++       width: 100%; padding: 0.5625rem 1rem; border-radius: var(--radius);
++       font-size: 0.9375rem; font-weight: 600; font-family: inherit;
++       cursor: pointer; transition: background .15s, box-shadow .15s, opacity .15s;
++       border: 1px solid transparent; line-height: 1.5; margin-top: 1.25rem;
++     }
++     .btn-primary { background: var(--primary); color: #fff; }
++     .btn-primary:hover:not(:disabled) { background: var(--primary-hover); box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
++     .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
++     .btn-ghost {
++       background: transparent; color: var(--text-muted);
++       border: 1px solid var(--border); margin-top: .5rem;
++     }
++     .btn-ghost:hover:not(:disabled) { color: var(--text); border-color: var(--border-focus); }
++     .error-box {
++       background: var(--danger-bg); color: var(--danger);
++       border: 1px solid var(--danger-border); border-radius: var(--radius-sm);
++       padding: 0.5625rem 0.75rem; font-size: 0.875rem; margin-bottom: 1rem;
++     }
++     .error-box:empty { display: none; }
++     .auth-footer { margin-top: 1.25rem; text-align: center; font-size: 0.875rem; color: var(--text-muted); }
++     .auth-footer a { color: var(--primary); text-decoration: none; font-weight: 500; }
++     .auth-footer a:hover { color: var(--primary-hover); }
++     .divider {
++       display: flex; align-items: center; gap: .75rem;
++       margin: 1.25rem 0 1rem; color: var(--text-subtle); font-size: .8125rem;
++     }
++     .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
++     .social-buttons { display: flex; flex-direction: column; gap: .5rem; }
++     .btn-social {
++       display: flex; align-items: center; gap: .625rem; width: 100%;
++       padding: .5rem .75rem; background: var(--surface-inner);
++       border: 1px solid var(--border); border-radius: var(--radius);
++       font-family: inherit; font-size: .9375rem; font-weight: 500;
++       color: var(--text); cursor: pointer; transition: border-color .15s; line-height: 1.5;
++     }
++     .btn-social:hover:not(:disabled) { border-color: var(--border-focus); }
++     .btn-social:disabled { opacity: .5; cursor: not-allowed; }
++     .btn-social svg { flex-shrink: 0; }
++
++     /* ── OTP (6 digits split 3+3) ───────────────────────────────────────── */
++     .otp-group {
++       display: flex; align-items: center; justify-content: center;
++       gap: .5rem; margin: .25rem 0 .25rem;
++     }
++     .otp-group .otp-sep {
++       width: 1rem; height: 1px; background: var(--border);
++       flex-shrink: 0;
++     }
++     .otp-block { display: flex; gap: .4rem; }
++     .otp-input {
++       width: 2.5rem; height: 3rem;
++       text-align: center;
++       font-size: 1.25rem; font-weight: 600;
++       font-variant-numeric: tabular-nums;
++       padding: 0;
++       border: 1px solid var(--border); border-radius: var(--radius);
++       background: var(--surface-inner); color: var(--text);
++       outline: none; transition: border-color .15s, box-shadow .15s, transform .12s;
++     }
++     .otp-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--primary-glow); }
++     .otp-input.is-filled { border-color: var(--primary); }
++     .otp-group.is-error .otp-input {
++       border-color: var(--danger-border);
++       animation: otp-shake .35s cubic-bezier(.36,.07,.19,.97);
++     }
++     @keyframes otp-shake {
++       10%,90% { transform: translateX(-1px); }
++       20%,80% { transform: translateX(2px); }
++       30%,50%,70% { transform: translateX(-4px); }
++       40%,60% { transform: translateX(4px); }
++     }
++     .mfa-mode-switch {
++       display: flex; justify-content: space-between; align-items: center;
++       margin-top: .875rem; font-size: .8125rem;
++     }
++     .mfa-mode-switch button {
++       background: none; border: none; padding: 0; cursor: pointer;
++       font: inherit; color: var(--text-muted);
++     }
++     .mfa-mode-switch button:hover { color: var(--text); }
++     .mfa-mode-switch button.primary { color: var(--primary); }
++     .mfa-mode-switch button.primary:hover { color: var(--primary-hover); }
++     .backup-input {
++       width: 100%; text-align: center; letter-spacing: .1em;
++       font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
++       font-size: 1rem;
++     }
++   </style>
++ </head>
++ <body>
++   <div class="auth-container">
++     <div class="auth-header">
++       <div class="auth-icon" id="auth-icon" aria-hidden="true">
++         <!-- shield icon for login; swapped to a lock when MFA step is shown -->
++         <svg id="icon-login" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
++           <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
++         </svg>
++         <svg id="icon-mfa" style="display:none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
++           <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
++           <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
++         </svg>
++       </div>
++       <h1 id="title">Welcome back</h1>
++       <p class="subtitle" id="subtitle">Sign in to your account to continue.</p>
++     </div>
++
++     <div class="card">
++       <div class="error-box" id="error-box"></div>
++
++       <div class="slider-viewport">
++         <div class="slider" id="slider">
++           <!-- ── Step 1: credentials ─────────────────────────────────── -->
++           <div class="step" aria-hidden="false">
++             <div class="step-inner">
++               <form id="login-form">
++                 <input type="hidden" name="redirectTo" value="/" />
++                 <input type="hidden" name="oauthQuery"  value="" />
++                 <div class="form-group">
++                   <label for="email">Email</label>
++                   <input id="email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required />
++                 </div>
++                 <div class="form-group">
++                   <div class="label-row">
++                     <label for="password">Password</label>
++                     <a class="label-link" href="/forgot-password">Forgot password?</a>
++                   </div>
++                   <input id="password" name="password" type="password" autocomplete="current-password" placeholder="••••••••" required />
++                 </div>
++                 <button type="submit" class="btn btn-primary" id="submit-btn">Sign in</button>
++               </form>
++               <div id="social-section"></div>
++             </div>
++           </div>
++
++           <!-- ── Step 2: MFA challenge ───────────────────────────────── -->
++           <div class="step" aria-hidden="true">
++             <div class="step-inner">
++               <!-- TOTP (6 digits split 3+3) -->
++               <form id="totp-form" novalidate>
++                 <label style="text-align:center; margin-bottom:.75rem;">Enter your 6-digit code</label>
++                 <div class="otp-group" id="otp-group" role="group" aria-label="One-time password, 6 digits">
++                   <div class="otp-block">
++                     <input class="otp-input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="one-time-code" aria-label="Digit 1" />
++                     <input class="otp-input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1"                               aria-label="Digit 2" />
++                     <input class="otp-input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1"                               aria-label="Digit 3" />
++                   </div>
++                   <span class="otp-sep" aria-hidden="true"></span>
++                   <div class="otp-block">
++                     <input class="otp-input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1"                               aria-label="Digit 4" />
++                     <input class="otp-input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1"                               aria-label="Digit 5" />
++                     <input class="otp-input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1"                               aria-label="Digit 6" />
++                   </div>
++                 </div>
++                 <button type="submit" class="btn btn-primary" id="totp-submit">Verify</button>
++               </form>
++
++               <!-- Backup code fallback (hidden by default) -->
++               <form id="backup-form" style="display:none" novalidate>
++                 <div class="form-group" style="margin-top:.25rem">
++                   <label for="backup-code">Backup code</label>
++                   <input class="backup-input" id="backup-code" type="text" autocomplete="one-time-code" placeholder="xxxx-xxxx" required />
++                 </div>
++                 <button type="submit" class="btn btn-primary" id="backup-submit">Verify</button>
++               </form>
++
++               <div class="mfa-mode-switch">
++                 <button type="button" id="toggle-mode" class="primary">Use a backup code</button>
++                 <button type="button" id="cancel-mfa">Cancel</button>
++               </div>
++             </div>
++           </div>
++         </div>
++       </div>
++     </div>
++
++     <p class="auth-footer" id="register-footer">
++       No account yet? <a id="register-link" href="/register">Create one</a>
++     </p>
++   </div>
++
++   <script type="module">
++     const AUTH_URL = 'https://auth.example.com';
++
++     const slider      = document.getElementById('slider');
++     const errorBox    = document.getElementById('error-box');
++     const title       = document.getElementById('title');
++     const subtitle    = document.getElementById('subtitle');
++     const iconLogin   = document.getElementById('icon-login');
++     const iconMfa     = document.getElementById('icon-mfa');
++     const registerFtr = document.getElementById('register-footer');
++
++     // ── Step 1: sign-in form ──────────────────────────────────────────
++     const form      = document.getElementById('login-form');
++     const submitBtn = document.getElementById('submit-btn');
++
++     form.addEventListener('submit', async (e) => {
++       e.preventDefault();
++       errorBox.textContent = '';
++       submitBtn.disabled = true;
++       submitBtn.textContent = 'Signing in…';
++       const email = form.email.value.trim();
++       const password = form.password.value;
++       const redirectTo = form.redirectTo.value || '/';
++       const oauthQuery = form.oauthQuery.value;
++       try {
++         const callbackURL = oauthQuery
++           ? AUTH_URL + '/api/auth/oauth2/authorize?' + oauthQuery
++           : (redirectTo || '/');
++         const body = { email, password, callbackURL };
++         const res = await fetch(AUTH_URL + '/api/auth/sign-in/email', {
++           method: 'POST', credentials: 'include',
++           headers: { 'Content-Type': 'application/json', 'Origin': window.location.origin },
++           body: JSON.stringify(body),
++         });
++         const data = await res.json().catch(() => ({}));
++         if (!res.ok) {
++           errorBox.textContent = data?.error?.message ?? 'Authentication failed.';
++           return;
++         }
++         // MFA required → slide to step 2 instead of navigating away.
++         if (data?.twoFactorRedirect) {
++           showMfaStep();
++           return;
++         }
++         if (data?.url) {
++           window.location.href = data.url;
++         } else if (redirectTo.startsWith('/api/') || redirectTo.startsWith('http')) {
++           window.location.href = redirectTo;
++         } else {
++           window.location.href = redirectTo || '/';
++         }
++       } catch {
++         errorBox.textContent = 'A network error occurred. Please try again.';
++       } finally {
++         submitBtn.disabled = false;
++         submitBtn.textContent = 'Sign in';
++       }
++     });
++
++     if ('true' !== 'true') registerFtr?.remove();
++
++     // ── Step 2: MFA challenge ────────────────────────────────────────
++     const otpGroup   = document.getElementById('otp-group');
++     const otpInputs  = Array.from(otpGroup.querySelectorAll('.otp-input'));
++     const totpForm   = document.getElementById('totp-form');
++     const totpSubmit = document.getElementById('totp-submit');
++     const backupForm = document.getElementById('backup-form');
++     const backupSub  = document.getElementById('backup-submit');
++     const backupInp  = document.getElementById('backup-code');
++     const toggleBtn  = document.getElementById('toggle-mode');
++     const cancelBtn  = document.getElementById('cancel-mfa');
++
++     let mfaMode = 'totp'; // 'totp' | 'backup'
++
++     function showMfaStep() {
++       errorBox.textContent = '';
++       title.textContent = 'Two-factor authentication';
++       subtitle.textContent = 'Enter the code from your authenticator app.';
++       iconLogin.style.display = 'none';
++       iconMfa.style.display = '';
++       registerFtr?.style && (registerFtr.style.display = 'none');
++       slider.classList.add('step-mfa');
++       // Focus first OTP input after slide animation completes.
++       setTimeout(() => otpInputs[0]?.focus(), 300);
++     }
++
++     function showLoginStep() {
++       errorBox.textContent = '';
++       title.textContent = 'Welcome back';
++       subtitle.textContent = 'Sign in to your account to continue.';
++       iconLogin.style.display = '';
++       iconMfa.style.display = 'none';
++       if (registerFtr && 'true' === 'true') registerFtr.style.display = '';
++       slider.classList.remove('step-mfa');
++       resetOtp();
++       backupInp.value = '';
++       switchMode('totp');
++     }
++
++     function resetOtp() {
++       otpInputs.forEach(i => { i.value = ''; i.classList.remove('is-filled'); });
++       otpGroup.classList.remove('is-error');
++     }
++
++     function otpValue() {
++       return otpInputs.map(i => i.value).join('');
++     }
++
++     function markFilled() {
++       otpInputs.forEach(i => i.classList.toggle('is-filled', !!i.value));
++     }
++
++     // Digit input handling: auto-advance, auto-submit on last digit.
++     otpInputs.forEach((input, idx) => {
++       input.addEventListener('input', (e) => {
++         // Keep only the last digit typed (handles Android IMEs returning >1 char).
++         const raw = (e.target.value || '').replace(/\D/g, '');
++         input.value = raw.slice(-1);
++         markFilled();
++         if (input.value && idx < otpInputs.length - 1) {
++           otpInputs[idx + 1].focus();
++         }
++         if (otpValue().length === 6) {
++           submitTotp();
++         }
++       });
++       input.addEventListener('keydown', (e) => {
++         if (e.key === 'Backspace' && !input.value && idx > 0) {
++           otpInputs[idx - 1].focus();
++           otpInputs[idx - 1].value = '';
++           markFilled();
++           e.preventDefault();
++         } else if (e.key === 'ArrowLeft' && idx > 0) {
++           otpInputs[idx - 1].focus(); e.preventDefault();
++         } else if (e.key === 'ArrowRight' && idx < otpInputs.length - 1) {
++           otpInputs[idx + 1].focus(); e.preventDefault();
++         }
++       });
++       input.addEventListener('paste', (e) => {
++         const text = (e.clipboardData || window.clipboardData)?.getData('text') ?? '';
++         const digits = text.replace(/\D/g, '').slice(0, 6);
++         if (!digits) return;
++         e.preventDefault();
++         otpInputs.forEach((inp, i) => { inp.value = digits[i] ?? ''; });
++         markFilled();
++         const nextIdx = Math.min(digits.length, otpInputs.length - 1);
++         otpInputs[nextIdx].focus();
++         if (digits.length === 6) submitTotp();
++       });
++     });
++
++     totpForm.addEventListener('submit', (e) => { e.preventDefault(); submitTotp(); });
++     backupForm.addEventListener('submit', (e) => { e.preventDefault(); submitBackup(); });
++
++     async function submitTotp() {
++       const code = otpValue();
++       if (code.length !== 6) return;
++       totpSubmit.disabled = true;
++       totpSubmit.textContent = 'Verifying…';
++       errorBox.textContent = '';
++       try {
++         const res = await fetch(AUTH_URL + '/api/auth/two-factor/verify-totp', {
++           method: 'POST', credentials: 'include',
++           headers: { 'Content-Type': 'application/json', 'Origin': window.location.origin },
++           body: JSON.stringify({ code }),
++         });
++         const data = await res.json().catch(() => ({}));
++         if (!res.ok) {
++           otpGroup.classList.add('is-error');
++           errorBox.textContent = data?.error?.message ?? 'Invalid code. Please try again.';
++           // Clear and refocus so the user can retry without manual clearing.
++           setTimeout(() => { resetOtp(); otpInputs[0].focus(); }, 400);
++           return;
++         }
++         redirectAfterMfa(data);
++       } catch {
++         errorBox.textContent = 'A network error occurred. Please try again.';
++       } finally {
++         totpSubmit.disabled = false;
++         totpSubmit.textContent = 'Verify';
++       }
++     }
++
++     async function submitBackup() {
++       const code = backupInp.value.trim();
++       if (!code) return;
++       backupSub.disabled = true;
++       backupSub.textContent = 'Verifying…';
++       errorBox.textContent = '';
++       try {
++         const res = await fetch(AUTH_URL + '/api/auth/two-factor/verify-backup-code', {
++           method: 'POST', credentials: 'include',
++           headers: { 'Content-Type': 'application/json', 'Origin': window.location.origin },
++           body: JSON.stringify({ code }),
++         });
++         const data = await res.json().catch(() => ({}));
++         if (!res.ok) {
++           errorBox.textContent = data?.error?.message ?? 'Invalid backup code.';
++           return;
++         }
++         redirectAfterMfa(data);
++       } catch {
++         errorBox.textContent = 'A network error occurred. Please try again.';
++       } finally {
++         backupSub.disabled = false;
++         backupSub.textContent = 'Verify';
++       }
++     }
++
++     // After successful MFA, BetterAuth returns the same payload shape as a
++     // normal sign-in: either `{ url }` (OAuth redirect) or a session object.
++     function redirectAfterMfa(data) {
++       const redirectTo = form.redirectTo.value || '/';
++       const oauthQuery = form.oauthQuery.value;
++       if (data?.url) { window.location.href = data.url; return; }
++       if (oauthQuery) {
++         window.location.href = AUTH_URL + '/api/auth/oauth2/authorize?' + oauthQuery;
++         return;
++       }
++       window.location.href = redirectTo || '/';
++     }
++
++     function switchMode(next) {
++       mfaMode = next;
++       errorBox.textContent = '';
++       if (next === 'backup') {
++         totpForm.style.display = 'none';
++         backupForm.style.display = '';
++         toggleBtn.textContent = 'Use authenticator code';
++         setTimeout(() => backupInp.focus(), 50);
++       } else {
++         totpForm.style.display = '';
++         backupForm.style.display = 'none';
++         toggleBtn.textContent = 'Use a backup code';
++         setTimeout(() => otpInputs[0]?.focus(), 50);
++       }
++     }
++
++     toggleBtn.addEventListener('click', () => switchMode(mfaMode === 'totp' ? 'backup' : 'totp'));
++     cancelBtn.addEventListener('click', () => {
++       // Best-effort: clear BetterAuth's temporary 2FA cookie by signing out.
++       fetch(AUTH_URL + '/api/auth/sign-out', { method: 'POST', credentials: 'include' })
++         .catch(() => {})
++         .finally(() => showLoginStep());
++     });
++
++     // ── Social providers (login step) ────────────────────────────────
++     const PROVIDER_CONFIG = {
++       google:    { label: 'Continue with Google',    icon: '<svg width="16" height="16" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>' },
++       github:    { label: 'Continue with GitHub',    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>' },
++       linkedin:  { label: 'Continue with LinkedIn',  icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="#0A66C2"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>' },
++       microsoft: { label: 'Continue with Microsoft', icon: '<svg width="16" height="16" viewBox="0 0 24 24"><path fill="#F25022" d="M1 1h10v10H1z"/><path fill="#00A4EF" d="M13 1h10v10H13z"/><path fill="#7FBA00" d="M1 13h10v10H1z"/><path fill="#FFB900" d="M13 13h10v10H13z"/></svg>' },
++       apple:     { label: 'Continue with Apple',     icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>' },
++     };
++     const socialProviders = (() => { try { return JSON.parse('[]'); } catch { return []; } })();
++     if (socialProviders.length > 0) {
++       const sec = document.getElementById('social-section');
++       sec.innerHTML = '<div class="divider"><span>or continue with</span></div><div class="social-buttons" id="social-buttons"></div>';
++       const container = document.getElementById('social-buttons');
++       socialProviders.forEach(provider => {
++         const cfg = PROVIDER_CONFIG[provider]; if (!cfg) return;
++         const btn = document.createElement('button');
++         btn.type = 'button'; btn.className = 'btn-social'; btn.dataset.provider = provider;
++         btn.innerHTML = cfg.icon + '<span>' + cfg.label + '</span>';
++         btn.addEventListener('click', async () => {
++           container.querySelectorAll('.btn-social').forEach(b => { b.disabled = true; });
++           btn.innerHTML = cfg.icon + '<span>Redirecting…</span>';
++           const oq = form.oauthQuery.value; const rd = form.redirectTo.value || '/';
++           const callbackURL = oq ? AUTH_URL + '/api/auth/oauth2/authorize?' + oq : rd;
++           try {
++             const res = await fetch(AUTH_URL + '/api/auth/sign-in/social', {
++               method: 'POST', credentials: 'include',
++               headers: { 'Content-Type': 'application/json', 'Origin': window.location.origin },
++               body: JSON.stringify({ provider, callbackURL }),
++             });
++             const data = await res.json().catch(() => ({}));
++             if (!res.ok || !data.url) {
++               errorBox.textContent = data?.error?.message ?? 'Social sign-in failed.';
++               container.querySelectorAll('.btn-social').forEach(b => { b.disabled = false; });
++               btn.innerHTML = cfg.icon + '<span>' + cfg.label + '</span>'; return;
++             }
++             window.location.href = data.url;
++           } catch {
++             errorBox.textContent = 'A network error occurred. Please try again.';
++             container.querySelectorAll('.btn-social').forEach(b => { b.disabled = false; });
++             btn.innerHTML = cfg.icon + '<span>' + cfg.label + '</span>';
++           }
++         });
++         container.appendChild(btn);
++       });
++     }
++   </script>
++ </body>
++ </html>
++
+
+ ❯ src/services/templates.test.ts:43:20
+     41|       expect(html).not.toContain("{{OAUTH_QUERY}}");
+     42|       // The hidden input should carry an empty value
+     43|       expect(html).toContain('name="oauthQuery" value=""');
+       |                    ^
+     44|     });
+     45| 
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/66]⎯
+
+ FAIL  src/tests/adminConsumption.integration.test.ts > adminConsumptionRoutes integration > 401 when not authenticated
+ FAIL  src/tests/adminConsumption.integration.test.ts > adminConsumptionRoutes integration > 403 when not admin
+ FAIL  src/tests/adminConsumption.integration.test.ts > adminConsumptionRoutes integration > 400 when year query param is invalid
+ FAIL  src/tests/adminConsumption.integration.test.ts > adminConsumptionRoutes integration > 400 when month is out of valid range
+ FAIL  src/tests/adminConsumption.integration.test.ts > adminConsumptionRoutes integration > 404 when app does not exist
+ FAIL  src/tests/adminConsumption.integration.test.ts > adminConsumptionRoutes integration > 200 with empty entries when no consumption data
+ FAIL  src/tests/adminConsumption.integration.test.ts > adminConsumptionRoutes integration > 200 aggregates entries grouped by userId and key for the requested month
+ FAIL  src/tests/adminConsumption.integration.test.ts > adminConsumptionRoutes integration > 200 excludes entries from other months
+Error: Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ❯ PostgresJsPreparedQuery.queryWithCache node_modules/.pnpm/drizzle-orm@0.44.7_@opentelemetry+api@1.9.1_kysely@0.28.17_postgres@3.4.9/node_modules/src/pg-core/session.ts:73:11
+ ❯ Module.cleanDb src/tests/helpers/db.ts:18:3
+     16|  */
+     17| export async function cleanDb(): Promise<void> {
+     18|   await db.execute(
+       |   ^
+     19|     sql`TRUNCATE TABLE
+     20|       app_role_permissions,
+ ❯ src/tests/adminConsumption.integration.test.ts:34:3
+
+Caused by: Error: connect ECONNREFUSED 127.0.0.1:5433
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
+Serialized Error: { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 5433, query: undefined, parameters: undefined, args: [], types: null }
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/66]⎯
+
+ FAIL  src/tests/applications.integration.test.ts > applicationRoutes integration > 401 when not authenticated
+ FAIL  src/tests/applications.integration.test.ts > applicationRoutes integration > GET / → returns empty list initially
+ FAIL  src/tests/applications.integration.test.ts > applicationRoutes integration > POST / → creates an application with default roles and plan
+ FAIL  src/tests/applications.integration.test.ts > applicationRoutes integration > POST / → 409 on duplicate slug
+ FAIL  src/tests/applications.integration.test.ts > applicationRoutes integration > POST / → public app has no clientSecret
+ FAIL  src/tests/applications.integration.test.ts > applicationRoutes integration > POST / auto-assigns superadmins to new app
+ FAIL  src/tests/applications.integration.test.ts > applicationRoutes integration > DELETE /:id → removes the application
+ FAIL  src/tests/applications.integration.test.ts > applicationRoutes integration > GET /:id → 404 for unknown application
+Error: Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ❯ PostgresJsPreparedQuery.queryWithCache node_modules/.pnpm/drizzle-orm@0.44.7_@opentelemetry+api@1.9.1_kysely@0.28.17_postgres@3.4.9/node_modules/src/pg-core/session.ts:73:11
+ ❯ Module.cleanDb src/tests/helpers/db.ts:18:3
+     16|  */
+     17| export async function cleanDb(): Promise<void> {
+     18|   await db.execute(
+       |   ^
+     19|     sql`TRUNCATE TABLE
+     20|       app_role_permissions,
+ ❯ src/tests/applications.integration.test.ts:40:3
+
+Caused by: Error: connect ECONNREFUSED 127.0.0.1:5433
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
+Serialized Error: { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 5433, query: undefined, parameters: undefined, args: [], types: null }
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[4/66]⎯
+
+ FAIL  src/tests/consumption.integration.test.ts > consumptionRoutes integration > POST / → 403 when not authenticated
+ FAIL  src/tests/consumption.integration.test.ts > consumptionRoutes integration > POST / → 404 when user+app relationship not found
+ FAIL  src/tests/consumption.integration.test.ts > consumptionRoutes integration > POST / → creates consumption entry and aggregate
+ FAIL  src/tests/consumption.integration.test.ts > consumptionRoutes integration > POST / → accumulates on subsequent calls
+ FAIL  src/tests/consumption.integration.test.ts > consumptionRoutes integration > POST / → 400 on invalid key format
+ FAIL  src/tests/consumption.integration.test.ts > consumptionRoutes integration > GET /:userId/:applicationId → returns all aggregates
+ FAIL  src/tests/consumption.integration.test.ts > consumptionRoutes integration > GET /:userId/:applicationId/:key → returns single aggregate
+ FAIL  src/tests/consumption.integration.test.ts > consumptionRoutes integration > GET /:userId/:applicationId/:key → 404 when not found
+ FAIL  src/tests/consumption.integration.test.ts > consumptionRoutes integration > DELETE /:userId/:applicationId/:key → removes aggregate and entries
+Error: Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ❯ PostgresJsPreparedQuery.queryWithCache node_modules/.pnpm/drizzle-orm@0.44.7_@opentelemetry+api@1.9.1_kysely@0.28.17_postgres@3.4.9/node_modules/src/pg-core/session.ts:73:11
+ ❯ Module.cleanDb src/tests/helpers/db.ts:18:3
+     16|  */
+     17| export async function cleanDb(): Promise<void> {
+     18|   await db.execute(
+       |   ^
+     19|     sql`TRUNCATE TABLE
+     20|       app_role_permissions,
+ ❯ src/tests/consumption.integration.test.ts:41:3
+
+Caused by: Error: connect ECONNREFUSED 127.0.0.1:5433
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
+Serialized Error: { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 5433, query: undefined, parameters: undefined, args: [], types: null }
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[5/66]⎯
+
+ FAIL  src/tests/plans.integration.test.ts > plansRoutes integration > 401 when not authenticated
+ FAIL  src/tests/plans.integration.test.ts > plansRoutes integration > GET plans → 404 when application does not exist
+ FAIL  src/tests/plans.integration.test.ts > plansRoutes integration > GET plans → empty list
+ FAIL  src/tests/plans.integration.test.ts > plansRoutes integration > POST plan → creates plan
+ FAIL  src/tests/plans.integration.test.ts > plansRoutes integration > POST plan → new isDefault demotes existing default
+ FAIL  src/tests/plans.integration.test.ts > plansRoutes integration > DELETE plan → 400 when plan has active subscribers
+ FAIL  src/tests/plans.integration.test.ts > plansRoutes integration > DELETE plan → 204 when no active subscribers
+ FAIL  src/tests/plans.integration.test.ts > plansRoutes integration > POST price → 400 when amount is negative
+ FAIL  src/tests/plans.integration.test.ts > plansRoutes integration > POST price → 201 when amount is 0 (free tier)
+ FAIL  src/tests/plans.integration.test.ts > plansRoutes integration > POST price → 201 stores interval correctly for one_time
+ FAIL  src/tests/plans.integration.test.ts > plansRoutes integration > POST price → 404 when plan does not exist
+ FAIL  src/tests/plans.integration.test.ts > plansRoutes integration > POST plan with metered features → 201 stores features correctly
+Error: Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ❯ PostgresJsPreparedQuery.queryWithCache node_modules/.pnpm/drizzle-orm@0.44.7_@opentelemetry+api@1.9.1_kysely@0.28.17_postgres@3.4.9/node_modules/src/pg-core/session.ts:73:11
+ ❯ Module.cleanDb src/tests/helpers/db.ts:18:3
+     16|  */
+     17| export async function cleanDb(): Promise<void> {
+     18|   await db.execute(
+       |   ^
+     19|     sql`TRUNCATE TABLE
+     20|       app_role_permissions,
+ ❯ src/tests/plans.integration.test.ts:38:3
+
+Caused by: Error: connect ECONNREFUSED 127.0.0.1:5433
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
+Serialized Error: { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 5433, query: undefined, parameters: undefined, args: [], types: null }
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[6/66]⎯
+
+ FAIL  src/tests/roles.integration.test.ts > rolesRoutes integration > 401 when not authenticated
+ FAIL  src/tests/roles.integration.test.ts > rolesRoutes integration > GET roles → empty list
+ FAIL  src/tests/roles.integration.test.ts > rolesRoutes integration > POST role → creates role
+ FAIL  src/tests/roles.integration.test.ts > rolesRoutes integration > POST role → 409 on duplicate name in same app
+ FAIL  src/tests/roles.integration.test.ts > rolesRoutes integration > POST role → new isDefault demotes existing default
+ FAIL  src/tests/roles.integration.test.ts > rolesRoutes integration > DELETE role → 400 when role is assigned to users
+ FAIL  src/tests/roles.integration.test.ts > rolesRoutes integration > DELETE role → 204 when role has no users
+Error: Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ❯ PostgresJsPreparedQuery.queryWithCache node_modules/.pnpm/drizzle-orm@0.44.7_@opentelemetry+api@1.9.1_kysely@0.28.17_postgres@3.4.9/node_modules/src/pg-core/session.ts:73:11
+ ❯ Module.cleanDb src/tests/helpers/db.ts:18:3
+     16|  */
+     17| export async function cleanDb(): Promise<void> {
+     18|   await db.execute(
+       |   ^
+     19|     sql`TRUNCATE TABLE
+     20|       app_role_permissions,
+ ❯ src/tests/roles.integration.test.ts:36:3
+
+Caused by: Error: connect ECONNREFUSED 127.0.0.1:5433
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
+Serialized Error: { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 5433, query: undefined, parameters: undefined, args: [], types: null }
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[7/66]⎯
+
+ FAIL  src/tests/sessions.integration.test.ts > GET /api/admin/sessions — sessions integration > 401 when not authenticated
+ FAIL  src/tests/sessions.integration.test.ts > GET /api/admin/sessions — sessions integration > returns empty list when no active sessions
+ FAIL  src/tests/sessions.integration.test.ts > GET /api/admin/sessions — sessions integration > returns only active sessions, excludes expired ones
+ FAIL  src/tests/sessions.integration.test.ts > GET /api/admin/sessions — sessions integration > paginates correctly
+ FAIL  src/tests/sessions.integration.test.ts > GET /api/admin/sessions — sessions integration > response contains the `sessions` key (not `list`)
+Error: Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ❯ PostgresJsPreparedQuery.queryWithCache node_modules/.pnpm/drizzle-orm@0.44.7_@opentelemetry+api@1.9.1_kysely@0.28.17_postgres@3.4.9/node_modules/src/pg-core/session.ts:73:11
+ ❯ Module.cleanDb src/tests/helpers/db.ts:18:3
+     16|  */
+     17| export async function cleanDb(): Promise<void> {
+     18|   await db.execute(
+       |   ^
+     19|     sql`TRUNCATE TABLE
+     20|       app_role_permissions,
+ ❯ src/tests/sessions.integration.test.ts:26:3
+
+Caused by: Error: connect ECONNREFUSED 127.0.0.1:5433
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
+Serialized Error: { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 5433, query: undefined, parameters: undefined, args: [], types: null }
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[8/66]⎯
+
+ FAIL  src/tests/userSubscription.integration.test.ts > userRoutes — GET /subscription > 401 when not authenticated
+ FAIL  src/tests/userSubscription.integration.test.ts > userRoutes — GET /subscription > 200 with empty subscriptions when user has no app access
+ FAIL  src/tests/userSubscription.integration.test.ts > userRoutes — GET /subscription > 200 with plan null when user has access but no plan assigned
+ FAIL  src/tests/userSubscription.integration.test.ts > userRoutes — GET /subscription > 200 with plan details when subscription plan is assigned
+ FAIL  src/tests/userSubscription.integration.test.ts > userRoutes — GET /subscription > 200 includes prices array in plan when prices exist
+ FAIL  src/tests/userSubscription.integration.test.ts > userRoutes — GET /subscription > 200 prices array is empty when plan has no prices
+ FAIL  src/tests/userSubscription.integration.test.ts > userRoutes — GET /subscription > 200 includes metered features in plan
+Error: Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ❯ PostgresJsPreparedQuery.queryWithCache node_modules/.pnpm/drizzle-orm@0.44.7_@opentelemetry+api@1.9.1_kysely@0.28.17_postgres@3.4.9/node_modules/src/pg-core/session.ts:73:11
+ ❯ Module.cleanDb src/tests/helpers/db.ts:18:3
+     16|  */
+     17| export async function cleanDb(): Promise<void> {
+     18|   await db.execute(
+       |   ^
+     19|     sql`TRUNCATE TABLE
+     20|       app_role_permissions,
+ ❯ src/tests/userSubscription.integration.test.ts:40:3
+
+Caused by: Error: connect ECONNREFUSED 127.0.0.1:5433
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
+Serialized Error: { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 5433, query: undefined, parameters: undefined, args: [], types: null }
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[9/66]⎯
+
+ FAIL  src/tests/users.integration.test.ts > Admin — usersRoutes integration > GET / → 401 when not authenticated
+ FAIL  src/tests/users.integration.test.ts > Admin — usersRoutes integration > GET / → 403 for regular user
+ FAIL  src/tests/users.integration.test.ts > Admin — usersRoutes integration > GET / → returns paginated users via auth.api.listUsers
+ FAIL  src/tests/users.integration.test.ts > Admin — usersRoutes integration > DELETE /:id → 400 USR_002 when deleting the last superadmin
+ FAIL  src/tests/users.integration.test.ts > Admin — usersRoutes integration > DELETE /:id → 204 when deleting a superadmin while another exists
+ FAIL  src/tests/users.integration.test.ts > Admin — usersRoutes integration > DELETE /:id → 204 when deleting a normal user
+ FAIL  src/tests/users.integration.test.ts > Admin — usersRoutes integration > DELETE /:id → 400 USR_003 when admin tries to delete themselves
+ FAIL  src/tests/users.integration.test.ts > Admin — usersRoutes integration > DELETE /:id → 404 when user not found
+Error: Failed query: TRUNCATE TABLE
+      app_role_permissions,
+      user_app_roles,
+      app_permissions,
+      app_roles,
+      user_subscriptions,
+      subscription_plan_prices,
+      subscription_plans,
+      consumption_aggregates,
+      consumption_entries,
+      user_applications,
+      applications,
+      two_factor,
+      passkey,
+      oauth_client,
+      "session",
+      account,
+      verification,
+      "user"
+    RESTART IDENTITY CASCADE
+params: 
+ ❯ PostgresJsPreparedQuery.queryWithCache node_modules/.pnpm/drizzle-orm@0.44.7_@opentelemetry+api@1.9.1_kysely@0.28.17_postgres@3.4.9/node_modules/src/pg-core/session.ts:73:11
+ ❯ Module.cleanDb src/tests/helpers/db.ts:18:3
+     16|  */
+     17| export async function cleanDb(): Promise<void> {
+     18|   await db.execute(
+       |   ^
+     19|     sql`TRUNCATE TABLE
+     20|       app_role_permissions,
+ ❯ src/tests/users.integration.test.ts:37:3
+
+Caused by: Error: connect ECONNREFUSED 127.0.0.1:5433
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
+Serialized Error: { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 5433, query: undefined, parameters: undefined, args: [], types: null }
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[10/66]⎯
+
+
+ Test Files  10 failed | 12 passed (22)
+      Tests  66 failed | 97 passed (163)
+   Start at  01:11:40
+   Duration  2.80s (transform 1.58s, setup 0ms, collect 27.50s, tests 1.32s, environment 4ms, prepare 2.13s)
+
+ ELIFECYCLE  Test failed. See above for more details.

From 931b533c85d1eaf752185d36455bb2f4fb5c3e92 Mon Sep 17 00:00:00 2001
From: x42en <0x42en@gmail.com>
Date: Sun, 17 May 2026 02:09:04 +0200
Subject: [PATCH 2/7] refactor(admin): update stats response structure and
 sparkline data mapping

Update the `/active-users` endpoint to return a `count` property instead of `online` to align with standard naming conventions. Refactor the application statistics response to map sparkline data points to a simple array of numbers, improving the API's data structure for client-side consumption.
---
 src/routes/admin/stats.test.ts | 7 ++++---
 src/routes/admin/stats.ts      | 8 ++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/routes/admin/stats.test.ts b/src/routes/admin/stats.test.ts
index 19e7b8f..f41a944 100644
--- a/src/routes/admin/stats.test.ts
+++ b/src/routes/admin/stats.test.ts
@@ -70,10 +70,10 @@ describe("Admin — statsRoutes", () => {
 
   it("GET /active-users → returns distinct online count", async () => {
     mockGetSession.mockResolvedValueOnce(adminSession);
-    mockDb.select.mockImplementationOnce(() => makeChain([{ online: 3 }]));
+    mockDb.select.mockImplementationOnce(() => makeChain([{ count: 3 }]));
     const res = await app.inject({ method: "GET", url: "/active-users" });
     expect(res.statusCode).toBe(200);
-    expect(JSON.parse(res.body)).toEqual({ online: 3 });
+    expect(JSON.parse(res.body)).toEqual({ count: 3 });
   });
 
   // ── /logins ────────────────────────────────────────────────────────────
@@ -158,13 +158,14 @@ describe("Admin — statsRoutes", () => {
         appId: string;
         online: number;
         last7dLogins: number;
-        sparkline: unknown[];
+        sparkline: number[];
       }[];
     };
     expect(body.applications).toHaveLength(2);
     const app1 = body.applications.find((a) => a.appId === "app-1");
     expect(app1?.online).toBe(2);
     expect(app1?.sparkline).toHaveLength(7);
+    expect(app1?.sparkline.every((n) => typeof n === "number")).toBe(true);
     const app2 = body.applications.find((a) => a.appId === "app-2");
     expect(app2?.online).toBe(0);
     expect(app2?.last7dLogins).toBe(0);
diff --git a/src/routes/admin/stats.ts b/src/routes/admin/stats.ts
index 12d77b1..3750616 100644
--- a/src/routes/admin/stats.ts
+++ b/src/routes/admin/stats.ts
@@ -68,11 +68,11 @@ export async function statsRoutes(fastify: FastifyInstance): Promise<void> {
   // Distinct users with at least one non-expired session — i.e. currently online.
   fastify.get("/active-users", async (_req, reply) => {
     const now = new Date();
-    const [{ online }] = await db
-      .select({ online: countDistinct(sessionTable.userId) })
+    const [{ count }] = await db
+      .select({ count: countDistinct(sessionTable.userId) })
       .from(sessionTable)
       .where(gt(sessionTable.expiresAt, now));
-    await reply.send({ online });
+    await reply.send({ count });
   });
 
   // GET /api/admin/stats/logins?range=7d|30d&appId=<uuid>
@@ -165,7 +165,7 @@ export async function statsRoutes(fastify: FastifyInstance): Promise<void> {
         appId: a.id,
         online: onlineByApp.get(a.id) ?? 0,
         last7dLogins,
-        sparkline: series,
+        sparkline: series.map((p) => p.count),
       };
     });
 

From 474c2d2db23d34b2709c088691378486e3e1b69e Mon Sep 17 00:00:00 2001
From: x42en <0x42en@gmail.com>
Date: Sun, 17 May 2026 02:15:13 +0200
Subject: [PATCH 3/7] fix(admin): use ISO strings for timestamp queries

Convert Date objects to ISO strings and cast to timestamptz in SQL queries to ensure consistent date handling and prevent potential type mismatches during database execution.
---
 src/routes/admin/stats.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/routes/admin/stats.ts b/src/routes/admin/stats.ts
index 3750616..e434936 100644
--- a/src/routes/admin/stats.ts
+++ b/src/routes/admin/stats.ts
@@ -118,6 +118,7 @@ export async function statsRoutes(fastify: FastifyInstance): Promise<void> {
     const since = new Date();
     since.setUTCDate(since.getUTCDate() - 6);
     since.setUTCHours(0, 0, 0, 0);
+    const sinceIso = since.toISOString();
 
     const apps = await db
       .select({ id: applications.id })
@@ -134,19 +135,20 @@ export async function statsRoutes(fastify: FastifyInstance): Promise<void> {
                  COUNT(*)::int AS count
           FROM login_history
           WHERE application_id IS NOT NULL
-            AND logged_at >= ${since}
+            AND logged_at >= ${sinceIso}::timestamptz
           GROUP BY application_id, day`,
     )) as { appId: string; day: string; count: number }[];
 
     // Online proxy: distinct users with a login event in the last 24h per app.
     const online24h = new Date();
     online24h.setUTCHours(online24h.getUTCHours() - 24);
+    const online24hIso = online24h.toISOString();
     const onlineRows = (await db.execute(
       sql`SELECT application_id AS "appId",
                  COUNT(DISTINCT user_id)::int AS online
           FROM login_history
           WHERE application_id IS NOT NULL
-            AND logged_at >= ${online24h}
+            AND logged_at >= ${online24hIso}::timestamptz
           GROUP BY application_id`,
     )) as { appId: string; online: number }[];
     const onlineByApp = new Map(onlineRows.map((r) => [r.appId, r.online]));

From 3d44421689445e226940123d1ba7c2be4204f671 Mon Sep 17 00:00:00 2001
From: x42en <0x42en@gmail.com>
Date: Sun, 17 May 2026 02:26:32 +0200
Subject: [PATCH 4/7] feat(ui): display IP address and device info in user
 tables

Add support for displaying the most recent IP address and user agent
information in the Application Detail and Dashboard views. This includes
updating i18n translations, extending TypeScript interfaces, and
refactoring the admin API to fetch and return login metadata using
`selectDistinctOn`.
---
 frontend/src/i18n/en.ts                      |  3 ++
 frontend/src/i18n/fr.ts                      |  3 ++
 frontend/src/types/index.ts                  |  4 +++
 frontend/src/views/ApplicationDetailView.vue | 14 ++++++++
 frontend/src/views/DashboardView.vue         |  4 +--
 src/routes/admin/applications.ts             | 34 ++++++++++++++------
 6 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/frontend/src/i18n/en.ts b/frontend/src/i18n/en.ts
index f28abe4..6aa9fbd 100644
--- a/frontend/src/i18n/en.ts
+++ b/frontend/src/i18n/en.ts
@@ -137,6 +137,9 @@ export default {
       mfa: '2FA',
       applications: 'Applications',
       lastLogin: 'Last login',
+      ipAddress: 'IP',
+      device: 'Device',
+      history: 'History',
       createdAt: 'Created',
       actions: 'Actions',
     },
diff --git a/frontend/src/i18n/fr.ts b/frontend/src/i18n/fr.ts
index e66b494..9253ef4 100644
--- a/frontend/src/i18n/fr.ts
+++ b/frontend/src/i18n/fr.ts
@@ -137,6 +137,9 @@ export default {
       mfa: '2FA',
       applications: 'Applications',
       lastLogin: 'Dernière connexion',
+      ipAddress: 'IP',
+      device: 'Appareil',
+      history: 'Historique',
       createdAt: 'Créé le',
       actions: 'Actions',
     },
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 533de5d..ee16f49 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -165,6 +165,10 @@ export interface UserApplication {
   roleId: string | null
   /** Most recent login of this user to this application. */
   lastLoginAt?: string | null
+  /** IP captured at the most recent login (this app). */
+  lastIp?: string | null
+  /** User-agent captured at the most recent login (this app). */
+  lastUserAgent?: string | null
 }
 
 export interface LoginHistoryEntry {
diff --git a/frontend/src/views/ApplicationDetailView.vue b/frontend/src/views/ApplicationDetailView.vue
index f043cf5..44f8f5b 100644
--- a/frontend/src/views/ApplicationDetailView.vue
+++ b/frontend/src/views/ApplicationDetailView.vue
@@ -22,6 +22,7 @@ import CopyField from '@/components/ui/CopyField.vue';
 import UserAvatar from '@/components/ui/UserAvatar.vue';
 import DataTable from '@/components/ui/DataTable.vue';
 import UserAppHistoryModal from '@/components/users/UserAppHistoryModal.vue';
+import { parseUserAgent } from '@/composables/useUserAgent';
 import Sparkline from '@/components/ui/Sparkline.vue';
 import { getApplicationsActivity, getLogins, type AppActivityEntry } from '@/api/stats';
 import type { PlanFeature } from '@/types';
@@ -154,6 +155,8 @@ const userColumns = computed<ColumnDef<UserApplication>[]>(() => [
   { key: 'plan', label: 'Plan', responsive: 'md' },
   { key: 'status', label: 'Status', responsive: 'lg' },
   { key: 'lastLogin', label: t('users.columns.lastLogin'), field: 'lastLoginAt', sortable: true, responsive: 'lg' },
+  { key: 'ipAddress', label: t('users.columns.ipAddress'), field: 'lastIp', responsive: 'lg' },
+  { key: 'ua', label: t('users.columns.device'), responsive: 'lg' },
   { key: 'history', label: t('users.columns.history'), align: 'right' },
   { key: 'actions', label: t('users.columns.actions'), align: 'right' },
 ]);
@@ -795,6 +798,17 @@ const financialKpis = computed(() => {
             <template #cell-lastLogin="{ row }">
               <span class="text-xs text-surface-500">{{ formatLastLogin((row as UserApplication).lastLoginAt) }}</span>
             </template>
+            <template #cell-ipAddress="{ row }">
+              <span class="text-xs text-surface-400">{{ (row as UserApplication).lastIp ?? '—' }}</span>
+            </template>
+            <template #cell-ua="{ row }">
+              <span class="text-xs text-surface-400">
+                <template v-if="(row as UserApplication).lastUserAgent">
+                  {{ parseUserAgent((row as UserApplication).lastUserAgent!).browser }} / {{ parseUserAgent((row as UserApplication).lastUserAgent!).os }}
+                </template>
+                <template v-else>—</template>
+              </span>
+            </template>
             <template #cell-history="{ row }">
               <button
                 @click="openHistory(row as UserApplication)"
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index 08cc159..e996c7c 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -104,8 +104,8 @@ const userMap = computed(() => {
 const sessionColumns = computed<ColumnDef<Session>[]>(() => [
   { key: 'user', label: t('users.columns.name') },
   { key: 'apps', label: t('users.columns.applications'), responsive: 'md' },
-  { key: 'ipAddress', label: 'IP', field: 'ipAddress', responsive: 'md' },
-  { key: 'ua', label: 'Device', responsive: 'lg' },
+  { key: 'ipAddress', label: t('users.columns.ipAddress'), field: 'ipAddress', responsive: 'md' },
+  { key: 'ua', label: t('users.columns.device'), responsive: 'lg' },
   { key: 'createdAt', label: t('users.columns.createdAt'), field: 'createdAt', sortable: true, responsive: 'lg' },
   { key: 'actions', label: t('users.columns.actions'), align: 'right' },
 ]);
diff --git a/src/routes/admin/applications.ts b/src/routes/admin/applications.ts
index a0e251e..0930037 100644
--- a/src/routes/admin/applications.ts
+++ b/src/routes/admin/applications.ts
@@ -19,7 +19,7 @@ import {
   assignDefaultPlanIfNeeded,
 } from "../../services/claims.js";
 import { oauthClient, user as userTable } from "../../db/auth-schema.js";
-import { and, count, desc, eq, inArray, max } from "drizzle-orm";
+import { and, count, desc, eq, inArray } from "drizzle-orm";
 import { ERR } from "../../errors.js";
 import { auth } from "../../auth.js";
 import { randomBytes, createHash } from "node:crypto";
@@ -574,12 +574,17 @@ export async function applicationRoutes(
       .where(eq(userApplications.applicationId, req.params.id));
 
     const userIds = Array.from(new Set(rows.map((r) => r.userId)));
-    const lastLoginByUser = new Map<string, Date>();
+    const lastLoginByUser = new Map<
+      string,
+      { lastLoginAt: Date; lastIp: string | null; lastUserAgent: string | null }
+    >();
     if (userIds.length > 0) {
       const lastLogins = await db
-        .select({
+        .selectDistinctOn([loginHistory.userId], {
           userId: loginHistory.userId,
-          lastLoginAt: max(loginHistory.loggedAt),
+          lastLoginAt: loginHistory.loggedAt,
+          lastIp: loginHistory.ipAddress,
+          lastUserAgent: loginHistory.userAgent,
         })
         .from(loginHistory)
         .where(
@@ -588,16 +593,25 @@ export async function applicationRoutes(
             inArray(loginHistory.userId, userIds),
           ),
         )
-        .groupBy(loginHistory.userId);
+        .orderBy(loginHistory.userId, desc(loginHistory.loggedAt));
       for (const r of lastLogins) {
-        if (r.lastLoginAt) lastLoginByUser.set(r.userId, r.lastLoginAt);
+        lastLoginByUser.set(r.userId, {
+          lastLoginAt: r.lastLoginAt,
+          lastIp: r.lastIp,
+          lastUserAgent: r.lastUserAgent,
+        });
       }
     }
 
-    const enriched = rows.map((r) => ({
-      ...r,
-      lastLoginAt: lastLoginByUser.get(r.userId) ?? null,
-    }));
+    const enriched = rows.map((r) => {
+      const last = lastLoginByUser.get(r.userId);
+      return {
+        ...r,
+        lastLoginAt: last?.lastLoginAt ?? null,
+        lastIp: last?.lastIp ?? null,
+        lastUserAgent: last?.lastUserAgent ?? null,
+      };
+    });
 
     await reply.send({ users: enriched });
   });

From f78533febba7d9bb1b6bf44384456ec43a519617 Mon Sep 17 00:00:00 2001
From: x42en <0x42en@gmail.com>
Date: Sun, 17 May 2026 02:40:49 +0200
Subject: [PATCH 5/7] feat(auth): add database hook to record session creation
 in login history

Implement a `databaseHooks` listener on session creation to automatically
populate the login history table. This ensures that all direct session
creations (including admin logins and social provider callbacks) are
captured with their associated IP address and user agent.

The hook is designed to be non-blocking and "fire-and-forget" to ensure
that any failures in recording the history do not prevent the user from
successfully creating a session.
---
 src/auth.ts | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/auth.ts b/src/auth.ts
index 964ec0b..9613794 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -154,6 +154,41 @@ export const auth = betterAuth({
       lastLoginAt: { type: "date", required: false },
     },
   },
+  // Capture every direct session creation (admin dashboard sign-in, password
+  // login, social provider callback) as a login_history row with
+  // applicationId = null. OAuth-client logins are already recorded inside
+  // `customAccessTokenClaims` with the resolved applicationId — those rows
+  // are complementary (one per token issuance, with an app id and IP/UA
+  // from the OAuth context). Fire-and-forget: failures must never break
+  // session creation.
+  databaseHooks: {
+    session: {
+      create: {
+        after: async (session) => {
+          try {
+            const s = session as {
+              userId: string;
+              id: string;
+              ipAddress?: string | null;
+              userAgent?: string | null;
+            };
+            await recordLogin({
+              userId: s.userId,
+              applicationId: null,
+              sessionId: s.id,
+              ipAddress: s.ipAddress ?? null,
+              userAgent: s.userAgent ?? null,
+            });
+          } catch (err) {
+            console.warn(
+              "[login-history] failed to record dashboard login",
+              { err: String(err) },
+            );
+          }
+        },
+      },
+    },
+  },
   plugins: [
     // Required for asymmetric JWT signing used by oauthProvider.
     // Set an explicit issuer so both the jwt plugin and oauthProvider's

From 497ca8f16ea5e12b9409caa1cd30d526294b0d82 Mon Sep 17 00:00:00 2001
From: x42en <0x42en@gmail.com>
Date: Sun, 17 May 2026 10:24:58 +0200
Subject: [PATCH 6/7] feat(ui): enhance data table with search and server-side
 pagination

Implement advanced features for the `DataTable` component, including
built-in search functionality, server-driven pagination, and improved
responsive column handling.

- Add `searchable` and `pagination` props to `DataTable` component.
- Implement debounced search in `DashboardView` to optimize API calls.
- Update `sessions` and `users` admin routes to support filtering and
  searching via database queries.
- Refactor responsive column logic to use explicit Tailwind classes,
  ensuring compatibility with JIT compilation.
- Add internationalization support for new table controls.
- Update user and session APIs to return enriched data including
  `lastLoginAt` and application details.
---
 frontend/src/api/sessions.ts                 |  14 +-
 frontend/src/api/users.ts                    |   2 +-
 frontend/src/components/ui/DataTable.vue     | 139 ++++++++++++++++++-
 frontend/src/i18n/en.ts                      |   6 +
 frontend/src/i18n/fr.ts                      |   6 +
 frontend/src/mocks/data.ts                   |  27 +++-
 frontend/src/types/data-table.ts             |  15 +-
 frontend/src/types/index.ts                  |   2 +
 frontend/src/views/ApplicationDetailView.vue |  12 +-
 frontend/src/views/DashboardView.vue         |  91 ++++++++++--
 frontend/src/views/UserDetailView.vue        |  95 +++++++++----
 frontend/src/views/UsersView.vue             |  12 +-
 src/routes/admin/sessions.ts                 |  22 ++-
 src/routes/admin/users.ts                    |  21 ++-
 14 files changed, 400 insertions(+), 64 deletions(-)

diff --git a/frontend/src/api/sessions.ts b/frontend/src/api/sessions.ts
index 78d4675..cb6c24a 100644
--- a/frontend/src/api/sessions.ts
+++ b/frontend/src/api/sessions.ts
@@ -9,16 +9,26 @@ export interface SessionsListResponse {
   limit: number
 }
 
-export async function listSessions(params: { page?: number; limit?: number } = {}): Promise<SessionsListResponse> {
+export async function listSessions(params: { page?: number; limit?: number; search?: string } = {}): Promise<SessionsListResponse> {
   if (USE_MOCK) {
     const page = params.page ?? 1;
     const limit = params.limit ?? 20;
+    const search = params.search?.trim().toLowerCase() ?? '';
+    let pool = MOCK_SESSIONS;
+    if (search) {
+      pool = pool.filter(s =>
+        (s.user?.name ?? '').toLowerCase().includes(search)
+        || (s.user?.email ?? '').toLowerCase().includes(search)
+        || (s.ipAddress ?? '').toLowerCase().includes(search),
+      );
+    }
     const start = (page - 1) * limit;
-    return { sessions: MOCK_SESSIONS.slice(start, start + limit), total: MOCK_SESSIONS.length, page, limit };
+    return { sessions: pool.slice(start, start + limit), total: pool.length, page, limit };
   }
   const qs = new URLSearchParams();
   if (params.page) qs.set('page', String(params.page));
   if (params.limit) qs.set('limit', String(params.limit));
+  if (params.search) qs.set('search', params.search);
   return apiFetch<SessionsListResponse>(`/admin/sessions?${qs}`);
 }
 
diff --git a/frontend/src/api/users.ts b/frontend/src/api/users.ts
index f0aed63..617e692 100644
--- a/frontend/src/api/users.ts
+++ b/frontend/src/api/users.ts
@@ -60,7 +60,7 @@ export async function getUser(id: string): Promise<UserDetailResponse> {
     if (!user) throw new Error('User not found');
     const apps: UserApplicationDetail[] = MOCK_USER_APPLICATIONS
       .filter(a => a.userId === id)
-      .map(a => ({ id: a.applicationId, name: a.name ?? a.applicationId, slug: a.applicationId, icon: null, isActive: a.isActive, subscriptionPlanId: a.subscriptionPlanId, roles: a.roleId ? [{ id: a.roleId, name: a.roleId }] : [] }));
+      .map(a => ({ id: a.applicationId, name: a.name ?? a.applicationId, slug: a.applicationId, icon: null, isActive: a.isActive, subscriptionPlanId: a.subscriptionPlanId, roles: a.roleId ? [{ id: a.roleId, name: a.roleId }] : [], lastLoginAt: a.lastLoginAt ?? null }));
     return { user, applications: apps };
   }
   return apiFetch<UserDetailResponse>(`/admin/users/${id}`);
diff --git a/frontend/src/components/ui/DataTable.vue b/frontend/src/components/ui/DataTable.vue
index 2ba2ea9..8f68bbc 100644
--- a/frontend/src/components/ui/DataTable.vue
+++ b/frontend/src/components/ui/DataTable.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts" generic="Row extends Record<string, unknown>">
 import { computed, ref, watch } from 'vue';
-import { ChevronUp, ChevronDown, ChevronsUpDown, Columns3, Rows3, Rows4 } from 'lucide-vue-next';
-import type { ColumnDef, SortState } from '@/types/data-table';
+import { ChevronUp, ChevronDown, ChevronsUpDown, Columns3, Rows3, Rows4, Search, ChevronLeft, ChevronRight } from 'lucide-vue-next';
+import { useI18n } from 'vue-i18n';
+import type { ColumnDef, DataTablePagination, SortState } from '@/types/data-table';
 
 const props = withDefaults(defineProps<{
   /** Optional column-driven mode. When provided, the table auto-renders headers and rows. */
@@ -29,6 +30,18 @@ const props = withDefaults(defineProps<{
   enableColumnVisibility?: boolean;
   /** Allow users to switch between comfortable and compact row density. */
   enableDensityToggle?: boolean;
+  /** Render the built-in search input (bound through `v-model:search`). */
+  searchable?: boolean;
+  /** Current search string. Use with `v-model:search` for two-way binding. */
+  search?: string;
+  /** Placeholder shown in the search input. Defaults to the i18n `common.search` label. */
+  searchPlaceholder?: string;
+  /**
+   * Server-driven pagination metadata. Triggers the footer with prev/next
+   * controls and the rows-per-page selector. Emits `update:page` and
+   * `update:limit` when the user interacts.
+   */
+  pagination?: DataTablePagination | null;
 }>(), {
   loading: false,
   empty: false,
@@ -37,13 +50,22 @@ const props = withDefaults(defineProps<{
   toolbar: false,
   enableColumnVisibility: false,
   enableDensityToggle: false,
+  searchable: false,
+  search: '',
+  searchPlaceholder: '',
+  pagination: null,
 });
 
 const emit = defineEmits<{
   (e: 'update:sort', value: SortState | null): void;
   (e: 'row-click', row: Row): void;
+  (e: 'update:search', value: string): void;
+  (e: 'update:page', value: number): void;
+  (e: 'update:limit', value: number): void;
 }>();
 
+const { t } = useI18n();
+
 const density = ref<'comfortable' | 'compact'>('comfortable');
 function toggleDensity() {
   density.value = density.value === 'comfortable' ? 'compact' : 'comfortable';
@@ -122,8 +144,19 @@ function alignClass(col: ColumnDef<Row>): string {
 }
 
 function responsiveClass(col: ColumnDef<Row>): string {
+  // Static class map — Tailwind's JIT scanner only sees fully-formed class
+  // names in source. Concatenating `hidden ${breakpoint}:table-cell` would
+  // be silently dropped at build time, causing columns to stay hidden at
+  // every viewport. Listing the literals keeps them in the generated CSS.
   if (!col.responsive) return '';
-  return `hidden ${col.responsive}:table-cell`;
+  switch (col.responsive) {
+    case 'sm': return 'hidden sm:table-cell';
+    case 'md': return 'hidden md:table-cell';
+    case 'lg': return 'hidden lg:table-cell';
+    case 'xl': return 'hidden xl:table-cell';
+    case '2xl': return 'hidden 2xl:table-cell';
+    default: return '';
+  }
 }
 
 function defaultRowKey(row: Row, idx: number): string | number {
@@ -132,11 +165,68 @@ function defaultRowKey(row: Row, idx: number): string | number {
   if (typeof id === 'string' || typeof id === 'number') return id;
   return idx;
 }
+
+// ── Search ─────────────────────────────────────────────────────────────
+// Mirrors the `search` prop in a local ref so the input stays controllable
+// even when the parent uses simple one-way binding (no v-model).
+const searchValue = ref(props.search ?? '');
+watch(() => props.search, (v) => { searchValue.value = v ?? ''; });
+function onSearchInput(event: Event) {
+  const v = (event.target as HTMLInputElement).value;
+  searchValue.value = v;
+  emit('update:search', v);
+}
+
+// ── Pagination ─────────────────────────────────────────────────────────
+const pageCount = computed(() => {
+  if (!props.pagination) return 1;
+  return Math.max(1, Math.ceil(props.pagination.total / props.pagination.limit));
+});
+const pageStart = computed(() => {
+  if (!props.pagination || props.pagination.total === 0) return 0;
+  return (props.pagination.page - 1) * props.pagination.limit + 1;
+});
+const pageEnd = computed(() => {
+  if (!props.pagination) return 0;
+  return Math.min(props.pagination.total, props.pagination.page * props.pagination.limit);
+});
+function setPage(p: number) {
+  if (!props.pagination) return;
+  const next = Math.min(Math.max(1, p), pageCount.value);
+  if (next !== props.pagination.page) emit('update:page', next);
+}
+function onLimitChange(event: Event) {
+  const next = parseInt((event.target as HTMLSelectElement).value, 10);
+  if (!Number.isFinite(next) || next < 1) return;
+  emit('update:limit', next);
+}
+const defaultPageSizes = [10, 20, 50, 100];
+const pageSizes = computed(() => props.pagination?.pageSizes ?? defaultPageSizes);
+
+const showToolbar = computed(() =>
+  props.toolbar
+  || props.enableColumnVisibility
+  || props.enableDensityToggle
+  || props.searchable,
+);
 </script>
 
 <template>
   <div class="space-y-3">
-    <div v-if="toolbar || enableColumnVisibility || enableDensityToggle" class="flex items-center gap-2 flex-wrap">
+    <div v-if="showToolbar" class="flex items-center gap-2 flex-wrap">
+      <div v-if="searchable" class="relative w-full sm:w-64 shrink-0">
+        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-500" />
+        <input
+          type="search"
+          :value="searchValue"
+          @input="onSearchInput"
+          :placeholder="searchPlaceholder || t('common.search')"
+          class="w-full pl-9 pr-3 py-2 text-sm bg-surface-800 border border-surface-600 rounded-lg text-surface-100 placeholder:text-surface-500 focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500"
+        />
+      </div>
+      <div class="flex items-center gap-2 flex-wrap">
+        <slot name="filters" />
+      </div>
       <div class="flex-1 min-w-0">
         <slot name="toolbar" />
       </div>
@@ -265,5 +355,46 @@ function defaultRowKey(row: Row, idx: number): string | number {
         </table>
       </div>
     </div>
+
+    <div
+      v-if="pagination"
+      class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 text-sm text-surface-400"
+    >
+      <div class="flex items-center gap-2">
+        <label class="text-xs text-surface-500">{{ t('dataTable.rowsPerPage') }}</label>
+        <select
+          :value="pagination.limit"
+          @change="onLimitChange"
+          class="text-xs bg-surface-800 border border-surface-600 rounded-lg px-2 py-1 text-surface-200 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
+        >
+          <option v-for="sz in pageSizes" :key="sz" :value="sz">{{ sz }}</option>
+        </select>
+      </div>
+      <div class="flex items-center gap-3">
+        <span class="text-xs text-surface-500 tabular-nums">
+          {{ t('dataTable.pageOf', { from: pageStart, to: pageEnd, total: pagination.total }) }}
+        </span>
+        <div class="flex items-center gap-1">
+          <button
+            type="button"
+            :disabled="pagination.page <= 1"
+            @click="setPage(pagination.page - 1)"
+            class="p-1.5 rounded-lg text-surface-500 hover:text-surface-200 hover:bg-surface-800/60 transition-colors disabled:opacity-40 disabled:hover:bg-transparent disabled:cursor-not-allowed"
+            :title="t('dataTable.previous')"
+          >
+            <ChevronLeft class="w-4 h-4" />
+          </button>
+          <button
+            type="button"
+            :disabled="pagination.page >= pageCount"
+            @click="setPage(pagination.page + 1)"
+            class="p-1.5 rounded-lg text-surface-500 hover:text-surface-200 hover:bg-surface-800/60 transition-colors disabled:opacity-40 disabled:hover:bg-transparent disabled:cursor-not-allowed"
+            :title="t('dataTable.next')"
+          >
+            <ChevronRight class="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/frontend/src/i18n/en.ts b/frontend/src/i18n/en.ts
index 6aa9fbd..c31d220 100644
--- a/frontend/src/i18n/en.ts
+++ b/frontend/src/i18n/en.ts
@@ -72,6 +72,7 @@ export default {
     newRegistrations: 'New Registrations',
     sessionActivity: 'Session Activity',
     activeSessionsList: 'Active Sessions',
+    allApplications: 'All applications',
     platformAlerts: 'Platform Alerts',
     quickActions: 'Quick Actions',
     createUser: 'Create User',
@@ -156,6 +157,11 @@ export default {
     clearSort: 'Clear sort',
     columns: 'Columns',
     density: 'Density',
+    search: 'Search',
+    previous: 'Previous page',
+    next: 'Next page',
+    pageOf: '{from}–{to} of {total}',
+    rowsPerPage: 'Rows per page',
   },
   organizations: {
     title: 'Organizations',
diff --git a/frontend/src/i18n/fr.ts b/frontend/src/i18n/fr.ts
index 9253ef4..a972c34 100644
--- a/frontend/src/i18n/fr.ts
+++ b/frontend/src/i18n/fr.ts
@@ -72,6 +72,7 @@ export default {
     newRegistrations: 'Nouvelles inscriptions',
     sessionActivity: 'Activité des sessions',
     activeSessionsList: 'Sessions actives',
+    allApplications: 'Toutes les applications',
     platformAlerts: 'Alertes plateforme',
     quickActions: 'Actions rapides',
     createUser: 'Créer un utilisateur',
@@ -156,6 +157,11 @@ export default {
     clearSort: 'Réinitialiser le tri',
     columns: 'Colonnes',
     density: 'Densité',
+    search: 'Rechercher',
+    previous: 'Page précédente',
+    next: 'Page suivante',
+    pageOf: '{from}–{to} sur {total}',
+    rowsPerPage: 'Lignes par page',
   },
   organizations: {
     title: 'Organisations',
diff --git a/frontend/src/mocks/data.ts b/frontend/src/mocks/data.ts
index 82a9e37..6f1096e 100644
--- a/frontend/src/mocks/data.ts
+++ b/frontend/src/mocks/data.ts
@@ -23,6 +23,11 @@ export const MOCK_USERS: User[] = [
     company: 'CIRCLE',
     position: 'Platform Engineer',
     address: '42 rue de la Paix, 75001 Paris',
+    lastLoginAt: '2024-11-15T09:23:11.000Z',
+    applications: [
+      { id: '550e8400-e29b-41d4-a716-446655440000', name: 'Circle Dashboard', slug: 'circle-dashboard', icon: null },
+      { id: '6ba7b811-9dad-11d1-80b4-00c04fd430c8', name: 'Internal API', slug: 'internal-api', icon: null },
+    ],
   },
   {
     id: 'usr_5nRmW9tGxKqPsUvCeL7zBi',
@@ -42,6 +47,10 @@ export const MOCK_USERS: User[] = [
     company: 'Acme Corp',
     position: 'CTO',
     address: null,
+    lastLoginAt: '2024-11-14T08:21:00.000Z',
+    applications: [
+      { id: '6ba7b810-9dad-11d1-80b4-00c04fd430c8', name: 'Acme App', slug: 'acme-app', icon: 'https://acme.com/favicon.ico' },
+    ],
   },
   {
     id: 'usr_8jHkD4aNcOeQyMfTgX2rVo',
@@ -61,6 +70,8 @@ export const MOCK_USERS: User[] = [
     company: null,
     position: null,
     address: null,
+    lastLoginAt: '2024-10-22T12:08:00.000Z',
+    applications: [],
   },
   {
     id: 'usr_1cEwZ6sPiLnXbQdRkA9mFu',
@@ -80,6 +91,10 @@ export const MOCK_USERS: User[] = [
     company: 'Startup XYZ',
     position: 'Developer',
     address: null,
+    lastLoginAt: null,
+    applications: [
+      { id: '6ba7b810-9dad-11d1-80b4-00c04fd430c8', name: 'Acme App', slug: 'acme-app', icon: 'https://acme.com/favicon.ico' },
+    ],
   },
 ];
 
@@ -95,6 +110,10 @@ export const MOCK_SESSIONS: Session[] = [
     userId: 'usr_2wQx8mNpKvLrTbYcJdF3hA',
     impersonatedBy: null,
     activeOrganizationId: null,
+    user: { id: 'usr_2wQx8mNpKvLrTbYcJdF3hA', name: 'Alexandre Dubois', email: 'alexandre.dubois@example.com', image: null },
+    applications: [
+      { id: '550e8400-e29b-41d4-a716-446655440000', name: 'Circle Dashboard', slug: 'circle-dashboard', icon: null },
+    ],
   },
   {
     id: 'sess_6uZaS1fPkOeVdNbQlIrCg4',
@@ -107,6 +126,10 @@ export const MOCK_SESSIONS: Session[] = [
     userId: 'usr_5nRmW9tGxKqPsUvCeL7zBi',
     impersonatedBy: null,
     activeOrganizationId: 'org_7vBmC4dKpLqRtNsWoXeA',
+    user: { id: 'usr_5nRmW9tGxKqPsUvCeL7zBi', name: 'Sofia Marchetti', email: 'sofia.marchetti@example.com', image: 'https://api.dicebear.com/9.x/initials/svg?seed=SM' },
+    applications: [
+      { id: '6ba7b810-9dad-11d1-80b4-00c04fd430c8', name: 'Acme App', slug: 'acme-app', icon: 'https://acme.com/favicon.ico' },
+    ],
   },
 ];
 
@@ -284,8 +307,8 @@ export const MOCK_ORGANIZATIONS: Organization[] = [
 ];
 
 export const MOCK_USER_APPLICATIONS: UserApplication[] = [
-  { userId: 'usr_5nRmW9tGxKqPsUvCeL7zBi', applicationId: '6ba7b810-9dad-11d1-80b4-00c04fd430c8', isActive: true, subscriptionPlanId: 'plan-0001-0000-0000-000000000002', createdAt: '2024-03-25T10:00:00.000Z', name: 'Sofia Marchetti', email: 'sofia.marchetti@example.com', roleId: 'a1b2c3d4-0001-0000-0000-000000000002' },
-  { userId: 'usr_1cEwZ6sPiLnXbQdRkA9mFu', applicationId: '6ba7b810-9dad-11d1-80b4-00c04fd430c8', isActive: true, subscriptionPlanId: 'plan-0001-0000-0000-000000000001', createdAt: '2024-09-05T08:00:00.000Z', name: 'Margot Lefèvre', email: 'margot.lefevre@example.com', roleId: 'a1b2c3d4-0001-0000-0000-000000000001' },
+  { userId: 'usr_5nRmW9tGxKqPsUvCeL7zBi', applicationId: '6ba7b810-9dad-11d1-80b4-00c04fd430c8', isActive: true, subscriptionPlanId: 'plan-0001-0000-0000-000000000002', createdAt: '2024-03-25T10:00:00.000Z', name: 'Sofia Marchetti', email: 'sofia.marchetti@example.com', roleId: 'a1b2c3d4-0001-0000-0000-000000000002', lastLoginAt: '2024-11-14T08:21:00.000Z', lastIp: '91.198.174.192', lastUserAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) Firefox/132.0' },
+  { userId: 'usr_1cEwZ6sPiLnXbQdRkA9mFu', applicationId: '6ba7b810-9dad-11d1-80b4-00c04fd430c8', isActive: true, subscriptionPlanId: 'plan-0001-0000-0000-000000000001', createdAt: '2024-09-05T08:00:00.000Z', name: 'Margot Lefèvre', email: 'margot.lefevre@example.com', roleId: 'a1b2c3d4-0001-0000-0000-000000000001', lastLoginAt: null, lastIp: null, lastUserAgent: null },
 ];
 
 export const MOCK_CONSUMPTION: ConsumptionAggregate[] = [
diff --git a/frontend/src/types/data-table.ts b/frontend/src/types/data-table.ts
index e3b1db2..1e18f29 100644
--- a/frontend/src/types/data-table.ts
+++ b/frontend/src/types/data-table.ts
@@ -19,7 +19,7 @@ export interface ColumnDef<Row = Record<string, unknown>> {
   key: string;
   label: string;
   field?: string;
-  responsive?: 'sm' | 'md' | 'lg' | 'xl';
+  responsive?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   align?: 'left' | 'right' | 'center';
   sortable?: boolean;
   width?: string;
@@ -38,3 +38,16 @@ export interface SortState {
   key: string;
   direction: SortDirection;
 }
+
+/**
+ * Server-driven pagination state shared between the parent view and the
+ * DataTable toolbar. `total` is the unfiltered count of rows; `page` is
+ * 1-indexed; `limit` is the page size.
+ */
+export interface DataTablePagination {
+  page: number;
+  limit: number;
+  total: number;
+  /** Optional explicit choices shown in the rows-per-page selector. */
+  pageSizes?: number[];
+}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index ee16f49..ae7e9c2 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -194,6 +194,8 @@ export interface UserApplicationDetail {
   isActive: boolean
   subscriptionPlanId: string | null
   roles: { id: string; name: string }[]
+  /** Most recent login of the user to this application, or null when none. */
+  lastLoginAt?: string | null
 }
 
 export interface UserSubscription {
diff --git a/frontend/src/views/ApplicationDetailView.vue b/frontend/src/views/ApplicationDetailView.vue
index 44f8f5b..d392144 100644
--- a/frontend/src/views/ApplicationDetailView.vue
+++ b/frontend/src/views/ApplicationDetailView.vue
@@ -151,19 +151,21 @@ async function loadAppActivity() {
 
 const userColumns = computed<ColumnDef<UserApplication>[]>(() => [
   { key: 'user', label: t('users.columns.name') },
-  { key: 'role', label: t('users.columns.role'), responsive: 'md' },
-  { key: 'plan', label: 'Plan', responsive: 'md' },
-  { key: 'status', label: 'Status', responsive: 'lg' },
-  { key: 'lastLogin', label: t('users.columns.lastLogin'), field: 'lastLoginAt', sortable: true, responsive: 'lg' },
+  { key: 'role', label: t('users.columns.role'), responsive: 'sm' },
+  { key: 'plan', label: 'Plan', responsive: 'sm' },
+  { key: 'status', label: 'Status', responsive: 'md' },
+  { key: 'lastLogin', label: t('users.columns.lastLogin'), field: 'lastLoginAt', sortable: true, responsive: 'md' },
   { key: 'ipAddress', label: t('users.columns.ipAddress'), field: 'lastIp', responsive: 'lg' },
   { key: 'ua', label: t('users.columns.device'), responsive: 'lg' },
   { key: 'history', label: t('users.columns.history'), align: 'right' },
   { key: 'actions', label: t('users.columns.actions'), align: 'right' },
 ]);
 
+// Format with date + time (per spec) so admins can see at a glance the
+// exact moment of the last successful login on this application.
 function formatLastLogin(iso: string | null | undefined): string {
   if (!iso) return t('users.never');
-  return new Date(iso).toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' });
+  return new Date(iso).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
 }
 
 async function handleCreateRole() {
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index e996c7c..92847f2 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -9,15 +9,17 @@ import { listSessions, revokeSession } from '@/api/sessions';
 import { listApplications } from '@/api/applications';
 import { listOrganizations } from '@/api/organizations';
 import { getActiveUsers, getLogins, type LoginsSeriesPoint } from '@/api/stats';
+import { useDebounce } from '@/composables/useDebounce';
 import AppLayout from '@/components/layout/AppLayout.vue';
 import StatCard from '@/components/ui/StatCard.vue';
 import UserAvatar from '@/components/ui/UserAvatar.vue';
 import BaseButton from '@/components/ui/BaseButton.vue';
+import BaseSelect from '@/components/ui/BaseSelect.vue';
 import DataTable from '@/components/ui/DataTable.vue';
 import AppIconStack from '@/components/ui/AppIconStack.vue';
 import { parseUserAgent } from '@/composables/useUserAgent';
 import type { Session, User, Application, Organization } from '@/types';
-import type { ColumnDef } from '@/types/data-table';
+import type { ColumnDef, DataTablePagination } from '@/types/data-table';
 import {
   Users, MonitorSmartphone, AppWindow, Building2, Activity,
   AlertTriangle, Info, UserPlus, Plus, Settings, Clock,
@@ -37,9 +39,19 @@ const sessions = ref<Session[]>([]);
 const applications = ref<Application[]>([]);
 const organizations = ref<Organization[]>([]);
 const loading = ref(true);
+const sessionsLoading = ref(true);
 const timeRange = ref<'7d' | '30d'>('7d');
 const lastRefreshed = ref(new Date());
 
+// Server-driven state for the sessions table. Search is debounced so the
+// user can type a query without firing one request per keystroke.
+const sessionPage = ref(1);
+const sessionLimit = ref(20);
+const sessionTotal = ref(0);
+const sessionSearch = ref('');
+const sessionAppFilter = ref('');
+const debouncedSessionSearch = useDebounce(sessionSearch, 300);
+
 const onlineCount = ref<number | null>(null);
 const loginsSeries = ref<LoginsSeriesPoint[]>([]);
 const loginsTotal = ref(0);
@@ -71,15 +83,14 @@ onMounted(async () => {
     services.fetch(),
     fetchOnline(),
     fetchLogins(),
+    loadSessions(),
     (async () => {
-      const [u, s, a, o] = await Promise.all([
+      const [u, a, o] = await Promise.all([
         listUsers({ limit: 100 }),
-        listSessions({ limit: 100 }),
         listApplications(),
         listOrganizations(),
       ]);
       users.value = u.users;
-      sessions.value = s.sessions;
       applications.value = a.applications;
       organizations.value = o.organizations;
       lastRefreshed.value = new Date();
@@ -89,6 +100,32 @@ onMounted(async () => {
   onlinePollHandle = setInterval(fetchOnline, 30_000);
 });
 
+async function loadSessions() {
+  sessionsLoading.value = true;
+  try {
+    const res = await listSessions({
+      page: sessionPage.value,
+      limit: sessionLimit.value,
+      search: debouncedSessionSearch.value || undefined,
+    });
+    sessions.value = res.sessions;
+    sessionTotal.value = res.total;
+    lastRefreshed.value = new Date();
+  } finally {
+    sessionsLoading.value = false;
+  }
+}
+
+watch(debouncedSessionSearch, () => {
+  sessionPage.value = 1;
+  void loadSessions();
+});
+watch(sessionLimit, () => {
+  sessionPage.value = 1;
+  void loadSessions();
+});
+watch(sessionPage, () => { void loadSessions(); });
+
 onUnmounted(() => {
   if (onlinePollHandle) clearInterval(onlinePollHandle);
 });
@@ -103,13 +140,31 @@ const userMap = computed(() => {
 
 const sessionColumns = computed<ColumnDef<Session>[]>(() => [
   { key: 'user', label: t('users.columns.name') },
-  { key: 'apps', label: t('users.columns.applications'), responsive: 'md' },
-  { key: 'ipAddress', label: t('users.columns.ipAddress'), field: 'ipAddress', responsive: 'md' },
-  { key: 'ua', label: t('users.columns.device'), responsive: 'lg' },
-  { key: 'createdAt', label: t('users.columns.createdAt'), field: 'createdAt', sortable: true, responsive: 'lg' },
+  { key: 'apps', label: t('users.columns.applications') },
+  { key: 'ipAddress', label: t('users.columns.ipAddress'), field: 'ipAddress' },
+  { key: 'ua', label: t('users.columns.device') },
+  { key: 'createdAt', label: t('users.columns.createdAt'), field: 'createdAt', sortable: true },
   { key: 'actions', label: t('users.columns.actions'), align: 'right' },
 ]);
 
+// Client-side filter on application slug, applied to the page returned by
+// the server. Acceptable because the page size is bounded by the limit.
+const filteredSessions = computed(() => {
+  if (!sessionAppFilter.value) return sessions.value;
+  return sessions.value.filter(s => (s.applications ?? []).some(a => a.id === sessionAppFilter.value));
+});
+
+const appFilterOptions = computed(() => [
+  { value: '', label: t('dashboard.allApplications') },
+  ...applications.value.map(a => ({ value: a.id, label: a.name })),
+]);
+
+const sessionPagination = computed<DataTablePagination>(() => ({
+  page: sessionPage.value,
+  limit: sessionLimit.value,
+  total: sessionTotal.value,
+}));
+
 function generateDateLabels(days: number): string[] {
   return Array.from({ length: days }, (_, i) => {
     const d = new Date();
@@ -181,6 +236,7 @@ const hasNoMfa = computed(() => !users.value.some(u => u.twoFactorEnabled || u.i
 
 async function handleRevoke(session: Session) {
   await revokeSession(session.id);
+  await loadSessions();
 }
 
 function formatDate(iso: string): string {
@@ -294,16 +350,27 @@ void d;
       <div class="rounded-2xl bg-surface-900/60 border border-surface-700/40 overflow-hidden">
         <div class="px-5 py-4 border-b border-surface-700/40 flex items-center justify-between">
           <p class="text-sm font-semibold text-surface-200">{{ t('dashboard.activeSessionsList') }}</p>
-          <span class="text-xs text-surface-500">{{ sessions.length }} {{ t('common.total').toLowerCase() }}</span>
+          <span class="text-xs text-surface-500">{{ sessionTotal }} {{ t('common.total').toLowerCase() }}</span>
         </div>
         <div class="p-3">
           <DataTable
             :columns="sessionColumns"
-            :items="sessions"
-            :loading="loading"
-            :empty="!loading && sessions.length === 0"
+            :items="filteredSessions"
+            :loading="sessionsLoading"
+            :empty="!sessionsLoading && filteredSessions.length === 0"
             :row-key="(s: Session) => s.id"
+            searchable
+            :search="sessionSearch"
+            :pagination="sessionPagination"
+            enable-column-visibility
+            enable-density-toggle
+            @update:search="sessionSearch = $event"
+            @update:page="sessionPage = $event"
+            @update:limit="sessionLimit = $event"
           >
+            <template #filters>
+              <BaseSelect v-model="sessionAppFilter" :options="appFilterOptions" class="w-48" />
+            </template>
             <template #empty>
               <div class="px-5 py-10 text-center text-sm text-surface-500">No active sessions</div>
             </template>
diff --git a/frontend/src/views/UserDetailView.vue b/frontend/src/views/UserDetailView.vue
index 2a26bc1..a80b70b 100644
--- a/frontend/src/views/UserDetailView.vue
+++ b/frontend/src/views/UserDetailView.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { getUser } from '@/api/users';
 import { getUserConsumption } from '@/api/consumption';
 import type { User, UserApplicationDetail, ConsumptionAggregate } from '@/types';
+import type { ColumnDef } from '@/types/data-table';
 import AppLayout from '@/components/layout/AppLayout.vue';
 import UserAvatar from '@/components/ui/UserAvatar.vue';
 import BaseBadge from '@/components/ui/BaseBadge.vue';
 import BaseButton from '@/components/ui/BaseButton.vue';
+import DataTable from '@/components/ui/DataTable.vue';
+import EmptyState from '@/components/ui/EmptyState.vue';
 import { ArrowLeft, CheckCircle, XCircle, Shield, ShieldAlert } from 'lucide-vue-next';
 
 const { t } = useI18n();
@@ -45,11 +48,30 @@ function formatDate(iso: string) {
   return new Date(iso).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
 }
 
+function formatLastLogin(iso: string | null | undefined): string {
+  if (!iso) return t('users.never');
+  return new Date(iso).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+}
+
+function formatConsumption(aggs: ConsumptionAggregate[] | undefined): string {
+  if (!aggs || aggs.length === 0) return '—';
+  return aggs.map(a => `${a.key}: ${Number(a.total).toLocaleString()}`).join(' · ');
+}
+
 function roleBadgeVariant(role: string | null) {
   if (role === 'superadmin') return 'error' as const;
   if (role === 'admin') return 'warning' as const;
   return 'neutral' as const;
 }
+
+const appColumns = computed<ColumnDef<UserApplicationDetail>[]>(() => [
+  { key: 'app', label: t('users.columns.applications') },
+  { key: 'roles', label: t('users.columns.role'), responsive: 'sm' },
+  { key: 'plan', label: 'Plan', responsive: 'md' },
+  { key: 'status', label: 'Status', responsive: 'md' },
+  { key: 'lastLogin', label: t('users.columns.lastLogin'), field: 'lastLoginAt', sortable: true, responsive: 'md' },
+  { key: 'consumption', label: t('appDetail.consumption'), responsive: 'lg' },
+]);
 </script>
 
 <template>
@@ -117,37 +139,56 @@ function roleBadgeVariant(role: string | null) {
           <div class="px-5 py-4 border-b border-surface-700/40">
             <h3 class="text-sm font-semibold text-surface-200">{{ t('users.applications') }}</h3>
           </div>
-          <div v-if="userApps.length === 0" class="px-5 py-8 text-center text-sm text-surface-500">
-            No application access
-          </div>
-          <div v-else class="divide-y divide-surface-800/40">
-            <div v-for="ua in userApps" :key="ua.id" class="px-5 py-4">
-              <div class="flex items-start justify-between">
+          <div class="p-3">
+            <DataTable
+              :columns="appColumns"
+              :items="userApps"
+              :empty="userApps.length === 0"
+              :row-key="(ua: UserApplicationDetail) => ua.id"
+              enable-column-visibility
+              enable-density-toggle
+            >
+              <template #empty>
+                <EmptyState :title="t('users.applications')" :message="t('applications.noApps')" />
+              </template>
+              <template #cell-app="{ row }">
                 <div class="flex items-center gap-3">
-                  <div class="w-9 h-9 rounded-lg overflow-hidden shrink-0 bg-surface-800 flex items-center justify-center">
-                    <img v-if="ua.icon" :src="ua.icon" class="w-full h-full object-cover" />
-                    <span v-else class="text-xs font-bold text-surface-400">{{ ua.name[0].toUpperCase() }}</span>
+                  <div class="w-8 h-8 rounded-lg overflow-hidden shrink-0 bg-surface-800 flex items-center justify-center">
+                    <img v-if="(row as UserApplicationDetail).icon" :src="(row as UserApplicationDetail).icon!" class="w-full h-full object-cover" />
+                    <span v-else class="text-xs font-bold text-surface-400">{{ (row as UserApplicationDetail).name[0].toUpperCase() }}</span>
                   </div>
-                  <div>
-                    <p class="text-sm font-medium text-surface-200">{{ ua.name }}</p>
-                    <div class="flex items-center gap-2 mt-1 flex-wrap">
-                      <BaseBadge :variant="ua.isActive ? 'success' : 'neutral'" size="sm" dot>{{ ua.isActive ? t('common.active') : t('common.inactive') }}</BaseBadge>
-                      <span v-for="r in ua.roles" :key="r.id" class="text-xs text-surface-500">{{ r.name }}</span>
-                    </div>
+                  <div class="min-w-0">
+                    <p class="text-sm font-medium text-surface-200 truncate">{{ (row as UserApplicationDetail).name }}</p>
+                    <p class="text-xs text-surface-500 truncate">{{ (row as UserApplicationDetail).slug }}</p>
                   </div>
                 </div>
-              </div>
-              <div v-if="consumption[ua.id]?.length" class="mt-3 flex flex-wrap gap-3">
-                <div
-                  v-for="agg in consumption[ua.id]"
-                  :key="agg.key"
-                  class="px-3 py-1.5 rounded-lg bg-surface-800/60 border border-surface-700/30"
-                >
-                  <p class="text-xs text-surface-500 font-mono">{{ agg.key }}</p>
-                  <p class="text-sm font-semibold text-surface-200 tabular-nums">{{ Number(agg.total).toLocaleString() }}</p>
+              </template>
+              <template #cell-roles="{ row }">
+                <div class="flex flex-wrap gap-1">
+                  <BaseBadge
+                    v-for="r in (row as UserApplicationDetail).roles"
+                    :key="r.id"
+                    variant="neutral"
+                    size="sm"
+                  >{{ r.name }}</BaseBadge>
+                  <span v-if="(row as UserApplicationDetail).roles.length === 0" class="text-xs text-surface-500">—</span>
                 </div>
-              </div>
-            </div>
+              </template>
+              <template #cell-plan="{ row }">
+                <span class="text-xs text-surface-400">{{ (row as UserApplicationDetail).subscriptionPlanId ?? '—' }}</span>
+              </template>
+              <template #cell-status="{ row }">
+                <BaseBadge :variant="(row as UserApplicationDetail).isActive ? 'success' : 'neutral'" size="sm" dot>
+                  {{ (row as UserApplicationDetail).isActive ? t('common.active') : t('common.inactive') }}
+                </BaseBadge>
+              </template>
+              <template #cell-lastLogin="{ row }">
+                <span class="text-xs text-surface-400">{{ formatLastLogin((row as UserApplicationDetail).lastLoginAt) }}</span>
+              </template>
+              <template #cell-consumption="{ row }">
+                <span class="text-xs text-surface-500 font-mono">{{ formatConsumption(consumption[(row as UserApplicationDetail).id]) }}</span>
+              </template>
+            </DataTable>
           </div>
         </div>
       </template>
diff --git a/frontend/src/views/UsersView.vue b/frontend/src/views/UsersView.vue
index b1a4685..d10c004 100644
--- a/frontend/src/views/UsersView.vue
+++ b/frontend/src/views/UsersView.vue
@@ -207,12 +207,12 @@ function formatLastLogin(iso: string | null | undefined): string {
 
 const userColumns = computed<ColumnDef<User>[]>(() => [
   { key: 'name', label: t('users.columns.name'), field: 'name', sortable: true },
-  { key: 'role', label: t('users.columns.role'), field: 'role', sortable: true, responsive: 'md' },
-  { key: 'applications', label: t('users.columns.applications'), responsive: 'lg', accessor: (r) => r.applications?.length ?? 0 },
-  { key: 'lastLogin', label: t('users.columns.lastLogin'), field: 'lastLoginAt', sortable: true, responsive: 'lg' },
-  { key: 'verified', label: t('users.columns.verified'), field: 'emailVerified', responsive: 'xl' },
-  { key: 'mfa', label: t('users.columns.mfa'), field: 'twoFactorEnabled', responsive: 'xl' },
-  { key: 'createdAt', label: t('users.columns.createdAt'), field: 'createdAt', sortable: true, responsive: 'xl' },
+  { key: 'role', label: t('users.columns.role'), field: 'role', sortable: true, responsive: 'sm' },
+  { key: 'applications', label: t('users.columns.applications'), responsive: 'md', accessor: (r) => r.applications?.length ?? 0 },
+  { key: 'lastLogin', label: t('users.columns.lastLogin'), field: 'lastLoginAt', sortable: true, responsive: 'md' },
+  { key: 'verified', label: t('users.columns.verified'), field: 'emailVerified', responsive: 'lg' },
+  { key: 'mfa', label: t('users.columns.mfa'), field: 'twoFactorEnabled', responsive: 'lg' },
+  { key: 'createdAt', label: t('users.columns.createdAt'), field: 'createdAt', sortable: true, responsive: 'lg' },
   { key: 'actions', label: t('users.columns.actions'), align: 'right' },
 ]);
 
diff --git a/src/routes/admin/sessions.ts b/src/routes/admin/sessions.ts
index bb30b7c..31e5cee 100644
--- a/src/routes/admin/sessions.ts
+++ b/src/routes/admin/sessions.ts
@@ -3,7 +3,7 @@ import { fromNodeHeaders } from "better-auth/node";
 import { db } from "../../db/index.js";
 import { session as sessionTable, user as userTable } from "../../db/auth-schema.js";
 import { applications, loginHistory } from "../../db/schema.js";
-import { and, count, desc, eq, gt, gte, inArray } from "drizzle-orm";
+import { and, count, desc, eq, gt, gte, ilike, inArray, or, type SQL } from "drizzle-orm";
 import { ERR } from "../../errors.js";
 import { auth } from "../../auth.js";
 
@@ -42,12 +42,28 @@ export async function sessionsRoutes(fastify: FastifyInstance): Promise<void> {
     const page = Math.max(1, parseInt(query.page ?? "1", 10));
     const limit = Math.min(100, Math.max(1, parseInt(query.limit ?? "20", 10)));
     const offset = (page - 1) * limit;
+    const search = query.search?.trim();
     const now = new Date();
 
+    // Search matches user name, email or session IP. Built as a single OR
+    // expression so we can reuse it for both COUNT and SELECT below.
+    const conditions: SQL[] = [gt(sessionTable.expiresAt, now)];
+    if (search) {
+      const pattern = `%${search}%`;
+      const orExpr = or(
+        ilike(userTable.name, pattern),
+        ilike(userTable.email, pattern),
+        ilike(sessionTable.ipAddress, pattern),
+      );
+      if (orExpr) conditions.push(orExpr);
+    }
+    const whereExpr = conditions.length === 1 ? conditions[0] : and(...conditions);
+
     const [{ total }] = await db
       .select({ total: count() })
       .from(sessionTable)
-      .where(gt(sessionTable.expiresAt, now));
+      .leftJoin(userTable, eq(sessionTable.userId, userTable.id))
+      .where(whereExpr);
 
     const list = await db
       .select({
@@ -63,7 +79,7 @@ export async function sessionsRoutes(fastify: FastifyInstance): Promise<void> {
       })
       .from(sessionTable)
       .leftJoin(userTable, eq(sessionTable.userId, userTable.id))
-      .where(gt(sessionTable.expiresAt, now))
+      .where(whereExpr)
       .orderBy(desc(sessionTable.createdAt))
       .limit(limit)
       .offset(offset);
diff --git a/src/routes/admin/users.ts b/src/routes/admin/users.ts
index a88f21c..29f4a35 100644
--- a/src/routes/admin/users.ts
+++ b/src/routes/admin/users.ts
@@ -13,7 +13,7 @@ import {
   loginHistory,
 } from "../../db/schema.js";
 import { user as userTable } from "../../db/auth-schema.js";
-import { and, count, eq, inArray, max } from "drizzle-orm";
+import { and, count, desc, eq, inArray, max } from "drizzle-orm";
 import { ERR } from "../../errors.js";
 import { auth } from "../../auth.js";
 
@@ -237,9 +237,28 @@ export async function usersRoutes(fastify: FastifyInstance): Promise<void> {
       rolesByApp.set(r.applicationId, existing);
     }
 
+    // Most recent login per application for this user. One round trip,
+    // one row per applicationId — Postgres-only selectDistinctOn is fine
+    // because the project pins on postgres.js.
+    const lastLoginRows = await db
+      .selectDistinctOn([loginHistory.applicationId], {
+        applicationId: loginHistory.applicationId,
+        lastLoginAt: loginHistory.loggedAt,
+      })
+      .from(loginHistory)
+      .where(eq(loginHistory.userId, req.params.id))
+      .orderBy(loginHistory.applicationId, desc(loginHistory.loggedAt));
+    const lastLoginByApp = new Map<string, Date>();
+    for (const r of lastLoginRows) {
+      if (r.applicationId && r.lastLoginAt) {
+        lastLoginByApp.set(r.applicationId, r.lastLoginAt);
+      }
+    }
+
     const appsWithRoles = appAccess.map((app) => ({
       ...app,
       roles: rolesByApp.get(app.id) ?? [],
+      lastLoginAt: lastLoginByApp.get(app.id) ?? null,
     }));
 
     await reply.send({ user, applications: appsWithRoles });

From 598834280952fc7680fa3f35648001e6a849cc9f Mon Sep 17 00:00:00 2001
From: x42en <0x42en@gmail.com>
Date: Sun, 17 May 2026 10:40:25 +0200
Subject: [PATCH 7/7] refactor(ui): improve AppIconStack popover and DataTable
 usability

Refactor the `AppIconStack` component to use a Teleport-based popover
with manual positioning and global event listeners to prevent overflow
and clipping issues. Enhance `DataTable` by adding a `clickableRows`
prop for better user interaction.

- Implement `Teleport` and `fixed` positioning for `AppIconStack`
  popovers.
- Add `clickableRows` prop to `DataTable` to toggle `cursor-pointer`.
- Update user administration to display human-readable subscription
  plan names instead of UUIDs.
- Add left-join to `subscriptionPlans` in the user routes API to
  enrich application data.
- Update `UserDetailView` and `UsersView` to utilize new plan name
  fields and row click navigation.
---
 frontend/src/api/users.ts                   |  2 +-
 frontend/src/components/ui/AppIconStack.vue | 86 +++++++++++++++++----
 frontend/src/components/ui/DataTable.vue    |  8 +-
 frontend/src/mocks/data.ts                  |  4 +-
 frontend/src/types/index.ts                 |  2 +
 frontend/src/views/UserDetailView.vue       |  2 +-
 frontend/src/views/UsersView.vue            |  2 +
 src/routes/admin/users.ts                   | 10 ++-
 8 files changed, 93 insertions(+), 23 deletions(-)

diff --git a/frontend/src/api/users.ts b/frontend/src/api/users.ts
index 617e692..44c32fa 100644
--- a/frontend/src/api/users.ts
+++ b/frontend/src/api/users.ts
@@ -60,7 +60,7 @@ export async function getUser(id: string): Promise<UserDetailResponse> {
     if (!user) throw new Error('User not found');
     const apps: UserApplicationDetail[] = MOCK_USER_APPLICATIONS
       .filter(a => a.userId === id)
-      .map(a => ({ id: a.applicationId, name: a.name ?? a.applicationId, slug: a.applicationId, icon: null, isActive: a.isActive, subscriptionPlanId: a.subscriptionPlanId, roles: a.roleId ? [{ id: a.roleId, name: a.roleId }] : [], lastLoginAt: a.lastLoginAt ?? null }));
+      .map(a => ({ id: a.applicationId, name: a.name ?? a.applicationId, slug: a.applicationId, icon: null, isActive: a.isActive, subscriptionPlanId: a.subscriptionPlanId, subscriptionPlanName: a.subscriptionPlanName ?? null, roles: a.roleId ? [{ id: a.roleId, name: a.roleId }] : [], lastLoginAt: a.lastLoginAt ?? null }));
     return { user, applications: apps };
   }
   return apiFetch<UserDetailResponse>(`/admin/users/${id}`);
diff --git a/frontend/src/components/ui/AppIconStack.vue b/frontend/src/components/ui/AppIconStack.vue
index e9fe040..daacb16 100644
--- a/frontend/src/components/ui/AppIconStack.vue
+++ b/frontend/src/components/ui/AppIconStack.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import { AppWindow } from 'lucide-vue-next';
 import type { UserAppSummary } from '@/types';
 
@@ -17,17 +17,66 @@ const props = withDefaults(defineProps<{
 const visible = computed(() => props.apps.slice(0, props.max));
 const overflow = computed(() => Math.max(0, props.apps.length - props.max));
 const open = ref(false);
+const triggerRef = ref<HTMLElement | null>(null);
+const popoverRef = ref<HTMLElement | null>(null);
+const popoverStyle = ref<{ top: string; left: string }>({ top: '0px', left: '0px' });
 
-function close() { open.value = false; }
+function updatePosition() {
+  const t = triggerRef.value;
+  if (!t) return;
+  const rect = t.getBoundingClientRect();
+  popoverStyle.value = {
+    top: `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+  };
+}
+
+function onDocClick(e: MouseEvent) {
+  if (!open.value) return;
+  const target = e.target as Node;
+  if (popoverRef.value?.contains(target)) return;
+  if (triggerRef.value?.contains(target)) return;
+  open.value = false;
+}
+
+function onWindowChange() {
+  if (open.value) open.value = false;
+}
+
+async function toggle() {
+  if (open.value) {
+    open.value = false;
+    return;
+  }
+  open.value = true;
+  await nextTick();
+  updatePosition();
+  document.addEventListener('click', onDocClick);
+  window.addEventListener('scroll', onWindowChange, true);
+  window.addEventListener('resize', onWindowChange);
+}
+
+function cleanup() {
+  document.removeEventListener('click', onDocClick);
+  window.removeEventListener('scroll', onWindowChange, true);
+  window.removeEventListener('resize', onWindowChange);
+}
+
+onBeforeUnmount(cleanup);
+
+// Tear down the global listeners as soon as the popover closes so we
+// never leak handlers after the trigger row scrolls out of view.
+watch(open, (v) => { if (!v) cleanup(); });
 </script>
 
 <template>
   <div v-if="apps.length === 0" class="text-xs text-surface-600">—</div>
   <div v-else class="relative inline-flex items-center">
     <button
+      ref="triggerRef"
       type="button"
       class="inline-flex items-center"
-      @click.stop="open = !open"
+      @click.stop="toggle"
     >
       <span
         v-for="(app, idx) in visible"
@@ -53,22 +102,25 @@ function close() { open.value = false; }
       </span>
     </button>
 
-    <div
-      v-if="open"
-      v-click-outside="close"
-      class="absolute z-30 top-full left-0 mt-1 w-56 bg-surface-800 border border-surface-700/50 rounded-xl shadow-xl py-1"
-    >
+    <Teleport to="body">
       <div
-        v-for="app in apps"
-        :key="app.id"
-        class="flex items-center gap-2 px-3 py-2 text-sm text-surface-300 hover:bg-surface-700/40"
+        v-if="open"
+        ref="popoverRef"
+        :style="{ position: 'fixed', top: popoverStyle.top, left: popoverStyle.left }"
+        class="z-[100] w-56 bg-surface-800 border border-surface-700/50 rounded-xl shadow-xl py-1"
       >
-        <span class="w-5 h-5 rounded-md bg-surface-700/60 inline-flex items-center justify-center overflow-hidden">
-          <img v-if="app.icon" :src="app.icon" :alt="app.name" class="w-full h-full object-cover" />
-          <AppWindow v-else class="w-3 h-3 text-surface-400" />
-        </span>
-        <span class="truncate">{{ app.name }}</span>
+        <div
+          v-for="app in apps"
+          :key="app.id"
+          class="flex items-center gap-2 px-3 py-2 text-sm text-surface-300 hover:bg-surface-700/40"
+        >
+          <span class="w-5 h-5 rounded-md bg-surface-700/60 inline-flex items-center justify-center overflow-hidden">
+            <img v-if="app.icon" :src="app.icon" :alt="app.name" class="w-full h-full object-cover" />
+            <AppWindow v-else class="w-3 h-3 text-surface-400" />
+          </span>
+          <span class="truncate">{{ app.name }}</span>
+        </div>
       </div>
-    </div>
+    </Teleport>
   </div>
 </template>
diff --git a/frontend/src/components/ui/DataTable.vue b/frontend/src/components/ui/DataTable.vue
index 8f68bbc..f59b46e 100644
--- a/frontend/src/components/ui/DataTable.vue
+++ b/frontend/src/components/ui/DataTable.vue
@@ -42,6 +42,8 @@ const props = withDefaults(defineProps<{
    * `update:limit` when the user interacts.
    */
   pagination?: DataTablePagination | null;
+  /** When true, rows render with `cursor-pointer`. Pair with `@row-click`. */
+  clickableRows?: boolean;
 }>(), {
   loading: false,
   empty: false,
@@ -54,6 +56,7 @@ const props = withDefaults(defineProps<{
   search: '',
   searchPlaceholder: '',
   pagination: null,
+  clickableRows: false,
 });
 
 const emit = defineEmits<{
@@ -334,7 +337,10 @@ const showToolbar = computed(() =>
             <tr
               v-for="(row, idx) in sortedItems"
               :key="defaultRowKey(row, idx)"
-              class="border-b border-surface-800/50 last:border-0 hover:bg-surface-800/20 transition-colors"
+              :class="[
+                'border-b border-surface-800/50 last:border-0 hover:bg-surface-800/20 transition-colors',
+                clickableRows ? 'cursor-pointer' : '',
+              ]"
               @click="emit('row-click', row)"
             >
               <td
diff --git a/frontend/src/mocks/data.ts b/frontend/src/mocks/data.ts
index 6f1096e..488f195 100644
--- a/frontend/src/mocks/data.ts
+++ b/frontend/src/mocks/data.ts
@@ -307,8 +307,8 @@ export const MOCK_ORGANIZATIONS: Organization[] = [
 ];
 
 export const MOCK_USER_APPLICATIONS: UserApplication[] = [
-  { userId: 'usr_5nRmW9tGxKqPsUvCeL7zBi', applicationId: '6ba7b810-9dad-11d1-80b4-00c04fd430c8', isActive: true, subscriptionPlanId: 'plan-0001-0000-0000-000000000002', createdAt: '2024-03-25T10:00:00.000Z', name: 'Sofia Marchetti', email: 'sofia.marchetti@example.com', roleId: 'a1b2c3d4-0001-0000-0000-000000000002', lastLoginAt: '2024-11-14T08:21:00.000Z', lastIp: '91.198.174.192', lastUserAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) Firefox/132.0' },
-  { userId: 'usr_1cEwZ6sPiLnXbQdRkA9mFu', applicationId: '6ba7b810-9dad-11d1-80b4-00c04fd430c8', isActive: true, subscriptionPlanId: 'plan-0001-0000-0000-000000000001', createdAt: '2024-09-05T08:00:00.000Z', name: 'Margot Lefèvre', email: 'margot.lefevre@example.com', roleId: 'a1b2c3d4-0001-0000-0000-000000000001', lastLoginAt: null, lastIp: null, lastUserAgent: null },
+  { userId: 'usr_5nRmW9tGxKqPsUvCeL7zBi', applicationId: '6ba7b810-9dad-11d1-80b4-00c04fd430c8', isActive: true, subscriptionPlanId: 'plan-0001-0000-0000-000000000002', subscriptionPlanName: 'Pro', createdAt: '2024-03-25T10:00:00.000Z', name: 'Sofia Marchetti', email: 'sofia.marchetti@example.com', roleId: 'a1b2c3d4-0001-0000-0000-000000000002', lastLoginAt: '2024-11-14T08:21:00.000Z', lastIp: '91.198.174.192', lastUserAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) Firefox/132.0' },
+  { userId: 'usr_1cEwZ6sPiLnXbQdRkA9mFu', applicationId: '6ba7b810-9dad-11d1-80b4-00c04fd430c8', isActive: true, subscriptionPlanId: 'plan-0001-0000-0000-000000000001', subscriptionPlanName: 'Free', createdAt: '2024-09-05T08:00:00.000Z', name: 'Margot Lefèvre', email: 'margot.lefevre@example.com', roleId: 'a1b2c3d4-0001-0000-0000-000000000001', lastLoginAt: null, lastIp: null, lastUserAgent: null },
 ];
 
 export const MOCK_CONSUMPTION: ConsumptionAggregate[] = [
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index ae7e9c2..909c689 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -158,6 +158,7 @@ export interface UserApplication {
   applicationId: string
   isActive: boolean
   subscriptionPlanId: string | null
+  subscriptionPlanName?: string | null
   createdAt: string
   name: string | null
   email: string | null
@@ -193,6 +194,7 @@ export interface UserApplicationDetail {
   icon: string | null
   isActive: boolean
   subscriptionPlanId: string | null
+  subscriptionPlanName?: string | null
   roles: { id: string; name: string }[]
   /** Most recent login of the user to this application, or null when none. */
   lastLoginAt?: string | null
diff --git a/frontend/src/views/UserDetailView.vue b/frontend/src/views/UserDetailView.vue
index a80b70b..7c16b04 100644
--- a/frontend/src/views/UserDetailView.vue
+++ b/frontend/src/views/UserDetailView.vue
@@ -175,7 +175,7 @@ const appColumns = computed<ColumnDef<UserApplicationDetail>[]>(() => [
                 </div>
               </template>
               <template #cell-plan="{ row }">
-                <span class="text-xs text-surface-400">{{ (row as UserApplicationDetail).subscriptionPlanId ?? '—' }}</span>
+                <span class="text-xs text-surface-400">{{ (row as UserApplicationDetail).subscriptionPlanName ?? (row as UserApplicationDetail).subscriptionPlanId ?? '—' }}</span>
               </template>
               <template #cell-status="{ row }">
                 <BaseBadge :variant="(row as UserApplicationDetail).isActive ? 'success' : 'neutral'" size="sm" dot>
diff --git a/frontend/src/views/UsersView.vue b/frontend/src/views/UsersView.vue
index d10c004..9e07703 100644
--- a/frontend/src/views/UsersView.vue
+++ b/frontend/src/views/UsersView.vue
@@ -290,6 +290,8 @@ const editModalTags = computed(() => {
         :row-key="(u: User) => u.id"
         enable-column-visibility
         enable-density-toggle
+        clickable-rows
+        @row-click="(u: User) => router.push(`/users/${u.id}`)"
       >
         <template #empty>
           <EmptyState :title="t('users.noUsers')" :message="t('users.noUsersMessage')">
diff --git a/src/routes/admin/users.ts b/src/routes/admin/users.ts
index 29f4a35..cea1ebf 100644
--- a/src/routes/admin/users.ts
+++ b/src/routes/admin/users.ts
@@ -11,6 +11,7 @@ import {
   consumptionEntries,
   consumptionAggregates,
   loginHistory,
+  subscriptionPlans,
 } from "../../db/schema.js";
 import { user as userTable } from "../../db/auth-schema.js";
 import { and, count, desc, eq, inArray, max } from "drizzle-orm";
@@ -201,7 +202,9 @@ export async function usersRoutes(fastify: FastifyInstance): Promise<void> {
       .catch(() => null);
     if (!user) throw ERR.USR_001();
 
-    // Get user's app access with application details
+    // Get user's app access with application details. Left-join the plan
+    // table so the UI can display the human-readable plan name instead of
+    // the raw UUID stored on user_applications.
     const appAccess = await db
       .select({
         id: applications.id,
@@ -210,12 +213,17 @@ export async function usersRoutes(fastify: FastifyInstance): Promise<void> {
         icon: applications.icon,
         isActive: userApplications.isActive,
         subscriptionPlanId: userApplications.subscriptionPlanId,
+        subscriptionPlanName: subscriptionPlans.name,
       })
       .from(userApplications)
       .innerJoin(
         applications,
         eq(userApplications.applicationId, applications.id),
       )
+      .leftJoin(
+        subscriptionPlans,
+        eq(userApplications.subscriptionPlanId, subscriptionPlans.id),
+      )
       .where(eq(userApplications.userId, req.params.id));
 
     // Get per-app roles for this user