From c9a3e959165431fac97785b6b785964fd26945a0 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Tue, 18 Aug 2026 21:53:05 +0100
Subject: [PATCH 1/3] refactor: Share table and pagination components

Main and administrative tables now share consistent presentation and paging behavior.
---
 components/ContentTable.vue | 418 +++++-------------------------------
 components/TDataTable.vue   | 150 +++++++++++++
 components/TPagination.vue  | 122 +++++++++++
 3 files changed, 328 insertions(+), 362 deletions(-)
 create mode 100644 components/TDataTable.vue
 create mode 100644 components/TPagination.vue

diff --git a/components/ContentTable.vue b/components/ContentTable.vue
index a8e8c7a..6aefd93 100644
--- a/components/ContentTable.vue
+++ b/components/ContentTable.vue
@@ -18,108 +18,46 @@
       </div>
 
       <div class="table-wrapper">
-        <div class="table-scroll">
-          <table class="content-table" :class="{ 'expense-table': headerType === 'expense' }">
-            <thead>
-              <tr>
-                <th
-                  v-for="col in computedColumns"
-                  :key="col.key"
-                  :style="col.width ? { width: col.width } : {}"
-                  :class="[`col-${col.key}`, col.align ? `text-${col.align}` : '']"
-                >
-                  {{ t(col.label) }}
-                </th>
-                <th class="col-action">{{ t('Action') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="entity in paginatedEntities"
-                :key="entity.id"
-                class="entity-row"
-                :class="{ 'is-default': String(entity.id) === defaultItemId }"
+        <TDataTable
+          :columns="tableColumns"
+          :rows="paginatedEntities"
+          :row-class="rowClass"
+          :header-type="headerType"
+        >
+          <template #cell-name="{ row: entity }">
+            <div class="name-cell">
+              <component :is="getIcon(entity)" v-if="getIcon(entity)" class="entity-icon" />
+              <span class="name-text">{{ entity.name }}</span>
+              <span v-if="String(entity.id) === defaultItemId" class="default-badge">
+                {{ t('Default') }}
+              </span>
+            </div>
+          </template>
+          <template #cell-actions="{ row: entity }">
+            <div class="entity-actions">
+              <button
+                class="action-button edit"
+                :title="t('Edit {item}', { item: t(pageName) })"
+                @click="$emit('edit', entity)"
               >
-                <td
-                  v-for="col in computedColumns"
-                  :key="col.key"
-                  :class="[`col-${col.key}`, col.align ? `text-${col.align}` : '']"
-                >
-                  <template v-if="col.key === 'name'">
-                    <div class="name-cell">
-                      <component :is="getIcon(entity)" v-if="getIcon(entity)" class="entity-icon" />
-                      <span class="name-text">{{ entity.name }}</span>
-                      <span v-if="String(entity.id) === defaultItemId" class="default-badge">
-                        {{ t('Default') }}
-                      </span>
-                    </div>
-                  </template>
-                  <template v-else-if="col.render">
-                    {{ col.render(entity[col.key], entity) }}
-                  </template>
-                  <template v-else>
-                    {{ getCellValue(entity, col.key) }}
-                  </template>
-                </td>
-                <td class="col-action">
-                  <div class="entity-actions">
-                    <button
-                      class="action-button edit"
-                      :title="t('Edit {item}', { item: t(pageName) })"
-                      @click="$emit('edit', entity)"
-                    >
-                      <LucideEdit />
-                    </button>
-                    <button
-                      class="action-button delete"
-                      :title="t('Delete {item}', { item: t(pageName) })"
-                      @click="$emit('delete', entity)"
-                    >
-                      <LucideTrash />
-                    </button>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="pagination-row">
-          <div class="pagination-controls">
-            <button
-              :disabled="currentPage === 1"
-              class="pagination-button pagination-button--nav"
-              :class="{ disabled: currentPage === 1 }"
-              :aria-label="t('Previous page')"
-              @click="currentPage--"
-            >
-              <ChevronLeft :size="16" />
-            </button>
-
-            <button
-              v-for="page in visiblePages"
-              :key="page"
-              class="pagination-button"
-              :class="{
-                active: page === currentPage,
-                ellipsis: page === '...'
-              }"
-              @click="currentPage = typeof page === 'number' ? page : currentPage"
-            >
-              {{ page }}
-            </button>
-
-            <button
-              :disabled="currentPage === totalPages"
-              class="pagination-button pagination-button--nav"
-              :class="{ disabled: currentPage === totalPages }"
-              :aria-label="t('Next page')"
-              @click="currentPage++"
-            >
-              <ChevronRight :size="16" />
-            </button>
-          </div>
-
+                <LucideEdit />
+              </button>
+              <button
+                class="action-button delete"
+                :title="t('Delete {item}', { item: t(pageName) })"
+                @click="$emit('delete', entity)"
+              >
+                <LucideTrash />
+              </button>
+            </div>
+          </template>
+        </TDataTable>
+
+        <TPagination
+          :current-page="currentPage"
+          :total-pages="totalPages"
+          @page-change="currentPage = $event"
+        >
           <div class="page-info">
             <span>{{ t('Show') }}</span>
             <select v-model="perPage" class="per-page-select">
@@ -129,7 +67,7 @@
             </select>
             <span>{{ t('per page') }}</span>
           </div>
-        </div>
+        </TPagination>
       </div>
     </div>
   </ComponentLoader>
@@ -137,15 +75,12 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue';
-import {
-  Edit as LucideEdit,
-  Trash as LucideTrash,
-  ChevronLeft,
-  ChevronRight
-} from 'lucide-vue-next';
+import { Edit as LucideEdit, Trash as LucideTrash } from 'lucide-vue-next';
 import * as LucideIcons from 'lucide-vue-next';
 import ComponentLoader from './ComponentLoader.vue';
 import SearchInput from './SearchInput.vue';
+import TDataTable from './TDataTable.vue';
+import TPagination from './TPagination.vue';
 
 const { t } = useI18n();
 
@@ -201,19 +136,25 @@ const defaultColumns = computed(() => [
 
 const computedColumns = computed(() => props.columns || defaultColumns.value);
 
+const tableColumns = computed(() => [
+  ...computedColumns.value.map((column) => ({
+    ...column,
+    label: t(column.label),
+    format: column.render
+  })),
+  { key: 'actions', label: t('Action'), align: 'right', width: '96px' }
+]);
+
+const rowClass = (entity) => ({
+  'is-default': String(entity.id) === props.defaultItemId
+});
+
 const getIcon = (entity) => {
   const iconValue = entity.icon?.path || entity.icon?.content || entity.icon;
   if (!iconValue) return null;
   return LucideIcons[iconValue] || LucideIcons.Box;
 };
 
-const getCellValue = (entity, key) => {
-  if (key.includes('.')) {
-    return key.split('.').reduce((obj, k) => obj?.[k], entity) ?? '';
-  }
-  return entity[key] ?? '';
-};
-
 const internalSearchQuery = ref('');
 const currentPage = ref(1);
 const perPage = ref(10);
@@ -253,43 +194,6 @@ watch(perPage, () => {
     currentPage.value = maxPage;
   }
 });
-
-const visiblePages = computed(() => {
-  const total = totalPages.value;
-  const current = currentPage.value;
-  const pages = [];
-
-  if (total <= 7) {
-    // Show all pages if 7 or fewer
-    for (let i = 1; i <= total; i++) {
-      pages.push(i);
-    }
-  } else {
-    // Always show first page
-    pages.push(1);
-
-    if (current > 3) {
-      pages.push('...');
-    }
-
-    // Show pages around current page
-    const start = Math.max(2, current - 1);
-    const end = Math.min(start + 2, total - 1);
-
-    for (let i = start; i <= end; i++) {
-      pages.push(i);
-    }
-
-    if (current < total - 2) {
-      pages.push('...');
-    }
-
-    // Always show last page
-    pages.push(total);
-  }
-
-  return pages;
-});
 </script>
 
 <style lang="scss" scoped>
@@ -339,100 +243,6 @@ const visiblePages = computed(() => {
   overflow: hidden;
 }
 
-.table-scroll {
-  width: 100%;
-  overflow-x: auto;
-}
-
-.content-table {
-  width: 100%;
-  border-collapse: collapse;
-  min-width: 500px;
-
-  thead {
-    tr {
-      background: $primary-light;
-    }
-
-    th {
-      color: $primary-dark;
-      font-weight: $font-bold;
-      text-align: left;
-      padding: 8px 16px;
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-      white-space: nowrap;
-      border-bottom: 1px solid $border-light;
-
-      &:first-child {
-        padding-left: 20px;
-      }
-
-      &.text-right {
-        text-align: right;
-      }
-
-      &.text-center {
-        text-align: center;
-      }
-    }
-  }
-
-  &.expense-table thead tr {
-    background: rgba(var(--color-expense-rgb), 0.12);
-
-    th {
-      color: var(--color-expense);
-    }
-  }
-
-  tbody {
-    background: $bg-white;
-
-    .entity-row {
-      background: $bg-white;
-      transition: background-color $duration-fast $easing-standard;
-
-      &:hover {
-        background: rgba(var(--color-primary-rgb), 0.04);
-      }
-
-      &.is-default {
-        background: rgba(var(--color-success-rgb), 0.08);
-
-        &:hover {
-          background: rgba(var(--color-success-rgb), 0.12);
-        }
-      }
-
-      &:last-child td {
-        border-bottom: none;
-      }
-
-      td {
-        padding: 6px 16px;
-        border-bottom: 1px solid $border-light;
-        font-size: $font-size-sm;
-        vertical-align: middle;
-        line-height: 1.4;
-
-        &:first-child {
-          padding-left: 20px;
-        }
-
-        &.text-right {
-          text-align: right;
-        }
-
-        &.text-center {
-          text-align: center;
-        }
-      }
-    }
-  }
-}
-
 .name-cell {
   display: flex;
   align-items: center;
@@ -471,11 +281,6 @@ const visiblePages = computed(() => {
   width: 96px;
 }
 
-.content-table th.col-action,
-.content-table td.col-action {
-  padding-right: 20px;
-}
-
 .entity-actions {
   display: inline-flex;
   gap: 4px;
@@ -522,110 +327,6 @@ const visiblePages = computed(() => {
   }
 }
 
-.pagination-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: $spacing-3 $spacing-4;
-  background-color: $bg-white;
-  border-top: 1px solid $border-light;
-  gap: $spacing-3;
-
-  @media (max-width: $breakpoint-md) {
-    flex-direction: column-reverse;
-    gap: $spacing-2;
-    padding: $spacing-3;
-  }
-
-  @media (max-width: $breakpoint-sm) {
-    flex-direction: row;
-    justify-content: space-between;
-    padding: $spacing-2;
-    gap: $spacing-2;
-    flex-wrap: wrap;
-  }
-}
-
-.pagination-controls {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  @media (max-width: $breakpoint-md) {
-    order: 2;
-    width: 100%;
-  }
-
-  @media (max-width: $breakpoint-sm) {
-    gap: 0.25rem;
-    order: unset;
-    width: auto;
-    flex: 1;
-    justify-content: center;
-  }
-}
-
-.pagination-button {
-  padding: 0 $spacing-3;
-  color: $text-secondary;
-  background: transparent;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition:
-    background-color $duration-fast $easing-standard,
-    color $duration-fast $easing-standard;
-  font-size: $font-size-sm;
-  min-width: 32px;
-  height: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: $font-semibold;
-  font-variant-numeric: tabular-nums;
-
-  @media (max-width: $breakpoint-sm) {
-    min-width: 28px;
-    height: 28px;
-    font-size: $font-size-xs;
-  }
-
-  &:hover:not(.disabled):not(.ellipsis):not(.active) {
-    background: $bg-light;
-    color: $text-primary;
-  }
-
-  &:focus-visible {
-    outline: 2px solid $primary;
-    outline-offset: 2px;
-  }
-
-  &.active {
-    background: $primary-light;
-    color: $primary;
-  }
-
-  &--nav {
-    color: $text-muted;
-  }
-
-  &.disabled {
-    opacity: 0.35;
-    cursor: not-allowed;
-  }
-
-  &.ellipsis {
-    background: transparent;
-    cursor: default;
-    pointer-events: none;
-    color: $text-muted;
-    padding: 0 4px;
-    min-width: auto;
-  }
-}
-
 .page-info {
   display: flex;
   align-items: center;
@@ -691,13 +392,6 @@ const visiblePages = computed(() => {
     box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
   }
 
-  .expense-header ~ .entities-container ~ .pagination-row & {
-    &:focus {
-      border-color: $primary;
-      box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
-    }
-  }
-
   &:hover {
     border-color: $border-medium;
   }
diff --git a/components/TDataTable.vue b/components/TDataTable.vue
new file mode 100644
index 0000000..fb2097b
--- /dev/null
+++ b/components/TDataTable.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="table-scroll">
+    <table
+      class="data-table"
+      :class="{
+        'data-table--clickable': clickable,
+        'data-table--expense': headerType === 'expense'
+      }"
+    >
+      <thead>
+        <tr>
+          <th
+            v-for="column in columns"
+            :key="column.key"
+            :class="column.align ? `text-${column.align}` : undefined"
+            :style="column.width ? { width: column.width } : undefined"
+          >
+            {{ column.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="row in rows"
+          :key="String(row[rowKey])"
+          :class="rowClass?.(row)"
+          @click="$emit('row-click', row)"
+        >
+          <td
+            v-for="column in columns"
+            :key="column.key"
+            :class="column.align ? `text-${column.align}` : undefined"
+          >
+            <slot :name="`cell-${column.key}`" :row="row" :value="valueAt(row, column.key)">
+              {{ column.format?.(valueAt(row, column.key), row) ?? valueAt(row, column.key) }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface DataTableColumn {
+  key: string;
+  label: string;
+  align?: 'left' | 'center' | 'right';
+  width?: string;
+  format?: (value: unknown, row: Record<string, any>) => unknown;
+}
+
+withDefaults(
+  defineProps<{
+    columns: DataTableColumn[];
+    rows: Record<string, any>[];
+    rowKey?: string;
+    clickable?: boolean;
+    headerType?: 'default' | 'expense';
+    rowClass?: (row: Record<string, any>) => string | Record<string, boolean> | undefined;
+  }>(),
+  { rowKey: 'id', clickable: false, headerType: 'default', rowClass: undefined }
+);
+
+defineEmits<{
+  'row-click': [row: Record<string, any>];
+}>();
+
+const valueAt = (row: Record<string, any>, key: string): unknown =>
+  key.split('.').reduce<unknown>((value, part) => {
+    if (value === null || typeof value !== 'object') return undefined;
+    return (value as Record<string, unknown>)[part];
+  }, row);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.table-scroll {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.data-table {
+  width: 100%;
+  min-width: 500px;
+  border-collapse: collapse;
+  font-size: $font-size-sm;
+
+  thead tr {
+    background: $primary-light;
+  }
+
+  th {
+    padding: 8px 16px;
+    border-bottom: 1px solid $border-light;
+    color: $primary-dark;
+    font-size: $font-size-xs;
+    font-weight: $font-bold;
+    text-align: left;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    white-space: nowrap;
+  }
+
+  td {
+    padding: 8px 16px;
+    border-bottom: 1px solid $border-light;
+    color: $text-primary;
+    vertical-align: middle;
+  }
+
+  tbody tr {
+    background: $bg-white;
+    transition: background-color $duration-fast $easing-standard;
+
+    &:hover {
+      background: rgba(var(--color-primary-rgb), 0.04);
+    }
+
+    &:last-child td {
+      border-bottom: none;
+    }
+
+    &.is-default {
+      background: rgba(var(--color-success-rgb), 0.08);
+    }
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+}
+
+.data-table--clickable tbody tr {
+  cursor: pointer;
+}
+
+.data-table--expense thead tr {
+  background: rgba(var(--color-expense-rgb), 0.12);
+
+  th {
+    color: var(--color-expense);
+  }
+}
+</style>
diff --git a/components/TPagination.vue b/components/TPagination.vue
new file mode 100644
index 0000000..c8c3282
--- /dev/null
+++ b/components/TPagination.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="pagination">
+    <div class="pagination__controls">
+      <button
+        class="pagination__button"
+        :disabled="currentPage <= 1 || disabled"
+        :aria-label="t('Previous page')"
+        @click="$emit('page-change', currentPage - 1)"
+      >
+        <ChevronLeft :size="16" />
+      </button>
+      <button
+        v-for="page in visiblePages"
+        :key="page"
+        class="pagination__button"
+        :class="{ 'pagination__button--active': page === currentPage }"
+        :disabled="page === '...' || disabled"
+        @click="typeof page === 'number' && $emit('page-change', page)"
+      >
+        {{ page }}
+      </button>
+      <button
+        class="pagination__button"
+        :disabled="currentPage >= totalPages || disabled"
+        :aria-label="t('Next page')"
+        @click="$emit('page-change', currentPage + 1)"
+      >
+        <ChevronRight :size="16" />
+      </button>
+    </div>
+    <slot name="info" />
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next';
+
+const props = withDefaults(
+  defineProps<{
+    currentPage: number;
+    totalPages: number;
+    disabled?: boolean;
+  }>(),
+  { disabled: false }
+);
+
+defineEmits<{ 'page-change': [page: number] }>();
+
+const { t } = useI18n();
+
+const visiblePages = computed<(number | string)[]>(() => {
+  if (props.totalPages <= 7) {
+    return Array.from({ length: props.totalPages }, (_, index) => index + 1);
+  }
+
+  const pages: (number | string)[] = [1];
+  if (props.currentPage > 3) pages.push('...');
+  const start = Math.max(2, Math.min(props.currentPage - 1, props.totalPages - 3));
+  const end = Math.min(props.totalPages - 1, start + 2);
+  for (let page = start; page <= end; page++) pages.push(page);
+  if (props.currentPage < props.totalPages - 2) pages.push('...');
+  pages.push(props.totalPages);
+  return pages;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-3;
+  padding: $spacing-3 $spacing-4;
+  border-top: 1px solid $border-light;
+  color: $text-muted;
+  font-size: $font-size-sm;
+
+  @media (max-width: $breakpoint-sm) {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+
+.pagination__controls {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.pagination__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 $spacing-2;
+  border: none;
+  border-radius: $radius-md;
+  background: transparent;
+  color: $text-secondary;
+  font-weight: $font-semibold;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: $bg-light;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  &--active {
+    background: $primary-light;
+    color: $primary;
+  }
+}
+</style>

From 97c7c3a3fb2e535a92423f54d5ec215bdb358693 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Tue, 18 Aug 2026 21:53:14 +0100
Subject: [PATCH 2/3] feat(admin): Complete user insights

Administrators can inspect registration trends, user activity, and token consumption.
Outreach history is available from the same paginated view.
---
 components/admin/OutreachComposer.vue |   2 +-
 components/admin/UserDetail.vue       |   5 +
 i18n/locales/de.json                  |   5 +
 i18n/locales/en.json                  |   5 +
 i18n/locales/es.json                  |   5 +
 i18n/locales/fr.json                  |   5 +
 i18n/locales/it.json                  |   5 +
 i18n/locales/pt.json                  |   5 +
 pages/admin/index.vue                 | 341 ++++++++++++++++----------
 services/api/adminApi.ts              |  31 ++-
 tests/services/adminApi.test.ts       |  39 +++
 11 files changed, 318 insertions(+), 130 deletions(-)
 create mode 100644 tests/services/adminApi.test.ts

diff --git a/components/admin/OutreachComposer.vue b/components/admin/OutreachComposer.vue
index 78e36d3..96dd2b3 100644
--- a/components/admin/OutreachComposer.vue
+++ b/components/admin/OutreachComposer.vue
@@ -214,7 +214,7 @@ const filteredUsers = computed(() => {
 
 onMounted(async () => {
   try {
-    users.value = await adminApi.users();
+    users.value = (await adminApi.users({ perPage: 100 })).data;
   } catch {
     users.value = [];
   }
diff --git a/components/admin/UserDetail.vue b/components/admin/UserDetail.vue
index 252d862..e74a6b7 100644
--- a/components/admin/UserDetail.vue
+++ b/components/admin/UserDetail.vue
@@ -40,6 +40,10 @@
             <dt>{{ t('Last transaction') }}</dt>
             <dd>{{ detail.last_transaction_at ? fmtDate(detail.last_transaction_at) : '-' }}</dd>
           </div>
+          <div class="fact">
+            <dt>{{ t('AI tokens used') }}</dt>
+            <dd>{{ fmtNumber(detail.user.tokens_used) }}</dd>
+          </div>
         </dl>
       </TCard>
 
@@ -91,6 +95,7 @@ const initials = computed(() => {
 });
 
 const fmtDate = (iso: string): string => (iso ? new Date(iso).toLocaleDateString() : '');
+const fmtNumber = (value: number): string => new Intl.NumberFormat().format(value ?? 0);
 
 const load = async () => {
   loading.value = true;
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index f01fc24..3199d9b 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -1,4 +1,9 @@
 {
+  "Joined on {date}": "Beigetreten am {date}",
+  "Last seen": "Zuletzt gesehen",
+  "Last transaction": "Letzte Transaktion",
+  "Never": "Nie",
+  "Page {page} of {pages} · {total} users": "Seite {page} von {pages} · {total} Benutzer",
   "Recent imports": "Letzte Importe",
   "Needs review": "Zu prüfen",
   "Analyzing": "Wird analysiert",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index f1c2468..05a02b5 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,4 +1,9 @@
 {
+  "Joined on {date}": "Joined on {date}",
+  "Last seen": "Last seen",
+  "Last transaction": "Last transaction",
+  "Never": "Never",
+  "Page {page} of {pages} · {total} users": "Page {page} of {pages} · {total} users",
   "Recent imports": "Recent imports",
   "Needs review": "Needs review",
   "Analyzing": "Analyzing",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 73662a9..6d2bba9 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -1,4 +1,9 @@
 {
+  "Joined on {date}": "Se unió el {date}",
+  "Last seen": "Última visita",
+  "Last transaction": "Última transacción",
+  "Never": "Nunca",
+  "Page {page} of {pages} · {total} users": "Página {page} de {pages} · {total} usuarios",
   "Recent imports": "Importaciones recientes",
   "Needs review": "Por revisar",
   "Analyzing": "Analizando",
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
index e06a05b..246ba73 100644
--- a/i18n/locales/fr.json
+++ b/i18n/locales/fr.json
@@ -1,4 +1,9 @@
 {
+  "Joined on {date}": "Inscrit le {date}",
+  "Last seen": "Dernière visite",
+  "Last transaction": "Dernière transaction",
+  "Never": "Jamais",
+  "Page {page} of {pages} · {total} users": "Page {page} sur {pages} · {total} utilisateurs",
   "Recent imports": "Imports récents",
   "Needs review": "À vérifier",
   "Analyzing": "Analyse en cours",
diff --git a/i18n/locales/it.json b/i18n/locales/it.json
index 3fd1ded..ba3ca06 100644
--- a/i18n/locales/it.json
+++ b/i18n/locales/it.json
@@ -1,4 +1,9 @@
 {
+  "Joined on {date}": "Iscritto il {date}",
+  "Last seen": "Ultimo accesso",
+  "Last transaction": "Ultima transazione",
+  "Never": "Mai",
+  "Page {page} of {pages} · {total} users": "Pagina {page} di {pages} · {total} utenti",
   "Recent imports": "Importazioni recenti",
   "Needs review": "Da rivedere",
   "Analyzing": "Analisi in corso",
diff --git a/i18n/locales/pt.json b/i18n/locales/pt.json
index f8b9f5d..0ed05a0 100644
--- a/i18n/locales/pt.json
+++ b/i18n/locales/pt.json
@@ -1,4 +1,9 @@
 {
+  "Joined on {date}": "Inscrito em {date}",
+  "Last seen": "Último acesso",
+  "Last transaction": "Última transação",
+  "Never": "Nunca",
+  "Page {page} of {pages} · {total} users": "Página {page} de {pages} · {total} utilizadores",
   "Recent imports": "Importações recentes",
   "Needs review": "A rever",
   "Analyzing": "A analisar",
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index 3bf207c..14ed9e1 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -73,6 +73,7 @@
                   height="220"
                   :options="areaOptions(usersChart.categories, chartColors.primary)"
                   :series="[{ name: t('New users'), data: usersChart.data }]"
+                  @data-point-selection="showSignupsForPoint"
                 />
               </ClientOnly>
             </TCard>
@@ -138,47 +139,75 @@
         <UserDetail v-if="selectedUserId" :user-id="selectedUserId" @back="selectedUserId = null" />
         <template v-else>
           <header class="panel__head">
-            <h1 class="panel__title">{{ t('Users') }}</h1>
+            <div>
+              <h1 class="panel__title">{{ t('Users') }}</h1>
+              <button v-if="joinedOn" class="filter-chip" @click="clearJoinDate">
+                {{ t('Joined on {date}', { date: formatDate(joinedOn) }) }} ×
+              </button>
+            </div>
             <div class="search">
               <Search class="search__icon" />
               <input v-model="userQuery" class="search__input" :placeholder="t('Search users')" />
             </div>
           </header>
           <TCard>
-            <table v-if="filteredUsers.length" class="data-table data-table--clickable">
-              <thead>
-                <tr>
-                  <th>{{ t('Name') }}</th>
-                  <th>{{ t('Email') }}</th>
-                  <th>{{ t('Joined') }}</th>
-                  <th class="data-table__actions-col">{{ t('Actions') }}</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="u in filteredUsers" :key="u.id" @click="selectedUserId = u.id">
-                  <td class="data-table__name">{{ u.first_name }} {{ u.last_name }}</td>
-                  <td class="data-table__muted">{{ u.email }}</td>
-                  <td class="data-table__muted">{{ formatDate(u.created_at) }}</td>
-                  <td class="data-table__actions" @click.stop>
-                    <TDropdown>
-                      <template #trigger>
-                        <button class="row-action" :aria-label="t('Actions')">
-                          <MoreHorizontal />
-                        </button>
-                      </template>
-                      <TDropdownItem @click="selectedUserId = u.id"
-                        ><Eye class="item-icon" />{{ t('View profile') }}</TDropdownItem
-                      >
-                      <TDropdownItem><Send class="item-icon" />{{ t('Reach out') }}</TDropdownItem>
-                      <TDropdownItem
-                        ><Gift class="item-icon" />{{ t('Grant discount') }}</TDropdownItem
-                      >
-                    </TDropdown>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <p v-else class="state">{{ users.length ? t('No matches') : t('No users yet') }}</p>
+            <TDataTable
+              v-if="users.length"
+              :columns="userColumns"
+              :rows="users"
+              clickable
+              @row-click="selectedUserId = $event.id"
+            >
+              <template #cell-name="{ row: u }">
+                <strong>{{ u.first_name }} {{ u.last_name }}</strong>
+              </template>
+              <template #cell-created_at="{ row: u }">{{ formatDate(u.created_at) }}</template>
+              <template #cell-last_seen_at="{ row: u }">
+                {{ u.last_seen_at ? formatDateTime(u.last_seen_at) : t('Never') }}
+              </template>
+              <template #cell-last_transaction_at="{ row: u }">
+                {{ u.last_transaction_at ? formatDateTime(u.last_transaction_at) : t('Never') }}
+              </template>
+              <template #cell-tokens_used="{ row: u }">{{ fmt(u.tokens_used) }}</template>
+              <template #cell-actions="{ row: u }">
+                <div @click.stop>
+                  <TDropdown>
+                    <template #trigger>
+                      <button class="row-action" :aria-label="t('Actions')">
+                        <MoreHorizontal />
+                      </button>
+                    </template>
+                    <TDropdownItem @click="selectedUserId = u.id"
+                      ><Eye class="item-icon" />{{ t('View profile') }}</TDropdownItem
+                    >
+                    <TDropdownItem><Send class="item-icon" />{{ t('Reach out') }}</TDropdownItem>
+                    <TDropdownItem
+                      ><Gift class="item-icon" />{{ t('Grant discount') }}</TDropdownItem
+                    >
+                  </TDropdown>
+                </div>
+              </template>
+            </TDataTable>
+            <p v-else-if="!usersLoading" class="state">{{ t('No users found') }}</p>
+            <TPagination
+              v-if="userPagination.total"
+              :current-page="userPagination.current_page"
+              :total-pages="userPagination.last_page"
+              :disabled="usersLoading"
+              @page-change="changeUserPage"
+            >
+              <template #info>
+                <span class="pagination-info">
+                  {{
+                    t('Page {page} of {pages} · {total} users', {
+                      page: userPagination.current_page,
+                      pages: userPagination.last_page,
+                      total: userPagination.total
+                    })
+                  }}
+                </span>
+              </template>
+            </TPagination>
           </TCard>
         </template>
       </section>
@@ -206,24 +235,12 @@
           <OutreachComposer @sent="onOutreachSent" />
         </TCard>
         <TCard v-else>
-          <table v-if="outreaches.length" class="data-table">
-            <thead>
-              <tr>
-                <th>{{ t('Subject') }}</th>
-                <th>{{ t('Audience') }}</th>
-                <th>{{ t('Sent') }}</th>
-                <th>{{ t('Date') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="o in outreaches" :key="o.id">
-                <td class="data-table__name">{{ o.subject }}</td>
-                <td class="data-table__muted">{{ o.audience }}</td>
-                <td>{{ o.sent }}</td>
-                <td class="data-table__muted">{{ formatDate(o.created_at) }}</td>
-              </tr>
-            </tbody>
-          </table>
+          <TDataTable v-if="outreaches.length" :columns="outreachColumns" :rows="outreaches">
+            <template #cell-subject="{ value }"
+              ><strong>{{ value }}</strong></template
+            >
+            <template #cell-created_at="{ row }">{{ formatDate(row.created_at) }}</template>
+          </TDataTable>
           <p v-else class="state">{{ t('No outreaches yet') }}</p>
         </TCard>
       </section>
@@ -240,23 +257,56 @@
         />
       </section>
 
-      <section v-else>
-        <SectionPlaceholder
-          :icon="IconUsage"
-          :title="t('AI usage')"
-          :body="
-            t(
-              'Track assistant token usage and cost per user once the assistant reports it. The metric plugs in as a provider, so no console change is needed when it lands.'
-            )
-          "
-        />
+      <section v-else-if="activeSection === 'usage'">
+        <header class="panel__head">
+          <div>
+            <h1 class="panel__title">{{ t('AI usage') }}</h1>
+            <p class="panel__sub">
+              {{ t('Assistant token consumption for the selected period.') }}
+            </p>
+          </div>
+        </header>
+        <div v-if="loading" class="state">{{ t('Loading...') }}</div>
+        <template v-else>
+          <div class="kpis kpis--single">
+            <div class="kpi tone-primary">
+              <span class="kpi__icon"><Cpu /></span>
+              <span class="kpi__value">{{ fmt(metricByKey('ai_tokens_used')?.value) }}</span>
+              <span class="kpi__label">{{ t('AI tokens used') }}</span>
+            </div>
+          </div>
+          <div class="grid-2">
+            <TCard>
+              <template #header>{{ t('Token usage') }}</template>
+              <ClientOnly>
+                <ApexChart
+                  type="area"
+                  height="240"
+                  :options="areaOptions(tokenChart.categories, chartColors.primary)"
+                  :series="[{ name: t('AI tokens'), data: tokenChart.data }]"
+                />
+              </ClientOnly>
+            </TCard>
+            <TCard>
+              <template #header>{{ t('Tokens by user') }}</template>
+              <ol v-if="tokenRanking.length" class="ranking">
+                <li v-for="(row, k) in tokenRanking" :key="k" class="ranking-row">
+                  <span class="ranking-rank">{{ k + 1 }}</span>
+                  <span class="ranking-label">{{ row.label }}</span>
+                  <span class="ranking-value">{{ fmt(row.value) }}</span>
+                </li>
+              </ol>
+              <p v-else class="state">{{ t('No token usage yet') }}</p>
+            </TCard>
+          </div>
+        </template>
       </section>
     </main>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, h, defineAsyncComponent, type Component } from 'vue';
+import { ref, computed, onMounted, watch, h, defineAsyncComponent, type Component } from 'vue';
 import { useRouter } from 'vue-router';
 import {
   LayoutDashboard,
@@ -276,12 +326,13 @@ import {
   Gift
 } from 'lucide-vue-next';
 import IconDiscount from '~icons/solar/tag-price-bold-duotone';
-import IconUsage from '~icons/solar/cpu-bold-duotone';
 import Logo from '@/components/Logo.vue';
 import TCard from '@/components/TCard.vue';
 import TButton from '@/components/TButton.vue';
 import TDropdown from '@/components/TDropdown.vue';
 import TDropdownItem from '@/components/TDropdownItem.vue';
+import TDataTable, { type DataTableColumn } from '@/components/TDataTable.vue';
+import TPagination from '@/components/TPagination.vue';
 import OutreachComposer from '@/components/admin/OutreachComposer.vue';
 import UserDetail from '@/components/admin/UserDetail.vue';
 import {
@@ -289,6 +340,7 @@ import {
   type EngagementReport,
   type Metric,
   type AdminUser,
+  type AdminUserPage,
   type OutreachSummary
 } from '@/services/api/adminApi';
 
@@ -330,8 +382,34 @@ const loading = ref(true);
 const metricsError = ref('');
 const report = ref<EngagementReport | null>(null);
 const users = ref<AdminUser[]>([]);
+const usersLoading = ref(false);
+const joinedOn = ref<string | null>(null);
+const userPagination = ref<AdminUserPage>({
+  data: [],
+  current_page: 1,
+  last_page: 1,
+  per_page: 15,
+  total: 0
+});
 const days = ref(30);
 
+const userColumns = computed<DataTableColumn[]>(() => [
+  { key: 'name', label: t('Name') },
+  { key: 'email', label: t('Email') },
+  { key: 'last_seen_at', label: t('Last seen') },
+  { key: 'last_transaction_at', label: t('Last transaction') },
+  { key: 'created_at', label: t('Joined') },
+  { key: 'tokens_used', label: t('AI tokens') },
+  { key: 'actions', label: t('Actions'), align: 'right', width: '1%' }
+]);
+
+const outreachColumns = computed<DataTableColumn[]>(() => [
+  { key: 'subject', label: t('Subject') },
+  { key: 'audience', label: t('Audience') },
+  { key: 'sent', label: t('Sent') },
+  { key: 'created_at', label: t('Date') }
+]);
+
 const rangeOptions = [
   { days: 7, label: '7 days' },
   { days: 30, label: '30 days' },
@@ -382,8 +460,7 @@ const kpis = computed(() => [
   {
     key: 'tokens',
     label: t('AI tokens used'),
-    value: '-',
-    sub: t('Coming soon'),
+    value: fmt(metricByKey('ai_tokens_used')?.value),
     icon: Cpu,
     tone: 'primary'
   }
@@ -395,6 +472,8 @@ const chartFor = (key: string) => {
 };
 const usersChart = computed(() => chartFor('new_users_series'));
 const txChart = computed(() => chartFor('transactions_series'));
+const tokenChart = computed(() => chartFor('ai_tokens_series'));
+const tokenRanking = computed(() => metricByKey('ai_tokens_by_user')?.rows ?? []);
 
 const rankings = computed(() =>
   ['most_active_users', 'most_used_features']
@@ -424,23 +503,59 @@ const areaOptions = (categories: string[], color: string) => ({
   tooltip: { x: { show: true } }
 });
 
-const filteredUsers = computed(() => {
-  const q = userQuery.value.trim().toLowerCase();
-  if (!q) return users.value;
-  return users.value.filter((u) =>
-    `${u.first_name} ${u.last_name} ${u.email}`.toLowerCase().includes(q)
-  );
-});
-
 const exit = () => router.push('/dashboard');
 
+const loadUsers = async (page = 1) => {
+  usersLoading.value = true;
+  try {
+    const result = await adminApi.users({
+      page,
+      perPage: userPagination.value.per_page,
+      search: userQuery.value.trim() || undefined,
+      joinedOn: joinedOn.value || undefined
+    });
+    userPagination.value = result;
+    users.value = result.data;
+  } catch {
+    users.value = [];
+    userPagination.value = {
+      ...userPagination.value,
+      data: [],
+      current_page: 1,
+      last_page: 1,
+      total: 0
+    };
+  } finally {
+    usersLoading.value = false;
+  }
+};
+
+const changeUserPage = (page: number) => loadUsers(page);
+
+const clearJoinDate = () => {
+  joinedOn.value = null;
+  loadUsers();
+};
+
+const showSignupsForPoint = (
+  _event: unknown,
+  _chart: unknown,
+  options: { dataPointIndex: number }
+) => {
+  const date = usersChart.value.categories[options.dataPointIndex];
+  if (!date) return;
+  joinedOn.value = date;
+  activeSection.value = 'users';
+  loadUsers();
+};
+
 const load = async () => {
   loading.value = true;
   metricsError.value = '';
 
-  const [metricsResult, usersResult] = await Promise.allSettled([
+  const [metricsResult] = await Promise.allSettled([
     adminApi.metrics({ days: days.value }),
-    adminApi.users()
+    loadUsers()
   ]);
 
   if (metricsResult.status === 'fulfilled') {
@@ -450,7 +565,6 @@ const load = async () => {
     metricsError.value = t('Metrics are not available yet.');
   }
 
-  users.value = usersResult.status === 'fulfilled' ? usersResult.value : [];
   loading.value = false;
 };
 
@@ -479,11 +593,19 @@ const rowWidth = (rows: { value: number }[], value: number): string => {
 };
 
 const formatDate = (iso: string): string => (iso ? new Date(iso).toLocaleDateString() : '');
+const formatDateTime = (iso: string): string =>
+  iso ? new Date(iso).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : '';
 
 onMounted(() => {
   load();
   loadOutreaches();
 });
+
+let searchTimer: ReturnType<typeof setTimeout> | undefined;
+watch(userQuery, () => {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => loadUsers(), 300);
+});
 </script>
 
 <style lang="scss" scoped>
@@ -705,6 +827,10 @@ onMounted(() => {
   }
 }
 
+.pagination-info {
+  font-variant-numeric: tabular-nums;
+}
+
 .kpis {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
@@ -863,52 +989,6 @@ onMounted(() => {
   max-width: 100%;
 }
 
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: $font-size-sm;
-
-  th {
-    text-align: left;
-    padding: $table-header-padding;
-    color: $text-muted;
-    font-size: $font-size-xs;
-    font-weight: $font-semibold;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    border-bottom: 1px solid $border-color;
-  }
-
-  td {
-    padding: $table-cell-padding;
-    border-bottom: 1px solid $border-color;
-    color: $text-primary;
-  }
-
-  tr:last-child td {
-    border-bottom: none;
-  }
-
-  tbody tr:hover {
-    background: $bg-light;
-  }
-}
-
-.data-table__name {
-  font-weight: $font-semibold;
-}
-
-.data-table__muted {
-  color: $text-muted;
-}
-
-.data-table__actions-col,
-.data-table__actions {
-  text-align: right;
-  width: 1%;
-  white-space: nowrap;
-}
-
 .row-action {
   display: inline-flex;
   align-items: center;
@@ -937,10 +1017,21 @@ onMounted(() => {
   height: 16px;
 }
 
-.data-table--clickable tbody tr {
+.filter-chip {
+  margin-top: 0.5rem;
+  padding: 0.3rem 0.65rem;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  background: $primary-light;
+  color: $primary-dark;
+  font-size: $font-size-xs;
   cursor: pointer;
 }
 
+.kpis--single {
+  grid-template-columns: minmax(220px, 320px);
+}
+
 .link-back {
   display: inline-flex;
   align-items: center;
diff --git a/services/api/adminApi.ts b/services/api/adminApi.ts
index da5641f..d058807 100644
--- a/services/api/adminApi.ts
+++ b/services/api/adminApi.ts
@@ -37,7 +37,25 @@ export interface AdminUser {
   last_name: string;
   email: string;
   created_at: string;
+  last_seen_at: string | null;
+  last_transaction_at: string | null;
   is_admin?: boolean;
+  tokens_used: number;
+}
+
+export interface AdminUserPage {
+  data: AdminUser[];
+  current_page: number;
+  last_page: number;
+  per_page: number;
+  total: number;
+}
+
+export interface AdminUsersParams {
+  page?: number;
+  perPage?: number;
+  search?: string;
+  joinedOn?: string;
 }
 
 export interface OutreachSummary {
@@ -89,11 +107,16 @@ const adminApi = {
     return response.data;
   },
 
-  async users(): Promise<AdminUser[]> {
+  async users(params: AdminUsersParams = {}): Promise<AdminUserPage> {
     const api = useApi();
-    const response = await api<{ data: AdminUser[] | { data: AdminUser[] } }>('/admin/users');
-    const payload = response.data as AdminUser[] | { data: AdminUser[] };
-    return Array.isArray(payload) ? payload : (payload?.data ?? []);
+    const query = new URLSearchParams();
+    if (params.page) query.set('page', String(params.page));
+    if (params.perPage) query.set('per_page', String(params.perPage));
+    if (params.search) query.set('search', params.search);
+    if (params.joinedOn) query.set('joined_on', params.joinedOn);
+    const qs = query.toString();
+    const response = await api<{ data: AdminUserPage }>(`/admin/users${qs ? `?${qs}` : ''}`);
+    return response.data;
   },
 
   async outreachHistory(): Promise<OutreachSummary[]> {
diff --git a/tests/services/adminApi.test.ts b/tests/services/adminApi.test.ts
new file mode 100644
index 0000000..2595eb9
--- /dev/null
+++ b/tests/services/adminApi.test.ts
@@ -0,0 +1,39 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { adminApi, type AdminUserPage } from '@/services/api/adminApi';
+
+const mockApi = vi.fn();
+
+vi.mock('#imports', () => ({
+  useApi: () => mockApi
+}));
+
+vi.stubGlobal('useApi', () => mockApi);
+
+describe('adminApi', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('lists a filtered page of users', async () => {
+    const page: AdminUserPage = {
+      data: [],
+      current_page: 2,
+      last_page: 3,
+      per_page: 15,
+      total: 31
+    };
+    mockApi.mockResolvedValueOnce({ success: true, message: 'ok', data: page });
+
+    const result = await adminApi.users({
+      page: 2,
+      perPage: 15,
+      search: 'ada',
+      joinedOn: '2026-08-10'
+    });
+
+    expect(mockApi).toHaveBeenCalledWith(
+      '/admin/users?page=2&per_page=15&search=ada&joined_on=2026-08-10'
+    );
+    expect(result).toEqual(page);
+  });
+});

From 5a1de66b57794c1e732cb8ed13c645f9da4a8f79 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Tue, 18 Aug 2026 22:12:13 +0100
Subject: [PATCH 3/3] fix(admin): Clean up user search timer

User search no longer leaves a delayed request behind when the admin page closes.
---
 pages/admin/index.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index 14ed9e1..c45b118 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -306,7 +306,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, h, defineAsyncComponent, type Component } from 'vue';
+import {
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  h,
+  defineAsyncComponent,
+  type Component
+} from 'vue';
 import { useRouter } from 'vue-router';
 import {
   LayoutDashboard,
@@ -606,6 +615,8 @@ watch(userQuery, () => {
   clearTimeout(searchTimer);
   searchTimer = setTimeout(() => loadUsers(), 300);
 });
+
+onBeforeUnmount(() => clearTimeout(searchTimer));
 </script>
 
 <style lang="scss" scoped>