From 79ca7fcb53990b8f7520f35a171f3a3c712a13b0 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Mon, 21 Sep 2026 11:23:58 +0100
Subject: [PATCH 1/2] feat(admin): Serve the admin console from the shared
 layer

The console was a single page in this app, so every metric, column and
drilldown it showed was hard-coded here and could not be reused. It now
comes from the shared admin layer, with Trakli supplying its own brand,
navigation, user columns and drilldown targets as configuration.

Users can send feedback and read the status of what they sent, and
admins triage it. Product analytics are collected once consent is given.
---
 .env.example                          |    2 +-
 assets/css/design-brand.css           |   36 +
 components/TAvatar.vue                |   11 +-
 components/admin/OutreachComposer.vue |  164 +---
 components/auth/AuthSocialLogin.vue   |    2 +-
 composables/useAuth.ts                |    5 +-
 composables/useFeedback.ts            |   31 +
 i18n/i18n.config.ts                   |    6 +
 i18n/locales/en.json                  |  147 ++--
 middleware/admin.ts                   |    6 +-
 middleware/auth.ts                    |    8 +-
 nuxt.config.ts                        |   48 +-
 package-lock.json                     |   73 +-
 package.json                          |    3 +
 pages/admin/index.vue                 | 1109 -------------------------
 pages/admin/outreach.vue              |   95 +++
 pages/budgets/index.vue               |   10 +-
 pages/feedback.vue                    |  219 +++++
 plugins/adminViewer.ts                |   14 +
 plugins/engagement.client.ts          |   24 +
 tests/assets/designBrand.test.ts      |   57 ++
 21 files changed, 751 insertions(+), 1319 deletions(-)
 create mode 100644 assets/css/design-brand.css
 create mode 100644 composables/useFeedback.ts
 create mode 100644 i18n/i18n.config.ts
 delete mode 100644 pages/admin/index.vue
 create mode 100644 pages/admin/outreach.vue
 create mode 100644 pages/feedback.vue
 create mode 100644 plugins/adminViewer.ts
 create mode 100644 plugins/engagement.client.ts
 create mode 100644 tests/assets/designBrand.test.ts

diff --git a/.env.example b/.env.example
index e10ac81..233a110 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,5 @@
 NUXT_PUBLIC_API_BASE_URL=http://localhost:8000/api/v1
+NUXT_PUBLIC_ENGAGEMENT_SITE_KEY=trakli-dashboard
 
 # Real-time chat streaming (Laravel Reverb). Leave REVERB_KEY empty to run on
 # polling only. Host/port are where the browser reaches the Reverb server (the
@@ -7,4 +8,3 @@ NUXT_PUBLIC_REVERB_KEY=your-reverb-app-key
 NUXT_PUBLIC_REVERB_HOST=localhost
 NUXT_PUBLIC_REVERB_PORT=6001
 NUXT_PUBLIC_REVERB_SCHEME=http
-
diff --git a/assets/css/design-brand.css b/assets/css/design-brand.css
new file mode 100644
index 0000000..bc321e9
--- /dev/null
+++ b/assets/css/design-brand.css
@@ -0,0 +1,36 @@
+/*
+ * Trakli's brand, expressed in the design system's brand contract.
+ *
+ * Only tokens listed in @whilesmart/design/tokens/brand.css belong here. Anything else the
+ * admin needs is derived from these, so one value changes the whole console.
+ *
+ * Every text pair here is held to 4.5:1 in both themes by a test.
+ */
+
+:root {
+  --ds-brand-primary-50: #f0f5f2;
+  --ds-brand-primary-100: #d8e8e1;
+  --ds-brand-primary-200: #b6d8c9;
+  --ds-brand-primary-300: #89c8ab;
+  --ds-brand-primary-400: #57c192;
+  --ds-brand-primary-500: #27a56c;
+  --ds-brand-primary-600: #129158;
+  --ds-brand-primary-700: #09864e;
+  --ds-brand-primary-800: #047844;
+  --ds-brand-primary-900: #02502d;
+
+  --ds-brand-secondary-50: #edf7f6;
+  --ds-brand-secondary-100: #d2efeb;
+  --ds-brand-secondary-200: #aae4dc;
+  --ds-brand-secondary-300: #78d9cc;
+  --ds-brand-secondary-400: #43d0bd;
+  --ds-brand-secondary-500: #24b29f;
+  --ds-brand-secondary-600: #189584;
+  --ds-brand-secondary-700: #0e8171;
+  --ds-brand-secondary-800: #07695c;
+  --ds-brand-secondary-900: #024b41;
+
+  --ds-brand-font-sans:
+    'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+}
diff --git a/components/TAvatar.vue b/components/TAvatar.vue
index 1a8789f..39c33d7 100644
--- a/components/TAvatar.vue
+++ b/components/TAvatar.vue
@@ -25,6 +25,10 @@
             <ShieldCheck class="menu-icon" />
             <span>{{ t('Admin') }}</span>
           </button>
+          <button class="menu-item" @click="goToFeedback">
+            <MessageSquare class="menu-icon" />
+            <span>{{ t('Send feedback') }}</span>
+          </button>
           <button class="menu-item menu-item--danger" @click="handleLogout">
             <LogOut class="menu-icon" />
             <span>{{ t('Logout') }}</span>
@@ -37,7 +41,7 @@
 
 <script setup>
 import { useRouter } from 'vue-router';
-import { Settings, LogOut, ShieldCheck } from 'lucide-vue-next';
+import { Settings, LogOut, ShieldCheck, MessageSquare } from 'lucide-vue-next';
 import { useAuth } from '@/composables/useAuth';
 import { useDropdown } from '@/composables/useDropdown';
 
@@ -76,6 +80,11 @@ const goToAdmin = () => {
   router.push('/admin');
 };
 
+const goToFeedback = () => {
+  close();
+  router.push('/feedback');
+};
+
 const handleLogout = async () => {
   close();
   await logout();
diff --git a/components/admin/OutreachComposer.vue b/components/admin/OutreachComposer.vue
index 96dd2b3..c0653d3 100644
--- a/components/admin/OutreachComposer.vue
+++ b/components/admin/OutreachComposer.vue
@@ -1,30 +1,19 @@
 <template>
   <div class="composer">
     <form class="composer__form" @submit.prevent="onSend">
-      <label class="field">
-        <span class="field__label">{{ t('Subject') }}</span>
-        <input v-model="form.subject" class="field__input" :placeholder="t('Subject')" required />
-      </label>
+      <DsInput v-model="form.subject" :label="t('Subject')" :placeholder="t('Subject')" required />
 
       <div class="field">
         <span class="field__label">{{ t('Message') }}</span>
         <div class="md-toolbar">
-          <button
-            v-for="f in formats"
-            :key="f.label"
-            type="button"
-            class="md-btn"
-            :title="t(f.label)"
-            @click="f.action()"
-          >
+          <DsIconButton v-for="f in formats" :key="f.label" :title="t(f.label)" @click="f.action()">
             <component :is="f.icon" class="md-btn__icon" />
-          </button>
+          </DsIconButton>
         </div>
-        <textarea
+        <DsTextarea
           ref="bodyRef"
           v-model="form.body"
-          class="field__textarea"
-          rows="8"
+          :rows="8"
           :placeholder="t('Write your message. Markdown is supported.')"
           required
         />
@@ -47,44 +36,30 @@
 
       <div class="tokens">
         <span class="tokens__hint">{{ t('Personalize with:') }}</span>
-        <button
-          v-for="token in tokens"
-          :key="token"
-          type="button"
-          class="token"
-          @click="insertToken(token)"
-        >
+        <DsChip v-for="token in tokens" :key="token" clickable @click="insertToken(token)">
           {{ token }}
-        </button>
+        </DsChip>
       </div>
 
       <div class="cta-row">
-        <label class="field">
-          <span class="field__label">{{ t('Button label') }}</span>
-          <input
-            v-model="form.cta_label"
-            class="field__input"
-            :placeholder="t('e.g. Open Trakli')"
-          />
-        </label>
-        <label class="field">
-          <span class="field__label">{{ t('Button link') }}</span>
-          <input v-model="form.cta_url" class="field__input" placeholder="https://" />
-        </label>
+        <DsInput
+          v-model="form.cta_label"
+          :label="t('Button label')"
+          :placeholder="t('e.g. Open Trakli')"
+        />
+        <DsInput
+          v-model="form.cta_url"
+          :label="t('Button link')"
+          placeholder="https://"
+          type="url"
+        />
       </div>
 
-      <label class="field">
-        <span class="field__label">{{ t('Audience') }}</span>
-        <select v-model="form.audience" class="field__input">
-          <option v-for="opt in audiences" :key="opt.value" :value="opt.value">
-            {{ opt.label }}
-          </option>
-        </select>
-      </label>
+      <DsDropdown v-model="form.audience" :options="audiences" :label="t('Audience')" />
 
       <div v-if="form.audience === 'specific'" class="field">
         <span class="field__label">{{ t('Choose recipients') }}</span>
-        <input v-model="userQuery" class="field__input" :placeholder="t('Search users')" />
+        <DsInput v-model="userQuery" :placeholder="t('Search users')" />
         <div class="recipients">
           <label v-for="u in filteredUsers" :key="u.id" class="recipient">
             <input v-model="form.user_ids" type="checkbox" :value="u.id" />
@@ -114,29 +89,16 @@
       <div v-if="confirming" class="confirm">
         <p class="confirm__text">{{ confirmText }}</p>
         <div class="confirm__actions">
-          <TButton
-            :text="t('Cancel')"
-            variant="outline"
-            size="small"
-            :full-width="false"
-            @click="confirming = false"
-          />
-          <TButton
-            :text="t('Send now')"
-            size="small"
-            :full-width="false"
-            :loading="sending"
-            @click="send"
-          />
+          <DsButton variant="secondary" size="sm" @click="confirming = false">{{
+            t('Cancel')
+          }}</DsButton>
+          <DsButton size="sm" :loading="sending" @click="send">{{ t('Send now') }}</DsButton>
         </div>
       </div>
       <div v-else class="composer__actions">
-        <TButton
-          type="submit"
-          :text="form.audience === 'test' ? t('Send test to me') : t('Send')"
-          :full-width="false"
-          :loading="sending"
-        />
+        <DsButton type="submit" :loading="sending">{{
+          form.audience === 'test' ? t('Send test to me') : t('Send')
+        }}</DsButton>
       </div>
     </form>
 
@@ -168,7 +130,14 @@ import {
   ListOrdered as ListOrderedIcon,
   Link2 as LinkIcon
 } from 'lucide-vue-next';
-import TButton from '@/components/TButton.vue';
+import {
+  DsButton,
+  DsChip,
+  DsDropdown,
+  DsIconButton,
+  DsInput,
+  DsTextarea
+} from '@whilesmart/design';
 import { adminApi, type OutreachAudience, type AdminUser } from '@/services/api/adminApi';
 
 const { t } = useI18n();
@@ -285,10 +254,10 @@ const insertToken = (token: string) => {
   form.body = `${form.body}${form.body.endsWith(' ') || !form.body ? '' : ' '}${token} `;
 };
 
-const bodyRef = ref<HTMLTextAreaElement | null>(null);
+const bodyRef = ref<{ textarea: HTMLTextAreaElement | null } | null>(null);
 
 const surround = (before: string, after: string) => {
-  const el = bodyRef.value;
+  const el = bodyRef.value?.textarea;
   if (!el) return;
   const start = el.selectionStart;
   const end = el.selectionEnd;
@@ -302,7 +271,7 @@ const surround = (before: string, after: string) => {
 };
 
 const prefixLines = (prefix: string) => {
-  const el = bodyRef.value;
+  const el = bodyRef.value?.textarea;
   if (!el) return;
   const lineStart = form.body.lastIndexOf('\n', el.selectionStart - 1) + 1;
   const block = form.body.slice(lineStart, el.selectionEnd);
@@ -396,30 +365,6 @@ const send = async () => {
   color: $text-secondary;
 }
 
-.field__input,
-.field__textarea {
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid $border-color;
-  border-radius: $radius-lg;
-  padding: 0.6rem 0.75rem;
-  font-size: $font-size-sm;
-  font-family: inherit;
-  color: $text-primary;
-  background: $bg-white;
-
-  &:focus {
-    outline: none;
-    border-color: $primary;
-  }
-}
-
-.field__textarea {
-  resize: vertical;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .md-toolbar {
   display: flex;
   gap: 0.15rem;
@@ -430,24 +375,6 @@ const send = async () => {
   background: $bg-light;
 }
 
-.md-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: $radius-md;
-  background: transparent;
-  color: $text-secondary;
-  cursor: pointer;
-
-  &:hover {
-    background: $bg-white;
-    color: $primary;
-  }
-}
-
 .md-btn__icon {
   width: 15px;
   height: 15px;
@@ -465,21 +392,6 @@ const send = async () => {
   color: $text-muted;
 }
 
-.token {
-  border: 1px solid $border-color;
-  background: $bg-light;
-  border-radius: $radius-md;
-  padding: 0.2rem 0.5rem;
-  font-size: $font-size-xs;
-  font-family: monospace;
-  color: $primary-dark;
-  cursor: pointer;
-
-  &:hover {
-    border-color: $primary;
-  }
-}
-
 .cta-row {
   display: grid;
   grid-template-columns: 1fr 1.3fr;
diff --git a/components/auth/AuthSocialLogin.vue b/components/auth/AuthSocialLogin.vue
index 8958039..251420f 100644
--- a/components/auth/AuthSocialLogin.vue
+++ b/components/auth/AuthSocialLogin.vue
@@ -26,7 +26,7 @@ const handleGoogleLogin = async () => {
       query: { state: newState }
     });
     if (response.data.url) {
-      window.location.href = response.data.url;
+      await navigateTo(response.data.url, { external: true });
     }
   } catch (error) {
     console.error('Failed to get Google redirect URL', error);
diff --git a/composables/useAuth.ts b/composables/useAuth.ts
index 04db564..1ad5ffc 100644
--- a/composables/useAuth.ts
+++ b/composables/useAuth.ts
@@ -31,10 +31,7 @@ export const useAuth = () => {
     }
   };
 
-  // Auto-sync auth state on client-side
-  if (typeof window !== 'undefined') {
-    syncAuthState();
-  }
+  syncAuthState();
 
   const login = async (credentials: { email: string; password: string }) => {
     try {
diff --git a/composables/useFeedback.ts b/composables/useFeedback.ts
new file mode 100644
index 0000000..6d7c5f5
--- /dev/null
+++ b/composables/useFeedback.ts
@@ -0,0 +1,31 @@
+export interface FeedbackItem {
+  id: number;
+  type: string;
+  status: string;
+  subject: string | null;
+  message: string;
+  created_at: string;
+}
+
+export function useFeedback() {
+  const api = useApi();
+
+  async function list(): Promise<FeedbackItem[]> {
+    const response = await api<{ data: FeedbackItem[] }>('/feedback');
+    return response.data;
+  }
+
+  async function send(payload: {
+    type: string;
+    subject?: string;
+    message: string;
+  }): Promise<FeedbackItem> {
+    const response = await api<{ data: FeedbackItem }>('/feedback', {
+      method: 'POST',
+      body: payload
+    });
+    return response.data;
+  }
+
+  return { list, send };
+}
diff --git a/i18n/i18n.config.ts b/i18n/i18n.config.ts
new file mode 100644
index 0000000..c51659d
--- /dev/null
+++ b/i18n/i18n.config.ts
@@ -0,0 +1,6 @@
+export default defineI18nConfig(() => ({
+  legacy: false,
+  // English is the source language: a key missing from another locale renders its English
+  // text instead of the key, and without a console warning for every string.
+  fallbackLocale: 'en'
+}));
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 05a02b5..25e7d6f 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,4 +1,8 @@
 {
+  "Dashboard": "Dashboard",
+  "Overview of your finances": "Overview of your finances",
+  "Set spending limits and track progress": "Set spending limits and track progress",
+  "Send feedback": "Send feedback",
   "Joined on {date}": "Joined on {date}",
   "Last seen": "Last seen",
   "Last transaction": "Last transaction",
@@ -182,7 +186,6 @@
   "No expense data available": "No expense data available",
   "Total": "Total",
   "View All": "View All",
-  "All time": "All time",
   "Last 3 months": "Last 3 months",
   "Profile": "Profile",
   "Change Password": "Change Password",
@@ -410,7 +413,6 @@
   "Income Sources Breakdown": "Income Sources Breakdown",
   "Total Income": "Total Income",
   "Enter your email": "Enter your email",
-  "Enter your password": "Enter your password",
   "Remember me": "Remember me",
   "Forgot Password?": "Forgot Password?",
   "Invalid credentials. Please try again.": "Invalid credentials. Please try again.",
@@ -442,10 +444,8 @@
   "{count} wallet": "{count} wallet | {count} wallets",
   "{count} categories": "{count} categories",
   "{count} transaction": "{count} transaction | {count} transactions",
-  "Go to dashboard": "Go to dashboard",
   "Skip for now": "Skip for now",
   "All Parties": "All Parties",
-  "All Wallets": "All Wallets",
   "All": "All",
   "Company": "Company",
   "No parties found. Create your first party to get started.": "No parties found. Create your first party to get started.",
@@ -459,8 +459,6 @@
   "per page": "per page",
   "Income Category": "Income Category",
   "Expense Category": "Expense Category",
-  "Income Categories": "Income Categories",
-  "Expense Categories": "Expense Categories",
   "carousel.ai.title": "Just ask",
   "carousel.ai.text": "Log expenses, build reports and get answers by chatting with your assistant in plain language.",
   "carousel.integrations.title": "Connect your bank",
@@ -543,12 +541,10 @@
   "Resend Code": "Resend Code",
   "Enter your first name": "Enter your first name",
   "Enter your last name": "Enter your last name",
-  "Already have an account?": "Already have an account?",
   "User Avatar": "User Avatar",
   "Filters": "Filters",
   "All Categories": "All Categories",
   "Search transactions...": "Search transactions...",
-  "No results found": "No results found",
   "No transactions match your current filters. Try adjusting or clearing them.": "No transactions match your current filters. Try adjusting or clearing them.",
   "Clear all filters": "Clear all filters",
   "Last Year": "Last Year",
@@ -663,7 +659,6 @@
   "Recurrence": "Recurrence",
   "Recurrence period": "Recurrence period",
   "Repeat every": "Repeat every",
-  "End date": "End date",
   "No end date": "No end date",
   "Remove recurrence": "Remove recurrence",
   "Update recurrence": "Update recurrence",
@@ -688,7 +683,6 @@
   "Supports CSV, PDF, PNG, JPG, TIFF, BMP": "Supports CSV, PDF, PNG, JPG, TIFF, BMP",
   "Document type": "Document type",
   "Auto-detect": "Auto-detect",
-  "Bank statement": "Bank statement",
   "Receipt": "Receipt",
   "Invoice": "Invoice",
   "Pay stub": "Pay stub",
@@ -717,7 +711,6 @@
   "{count} of these may be duplicates of existing transactions.": "{count} of these may be duplicates of existing transactions.",
   "{count} suggestions will be skipped.": "{count} suggestions will be skipped.",
   "Importing...": "Importing...",
-  "Cancel": "Cancel",
   "{count} transactions failed to import": "{count} transactions failed to import",
   "{count} imported, {failed} failed": "{count} imported, {failed} failed",
   "Import completed successfully.": "Import completed successfully.",
@@ -725,8 +718,6 @@
   "Existing transaction": "Existing transaction",
   "Skip this import": "Skip this import",
   "Import anyway": "Import anyway",
-  "Expense": "Expense",
-  "Income": "Income",
   "new": "new",
   "Some transactions reference items that don't exist yet:": "Some transactions reference items that don't exist yet:",
   "Create {count} new wallets": "Create {count} new wallets",
@@ -747,12 +738,7 @@
   "Budget Description": "Budget Description",
   "Spending Limit": "Spending Limit",
   "Budget Period": "Budget Period",
-  "Weekly": "Weekly",
-  "Monthly": "Monthly",
-  "Yearly": "Yearly",
   "Custom range": "Custom range",
-  "Start date": "Start date",
-  "End date": "End date",
   "Rollover unused amount": "Rollover unused amount",
   "Alert threshold": "Alert threshold",
   "Forecast alerts": "Forecast alerts",
@@ -776,7 +762,6 @@
   "Failed to create budget": "Failed to create budget",
   "Failed to update budget": "Failed to update budget",
   "All Budgets": "All Budgets",
-  "Active": "Active",
   "Archived": "Archived",
   "No budgets match the current filter.": "No budgets match the current filter.",
   "Add a wallet first to pick a currency.": "Add a wallet first to pick a currency.",
@@ -793,11 +778,9 @@
   "Projected": "Projected",
   "Rollover in": "Rollover in",
   "Changes saved": "Changes saved",
-  "Delete": "Delete",
-  "Edit": "Edit",
   "How budgets work": "How budgets work",
   "Targets narrow the scope": "Targets narrow the scope",
-  "Leave targets empty and the budget tracks every transaction in the period — good for a total spending cap. Pick categories, groups, or wallets to limit the scope to those.": "Leave targets empty and the budget tracks every transaction in the period — good for a total spending cap. Pick categories, groups, or wallets to limit the scope to those.",
+  "Leave targets empty and the budget tracks every transaction in the period, which suits a total spending cap. Pick categories, groups, or wallets to limit the scope to those.": "Leave targets empty and the budget tracks every transaction in the period, which suits a total spending cap. Pick categories, groups, or wallets to limit the scope to those.",
   "Refunds reduce your spending": "Refunds reduce your spending",
   "An income entry in a category the budget targets (e.g. a grocery refund) subtracts from the period total. You spend less, you have more left.": "An income entry in a category the budget targets (e.g. a grocery refund) subtracts from the period total. You spend less, you have more left.",
   "Reminders fire automatically": "Reminders fire automatically",
@@ -820,7 +803,7 @@
   "Search expenses...": "Search expenses...",
   "Loading expenses...": "Loading expenses...",
   "Leave blank to mark the refund without linking to a specific expense.": "Leave blank to mark the refund without linking to a specific expense.",
-  "When you record income, check \"This is a refund\" to subtract it from any budget covering the same categories, groups, or wallets. Unmarked income — salary, gifts — never changes a budget.": "When you record income, check \"This is a refund\" to subtract it from any budget covering the same categories, groups, or wallets. Unmarked income — salary, gifts — never changes a budget.",
+  "When you record income, check \"This is a refund\" to subtract it from any budget covering the same categories, groups, or wallets. Unmarked income (salary, gifts) never changes a budget.": "When you record income, check \"This is a refund\" to subtract it from any budget covering the same categories, groups, or wallets. Unmarked income (salary, gifts) never changes a budget.",
   "Transactions spreadsheet": "Transactions spreadsheet",
   "Search rows...": "Search rows...",
   "{count} rows": "{count} rows",
@@ -832,19 +815,10 @@
   "Overview": "Overview",
   "Reports": "Reports",
   "AI": "AI",
-  "Account": "Account",
-  "General": "General",
-  "Display": "Display",
   "Notifications": "Notifications",
   "Expand sidebar": "Expand sidebar",
   "Collapse sidebar": "Collapse sidebar",
-  "Import": "Import",
-  "Expenses": "Expenses",
   "Transfers": "Transfers",
-  "All": "All",
-  "Income": "Income",
-  "Expense": "Expense",
-  "Net": "Net",
   "Savings rate": "Savings rate",
   "Calendar": "Calendar",
   "Flow": "Flow",
@@ -859,7 +833,6 @@
   "No cumulative data.": "No cumulative data.",
   "Spending mix": "Spending mix",
   "Top expense categories share.": "Top expense categories share.",
-  "Spent": "Spent",
   "No expenses in this period.": "No expenses in this period.",
   "Daily spending": "Daily spending",
   "Each bar is a day in the period.": "Each bar is a day in the period.",
@@ -883,11 +856,9 @@
   "Concentration": "Concentration",
   "in {name}": "in {name}",
   "Highest day": "Highest day",
-  "This Month": "This Month",
   "Last 3 Months": "Last 3 Months",
   "Last 12 Months": "Last 12 Months",
   "Year to Date": "Year to Date",
-  "Custom": "Custom",
   "From": "From",
   "To": "To",
   "Apply": "Apply",
@@ -965,7 +936,6 @@
   "Healthy": "Healthy",
   "Building": "Building",
   "Watch": "Watch",
-  "Deficit": "Deficit",
   "Lean": "Lean",
   "Steady": "Steady",
   "Tight": "Tight",
@@ -983,7 +953,6 @@
   "Months your savings could cover this period's average spend.": "Months your savings could cover this period's average spend.",
   "{n} months": "{n} months",
   "Period overview · {n} transactions": "Period overview · {n} transactions",
-  "Total": "Total",
   "Avg / month": "Avg / month",
   "Peak month": "Peak month",
   "vs prior period": "vs prior period",
@@ -994,22 +963,16 @@
   "No transactions match.": "No transactions match.",
   "Show {n} more": "Show {n} more",
   "Spending on {date}": "Spending on {date}",
-  "Close": "Close",
   "Month in review": "Month in review",
   "No data for the latest month yet.": "No data for the latest month yet.",
   "Go to slide {n}": "Go to slide {n}",
-  "Next": "Next",
   "Done": "Done",
-  "Previous": "Previous",
-  "Pause": "Pause",
-  "Resume": "Resume",
   "Cash in": "Cash in",
   "Cash out": "Cash out",
   "{sign}{n}% vs same month last year": "{sign}{n}% vs same month last year",
   "First year of tracking": "First year of tracking",
   "Net for the month": "Net for the month",
   "Savings rate {n}%": "Savings rate {n}%",
-  "Top category": "Top category",
   "Biggest single expense": "Biggest single expense",
   "No expenses": "No expenses",
   "The recap": "The recap",
@@ -1021,7 +984,6 @@
   "AI insights": "AI insights",
   "Generated from the totals on this page. One call per period.": "Generated from the totals on this page. One call per period.",
   "Regenerate": "Regenerate",
-  "Dismiss": "Dismiss",
   "Thinking through your numbers…": "Thinking through your numbers…",
   "AI insights are offline right now. Your data is unchanged.": "AI insights are offline right now. Your data is unchanged.",
   "Try again": "Try again",
@@ -1029,7 +991,6 @@
   "Generate now": "Generate now",
   "Could not reach the AI service.": "Could not reach the AI service.",
   "Cached {time}": "Cached {time}",
-  "just now": "just now",
   "{n}m ago": "{n}m ago",
   "{n}h ago": "{n}h ago",
   "{n}d ago": "{n}d ago",
@@ -1044,7 +1005,6 @@
   "Savings": "Savings",
   "A stellar month.": "A stellar month.",
   "A healthy month.": "A healthy month.",
-  "A steady month.": "A steady month.",
   "You broke even.": "You broke even.",
   "A heavy month.": "A heavy month.",
   "You kept {n} of every $100 earned.": "You kept {n} of every $100 earned.",
@@ -1063,8 +1023,6 @@
   "{count} transactions logged.": "{count} transactions logged.",
   "Previous slide": "Previous slide",
   "Next slide": "Next slide",
-  "Prev": "Prev",
-  "Next": "Next",
   "Click sides, use arrow keys, or use the controls below.": "Click sides, use arrow keys, or use the controls below.",
   "Net trade": "Net trade",
   "Top earner": "Top earner",
@@ -1077,7 +1035,6 @@
   "Last 6 months": "Last 6 months",
   "Activity": "Activity",
   "Received": "Received",
-  "Net": "Net",
   "No activity in the last 6 months yet.": "No activity in the last 6 months yet.",
   "Recent transactions": "Recent transactions",
   "shown": "shown",
@@ -1091,14 +1048,12 @@
   "Across {n} {cur} wallet(s)": "Across {n} {cur} wallet(s)",
   "{n} in {cur}": "{n} in {cur}",
   "No {cur} wallets yet": "No {cur} wallets yet",
-  "Select a wallet": "Select a wallet",
   "Pick a wallet on the left to see its balance, activity, and recent transactions.": "Pick a wallet on the left to see its balance, activity, and recent transactions.",
   "Search wallets": "Search wallets",
   "No wallets match your search.": "No wallets match your search.",
   "No transactions yet on this wallet.": "No transactions yet on this wallet.",
   "Set as default": "Set as default",
   "Bank account": "Bank account",
-  "Cash": "Cash",
   "Credit card": "Credit card",
   "Debit card": "Debit card",
   "Digital wallet": "Digital wallet",
@@ -1122,13 +1077,10 @@
   "Show {name}": "Show {name}",
   "Add a few transactions and I'll start spotting trends for you.": "Add a few transactions and I'll start spotting trends for you.",
   "Ask about this": "Ask about this",
-  "Cashflow": "Cashflow",
   "Last few months": "Last few months",
   "Spent this month": "Spent this month",
   "What did I spend the most on this month?": "What did I spend the most on this month?",
-  "Savings rate": "Savings rate",
   "How can I save more this month?": "How can I save more this month?",
-  "Top category": "Top category",
   "Break down my {category} spending.": "Break down my {category} spending.",
   "Income vs last month": "Income vs last month",
   "Why did my income change versus last month?": "Why did my income change versus last month?",
@@ -1216,7 +1168,6 @@
   "Edit holding": "Edit holding",
   "Total value": "Total value",
   "Total net worth now": "Total net worth now",
-  "Cash": "Cash",
   "No holdings yet. Add Bitcoin, a stock, or any asset you own.": "No holdings yet. Add Bitcoin, a stock, or any asset you own.",
   "Live": "Live",
   "Price source": "Price source",
@@ -1229,7 +1180,6 @@
   "Admin console": "Admin console",
   "How Trakli is doing": "How Trakli is doing",
   "Back to app": "Back to app",
-  "Overview": "Overview",
   "Outreach": "Outreach",
   "Discounts": "Discounts",
   "Actions": "Actions",
@@ -1286,7 +1236,6 @@
   "Compose a new outreach.": "Compose a new outreach.",
   "Back to users": "Back to users",
   "Country": "Country",
-  "Last transaction": "Last transaction",
   "Could not load this user.": "Could not load this user.",
   "Pick at least one recipient.": "Pick at least one recipient.",
   "Ask the assistant": "Ask the assistant",
@@ -1312,7 +1261,6 @@
   "Bitcoin, Apple, Rental flat...": "Bitcoin, Apple, Rental flat...",
   "Symbol": "Symbol",
   "Quantity": "Quantity",
-  "Currency": "Currency",
   "Price per unit": "Price per unit",
   "Name is required.": "Name is required.",
   "Enter a quantity greater than 0.": "Enter a quantity greater than 0.",
@@ -1357,5 +1305,86 @@
   "Import from a file": "Import from a file",
   "A statement, a spreadsheet, or a photo of a receipt.": "A statement, a spreadsheet, or a photo of a receipt.",
   "Connect {name}": "Connect {name}",
-  "I'll add transactions myself": "I'll add transactions myself"
+  "I'll add transactions myself": "I'll add transactions myself",
+  "A current view of this product and its users.": "A current view of this product and its users.",
+  "Administration": "Administration",
+  "All clients": "All clients",
+  "All statuses": "All statuses",
+  "Anonymous": "Anonymous",
+  "Assistant token consumption for the selected period.": "Assistant token consumption for the selected period.",
+  "Available tokens": "Available tokens",
+  "Check the admin service and try again.": "Check the admin service and try again.",
+  "Check the subject and message, then try again.": "Check the subject and message, then try again.",
+  "Clear filters": "Clear filters",
+  "Clear search": "Clear search",
+  "Configure the automatic emails this product sends.": "Configure the automatic emails this product sends.",
+  "Could not load email templates": "Could not load email templates",
+  "Could not load feedback": "Could not load feedback",
+  "Could not load the overview": "Could not load the overview",
+  "Could not load this user": "Could not load this user",
+  "Could not load users": "Could not load users",
+  "Could not load {name}": "Could not load {name}",
+  "Could not render the preview": "Could not render the preview",
+  "Create and target promotions from configured offer providers.": "Create and target promotions from configured offer providers.",
+  "Email preview": "Email preview",
+  "Email templates": "Email templates",
+  "Enabled": "Enabled",
+  "Everything this product measures, grouped by what it measures.": "Everything this product measures, grouped by what it measures.",
+  "Feedback": "Feedback",
+  "Last {days} days": "Last {days} days",
+  "Loading email templates": "Loading email templates",
+  "Loading feedback": "Loading feedback",
+  "Loading the overview": "Loading the overview",
+  "Loading this user": "Loading this user",
+  "Loading {name}": "Loading {name}",
+  "Measurement sections": "Measurement sections",
+  "Measurements": "Measurements",
+  "Messages your users send appear here, newest first.": "Messages your users send appear here, newest first.",
+  "No AI usage measurements": "No AI usage measurements",
+  "No data for this period.": "No data for this period.",
+  "No demographic measurements": "No demographic measurements",
+  "No email templates are registered": "No email templates are registered",
+  "No feedback matches this filter": "No feedback matches this filter",
+  "No feedback yet": "No feedback yet",
+  "No measurements are registered": "No measurements are registered",
+  "No offer provider is configured": "No offer provider is configured",
+  "No user matches {query}": "No user matches {query}",
+  "No users found": "No users found",
+  "Numbers": "Numbers",
+  "Off": "Off",
+  "Overview views": "Overview views",
+  "Pagination": "Pagination",
+  "People registered with this product.": "People registered with this product.",
+  "People who register appear here.": "People who register appear here.",
+  "Period": "Period",
+  "Read and triage messages from your users.": "Read and triage messages from your users.",
+  "Record": "Record",
+  "Refresh": "Refresh",
+  "Register a demographics measurement provider to populate this page.": "Register a demographics measurement provider to populate this page.",
+  "Register a measurement provider and this page fills itself in.": "Register a measurement provider and this page fills itself in.",
+  "Register an AI usage measurement provider to populate this page.": "Register an AI usage measurement provider to populate this page.",
+  "Register an offer provider and its promotions become editable here, so a discount is never hard-coded into the product.": "Register an offer provider and its promotions become editable here, so a discount is never hard-coded into the product.",
+  "Rendering the preview…": "Rendering the preview…",
+  "Save template": "Save template",
+  "Saving…": "Saving…",
+  "Search feedback": "Search feedback",
+  "Sections": "Sections",
+  "Status": "Status",
+  "Subject": "Subject",
+  "Template views": "Template views",
+  "Templates the application registers become editable here, so the wording is never hard-coded.": "Templates the application registers become editable here, so the wording is never hard-coded.",
+  "The admin service did not answer. Nothing has changed.": "The admin service did not answer. Nothing has changed.",
+  "The measurement service did not answer. Nothing has changed.": "The measurement service did not answer. Nothing has changed.",
+  "Try a shorter search, or part of an email address.": "Try a shorter search, or part of an email address.",
+  "User details": "User details",
+  "What this product knows about this person.": "What this product knows about this person.",
+  "Widen the filter to see everything received.": "Widen the filter to see everything received.",
+  "{days} days": "{days} days",
+  "{total} users": "{total} users",
+  "Loading outreach": "Loading outreach",
+  "Could not load outreach": "Could not load outreach",
+  "No outreach sent yet": "No outreach sent yet",
+  "Write to your users from here and every send is listed, so you can see what was said and when.": "Write to your users from here and every send is listed, so you can see what was said and when.",
+  "{groups} are measured for the whole product, so they are not shown while one client is selected.": "{groups} are measured for the whole product, so they are not shown while one client is selected.",
+  "{start} to {end}": "{start} to {end}"
 }
diff --git a/middleware/admin.ts b/middleware/admin.ts
index 89f3a08..2ef2e63 100644
--- a/middleware/admin.ts
+++ b/middleware/admin.ts
@@ -1,7 +1,9 @@
 export default defineNuxtRouteMiddleware(async () => {
-  const { user, isAuthenticated, fetchUser } = useAuth();
+  const { user, token, isAuthenticated, fetchUser, syncAuthState } = useAuth();
 
-  if (!isAuthenticated.value) {
+  syncAuthState();
+
+  if (!token.value) {
     return navigateTo('/login');
   }
 
diff --git a/middleware/auth.ts b/middleware/auth.ts
index 746774b..6a95089 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -2,7 +2,13 @@ import { CONFIGURATION_KEYS } from '~/utils/configurationKeys';
 import { resolveLandingPath } from '~/composables/useLanding';
 
 export default defineNuxtRouteMiddleware(async (to, _from) => {
-  const { isAuthenticated } = useAuth();
+  const { token, isAuthenticated, fetchUser, syncAuthState } = useAuth();
+
+  syncAuthState();
+
+  if (token.value && !isAuthenticated.value) {
+    await fetchUser();
+  }
 
   if (!isAuthenticated.value) {
     return navigateTo('/login');
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ade232b..ca54dc5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,13 +9,10 @@ export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
   devtools: { enabled: false },
   ssr: true,
-  // Plugin client UI ships as Nuxt layers consumed the same way as the shared
-  // ui-kit, e.g. extends: ['github:trakli/ui-kit', 'github:trakli/<plugin>-ui'].
-  // A layer registers a component for a slot key via
-  // useExtensionSlots().registerComponent(); DescriptorRenderer resolves it
-  // when a descriptor sets `ui.component`. Host adoption of the layers is
-  // deferred, so the list is empty for now.
-  extends: [],
+  // A layer registers a component against a slot key with
+  // useExtensionSlots().registerComponent(), and DescriptorRenderer resolves it when a
+  // descriptor sets `ui.component`. That is how plugin UI reaches the app.
+  extends: ['@whilesmart/eloquent-admin-ui'],
   routeRules: {
     '/ai-insights': { redirect: '/assistant' }
   },
@@ -30,6 +27,7 @@ export default defineNuxtConfig({
       { code: 'it', name: 'Italiano', file: 'it.json' }
     ],
     defaultLocale: 'en',
+    vueI18n: './i18n/i18n.config.ts',
     lazy: true,
     langDir: 'locales',
     strategy: 'no_prefix',
@@ -41,7 +39,41 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
+      adminApiPrefix: '/admin',
+      adminI18n: true,
+      adminNavigation: [
+        {
+          label: 'Outreach',
+          to: '/admin/outreach',
+          icon: 'solar:plain-3-bold-duotone',
+          area: 'slate'
+        }
+      ],
+      adminUserColumns: [
+        { label: 'Name', key: 'name' },
+        { label: 'Email', key: 'email' },
+        { label: 'Last seen', key: 'last_seen_at', type: 'datetime' },
+        { label: 'Last transaction', key: 'last_transaction_at', type: 'datetime' },
+        { label: 'Joined', key: 'created_at', type: 'date' },
+        { label: 'AI tokens', key: 'tokens_used', type: 'number' }
+      ],
+      adminMetricDrilldowns: {
+        new_users_series: '/admin/users?joined_on={date}'
+      },
+      adminBrand: {
+        name: 'Trakli',
+        logoSrc: '/logo.svg',
+        logoMarkSrc: '/logo-mark.svg',
+        tag: 'Admin',
+        tagArea: 'green'
+      },
+      adminSkin: {
+        name: 'trakli',
+        railClass: '',
+        contentClass: ''
+      },
       apiBase: process.env.NUXT_PUBLIC_API_BASE_URL || 'https://api.dev.trakli.app/api/v1',
+      engagementSiteKey: process.env.NUXT_PUBLIC_ENGAGEMENT_SITE_KEY || '',
       reverbKey: process.env.NUXT_PUBLIC_REVERB_KEY || '',
       reverbHost: process.env.NUXT_PUBLIC_REVERB_HOST || 'localhost',
       reverbPort: process.env.NUXT_PUBLIC_REVERB_PORT || '6001',
@@ -59,6 +91,8 @@ export default defineNuxtConfig({
     }
   },
   css: [
+    // After the design layer's own stylesheet: it redeclares the tokens Trakli owns.
+    '@/assets/css/design-brand.css',
     '@/assets/scss/_variables.scss',
     '@/assets/scss/base.scss',
     '@/assets/scss/_surfaces.scss',
diff --git a/package-lock.json b/package-lock.json
index 871eedb..8e3cc99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,21 @@
 {
   "name": "nuxt-app",
-  "version": "1.1.2",
+  "version": "2.0.0-beta.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nuxt-app",
-      "version": "1.1.2",
+      "version": "2.0.0-beta.2",
       "hasInstallScript": true,
       "dependencies": {
         "@dicebear/collection": "^9.2.4",
         "@dicebear/core": "^9.2.4",
         "@heroicons/vue": "^2.2.0",
         "@nuxtjs/i18n": "^10.2.1",
+        "@whilesmart/design": "^0.2.0",
+        "@whilesmart/eloquent-admin-ui": "^0.1.0",
+        "@whilesmart/engagement": "^0.1.0",
         "apexcharts": "^5.3.3",
         "country-flag-icons": "^1.5.19",
         "laravel-echo": "^2.3.7",
@@ -1109,6 +1112,12 @@
         "@dicebear/core": "^9.0.0"
       }
     },
+    "node_modules/@dicebear/styles": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/@dicebear/styles/-/styles-10.6.0.tgz",
+      "integrity": "sha512-KhxbEVI+z8TaenX58+ZhIRFBt7adggu/F+8g6ZYLu43H2/lgLuWA3Kg8vHBrCVWdfTTTt1p2wUhQomIkkypTuQ==",
+      "license": "SEE LICENSE IN LICENSE.md"
+    },
     "node_modules/@dicebear/thumbs": {
       "version": "9.2.4",
       "resolved": "https://registry.npmjs.org/@dicebear/thumbs/-/thumbs-9.2.4.tgz",
@@ -1973,7 +1982,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
       "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@iconify/utils": {
@@ -1988,6 +1996,21 @@
         "import-meta-resolve": "^4.2.0"
       }
     },
+    "node_modules/@iconify/vue": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.2.tgz",
+      "integrity": "sha512-Xo8th16qDH2+o0LBxmqaosJheTU6v8QeDbpP40txrqz9dusBUAf/voOAC+v9WT4DvDZx8CWiA4dq8LMB/rasyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/@internationalized/date": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.1.tgz",
@@ -6584,6 +6607,50 @@
         }
       }
     },
+    "node_modules/@whilesmart/design": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@whilesmart/design/-/design-0.2.0.tgz",
+      "integrity": "sha512-Y8FOFmwUa8GMT1CEOxGsVEu0nqPnTCJNB/vFwSHBQe7z7Ijbgr8x5F6SGITprlcF6ia3OLhUqOjgQH7io98aCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dicebear/core": "^10.7.0",
+        "@dicebear/styles": "^10.6.0",
+        "@iconify/vue": "^5.0.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0",
+        "vue-router": "^4.0.0"
+      }
+    },
+    "node_modules/@whilesmart/design/node_modules/@dicebear/core": {
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/@dicebear/core/-/core-10.7.0.tgz",
+      "integrity": "sha512-JUOzKOd8RUByJJo8ZL+C7YE/pvEsWewfpbWUmR8OIQZWv/PvUQHnohdevySC3icyyxe6EIU/8B/rQgA42us1QA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=22.0.0"
+      },
+      "funding": {
+        "url": "https://www.dicebear.com/support/"
+      }
+    },
+    "node_modules/@whilesmart/eloquent-admin-ui": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@whilesmart/eloquent-admin-ui/-/eloquent-admin-ui-0.1.0.tgz",
+      "integrity": "sha512-5Jv/3ncU/LRGWG1+EEJmZ+GZuzkauvfLA9zP6ve/nIMnGX9WIZR6habfXph/2kS2aMhaMOS2GvdaxZwgeqaqGQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@whilesmart/design": "^0.2.0",
+        "nuxt": "^3.12.0",
+        "vue": "^3.4.0"
+      }
+    },
+    "node_modules/@whilesmart/engagement": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@whilesmart/engagement/-/engagement-0.1.0.tgz",
+      "integrity": "sha512-NADjXoKK1hYOMXQgbsh89Fmqa82x6wOnadqyK9rcN+VKthvg01FmD9qCL/qt10sz5RHwlvAAh/Tkb+vf9AlrSA==",
+      "license": "MIT"
+    },
     "node_modules/@yr/monotone-cubic-spline": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
diff --git a/package.json b/package.json
index b2af8ae..b6b5d9b 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,9 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@whilesmart/eloquent-admin-ui": "^0.1.0",
+    "@whilesmart/engagement": "^0.1.0",
+    "@whilesmart/design": "^0.2.0",
     "@dicebear/collection": "^9.2.4",
     "@dicebear/core": "^9.2.4",
     "@heroicons/vue": "^2.2.0",
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
deleted file mode 100644
index c45b118..0000000
--- a/pages/admin/index.vue
+++ /dev/null
@@ -1,1109 +0,0 @@
-<template>
-  <div class="console">
-    <aside class="rail">
-      <div class="rail__brand">
-        <Logo size="small" />
-        <span class="rail__badge"><ShieldCheck class="rail__badge-icon" />{{ t('Admin') }}</span>
-      </div>
-
-      <nav class="rail__nav">
-        <button
-          v-for="section in sections"
-          :key="section.id"
-          class="nav-item"
-          :class="{ 'nav-item--active': activeSection === section.id }"
-          @click="activeSection = section.id"
-        >
-          <component :is="section.icon" class="nav-item__icon" />
-          <span>{{ section.label }}</span>
-        </button>
-      </nav>
-
-      <div class="rail__foot">
-        <div v-if="user" class="rail__user">
-          <span class="rail__user-name">{{ user.first_name }} {{ user.last_name }}</span>
-          <span class="rail__user-email">{{ user.email }}</span>
-        </div>
-        <button class="rail__exit" @click="exit">
-          <ArrowLeft class="rail__exit-icon" />
-          <span>{{ t('Back to app') }}</span>
-        </button>
-      </div>
-    </aside>
-
-    <main class="panel">
-      <section v-if="activeSection === 'overview'">
-        <header class="panel__head">
-          <div>
-            <h1 class="panel__title">{{ t('Overview') }}</h1>
-            <p class="panel__sub">{{ heroSummary }}</p>
-          </div>
-          <div class="range">
-            <button
-              v-for="opt in rangeOptions"
-              :key="opt.days"
-              class="range-pill"
-              :class="{ 'range-pill--active': days === opt.days }"
-              @click="setDays(opt.days)"
-            >
-              {{ t(opt.label) }}
-            </button>
-          </div>
-        </header>
-
-        <div v-if="loading" class="state">{{ t('Loading...') }}</div>
-        <p v-else-if="metricsError" class="state state--note">{{ metricsError }}</p>
-
-        <template v-else>
-          <div class="kpis">
-            <div v-for="kpi in kpis" :key="kpi.key" class="kpi" :class="`tone-${kpi.tone}`">
-              <span class="kpi__icon"><component :is="kpi.icon" /></span>
-              <span class="kpi__value">{{ kpi.value }}</span>
-              <span class="kpi__label">{{ kpi.label }}</span>
-              <span v-if="kpi.sub" class="kpi__sub">{{ kpi.sub }}</span>
-            </div>
-          </div>
-
-          <div class="grid-2">
-            <TCard>
-              <template #header>{{ t('New users') }}</template>
-              <ClientOnly>
-                <ApexChart
-                  type="area"
-                  height="220"
-                  :options="areaOptions(usersChart.categories, chartColors.primary)"
-                  :series="[{ name: t('New users'), data: usersChart.data }]"
-                  @data-point-selection="showSignupsForPoint"
-                />
-              </ClientOnly>
-            </TCard>
-            <TCard>
-              <template #header>{{ t('Transactions') }}</template>
-              <ClientOnly>
-                <ApexChart
-                  type="area"
-                  height="220"
-                  :options="areaOptions(txChart.categories, chartColors.income)"
-                  :series="[{ name: t('Transactions'), data: txChart.data }]"
-                />
-              </ClientOnly>
-            </TCard>
-          </div>
-
-          <div class="grid-2">
-            <TCard v-for="rank in rankings" :key="rank.key">
-              <template #header>{{ rank.label }}</template>
-              <ol v-if="rank.rows.length" class="ranking">
-                <li v-for="(row, k) in rank.rows" :key="k" class="ranking-row">
-                  <span class="ranking-rank">{{ k + 1 }}</span>
-                  <span class="ranking-label">{{ row.label }}</span>
-                  <span class="ranking-bar"
-                    ><span class="ranking-fill" :style="{ width: rowWidth(rank.rows, row.value) }"
-                  /></span>
-                  <span class="ranking-value">{{ row.value }}</span>
-                </li>
-              </ol>
-              <p v-else class="state">{{ t('No data yet') }}</p>
-            </TCard>
-          </div>
-        </template>
-      </section>
-
-      <section v-else-if="activeSection === 'demographics'">
-        <header class="panel__head">
-          <div>
-            <h1 class="panel__title">{{ t('Demographics') }}</h1>
-            <p class="panel__sub">{{ t('Where your users are and what they prefer.') }}</p>
-          </div>
-        </header>
-        <div v-if="loading" class="state">{{ t('Loading...') }}</div>
-        <div v-else class="grid-2">
-          <TCard v-for="metric in demographicsMetrics" :key="metric.key">
-            <template #header>{{ metric.label }}</template>
-            <ol v-if="metric.rows.length" class="ranking">
-              <li v-for="(row, k) in metric.rows" :key="k" class="ranking-row">
-                <span class="ranking-rank">{{ k + 1 }}</span>
-                <span class="ranking-label">{{ row.label }}</span>
-                <span class="ranking-bar"
-                  ><span class="ranking-fill" :style="{ width: rowWidth(metric.rows, row.value) }"
-                /></span>
-                <span class="ranking-value">{{ row.value }}</span>
-              </li>
-            </ol>
-            <p v-else class="state">{{ t('No data yet') }}</p>
-          </TCard>
-        </div>
-      </section>
-
-      <section v-else-if="activeSection === 'users'">
-        <UserDetail v-if="selectedUserId" :user-id="selectedUserId" @back="selectedUserId = null" />
-        <template v-else>
-          <header class="panel__head">
-            <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>
-            <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>
-
-      <section v-else-if="activeSection === 'outreach'">
-        <header class="panel__head">
-          <div>
-            <h1 class="panel__title">{{ t('User outreach') }}</h1>
-            <p class="panel__sub">
-              {{ composing ? t('Compose a new outreach.') : t('Emails you have sent to users.') }}
-            </p>
-          </div>
-          <TButton
-            v-if="!composing"
-            :text="t('New outreach')"
-            :full-width="false"
-            @click="composing = true"
-          />
-          <button v-else class="link-back" @click="composing = false">
-            <ArrowLeft class="link-back__icon" />{{ t('Back') }}
-          </button>
-        </header>
-
-        <TCard v-if="composing">
-          <OutreachComposer @sent="onOutreachSent" />
-        </TCard>
-        <TCard v-else>
-          <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>
-
-      <section v-else-if="activeSection === 'discounts'">
-        <SectionPlaceholder
-          :icon="IconDiscount"
-          :title="t('Discounts and offers')"
-          :body="
-            t(
-              'Create and target offers from pluggable offer providers, so promotions are configured, never hard-coded.'
-            )
-          "
-        />
-      </section>
-
-      <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,
-  onBeforeUnmount,
-  watch,
-  h,
-  defineAsyncComponent,
-  type Component
-} from 'vue';
-import { useRouter } from 'vue-router';
-import {
-  LayoutDashboard,
-  Globe,
-  Users,
-  UserPlus,
-  CalendarDays,
-  Activity,
-  Send,
-  Tag,
-  Cpu,
-  Search,
-  ShieldCheck,
-  ArrowLeft,
-  MoreHorizontal,
-  Eye,
-  Gift
-} from 'lucide-vue-next';
-import IconDiscount from '~icons/solar/tag-price-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 {
-  adminApi,
-  type EngagementReport,
-  type Metric,
-  type AdminUser,
-  type AdminUserPage,
-  type OutreachSummary
-} from '@/services/api/adminApi';
-
-definePageMeta({
-  layout: 'admin',
-  middleware: ['auth', 'admin']
-});
-
-const { t } = useI18n();
-const router = useRouter();
-const { user } = useAuth();
-
-const ApexChart = defineAsyncComponent(() => import('vue3-apexcharts'));
-const chartColors = { primary: '#047844', income: '#16a34a' };
-
-const SectionPlaceholder = (props: { icon: Component; title: string; body: string }) =>
-  h('div', { class: 'placeholder' }, [
-    h(props.icon, { class: 'placeholder__icon' }),
-    h('h2', { class: 'placeholder__title' }, props.title),
-    h('p', { class: 'placeholder__body' }, props.body),
-    h('span', { class: 'placeholder__tag' }, t('Coming soon'))
-  ]);
-
-const sections = [
-  { id: 'overview', label: t('Overview'), icon: LayoutDashboard },
-  { id: 'demographics', label: t('Demographics'), icon: Globe },
-  { id: 'users', label: t('Users'), icon: Users },
-  { id: 'outreach', label: t('Outreach'), icon: Send },
-  { id: 'discounts', label: t('Discounts'), icon: Tag },
-  { id: 'usage', label: t('AI usage'), icon: Cpu }
-];
-const activeSection = ref('overview');
-const userQuery = ref('');
-const selectedUserId = ref<number | null>(null);
-const composing = ref(false);
-const outreaches = ref<OutreachSummary[]>([]);
-
-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' },
-  { days: 90, label: '90 days' }
-];
-
-const metricByKey = (key: string): Metric | undefined =>
-  (report.value?.groups || []).flatMap((g) => g.metrics).find((m) => m.key === key);
-
-const fmt = (n: number | null | undefined): string => new Intl.NumberFormat().format(n ?? 0);
-
-const heroSummary = computed(() =>
-  t('{users} users · {tx} transactions', {
-    users: metricByKey('total_users')?.value ?? 0,
-    tx: metricByKey('total_transactions')?.value ?? 0
-  })
-);
-
-const kpis = computed(() => [
-  {
-    key: 'total_users',
-    label: t('Total users'),
-    value: fmt(metricByKey('total_users')?.value),
-    icon: Users,
-    tone: 'primary'
-  },
-  {
-    key: 'today',
-    label: t('Registered today'),
-    value: fmt(metricByKey('registrations_today')?.value),
-    icon: UserPlus,
-    tone: 'income'
-  },
-  {
-    key: 'month',
-    label: t('Registered this month'),
-    value: fmt(metricByKey('registrations_month')?.value),
-    icon: CalendarDays,
-    tone: 'info'
-  },
-  {
-    key: 'avg',
-    label: t('Avg transactions / user'),
-    value: fmt(metricByKey('avg_transactions_per_user')?.value),
-    icon: Activity,
-    tone: 'accent'
-  },
-  {
-    key: 'tokens',
-    label: t('AI tokens used'),
-    value: fmt(metricByKey('ai_tokens_used')?.value),
-    icon: Cpu,
-    tone: 'primary'
-  }
-]);
-
-const chartFor = (key: string) => {
-  const series = metricByKey(key)?.series || [];
-  return { data: series.map((p) => p.value), categories: series.map((p) => p.date) };
-};
-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']
-    .map((k) => metricByKey(k))
-    .filter((m): m is Metric => !!m)
-);
-
-const demographicsMetrics = computed(
-  () => (report.value?.groups || []).find((g) => g.key === 'demographics')?.metrics ?? []
-);
-
-const areaOptions = (categories: string[], color: string) => ({
-  chart: { toolbar: { show: false }, zoom: { enabled: false }, fontFamily: 'inherit' },
-  dataLabels: { enabled: false },
-  stroke: { curve: 'smooth', width: 2 },
-  fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.35, opacityTo: 0.02 } },
-  colors: [color],
-  xaxis: {
-    categories,
-    labels: { show: false },
-    axisTicks: { show: false },
-    axisBorder: { show: false },
-    tooltip: { enabled: false }
-  },
-  yaxis: { labels: { show: false } },
-  grid: { borderColor: 'rgba(15,23,42,0.06)', padding: { left: 8, right: 8 } },
-  tooltip: { x: { show: true } }
-});
-
-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] = await Promise.allSettled([
-    adminApi.metrics({ days: days.value }),
-    loadUsers()
-  ]);
-
-  if (metricsResult.status === 'fulfilled') {
-    report.value = metricsResult.value;
-  } else {
-    report.value = null;
-    metricsError.value = t('Metrics are not available yet.');
-  }
-
-  loading.value = false;
-};
-
-const setDays = (value: number) => {
-  if (days.value === value) return;
-  days.value = value;
-  load();
-};
-
-const loadOutreaches = async () => {
-  try {
-    outreaches.value = await adminApi.outreachHistory();
-  } catch {
-    outreaches.value = [];
-  }
-};
-
-const onOutreachSent = () => {
-  composing.value = false;
-  loadOutreaches();
-};
-
-const rowWidth = (rows: { value: number }[], value: number): string => {
-  const max = Math.max(1, ...rows.map((r) => r.value));
-  return `${Math.max(4, Math.round((value / max) * 100))}%`;
-};
-
-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);
-});
-
-onBeforeUnmount(() => clearTimeout(searchTimer));
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/_variables.scss' as *;
-
-.console {
-  display: grid;
-  grid-template-columns: 256px 1fr;
-  min-height: 100vh;
-
-  @media (max-width: $breakpoint-md) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.rail {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  padding: 1.25rem 1rem;
-  background: $bg-white;
-  border-right: 1px solid $border-color;
-  position: sticky;
-  top: 0;
-  height: 100vh;
-
-  @media (max-width: $breakpoint-md) {
-    position: static;
-    height: auto;
-    border-right: none;
-    border-bottom: 1px solid $border-color;
-    gap: 1rem;
-  }
-}
-
-.rail__brand {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.25rem 0.5rem;
-}
-
-.rail__badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.15rem 0.5rem;
-  border-radius: $radius-md;
-  background: $primary-light;
-  color: $primary-dark;
-  font-size: $font-size-xs;
-  font-weight: $font-semibold;
-}
-
-.rail__badge-icon {
-  width: 13px;
-  height: 13px;
-}
-
-.rail__nav {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-
-  @media (max-width: $breakpoint-md) {
-    flex-direction: row;
-    overflow-x: auto;
-  }
-}
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 0.7rem;
-  padding: 0.6rem 0.75rem;
-  border: none;
-  background: transparent;
-  border-radius: $radius-lg;
-  color: $text-secondary;
-  font-size: $font-size-sm;
-  font-weight: $font-medium;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: $transition-fast;
-
-  &:hover {
-    background: $bg-light;
-  }
-
-  &--active {
-    background: $primary-light;
-    color: $primary-dark;
-    font-weight: $font-semibold;
-  }
-}
-
-.nav-item__icon {
-  width: 18px;
-  height: 18px;
-}
-
-.rail__foot {
-  margin-top: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-
-  @media (max-width: $breakpoint-md) {
-    margin-top: 0;
-  }
-}
-
-.rail__user {
-  display: flex;
-  flex-direction: column;
-  padding: 0 0.5rem;
-}
-
-.rail__user-name {
-  font-size: $font-size-sm;
-  font-weight: $font-semibold;
-  color: $text-primary;
-}
-
-.rail__user-email {
-  font-size: $font-size-xs;
-  color: $text-muted;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.rail__exit {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.55rem 0.75rem;
-  border: 1px solid $border-color;
-  background: $bg-white;
-  border-radius: $radius-lg;
-  color: $text-primary;
-  font-size: $font-size-sm;
-  font-weight: $font-medium;
-  cursor: pointer;
-
-  &:hover {
-    background: $bg-light;
-  }
-}
-
-.rail__exit-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.panel {
-  padding: 1.75rem 2rem;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-
-  @media (max-width: $breakpoint-sm) {
-    padding: 1.25rem;
-  }
-}
-
-.panel__head {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-wrap: wrap;
-  margin-bottom: 1.25rem;
-}
-
-.panel__title {
-  margin: 0;
-  font-size: 1.4rem;
-  font-weight: $font-bold;
-  color: $text-primary;
-}
-
-.panel__sub {
-  margin: 0.25rem 0 0;
-  font-size: $font-size-sm;
-  color: $text-muted;
-}
-
-.range {
-  display: flex;
-  gap: 0.4rem;
-}
-
-.range-pill {
-  border: 1px solid $border-color;
-  background: $bg-white;
-  border-radius: $radius-lg;
-  padding: 0.4rem 0.8rem;
-  font-size: $font-size-sm;
-  color: $text-secondary;
-  cursor: pointer;
-  transition: $transition-fast;
-
-  &--active {
-    background: $primary;
-    color: $text-inverse;
-    border-color: $primary;
-  }
-}
-
-.state {
-  padding: 2rem;
-  text-align: center;
-  color: $text-muted;
-
-  &--note {
-    background: $bg-light;
-    border-radius: $radius-xl;
-  }
-}
-
-.pagination-info {
-  font-variant-numeric: tabular-nums;
-}
-
-.kpis {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 1rem;
-  margin-bottom: 1.25rem;
-}
-
-.kpi {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto auto;
-  column-gap: 0.75rem;
-  align-items: center;
-  padding: 1rem 1.1rem;
-  background: $bg-white;
-  border: 1px solid $border-color;
-  border-radius: $radius-xl;
-  box-shadow: $elevation-1;
-}
-
-.kpi__icon {
-  grid-row: 1 / 3;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  border-radius: $radius-lg;
-  background: $bg-light;
-  color: var(--tone, #{$primary});
-
-  svg {
-    width: 19px;
-    height: 19px;
-  }
-}
-
-.kpi__value {
-  font-size: 1.45rem;
-  font-weight: $font-bold;
-  color: $text-primary;
-  line-height: 1.1;
-}
-
-.kpi__label {
-  font-size: $font-size-xs;
-  color: $text-muted;
-}
-
-.kpi__sub {
-  grid-column: 2;
-  font-size: 0.65rem;
-  font-weight: $font-semibold;
-  color: var(--tone, #{$primary});
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.kpi.tone-primary {
-  --tone: #{$primary};
-}
-.kpi.tone-income {
-  --tone: #{$income};
-}
-.kpi.tone-info {
-  --tone: #{$info};
-}
-.kpi.tone-accent {
-  --tone: #{$accent-color};
-}
-
-.grid-2 {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-
-.ranking {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.55rem;
-}
-
-.ranking-row {
-  display: grid;
-  grid-template-columns: 1.25rem minmax(90px, 1fr) 2fr auto;
-  align-items: center;
-  gap: 0.6rem;
-  font-size: $font-size-sm;
-}
-
-.ranking-rank {
-  color: $text-muted;
-  font-weight: $font-semibold;
-  font-size: $font-size-xs;
-}
-
-.ranking-label {
-  color: $text-primary;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ranking-bar {
-  height: 7px;
-  border-radius: 4px;
-  background: $bg-gray;
-  overflow: hidden;
-}
-
-.ranking-fill {
-  display: block;
-  height: 100%;
-  border-radius: 4px;
-  background: $primary;
-}
-
-.ranking-value {
-  font-weight: $font-semibold;
-  color: $text-primary;
-  justify-self: end;
-}
-
-.search {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.4rem 0.7rem;
-  background: $bg-white;
-  border: 1px solid $border-color;
-  border-radius: $radius-lg;
-
-  &:focus-within {
-    border-color: $primary;
-  }
-}
-
-.search__icon {
-  width: 15px;
-  height: 15px;
-  color: $text-muted;
-}
-
-.search__input {
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: $font-size-sm;
-  color: $text-primary;
-  width: 200px;
-  max-width: 100%;
-}
-
-.row-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border: 1px solid transparent;
-  border-radius: $radius-md;
-  background: transparent;
-  color: $text-secondary;
-  cursor: pointer;
-
-  &:hover {
-    background: $bg-light;
-    border-color: $border-color;
-  }
-
-  svg {
-    width: 18px;
-    height: 18px;
-  }
-}
-
-.item-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.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;
-  gap: 0.35rem;
-  border: none;
-  background: transparent;
-  color: $text-secondary;
-  font-size: $font-size-sm;
-  font-weight: $font-medium;
-  cursor: pointer;
-
-  &:hover {
-    color: $primary;
-  }
-}
-
-.link-back__icon {
-  width: 16px;
-  height: 16px;
-}
-
-.placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 0.6rem;
-  padding: 3.5rem 1.5rem;
-  background: $bg-white;
-  border: 1px solid $border-color;
-  border-radius: $radius-xl;
-}
-
-.placeholder__icon {
-  width: 64px;
-  height: 64px;
-  color: $primary;
-}
-
-.placeholder__title {
-  margin: 0;
-  font-size: 1.2rem;
-  font-weight: $font-bold;
-  color: $text-primary;
-}
-
-.placeholder__body {
-  margin: 0;
-  max-width: 460px;
-  color: $text-muted;
-  font-size: $font-size-sm;
-  line-height: 1.5;
-}
-
-.placeholder__tag {
-  margin-top: 0.5rem;
-  padding: 0.3rem 0.8rem;
-  border-radius: $radius-md;
-  background: $primary-light;
-  color: $primary-dark;
-  font-size: $font-size-xs;
-  font-weight: $font-semibold;
-}
-</style>
diff --git a/pages/admin/outreach.vue b/pages/admin/outreach.vue
new file mode 100644
index 0000000..49937c2
--- /dev/null
+++ b/pages/admin/outreach.vue
@@ -0,0 +1,95 @@
+<template>
+  <AdminPage
+    :title="t('User outreach')"
+    :description="composing ? t('Compose a new outreach.') : t('Emails you have sent to users.')"
+  >
+    <template #actions>
+      <DsButton v-if="!composing" @click="composing = true">{{ t('New outreach') }}</DsButton>
+      <DsButton v-else variant="secondary" @click="composing = false">{{ t('Back') }}</DsButton>
+    </template>
+
+    <DsCard v-if="composing" padding="md">
+      <OutreachComposer @sent="onSent" />
+    </DsCard>
+
+    <template v-else>
+      <DsStatePanel v-if="pending" state="loading" :title="t('Loading outreach')" />
+      <DsStatePanel
+        v-else-if="failed"
+        state="error"
+        :title="t('Could not load outreach')"
+        :description="t('The admin service did not answer. Nothing has changed.')"
+        :action-label="t('Try again')"
+        @action="load"
+      />
+      <DsStatePanel
+        v-else-if="!items.length"
+        art="mail"
+        area="slate"
+        :title="t('No outreach sent yet')"
+        :description="
+          t(
+            'Write to your users from here and every send is listed, so you can see what was said and when.'
+          )
+        "
+        :action-label="t('New outreach')"
+        @action="composing = true"
+      />
+      <DsDataTable v-else :columns="columns" :rows="items" :empty-text="t('No outreaches yet')">
+        <template #cell-subject="{ value }">
+          <strong>{{ value }}</strong>
+        </template>
+        <template #cell-created_at="{ value }">
+          {{ value ? new Date(String(value)).toLocaleDateString() : '' }}
+        </template>
+      </DsDataTable>
+    </template>
+  </AdminPage>
+</template>
+
+<script setup lang="ts">
+import {
+  DsButton,
+  DsCard,
+  DsDataTable,
+  DsStatePanel,
+  type DataTableColumn
+} from '@whilesmart/design';
+import OutreachComposer from '@/components/admin/OutreachComposer.vue';
+import { adminApi, type OutreachSummary } from '@/services/api/adminApi';
+
+definePageMeta({ layout: 'admin', middleware: ['auth', 'admin'] });
+
+const { t } = useI18n();
+
+const composing = ref(false);
+const pending = ref(true);
+const failed = ref(false);
+const items = ref<OutreachSummary[]>([]);
+
+const columns = computed<DataTableColumn[]>(() => [
+  { key: 'subject', label: t('Subject') },
+  { key: 'audience', label: t('Audience') },
+  { key: 'sent', label: t('Sent') },
+  { key: 'created_at', label: t('Date') }
+]);
+
+async function load() {
+  pending.value = true;
+  failed.value = false;
+  try {
+    items.value = await adminApi.outreachHistory();
+  } catch {
+    failed.value = true;
+  } finally {
+    pending.value = false;
+  }
+}
+
+function onSent() {
+  composing.value = false;
+  load();
+}
+
+onMounted(load);
+</script>
diff --git a/pages/budgets/index.vue b/pages/budgets/index.vue
index 5f03c0d..5aa01e2 100644
--- a/pages/budgets/index.vue
+++ b/pages/budgets/index.vue
@@ -31,7 +31,7 @@
             <p>
               {{
                 t(
-                  'Leave targets empty and the budget tracks every transaction in the period — good for a total spending cap. Pick categories, groups, or wallets to limit the scope to those.'
+                  'Leave targets empty and the budget tracks every transaction in the period, which suits a total spending cap. Pick categories, groups, or wallets to limit the scope to those.'
                 )
               }}
             </p>
@@ -42,7 +42,7 @@
             <p>
               {{
                 t(
-                  'When you record income, check "This is a refund" to subtract it from any budget covering the same categories, groups, or wallets. Unmarked income — salary, gifts — never changes a budget.'
+                  'When you record income, check "This is a refund" to subtract it from any budget covering the same categories, groups, or wallets. Unmarked income (salary, gifts) never changes a budget.'
                 )
               }}
             </p>
@@ -286,9 +286,9 @@ async function handleDelete(budget: Budget) {
 }
 
 onMounted(async () => {
-  // Kick off the budgets fetch synchronously so `isLoading` flips before
-  // the first render — otherwise `loadRelated` suspends and the page
-  // briefly renders the empty state on a hard refresh.
+  // Kick off the budgets fetch synchronously so `isLoading` flips before the first
+  // render. Otherwise `loadRelated` suspends and a hard refresh briefly shows the
+  // empty state.
   const budgetsPromise = loadBudgets();
   await loadRelated();
   await budgetsPromise;
diff --git a/pages/feedback.vue b/pages/feedback.vue
new file mode 100644
index 0000000..3288cc8
--- /dev/null
+++ b/pages/feedback.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="feedback-page">
+    <header class="hero surface surface--brand">
+      <div>
+        <span class="eyebrow">{{ t('Feedback') }}</span>
+        <h1>{{ t('Help shape Trakli') }}</h1>
+        <p>
+          {{ t('Report a problem, ask a question, or tell us what would make Trakli better.') }}
+        </p>
+      </div>
+      <MessageSquare class="hero__icon" />
+    </header>
+    <div class="feedback-grid">
+      <TCard>
+        <template #header>{{ t('Send feedback') }}</template>
+        <form class="form" @submit.prevent="submit">
+          <label
+            ><span>{{ t('Type') }}</span
+            ><select v-model="form.type">
+              <option value="general">{{ t('General') }}</option>
+              <option value="bug">{{ t('Bug') }}</option>
+              <option value="feature">{{ t('Feature request') }}</option>
+              <option value="question">{{ t('Question') }}</option>
+            </select></label
+          >
+          <label
+            ><span>{{ t('Subject') }}</span
+            ><input v-model="form.subject" maxlength="200"
+          /></label>
+          <label
+            ><span>{{ t('Message') }}</span
+            ><textarea v-model="form.message" required rows="7" maxlength="5000" />
+          </label>
+          <TButton :text="t('Send feedback')" :loading="sending" />
+        </form>
+      </TCard>
+      <TCard>
+        <template #header>{{ t('Your feedback') }}</template>
+        <ComponentLoader
+          :is-loading="loading"
+          :error="error"
+          :has-data="items.length > 0"
+          :on-retry="load"
+        >
+          <template #empty
+            ><div class="empty">
+              <MessageSquare />
+              <h2>{{ t('Nothing sent yet') }}</h2>
+              <p>{{ t('Your messages and their status will appear here.') }}</p>
+            </div></template
+          >
+          <div class="history">
+            <article v-for="item in items" :key="item.id">
+              <span class="status">{{ item.status.replaceAll('_', ' ') }}</span>
+              <h3 v-if="item.subject">{{ item.subject }}</h3>
+              <p>{{ item.message }}</p>
+              <small>{{ new Date(item.created_at).toLocaleString() }}</small>
+            </article>
+          </div>
+        </ComponentLoader>
+      </TCard>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue';
+import { MessageSquare } from 'lucide-vue-next';
+import TCard from '@/components/TCard.vue';
+import TButton from '@/components/TButton.vue';
+import ComponentLoader from '@/components/ComponentLoader.vue';
+import { useFeedback, type FeedbackItem } from '@/composables/useFeedback';
+
+definePageMeta({ middleware: ['auth'] });
+const { t } = useI18n();
+const { showSuccess, showError } = useNotifications();
+const feedback = useFeedback();
+const form = reactive({ type: 'general', subject: '', message: '' });
+const items = ref<FeedbackItem[]>([]);
+const loading = ref(true);
+const sending = ref(false);
+const error = ref<unknown>(null);
+
+async function load() {
+  loading.value = true;
+  error.value = null;
+  try {
+    items.value = await feedback.list();
+  } catch (cause) {
+    error.value = cause;
+  } finally {
+    loading.value = false;
+  }
+}
+async function submit() {
+  sending.value = true;
+  try {
+    const item = await feedback.send(form);
+    items.value.unshift(item);
+    form.subject = '';
+    form.message = '';
+    showSuccess(t('Thanks, your feedback reached the team.'));
+  } catch {
+    showError(t('Could not send your feedback.'));
+  } finally {
+    sending.value = false;
+  }
+}
+onMounted(load);
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/scss/_variables.scss' as *;
+.feedback-page {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: $spacing-6;
+}
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $spacing-6;
+  padding: $spacing-6;
+  border-radius: $radius-xl;
+  box-shadow: var(--elevation-1);
+}
+.hero h1 {
+  margin: $spacing-1 0;
+  color: var(--surface-ink);
+}
+.hero p {
+  margin: 0;
+  color: $text-secondary;
+}
+.hero__icon {
+  width: 64px;
+  height: 64px;
+  color: var(--surface-deep);
+}
+.feedback-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: $spacing-5;
+}
+.form,
+.form label {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-2;
+}
+.form {
+  gap: $spacing-4;
+}
+.form label span {
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+}
+.form input,
+.form textarea,
+.form select {
+  padding: 0.7rem 0.8rem;
+  color: $text-primary;
+  background: $input-bg;
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  font: inherit;
+}
+.history {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+}
+.history article {
+  padding: $spacing-3;
+  background: $bg-light;
+  border-radius: $radius-lg;
+}
+.history h3,
+.history p {
+  margin: $spacing-2 0;
+}
+.history p {
+  color: $text-secondary;
+  white-space: pre-wrap;
+}
+.history small {
+  color: $text-muted;
+}
+.status {
+  padding: 0.2rem 0.55rem;
+  color: $primary-dark;
+  background: $primary-light;
+  border-radius: 999px;
+  font-size: $font-size-xs;
+  text-transform: capitalize;
+}
+.empty {
+  padding: $spacing-6;
+  color: $text-muted;
+  text-align: center;
+}
+.empty svg {
+  color: $primary;
+}
+@media (max-width: $breakpoint-md) {
+  .feedback-page {
+    padding: $spacing-4;
+  }
+  .feedback-grid {
+    grid-template-columns: 1fr;
+  }
+  .hero__icon {
+    width: 42px;
+    height: 42px;
+  }
+}
+</style>
diff --git a/plugins/adminViewer.ts b/plugins/adminViewer.ts
new file mode 100644
index 0000000..74da6ed
--- /dev/null
+++ b/plugins/adminViewer.ts
@@ -0,0 +1,14 @@
+export default defineNuxtPlugin(() => {
+  const { user } = useAuth();
+  const viewer = useState<{ name: string; email: string } | null>('admin.viewer', () => null);
+
+  watchEffect(() => {
+    const current = user.value;
+    viewer.value = current
+      ? {
+          name: [current.first_name, current.last_name].filter(Boolean).join(' ') || current.email,
+          email: current.email
+        }
+      : null;
+  });
+});
diff --git a/plugins/engagement.client.ts b/plugins/engagement.client.ts
new file mode 100644
index 0000000..7fddb44
--- /dev/null
+++ b/plugins/engagement.client.ts
@@ -0,0 +1,24 @@
+import { createEngagementClient } from '@whilesmart/engagement';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const config = useRuntimeConfig();
+  const siteKey = config.public.engagementSiteKey as string;
+
+  if (!siteKey) return;
+
+  const engagement = createEngagementClient({
+    endpoint: `${config.public.apiBase}/engagement/events`,
+    siteKey
+  });
+
+  const router = useRouter();
+  let currentPage = useRoute().fullPath;
+  router.afterEach((to) => {
+    if (to.fullPath === currentPage) return;
+    currentPage = to.fullPath;
+    engagement.page();
+  });
+  nuxtApp.hook('app:beforeUnmount', () => engagement.destroy());
+
+  return { provide: { engagement } };
+});
diff --git a/tests/assets/designBrand.test.ts b/tests/assets/designBrand.test.ts
new file mode 100644
index 0000000..c33d67e
--- /dev/null
+++ b/tests/assets/designBrand.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const source = readFileSync(resolve(__dirname, '../../assets/css/design-brand.css'), 'utf8');
+
+const tokens = Object.fromEntries(
+  [...source.matchAll(/--([\w-]+):\s*(#[0-9a-f]{6})/gi)].map((match) => [match[1], match[2]])
+);
+
+// The neutral steps the design system pairs brand colour against. Kept here rather than
+// imported so a change in either repository fails this test instead of passing silently.
+const neutral = {
+  white: '#ffffff',
+  '700': '#334155',
+  '800': '#1e293b',
+  '900': '#0f172a'
+};
+
+const channel = (value: number) =>
+  value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+
+const luminance = (hex: string) =>
+  hex
+    .slice(1)
+    .match(/.{2}/g)!
+    .map((part) => channel(parseInt(part, 16) / 255))
+    .reduce((sum, value, index) => sum + [0.2126, 0.7152, 0.0722][index] * value, 0);
+
+const contrast = (foreground: string, background: string) => {
+  const [high, low] = [luminance(foreground), luminance(background)].sort((a, b) => b - a);
+  return (high + 0.05) / (low + 0.05);
+};
+
+const pairs: Array<[string, string, string]> = [
+  ['table heading on its fill', 'ds-brand-primary-900', 'ds-brand-primary-50'],
+  ['brand text on its soft fill', 'ds-brand-primary-800', 'ds-brand-primary-50']
+];
+
+describe('design brand tokens', () => {
+  it.each(pairs)('%s clears 4.5:1', (_name, foreground, background) => {
+    expect(tokens[foreground]).toBeDefined();
+    expect(tokens[background]).toBeDefined();
+    expect(contrast(tokens[foreground], tokens[background])).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it('keeps inverse text legible on the primary fill', () => {
+    expect(contrast(neutral.white, tokens['ds-brand-primary-800'])).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it.each(Object.entries(neutral).filter(([step]) => step !== 'white'))(
+    'keeps the dark-mode brand ink legible on neutral %s',
+    (_step, background) => {
+      expect(contrast(tokens['ds-brand-primary-400'], background)).toBeGreaterThanOrEqual(4.5);
+    }
+  );
+});

From 7a64aaccb9ac32c96c4b1a03348f9224cafbdb84 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Mon, 21 Sep 2026 18:08:27 +0100
Subject: [PATCH 2/2] fix(feedback): Make the send button submit the form

The only control in the feedback form rendered as an ordinary button, so
clicking it did nothing and no message could be sent. The page now also
imports what it uses rather than relying on an ambient global, so it can
be mounted outside the framework.

Analytics teardown unregisters the navigation hook it registered, and
the two route guards no longer repeat work the composable already does
on creation.
---
 .env.example                       |  2 ++
 middleware/admin.ts                |  4 +---
 middleware/auth.ts                 |  4 +---
 pages/feedback.vue                 |  3 ++-
 plugins/engagement.client.ts       |  7 +++++--
 tests/pages/feedbackSubmit.test.ts | 21 +++++++++++++++++++++
 6 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 tests/pages/feedbackSubmit.test.ts

diff --git a/.env.example b/.env.example
index 233a110..31b29dd 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,6 @@
 NUXT_PUBLIC_API_BASE_URL=http://localhost:8000/api/v1
+# Product analytics. Leave empty to collect nothing: the engagement plugin
+# stops before starting when no site key is set.
 NUXT_PUBLIC_ENGAGEMENT_SITE_KEY=trakli-dashboard
 
 # Real-time chat streaming (Laravel Reverb). Leave REVERB_KEY empty to run on
diff --git a/middleware/admin.ts b/middleware/admin.ts
index 2ef2e63..56812de 100644
--- a/middleware/admin.ts
+++ b/middleware/admin.ts
@@ -1,7 +1,5 @@
 export default defineNuxtRouteMiddleware(async () => {
-  const { user, token, isAuthenticated, fetchUser, syncAuthState } = useAuth();
-
-  syncAuthState();
+  const { user, token, isAuthenticated, fetchUser } = useAuth();
 
   if (!token.value) {
     return navigateTo('/login');
diff --git a/middleware/auth.ts b/middleware/auth.ts
index 6a95089..9e62fe2 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -2,9 +2,7 @@ import { CONFIGURATION_KEYS } from '~/utils/configurationKeys';
 import { resolveLandingPath } from '~/composables/useLanding';
 
 export default defineNuxtRouteMiddleware(async (to, _from) => {
-  const { token, isAuthenticated, fetchUser, syncAuthState } = useAuth();
-
-  syncAuthState();
+  const { token, isAuthenticated, fetchUser } = useAuth();
 
   if (token.value && !isAuthenticated.value) {
     await fetchUser();
diff --git a/pages/feedback.vue b/pages/feedback.vue
index 3288cc8..7b13fdd 100644
--- a/pages/feedback.vue
+++ b/pages/feedback.vue
@@ -31,7 +31,7 @@
             ><span>{{ t('Message') }}</span
             ><textarea v-model="form.message" required rows="7" maxlength="5000" />
           </label>
-          <TButton :text="t('Send feedback')" :loading="sending" />
+          <TButton type="submit" :text="t('Send feedback')" :loading="sending" />
         </form>
       </TCard>
       <TCard>
@@ -70,6 +70,7 @@ import TCard from '@/components/TCard.vue';
 import TButton from '@/components/TButton.vue';
 import ComponentLoader from '@/components/ComponentLoader.vue';
 import { useFeedback, type FeedbackItem } from '@/composables/useFeedback';
+import { useNotifications } from '@/composables/useNotifications';
 
 definePageMeta({ middleware: ['auth'] });
 const { t } = useI18n();
diff --git a/plugins/engagement.client.ts b/plugins/engagement.client.ts
index 7fddb44..01605bf 100644
--- a/plugins/engagement.client.ts
+++ b/plugins/engagement.client.ts
@@ -13,12 +13,15 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   const router = useRouter();
   let currentPage = useRoute().fullPath;
-  router.afterEach((to) => {
+  const stopTracking = router.afterEach((to) => {
     if (to.fullPath === currentPage) return;
     currentPage = to.fullPath;
     engagement.page();
   });
-  nuxtApp.hook('app:beforeUnmount', () => engagement.destroy());
+  nuxtApp.hook('app:beforeUnmount', () => {
+    stopTracking();
+    engagement.destroy();
+  });
 
   return { provide: { engagement } };
 });
diff --git a/tests/pages/feedbackSubmit.test.ts b/tests/pages/feedbackSubmit.test.ts
new file mode 100644
index 0000000..9085308
--- /dev/null
+++ b/tests/pages/feedbackSubmit.test.ts
@@ -0,0 +1,21 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FeedbackPage from '@/pages/feedback.vue';
+
+vi.stubGlobal('definePageMeta', vi.fn());
+
+vi.mock('@/composables/useFeedback', () => ({
+  useFeedback: () => ({ list: async () => [], send: async () => ({}) })
+}));
+
+vi.mock('~/composables/useNotifications', () => ({
+  useNotifications: () => ({ showSuccess: vi.fn(), showError: vi.fn() })
+}));
+
+describe('feedback page', () => {
+  it('has a button that actually submits the form', () => {
+    const wrapper = mount(FeedbackPage);
+
+    expect(wrapper.find('form button').attributes('type')).toBe('submit');
+  });
+});