From a6820c7db8d2388fbc33b3a8b2d456bdf8ae1c34 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sat, 27 Jun 2026 18:23:37 +0100
Subject: [PATCH] feat: Add admin console UI with outreach and onboarding
 updates

Add an admin area, reached from the avatar menu when the signed-in user
is an administrator. It has its own left-rail shell with an overview
dashboard (KPIs, charts and rankings), demographics, a searchable user
table whose rows open a detailed profile, and outreach: a history of
sent emails plus a composer with a formatted (markdown) body, a header
image, attachments, audience or specific-user targeting, and a live
preview of the rendered email.

Refresh the marketing surfaces to match the assistant-first direction:
the login slides now lead with the assistant and bank integrations, the
onboarding flow gets a brand-washed background and illustrated steps with
a country step, and the emoji and stripe cards in onboarding and the
learning modal are replaced with vector icons and clean surfaces.
---
 assets/scss/_onboarding.scss               |   36 +-
 components/EmptyState.vue                  |  143 ++-
 components/TAvatar.vue                     |   11 +-
 components/admin/OutreachComposer.vue      |  690 ++++++++++++++
 components/admin/UserDetail.vue            |  242 +++++
 components/auth/AuthCarousel.vue           |  118 ++-
 components/modals/LearningModal.vue        |  133 ++-
 components/onboarding/OnboardingWizard.vue |   41 +-
 i18n/locales/en.json                       |   98 +-
 layouts/admin.vue                          |   29 +
 layouts/onboarding.vue                     |    5 +-
 middleware/admin.ts                        |   15 +
 pages/admin/index.vue                      | 1007 ++++++++++++++++++++
 pages/login.vue                            |    5 +-
 pages/onboarding.vue                       |   72 +-
 services/api/adminApi.ts                   |  157 +++
 tests/components/TAvatar.test.ts           |   42 +
 tests/utils/countries.test.ts              |   17 +
 utils/configurationKeys.ts                 |    1 +
 utils/countries.ts                         |   27 +
 20 files changed, 2713 insertions(+), 176 deletions(-)
 create mode 100644 components/admin/OutreachComposer.vue
 create mode 100644 components/admin/UserDetail.vue
 create mode 100644 layouts/admin.vue
 create mode 100644 middleware/admin.ts
 create mode 100644 pages/admin/index.vue
 create mode 100644 services/api/adminApi.ts
 create mode 100644 tests/components/TAvatar.test.ts
 create mode 100644 tests/utils/countries.test.ts
 create mode 100644 utils/countries.ts

diff --git a/assets/scss/_onboarding.scss b/assets/scss/_onboarding.scss
index 9553a08..c386dc1 100644
--- a/assets/scss/_onboarding.scss
+++ b/assets/scss/_onboarding.scss
@@ -96,18 +96,25 @@
 }
 
 .step-icon {
-  width: 60px;
-  height: 60px;
-  background: $primary-light;
-  border-radius: 50%;
+  width: 88px;
+  height: 88px;
+  border-radius: 26px;
+  background:
+    radial-gradient(120% 120% at 30% 18%, $primary-light, transparent 72%),
+    linear-gradient(
+      135deg,
+      rgba(var(--color-primary-rgb), 0.16),
+      rgba(var(--color-primary-rgb), 0.04)
+    );
+  box-shadow: $elevation-1;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
 
   svg {
-    width: 28px;
-    height: 28px;
+    width: 46px;
+    height: 46px;
     color: $primary;
   }
 }
@@ -178,10 +185,12 @@
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
+  box-shadow: 0 6px 16px -6px rgba(var(--color-primary-rgb), 0.55);
 
   &:hover:not(:disabled) {
     background: $primary-hover;
     transform: translateY(-1px);
+    box-shadow: 0 10px 22px -8px rgba(var(--color-primary-rgb), 0.6);
   }
 
   &:disabled {
@@ -218,18 +227,21 @@
 }
 
 .completion-icon {
-  width: 80px;
-  height: 80px;
-  background: linear-gradient(135deg, $success 0%, $primary-dark 100%);
-  border-radius: 50%;
+  width: 96px;
+  height: 96px;
+  background:
+    radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, 0.28), transparent 60%),
+    linear-gradient(135deg, $success 0%, $primary-dark 100%);
+  border-radius: 30px;
+  box-shadow: $elevation-2;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem auto;
 
   svg {
-    width: 40px;
-    height: 40px;
+    width: 48px;
+    height: 48px;
     color: $text-inverse;
   }
 }
diff --git a/components/EmptyState.vue b/components/EmptyState.vue
index 1ec39fc..4e33b43 100644
--- a/components/EmptyState.vue
+++ b/components/EmptyState.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="empty-state">
-    <img class="empty-icon" src="/box.svg" :alt="t('Empty Icon')" />
+    <div class="empty-art">
+      <component :is="resolvedIcon" class="empty-illustration" />
+    </div>
     <h2 class="empty-title">
       {{
         t("You don't have any {item} at the moment.", {
@@ -23,18 +25,27 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
 import { PlusIcon } from '@heroicons/vue/24/outline';
+import IconBox from '~icons/solar/box-minimalistic-bold-duotone';
 
 const { t } = useI18n();
 
-defineProps({
+const props = defineProps({
   pageName: {
     type: String,
     required: true
+  },
+  // A Solar (or any) icon component to theme the empty state for its content.
+  icon: {
+    type: [Object, Function],
+    default: null
   }
 });
 
 defineEmits(['create']);
+
+const resolvedIcon = computed(() => props.icon || IconBox);
 </script>
 
 <style scoped lang="scss">
@@ -46,133 +57,91 @@ defineEmits(['create']);
   align-items: center;
   justify-content: center;
   text-align: center;
-  margin-top: 3rem;
-  margin-bottom: 0;
-  padding: 2rem 1rem;
+  padding: 3rem 1rem;
   min-height: 50vh;
 
-  @media (max-width: $breakpoint-md) {
-    margin-top: 2rem;
-    padding: 1.5rem 1rem;
+  @media (max-width: $breakpoint-sm) {
+    padding: 2rem 0.5rem;
     min-height: 40vh;
   }
+}
+
+.empty-art {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 140px;
+  height: 140px;
+  margin-bottom: 1.5rem;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 25%, $primary-light, $bg-light 70%);
 
   @media (max-width: $breakpoint-sm) {
-    margin-top: 1rem;
-    padding: 1rem 0.5rem;
-    min-height: 35vh;
+    width: 112px;
+    height: 112px;
+    margin-bottom: 1rem;
   }
 }
 
-.empty-icon {
-  width: 220px;
-  height: 220px;
-  margin-bottom: 1rem;
-
-  @media (max-width: $breakpoint-md) {
-    width: 180px;
-    height: 180px;
-    margin-bottom: 0.75rem;
-  }
+.empty-illustration {
+  width: 72px;
+  height: 72px;
+  color: $primary;
 
   @media (max-width: $breakpoint-sm) {
-    width: 140px;
-    height: 140px;
-    margin-bottom: 0.5rem;
+    width: 58px;
+    height: 58px;
   }
 }
 
 .empty-title {
   color: $text-primary;
-  font-size: 2.2rem;
-  font-weight: 700;
-  margin: 1rem 2rem;
-  line-height: 1.2;
-
-  @media (max-width: $breakpoint-md) {
-    font-size: 1.8rem;
-    margin: 0.75rem 1.5rem;
-  }
+  font-size: 1.6rem;
+  font-weight: $font-bold;
+  margin: 0 1rem 0.5rem;
+  line-height: 1.25;
+  max-width: 28ch;
 
   @media (max-width: $breakpoint-sm) {
-    font-size: 1.4rem;
-    margin: 0.5rem 1rem;
-    line-height: 1.3;
-  }
-
-  @media (max-width: 480px) {
-    font-size: 1.2rem;
-    margin: 0.5rem 0.5rem;
+    font-size: 1.3rem;
   }
 }
 
 .empty-subtitle {
-  color: $text-secondary;
-  font-size: 1.2rem;
-  margin-bottom: 2.5rem;
-  line-height: 1.4;
-  max-width: 90%;
-
-  @media (max-width: $breakpoint-md) {
-    font-size: 1.1rem;
-    margin-bottom: 2rem;
-  }
+  color: $text-muted;
+  font-size: 1rem;
+  margin: 0 0 2rem;
+  line-height: 1.5;
+  max-width: 42ch;
 
   @media (max-width: $breakpoint-sm) {
-    font-size: 1rem;
+    font-size: 0.95rem;
     margin-bottom: 1.5rem;
-    max-width: 95%;
-  }
-
-  @media (max-width: 480px) {
-    font-size: 0.9rem;
-    margin-bottom: 1.25rem;
   }
 }
 
 .add-entity-btn {
   background: $primary;
-  color: $bg-white;
-  font-size: 1.3rem;
-  font-weight: 600;
+  color: $text-inverse;
+  font-size: 1rem;
+  font-weight: $font-semibold;
   border: none;
   border-radius: $radius-xl;
-  padding: 1rem 2.5rem;
+  padding: 0.8rem 1.75rem;
   cursor: pointer;
-  transition: background 0.2s;
-  display: flex;
+  transition: background $duration-fast $easing-standard;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  min-width: 160px;
 
   .button-icon {
-    width: 1.2rem;
-    height: 1.2rem;
+    width: 1.1rem;
+    height: 1.1rem;
     flex-shrink: 0;
     stroke-width: 2;
   }
 
-  @media (max-width: $breakpoint-md) {
-    font-size: 1.1rem;
-    padding: 0.875rem 2rem;
-    border-radius: $radius-lg;
-    min-width: 140px;
-  }
-
-  @media (max-width: $breakpoint-sm) {
-    font-size: 1rem;
-    padding: 0.75rem 1.5rem;
-    border-radius: $radius-lg;
-    min-width: 120px;
-  }
-
-  @media (max-width: 480px) {
-    font-size: 0.9rem;
-    padding: 0.625rem 1.25rem;
-    min-width: 110px;
-  }
-
   &:hover {
     background: $primary-hover;
   }
diff --git a/components/TAvatar.vue b/components/TAvatar.vue
index 0f0f68c..1a8789f 100644
--- a/components/TAvatar.vue
+++ b/components/TAvatar.vue
@@ -21,6 +21,10 @@
             <Settings class="menu-icon" />
             <span>{{ t('Settings') }}</span>
           </button>
+          <button v-if="user?.is_admin" class="menu-item" @click="goToAdmin">
+            <ShieldCheck class="menu-icon" />
+            <span>{{ t('Admin') }}</span>
+          </button>
           <button class="menu-item menu-item--danger" @click="handleLogout">
             <LogOut class="menu-icon" />
             <span>{{ t('Logout') }}</span>
@@ -33,7 +37,7 @@
 
 <script setup>
 import { useRouter } from 'vue-router';
-import { Settings, LogOut } from 'lucide-vue-next';
+import { Settings, LogOut, ShieldCheck } from 'lucide-vue-next';
 import { useAuth } from '@/composables/useAuth';
 import { useDropdown } from '@/composables/useDropdown';
 
@@ -67,6 +71,11 @@ const goToSettings = () => {
   router.push('/settings');
 };
 
+const goToAdmin = () => {
+  close();
+  router.push('/admin');
+};
+
 const handleLogout = async () => {
   close();
   await logout();
diff --git a/components/admin/OutreachComposer.vue b/components/admin/OutreachComposer.vue
new file mode 100644
index 0000000..78e36d3
--- /dev/null
+++ b/components/admin/OutreachComposer.vue
@@ -0,0 +1,690 @@
+<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>
+
+      <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()"
+          >
+            <component :is="f.icon" class="md-btn__icon" />
+          </button>
+        </div>
+        <textarea
+          ref="bodyRef"
+          v-model="form.body"
+          class="field__textarea"
+          rows="8"
+          :placeholder="t('Write your message. Markdown is supported.')"
+          required
+        />
+      </div>
+
+      <div class="field">
+        <span class="field__label">{{ t('Header image') }}</span>
+        <div v-if="form.image_url" class="media">
+          <img :src="form.image_url" class="media__thumb" alt="" />
+          <button type="button" class="media__remove" @click="form.image_url = ''">
+            {{ t('Remove') }}
+          </button>
+        </div>
+        <label v-else class="upload">
+          <ImageIcon class="upload__icon" />
+          <span>{{ imageUploading ? t('Uploading...') : t('Add a campaign image') }}</span>
+          <input type="file" accept="image/*" class="upload__input" @change="onImage" />
+        </label>
+      </div>
+
+      <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)"
+        >
+          {{ token }}
+        </button>
+      </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>
+      </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>
+
+      <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')" />
+        <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" />
+            <span class="recipient__text"
+              >{{ u.first_name }} {{ u.last_name }} · {{ u.email }}</span
+            >
+          </label>
+          <p v-if="!filteredUsers.length" class="recipients__empty">{{ t('No matches') }}</p>
+        </div>
+      </div>
+
+      <div class="field">
+        <span class="field__label">{{ t('Attachments') }}</span>
+        <label class="upload upload--slim">
+          <PaperclipIcon class="upload__icon" />
+          <span>{{ t('Attach files') }}</span>
+          <input type="file" multiple class="upload__input" @change="onFiles" />
+        </label>
+        <ul v-if="form.files.length" class="attach-list">
+          <li v-for="(file, i) in form.files" :key="i" class="attach-item">
+            <span class="attach-item__name">{{ file.name }}</span>
+            <button type="button" class="attach-item__remove" @click="removeFile(i)">×</button>
+          </li>
+        </ul>
+      </div>
+
+      <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"
+          />
+        </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"
+        />
+      </div>
+    </form>
+
+    <aside class="preview">
+      <span class="preview__tag">{{ t('Live preview') }}</span>
+      <div class="preview__frame">
+        <iframe
+          v-if="previewHtml"
+          :srcdoc="previewHtml"
+          class="preview__iframe"
+          sandbox=""
+          :title="t('Live preview')"
+        />
+        <p v-else class="preview__empty">{{ t('Start typing to preview the email.') }}</p>
+      </div>
+    </aside>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import {
+  Image as ImageIcon,
+  Paperclip as PaperclipIcon,
+  Bold as BoldIcon,
+  Italic as ItalicIcon,
+  Heading2 as HeadingIcon,
+  List as ListIcon,
+  ListOrdered as ListOrderedIcon,
+  Link2 as LinkIcon
+} from 'lucide-vue-next';
+import TButton from '@/components/TButton.vue';
+import { adminApi, type OutreachAudience, type AdminUser } from '@/services/api/adminApi';
+
+const { t } = useI18n();
+const { showSuccess, showError } = useNotifications();
+
+const emit = defineEmits(['sent']);
+
+const tokens = ['{{first_name}}', '{{last_name}}', '{{name}}', '{{email}}'];
+
+const form = reactive({
+  subject: '',
+  body: '',
+  cta_label: '',
+  cta_url: '',
+  image_url: '',
+  audience: 'all' as OutreachAudience,
+  user_ids: [] as number[],
+  files: [] as File[]
+});
+
+const audiences = [
+  { value: 'all', label: t('All users') },
+  { value: 'active', label: t('Active users') },
+  { value: 'inactive', label: t('Inactive users') },
+  { value: 'specific', label: t('Specific users') },
+  { value: 'test', label: t('Send test to me') }
+];
+
+const sending = ref(false);
+const confirming = ref(false);
+const imageUploading = ref(false);
+
+const users = ref<AdminUser[]>([]);
+const userQuery = ref('');
+const filteredUsers = computed(() => {
+  const q = userQuery.value.trim().toLowerCase();
+  const list = users.value;
+  if (!q) return list.slice(0, 50);
+  return list
+    .filter((u) => `${u.first_name} ${u.last_name} ${u.email}`.toLowerCase().includes(q))
+    .slice(0, 50);
+});
+
+onMounted(async () => {
+  try {
+    users.value = await adminApi.users();
+  } catch {
+    users.value = [];
+  }
+});
+
+const onImage = async (event: Event) => {
+  const file = (event.target as HTMLInputElement).files?.[0];
+  if (!file) return;
+  imageUploading.value = true;
+  try {
+    const { url } = await adminApi.uploadOutreachMedia(file);
+    form.image_url = url;
+  } catch {
+    showError(t('Could not upload the image.'));
+  } finally {
+    imageUploading.value = false;
+  }
+};
+
+const onFiles = (event: Event) => {
+  const picked = Array.from((event.target as HTMLInputElement).files ?? []);
+  form.files = [...form.files, ...picked];
+};
+
+const removeFile = (index: number) => {
+  form.files.splice(index, 1);
+};
+
+const previewHtml = ref('');
+let previewTimer: ReturnType<typeof setTimeout> | null = null;
+
+const fetchPreview = async () => {
+  if (!form.subject && !form.body && !form.image_url) {
+    previewHtml.value = '';
+    return;
+  }
+  try {
+    previewHtml.value = await adminApi.previewOutreach({
+      subject: form.subject,
+      body: form.body,
+      cta_label: form.cta_label || undefined,
+      cta_url: form.cta_url || undefined,
+      image_url: form.image_url || undefined
+    });
+  } catch {
+    // Keep the last good preview rather than blanking on a transient error.
+  }
+};
+
+watch(
+  () => [form.subject, form.body, form.cta_label, form.cta_url, form.image_url],
+  () => {
+    if (previewTimer) clearTimeout(previewTimer);
+    previewTimer = setTimeout(fetchPreview, 500);
+  }
+);
+
+onBeforeUnmount(() => {
+  if (previewTimer) clearTimeout(previewTimer);
+});
+
+const confirmText = computed(() => {
+  const label = audiences.find((a) => a.value === form.audience)?.label ?? '';
+  return t('This will email {audience}. Personalized per recipient.', { audience: label });
+});
+
+const insertToken = (token: string) => {
+  form.body = `${form.body}${form.body.endsWith(' ') || !form.body ? '' : ' '}${token} `;
+};
+
+const bodyRef = ref<HTMLTextAreaElement | null>(null);
+
+const surround = (before: string, after: string) => {
+  const el = bodyRef.value;
+  if (!el) return;
+  const start = el.selectionStart;
+  const end = el.selectionEnd;
+  const selected = form.body.slice(start, end);
+  form.body = form.body.slice(0, start) + before + selected + after + form.body.slice(end);
+  nextTick(() => {
+    el.focus();
+    el.selectionStart = start + before.length;
+    el.selectionEnd = end + before.length;
+  });
+};
+
+const prefixLines = (prefix: string) => {
+  const el = bodyRef.value;
+  if (!el) return;
+  const lineStart = form.body.lastIndexOf('\n', el.selectionStart - 1) + 1;
+  const block = form.body.slice(lineStart, el.selectionEnd);
+  const replaced = block
+    .split('\n')
+    .map((line, i) => (prefix === '1. ' ? `${i + 1}. ${line}` : `${prefix}${line}`))
+    .join('\n');
+  form.body = form.body.slice(0, lineStart) + replaced + form.body.slice(el.selectionEnd);
+  nextTick(() => el.focus());
+};
+
+const formats = [
+  { label: 'Bold', icon: BoldIcon, action: () => surround('**', '**') },
+  { label: 'Italic', icon: ItalicIcon, action: () => surround('*', '*') },
+  { label: 'Heading', icon: HeadingIcon, action: () => prefixLines('## ') },
+  { label: 'Bullet list', icon: ListIcon, action: () => prefixLines('- ') },
+  { label: 'Numbered list', icon: ListOrderedIcon, action: () => prefixLines('1. ') },
+  { label: 'Link', icon: LinkIcon, action: () => surround('[', '](https://)') }
+];
+
+const onSend = () => {
+  if (form.audience === 'specific' && !form.user_ids.length) {
+    showError(t('Pick at least one recipient.'));
+    return;
+  }
+  if (form.audience === 'test') {
+    send();
+  } else {
+    confirming.value = true;
+  }
+};
+
+const normalizeUrl = (url: string): string => (/^https?:\/\//i.test(url) ? url : `https://${url}`);
+
+const send = async () => {
+  sending.value = true;
+  try {
+    const { sent } = await adminApi.sendOutreach({
+      subject: form.subject,
+      body: form.body,
+      cta_label: form.cta_label || undefined,
+      cta_url: form.cta_url ? normalizeUrl(form.cta_url) : undefined,
+      image_url: form.image_url || undefined,
+      audience: form.audience,
+      user_ids: form.user_ids,
+      files: form.files
+    });
+    showSuccess(t('Sent to {count} recipients', { count: sent }));
+    confirming.value = false;
+    emit('sent');
+  } catch (e: unknown) {
+    const message = (e as { data?: { message?: string } })?.data?.message;
+    showError(message || t('Could not send the outreach.'));
+    confirming.value = false;
+  } finally {
+    sending.value = false;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.composer {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 1.5rem;
+  align-items: start;
+
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.composer__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.field__label {
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  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;
+  padding: 0.3rem 0.4rem;
+  border: 1px solid $border-color;
+  border-bottom: none;
+  border-radius: $radius-lg $radius-lg 0 0;
+  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;
+}
+
+.tokens {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.tokens__hint {
+  font-size: $font-size-xs;
+  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;
+  gap: 0.75rem;
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.composer__actions {
+  display: flex;
+}
+
+.confirm {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: 0.9rem 1rem;
+  background: $warning-bg;
+  border-radius: $radius-lg;
+}
+
+.confirm__text {
+  margin: 0;
+  font-size: $font-size-sm;
+  color: $warning-text;
+}
+
+.confirm__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.preview {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  position: sticky;
+  top: 1rem;
+}
+
+.preview__tag {
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: $text-muted;
+}
+
+.preview__frame {
+  border: 1px solid $border-color;
+  border-radius: $radius-xl;
+  background: $bg-white;
+  overflow: hidden;
+  box-shadow: $elevation-1;
+  min-height: 320px;
+}
+
+.preview__iframe {
+  display: block;
+  width: 100%;
+  height: 520px;
+  border: none;
+}
+
+.preview__empty {
+  margin: 0;
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.upload {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.85rem 1rem;
+  border: 1px dashed $border-color;
+  border-radius: $radius-lg;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  cursor: pointer;
+
+  &:hover {
+    border-color: $primary;
+    color: $primary;
+  }
+
+  &--slim {
+    padding: 0.6rem 0.85rem;
+  }
+}
+
+.upload__icon {
+  width: 17px;
+  height: 17px;
+}
+
+.upload__input {
+  display: none;
+}
+
+.media {
+  position: relative;
+  border-radius: $radius-lg;
+  overflow: hidden;
+  border: 1px solid $border-color;
+}
+
+.media__thumb {
+  display: block;
+  width: 100%;
+  max-height: 180px;
+  object-fit: cover;
+}
+
+.media__remove {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  border: none;
+  border-radius: $radius-md;
+  padding: 0.3rem 0.6rem;
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  cursor: pointer;
+}
+
+.recipients {
+  margin-top: 0.4rem;
+  max-height: 180px;
+  overflow-y: auto;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  padding: 0.4rem;
+}
+
+.recipient {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.4rem;
+  font-size: $font-size-sm;
+  color: $text-primary;
+  cursor: pointer;
+  border-radius: $radius-md;
+
+  &:hover {
+    background: $bg-light;
+  }
+}
+
+.recipient__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.recipients__empty {
+  margin: 0;
+  padding: 0.6rem;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.attach-list {
+  list-style: none;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.attach-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.35rem 0.6rem;
+  background: $bg-light;
+  border-radius: $radius-md;
+  font-size: $font-size-sm;
+}
+
+.attach-item__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attach-item__remove {
+  border: none;
+  background: transparent;
+  color: $text-muted;
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover {
+    color: $error-color;
+  }
+}
+</style>
diff --git a/components/admin/UserDetail.vue b/components/admin/UserDetail.vue
new file mode 100644
index 0000000..252d862
--- /dev/null
+++ b/components/admin/UserDetail.vue
@@ -0,0 +1,242 @@
+<template>
+  <div class="detail">
+    <button class="link-back" @click="$emit('back')">
+      <ArrowLeft class="link-back__icon" />{{ t('Back to users') }}
+    </button>
+
+    <div v-if="loading" class="state">{{ t('Loading...') }}</div>
+    <p v-else-if="error" class="state">{{ error }}</p>
+
+    <template v-else-if="detail">
+      <header class="detail__head">
+        <span class="avatar">{{ initials }}</span>
+        <div class="detail__id">
+          <h1 class="detail__name">{{ detail.user.first_name }} {{ detail.user.last_name }}</h1>
+          <p class="detail__email">{{ detail.user.email }}</p>
+        </div>
+        <span v-if="detail.user.is_admin" class="admin-tag">{{ t('Admin') }}</span>
+      </header>
+
+      <TCard>
+        <template #header>{{ t('Profile') }}</template>
+        <dl class="facts">
+          <div class="fact">
+            <dt>{{ t('Joined') }}</dt>
+            <dd>{{ fmtDate(detail.user.created_at) }}</dd>
+          </div>
+          <div class="fact">
+            <dt>{{ t('Country') }}</dt>
+            <dd>{{ detail.preferences.country || '-' }}</dd>
+          </div>
+          <div class="fact">
+            <dt>{{ t('Language') }}</dt>
+            <dd>{{ detail.preferences.language || '-' }}</dd>
+          </div>
+          <div class="fact">
+            <dt>{{ t('Currency') }}</dt>
+            <dd>{{ detail.preferences.currency || '-' }}</dd>
+          </div>
+          <div class="fact">
+            <dt>{{ t('Last transaction') }}</dt>
+            <dd>{{ detail.last_transaction_at ? fmtDate(detail.last_transaction_at) : '-' }}</dd>
+          </div>
+        </dl>
+      </TCard>
+
+      <div class="counts">
+        <div v-for="item in countItems" :key="item.key" class="count">
+          <span class="count__value">{{ item.value }}</span>
+          <span class="count__label">{{ t(item.label) }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import { ArrowLeft } from 'lucide-vue-next';
+import TCard from '@/components/TCard.vue';
+import { adminApi, type UserDetail } from '@/services/api/adminApi';
+
+const { t } = useI18n();
+
+const props = defineProps<{ userId: number }>();
+defineEmits(['back']);
+
+const detail = ref<UserDetail | null>(null);
+const loading = ref(true);
+const error = ref('');
+
+const labels: Record<string, string> = {
+  transactions: 'Transactions',
+  wallets: 'Wallets',
+  categories: 'Categories',
+  parties: 'Parties',
+  groups: 'Groups',
+  budgets: 'Budgets'
+};
+
+const countItems = computed(() =>
+  Object.entries(detail.value?.counts ?? {}).map(([key, value]) => ({
+    key,
+    value,
+    label: labels[key] ?? key
+  }))
+);
+
+const initials = computed(() => {
+  const u = detail.value?.user;
+  return `${u?.first_name?.[0] ?? ''}${u?.last_name?.[0] ?? ''}`.toUpperCase() || '?';
+});
+
+const fmtDate = (iso: string): string => (iso ? new Date(iso).toLocaleDateString() : '');
+
+const load = async () => {
+  loading.value = true;
+  error.value = '';
+  try {
+    detail.value = await adminApi.userDetail(props.userId);
+  } catch {
+    error.value = t('Could not load this user.');
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(load);
+watch(() => props.userId, load);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.detail {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.link-back {
+  align-self: flex-start;
+  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;
+}
+
+.detail__head {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: $primary-light;
+  color: $primary-dark;
+  font-weight: $font-bold;
+  font-size: 1.2rem;
+}
+
+.detail__name {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.detail__email {
+  margin: 0.1rem 0 0;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.admin-tag {
+  margin-left: auto;
+  padding: 0.2rem 0.6rem;
+  border-radius: $radius-md;
+  background: $primary-light;
+  color: $primary-dark;
+  font-size: $font-size-xs;
+  font-weight: $font-semibold;
+}
+
+.facts {
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 1rem;
+}
+
+.fact {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+
+  dt {
+    font-size: $font-size-xs;
+    color: $text-muted;
+  }
+
+  dd {
+    margin: 0;
+    font-size: $font-size-sm;
+    font-weight: $font-semibold;
+    color: $text-primary;
+  }
+}
+
+.counts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 1rem;
+}
+
+.count {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem;
+  background: $bg-white;
+  border: 1px solid $border-color;
+  border-radius: $radius-xl;
+  box-shadow: $elevation-1;
+}
+
+.count__value {
+  font-size: 1.5rem;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.count__label {
+  font-size: $font-size-xs;
+  color: $text-muted;
+}
+
+.state {
+  padding: 2rem;
+  text-align: center;
+  color: $text-muted;
+}
+</style>
diff --git a/components/auth/AuthCarousel.vue b/components/auth/AuthCarousel.vue
index 9eebac4..64327f0 100644
--- a/components/auth/AuthCarousel.vue
+++ b/components/auth/AuthCarousel.vue
@@ -2,8 +2,25 @@
   <div class="login-sidebar">
     <div class="sidebar-content">
       <div class="carousel-slide">
-        <div class="slide-image-wrapper">
-          <div class="carousel-image" />
+        <div
+          class="slide-image-wrapper"
+          :class="{ 'slide-image-wrapper--art': slides[currentSlide].image }"
+        >
+          <transition name="fade" mode="out-in">
+            <img
+              v-if="slides[currentSlide].image"
+              :key="`art-${currentSlide}`"
+              :src="slides[currentSlide].image"
+              class="slide-art"
+              alt=""
+            />
+            <component
+              v-else
+              :is="slides[currentSlide].icon"
+              :key="currentSlide"
+              class="slide-icon"
+            />
+          </transition>
         </div>
         <div class="sidebar-text">
           <transition name="fade" mode="out-in">
@@ -28,22 +45,33 @@
 
 <script setup>
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import IconAI from '~icons/solar/magic-stick-3-bold-duotone';
+import IconIntegrations from '~icons/solar/card-transfer-bold-duotone';
+import IconImport from '~icons/solar/import-bold-duotone';
 
 const { t } = useI18n();
 const currentSlide = ref(0);
 
 const slides = computed(() => [
   {
-    title: t('carousel.simple.title'),
-    text: t('carousel.simple.text')
+    title: t('carousel.ai.title'),
+    text: t('carousel.ai.text'),
+    icon: IconAI
+  },
+  {
+    title: t('carousel.integrations.title'),
+    text: t('carousel.integrations.text'),
+    icon: IconIntegrations
   },
   {
-    title: t('carousel.automated.title'),
-    text: t('carousel.automated.text')
+    title: t('carousel.import.title'),
+    text: t('carousel.import.text'),
+    icon: IconImport
   },
   {
-    title: t('carousel.opensource.title'),
-    text: t('carousel.opensource.text')
+    title: t('carousel.welcome.title'),
+    text: t('carousel.welcome.text'),
+    image: '/floating-docs-man.svg'
   }
 ]);
 
@@ -91,39 +119,83 @@ onBeforeUnmount(() => clearInterval(slideInterval));
 }
 
 .slide-image-wrapper {
-  width: 65%;
-  max-width: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 220px;
+  height: 220px;
   margin: 0 auto;
-  aspect-ratio: 16/15;
-
-  .carousel-image {
-    width: 100%;
-    height: 100%;
-    background: url('/floating-docs-man.svg') no-repeat center;
-    background-size: contain;
-    opacity: 0.9;
+  border-radius: 40px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.4);
+
+  &--art {
+    background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.16), transparent 65%);
+    border: none;
+    box-shadow: none;
+    width: 280px;
+    height: 240px;
+  }
+}
+
+.slide-icon {
+  width: 120px;
+  height: 120px;
+  color: #fff;
+}
+
+.slide-art {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transform-origin: 50% 90%;
+  animation: funky-bob 3.6s ease-in-out infinite;
+}
+
+@keyframes funky-bob {
+  0% {
+    transform: translateY(0) rotate(-4deg) scale(1);
+  }
+  30% {
+    transform: translateY(-16px) rotate(3deg) scale(1.03);
+  }
+  55% {
+    transform: translateY(-6px) rotate(-2deg) scale(1);
+  }
+  80% {
+    transform: translateY(-12px) rotate(4deg) scale(1.02);
+  }
+  100% {
+    transform: translateY(0) rotate(-4deg) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slide-art {
+    animation: none;
   }
 }
 
 .sidebar-text {
   display: flex;
   justify-content: center;
-  align-items: center;
-  height: 180px;
-  overflow: hidden;
+  align-items: flex-start;
+  min-height: 200px;
   text-align: center;
 
   .text-content {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    max-width: 80%;
+    max-width: 90%;
 
     h2 {
-      font-size: 3.5rem;
+      font-size: 2.75rem;
       font-weight: 700;
       color: $accent-color;
       margin: 0;
+      line-height: 1.1;
     }
 
     p {
diff --git a/components/modals/LearningModal.vue b/components/modals/LearningModal.vue
index d0089fe..3e7f734 100644
--- a/components/modals/LearningModal.vue
+++ b/components/modals/LearningModal.vue
@@ -8,7 +8,10 @@
       @click.stop
     >
       <div class="modal-header">
-        <h2 id="modal-title" class="modal-title">💡 {{ t('Learn Trakli') }}</h2>
+        <div class="modal-title-wrap">
+          <span class="modal-title-badge"><IconLearn class="modal-title-icon" /></span>
+          <h2 id="modal-title" class="modal-title">{{ t('Learn Trakli') }}</h2>
+        </div>
         <button class="close-btn" :aria-label="t('Close modal')" @click="closeModal">
           <XMarkIcon class="close-icon" />
         </button>
@@ -39,7 +42,9 @@
                 </div>
                 <p class="concept-description">{{ concept.description }}</p>
                 <div class="concept-tips">
-                  <span class="tips-label">💡 {{ t('Tips') }}:</span>
+                  <span class="tips-label"
+                    ><LightBulbIcon class="tips-label-icon" />{{ t('Tips') }}:</span
+                  >
                   <ul class="tips-list">
                     <li v-for="tip in concept.tips" :key="tip">{{ tip }}</li>
                   </ul>
@@ -52,7 +57,7 @@
             <h3 class="section-title">{{ t('Quick Tips') }}</h3>
             <div class="tips-grid">
               <div v-for="tip in quickTips" :key="tip.title" class="tip-card">
-                <div class="tip-emoji">{{ tip.emoji }}</div>
+                <div class="tip-emoji"><component :is="tip.icon" class="tip-icon" /></div>
                 <h4 class="tip-title">{{ tip.title }}</h4>
                 <p class="tip-text">{{ tip.text }}</p>
               </div>
@@ -91,6 +96,16 @@
           </div>
         </div>
       </div>
+
+      <div class="modal-footer">
+        <p class="modal-footer__hint">
+          {{ t('Still stuck? Ask the assistant anything about Trakli.') }}
+        </p>
+        <button class="ask-assistant-btn" @click="askAssistant">
+          <IconSpark class="ask-icon" />
+          {{ t('Ask the assistant') }}
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -107,8 +122,15 @@ import {
   AcademicCapIcon,
   LightBulbIcon,
   CommandLineIcon,
-  QuestionMarkCircleIcon
+  QuestionMarkCircleIcon,
+  BoltIcon,
+  ChartBarIcon,
+  MagnifyingGlassIcon,
+  DevicePhoneMobileIcon,
+  CheckCircleIcon
 } from '@heroicons/vue/24/outline';
+import IconLearn from '~icons/solar/notebook-bold-duotone';
+import IconSpark from '~icons/solar/magic-stick-3-bold-duotone';
 
 const { t } = useI18n();
 
@@ -160,32 +182,32 @@ const concepts = computed(() => [
 
 const quickTips = computed(() => [
   {
-    emoji: '⚡',
+    icon: BoltIcon,
     title: t('Quick Entry'),
     text: t('learn.quicktips.quickentry')
   },
   {
-    emoji: '📊',
+    icon: ChartBarIcon,
     title: t('Dashboard Overview'),
     text: t('learn.quicktips.dashboard')
   },
   {
-    emoji: '🔍',
+    icon: MagnifyingGlassIcon,
     title: t('Search & Filter'),
     text: t('learn.quicktips.search')
   },
   {
-    emoji: '📱',
+    icon: DevicePhoneMobileIcon,
     title: t('Mobile Friendly'),
     text: t('learn.quicktips.mobile')
   },
   {
-    emoji: '🎯',
+    icon: CheckCircleIcon,
     title: t('Be Consistent'),
     text: t('learn.quicktips.consistent')
   },
   {
-    emoji: '💡',
+    icon: LightBulbIcon,
     title: t('Start Simple'),
     text: t('learn.quicktips.simple')
   }
@@ -230,6 +252,11 @@ const closeModal = () => {
   emit('close');
 };
 
+const askAssistant = () => {
+  emit('close');
+  navigateTo('/assistant');
+};
+
 const toggleFaq = (index) => {
   openFaq.value = openFaq.value === index ? null : index;
 };
@@ -275,6 +302,28 @@ const toggleFaq = (index) => {
   }
 }
 
+.modal-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+}
+
+.modal-title-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: $radius-lg;
+  background: $primary-light;
+}
+
+.modal-title-icon {
+  width: 22px;
+  height: 22px;
+  color: $primary;
+}
+
 .modal-title {
   font-size: 1.5rem;
   font-weight: 700;
@@ -286,6 +335,47 @@ const toggleFaq = (index) => {
   }
 }
 
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid $border-color;
+  background: $bg-light;
+}
+
+.modal-footer__hint {
+  margin: 0;
+  font-size: $font-size-sm;
+  color: $text-muted;
+}
+
+.ask-assistant-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1.1rem;
+  border: none;
+  border-radius: $radius-lg;
+  background: $primary;
+  color: $text-inverse;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  cursor: pointer;
+  transition: background $duration-fast $easing-standard;
+
+  &:hover {
+    background: $primary-hover;
+  }
+
+  .ask-icon {
+    width: 17px;
+    height: 17px;
+  }
+}
+
 .close-btn {
   background: none;
   border: none;
@@ -384,7 +474,6 @@ const toggleFaq = (index) => {
   border: 1px solid $border-gray;
   border-radius: $radius-xl;
   padding: 1.5rem;
-  border-left: 4px solid $primary;
 }
 
 .concept-header {
@@ -415,10 +504,18 @@ const toggleFaq = (index) => {
 
 .concept-tips {
   .tips-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
     font-weight: 600;
     color: $primary;
     font-size: 0.875rem;
   }
+
+  .tips-label-icon {
+    width: 15px;
+    height: 15px;
+  }
 }
 
 .tips-list {
@@ -466,10 +563,22 @@ const toggleFaq = (index) => {
 }
 
 .tip-emoji {
-  font-size: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: $primary-light;
   margin-bottom: 1rem;
 }
 
+.tip-icon {
+  width: 22px;
+  height: 22px;
+  color: $primary;
+}
+
 .tip-title {
   font-size: 1rem;
   font-weight: 600;
diff --git a/components/onboarding/OnboardingWizard.vue b/components/onboarding/OnboardingWizard.vue
index 3af09af..52d96e7 100644
--- a/components/onboarding/OnboardingWizard.vue
+++ b/components/onboarding/OnboardingWizard.vue
@@ -28,7 +28,7 @@
                 <h4 class="benefits-title">Why this matters:</h4>
                 <div class="benefits-grid">
                   <div v-for="benefit in step.benefits" :key="benefit.text" class="benefit-item">
-                    <span class="benefit-icon">{{ benefit.icon }}</span>
+                    <CheckCircleIcon class="benefit-icon" />
                     <span class="benefit-text">{{ benefit.text }}</span>
                   </div>
                 </div>
@@ -88,6 +88,7 @@ import {
   UsersIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  CheckCircleIcon,
   PlusIcon
 } from '@heroicons/vue/24/outline';
 
@@ -104,9 +105,9 @@ const steps = [
     buttonText: 'Add transaction',
     action: 'add-transaction',
     benefits: [
-      { icon: '💰', text: 'See your balance change in real-time' },
-      { icon: '📊', text: 'Get instant insights into your spending' },
-      { icon: '🎯', text: 'Start building healthy money habits' }
+      { text: 'See your balance change in real-time' },
+      { text: 'Get instant insights into your spending' },
+      { text: 'Start building healthy money habits' }
     ]
   },
   {
@@ -117,9 +118,9 @@ const steps = [
     buttonText: 'Setup wallets',
     action: 'setup-wallets',
     benefits: [
-      { icon: '🏦', text: 'Track all your accounts in one place' },
-      { icon: '💳', text: 'See which payment method you use most' },
-      { icon: '📈', text: 'Monitor your total net worth' }
+      { text: 'Track all your accounts in one place' },
+      { text: 'See which payment method you use most' },
+      { text: 'Monitor your total net worth' }
     ]
   },
   {
@@ -130,9 +131,9 @@ const steps = [
     buttonText: 'Manage categories',
     action: 'manage-categories',
     benefits: [
-      { icon: '🏷️', text: 'Identify your biggest spending areas' },
-      { icon: '📋', text: 'Create budgets for specific categories' },
-      { icon: '🔍', text: 'Find transactions quickly with organized labels' }
+      { text: 'Identify your biggest spending areas' },
+      { text: 'Create budgets for specific categories' },
+      { text: 'Find transactions quickly with organized labels' }
     ]
   },
   {
@@ -143,9 +144,9 @@ const steps = [
     buttonText: 'Add parties',
     action: 'add-parties',
     benefits: [
-      { icon: '🛒', text: 'See how much you spend at each store' },
-      { icon: '👥', text: 'Track money lent to friends and family' },
-      { icon: '📊', text: 'Analyze your vendor relationships' }
+      { text: 'See how much you spend at each store' },
+      { text: 'Track money lent to friends and family' },
+      { text: 'Analyze your vendor relationships' }
     ]
   },
   {
@@ -156,9 +157,9 @@ const steps = [
     buttonText: 'Get started',
     action: 'complete',
     benefits: [
-      { icon: '🎉', text: 'Access your personalized dashboard' },
-      { icon: '📱', text: 'Start tracking on the go' },
-      { icon: '💡', text: 'Discover new insights about your money' }
+      { text: 'Access your personalized dashboard' },
+      { text: 'Start tracking on the go' },
+      { text: 'Discover new insights about your money' }
     ]
   }
 ];
@@ -341,9 +342,9 @@ const previousStep = () => {
 
 .step-benefits {
   background: $bg-slate;
-  border-radius: $radius-lg;
+  border: 1px solid $border-gray;
+  border-radius: $radius-xl;
   padding: 1rem;
-  border-left: 4px solid $primary;
 }
 
 .benefits-title {
@@ -367,7 +368,9 @@ const previousStep = () => {
   gap: 0.75rem;
 
   .benefit-icon {
-    font-size: 1.125rem;
+    width: 18px;
+    height: 18px;
+    color: $primary;
     flex-shrink: 0;
   }
 
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index fb5768b..9b31145 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -456,12 +456,14 @@
   "Expense Category": "Expense Category",
   "Income Categories": "Income Categories",
   "Expense Categories": "Expense Categories",
-  "carousel.simple.title": "Simple",
-  "carousel.simple.text": "Trakli focuses on the basics and gives just what you need to see where your money is coming from or going to.",
-  "carousel.automated.title": "Automated",
-  "carousel.automated.text": "Get your income and expense report completed automatically using your emails and SMS or other custom workflows you setup.",
-  "carousel.opensource.title": "Open Source",
-  "carousel.opensource.text": "Trakli is open source! You can use all Trakli features at no cost on your self-hosted instance.",
+  "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",
+  "carousel.integrations.text": "Link accounts with Plaid and import statements, so your transactions flow in on their own.",
+  "carousel.import.title": "Import anything",
+  "carousel.import.text": "Drop in a statement in any format and the assistant reads it, structured or not, into clean transactions.",
+  "carousel.welcome.title": "Sit back, we've got this",
+  "carousel.welcome.text": "You handle life. Trakli wrangles the receipts, the math and the mess. Welcome aboard!",
   "Empty Icon": "Empty state illustration",
   "You don't have any {item} at the moment.": "You don't have any {item} at the moment.",
   "Please add at least one {item} to be able to view it.": "Please add at least one {item} to be able to view it.",
@@ -1218,6 +1220,90 @@
   "Search Bitcoin, Ethereum...": "Search Bitcoin, Ethereum...",
   "Priced automatically from CoinGecko": "Priced automatically from CoinGecko",
   "Name": "Name",
+  "Admin": "Admin",
+  "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",
+  "Reach out": "Reach out",
+  "User outreach": "User outreach",
+  "Send updates, nudges and campaigns to segments of your users. Plugs in as an action provider, so new outreach channels can be added without touching the console.": "Send updates, nudges and campaigns to segments of your users. Plugs in as an action provider, so new outreach channels can be added without touching the console.",
+  "Discounts and offers": "Discounts and offers",
+  "Create and target offers from pluggable offer providers, so promotions are configured, never hard-coded.": "Create and target offers from pluggable offer providers, so promotions are configured, never hard-coded.",
+  "Coming soon": "Coming soon",
+  "AI usage": "AI usage",
+  "Demographics": "Demographics",
+  "Where your users are and what they prefer.": "Where your users are and what they prefer.",
+  "New users": "New users",
+  "Total users": "Total users",
+  "Registered today": "Registered today",
+  "Registered this month": "Registered this month",
+  "Avg transactions / user": "Avg transactions / user",
+  "AI tokens used": "AI tokens used",
+  "View profile": "View profile",
+  "Grant discount": "Grant discount",
+  "Compose a personalized email with a call to action and send it to an audience.": "Compose a personalized email with a call to action and send it to an audience.",
+  "Message": "Message",
+  "Write your message...": "Write your message...",
+  "Write your message. Markdown is supported.": "Write your message. Markdown is supported.",
+  "Bold": "Bold",
+  "Italic": "Italic",
+  "Heading": "Heading",
+  "Bullet list": "Bullet list",
+  "Numbered list": "Numbered list",
+  "Link": "Link",
+  "Personalize with:": "Personalize with:",
+  "Button label": "Button label",
+  "e.g. Open Trakli": "e.g. Open Trakli",
+  "Button link": "Button link",
+  "Audience": "Audience",
+  "All users": "All users",
+  "Active users": "Active users",
+  "Inactive users": "Inactive users",
+  "Send test to me": "Send test to me",
+  "Send now": "Send now",
+  "Preview": "Preview",
+  "Header image": "Header image",
+  "Add a campaign image": "Add a campaign image",
+  "Specific users": "Specific users",
+  "Choose recipients": "Choose recipients",
+  "Attach files": "Attach files",
+  "Uploading...": "Uploading...",
+  "Could not upload the image.": "Could not upload the image.",
+  "New outreach": "New outreach",
+  "Back": "Back",
+  "No outreaches yet": "No outreaches yet",
+  "Sent": "Sent",
+  "Emails you have sent to users.": "Emails you have sent to users.",
+  "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",
+  "Still stuck? Ask the assistant anything about Trakli.": "Still stuck? Ask the assistant anything about Trakli.",
+  "Live preview": "Live preview",
+  "Start typing to preview the email.": "Start typing to preview the email.",
+  "This will email {audience}. Personalized per recipient.": "This will email {audience}. Personalized per recipient.",
+  "Sent to {count} recipients": "Sent to {count} recipients",
+  "Could not send the outreach.": "Could not send the outreach.",
+  "Search users": "Search users",
+  "No matches": "No matches",
+  "No data yet": "No data yet",
+  "Track assistant token usage and cost per user once the assistant reports it. The metric plugs in as a provider, so no console change is needed when it lands.": "Track assistant token usage and cost per user once the assistant reports it. The metric plugs in as a provider, so no console change is needed when it lands.",
+  "{users} users · {tx} transactions": "{users} users · {tx} transactions",
+  "Users": "Users",
+  "App metrics and engagement": "App metrics and engagement",
+  "7 days": "7 days",
+  "30 days": "30 days",
+  "90 days": "90 days",
+  "Joined": "Joined",
+  "No users yet": "No users yet",
+  "Metrics are not available yet.": "Metrics are not available yet.",
   "Bitcoin, Apple, Rental flat...": "Bitcoin, Apple, Rental flat...",
   "Symbol": "Symbol",
   "Quantity": "Quantity",
diff --git a/layouts/admin.vue b/layouts/admin.vue
new file mode 100644
index 0000000..ef90495
--- /dev/null
+++ b/layouts/admin.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="admin-root">
+    <slot />
+    <NotificationsContainer />
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import NotificationsContainer from '@/components/NotificationsContainer.vue';
+import { useAuth } from '@/composables/useAuth';
+
+const { user, fetchUser } = useAuth();
+
+onMounted(() => {
+  if (!user.value) {
+    fetchUser();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.admin-root {
+  min-height: 100vh;
+  background: $bg-gray;
+}
+</style>
diff --git a/layouts/onboarding.vue b/layouts/onboarding.vue
index f88482c..4a2fc72 100644
--- a/layouts/onboarding.vue
+++ b/layouts/onboarding.vue
@@ -24,7 +24,10 @@ import ThemeToggleButton from '@/components/ThemeToggleButton.vue';
 
 .onboarding-layout {
   min-height: 100vh;
-  background: $bg-light;
+  background:
+    radial-gradient(72% 55% at 50% -8%, rgba(var(--color-primary-rgb), 0.13), transparent 72%),
+    radial-gradient(50% 40% at 100% 100%, rgba(var(--color-primary-rgb), 0.07), transparent 70%),
+    $bg-light;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/middleware/admin.ts b/middleware/admin.ts
new file mode 100644
index 0000000..04dae4d
--- /dev/null
+++ b/middleware/admin.ts
@@ -0,0 +1,15 @@
+export default defineNuxtRouteMiddleware(async () => {
+  const { user, isAuthenticated, fetchUser } = useAuth();
+
+  if (!isAuthenticated.value) {
+    return navigateTo('/login');
+  }
+
+  if (user.value && !('is_admin' in user.value)) {
+    await fetchUser();
+  }
+
+  if (!user.value?.is_admin) {
+    return navigateTo('/dashboard');
+  }
+});
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
new file mode 100644
index 0000000..3bf207c
--- /dev/null
+++ b/pages/admin/index.vue
@@ -0,0 +1,1007 @@
+<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 }]"
+                />
+              </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">
+            <h1 class="panel__title">{{ t('Users') }}</h1>
+            <div class="search">
+              <Search class="search__icon" />
+              <input v-model="userQuery" class="search__input" :placeholder="t('Search users')" />
+            </div>
+          </header>
+          <TCard>
+            <table v-if="filteredUsers.length" class="data-table data-table--clickable">
+              <thead>
+                <tr>
+                  <th>{{ t('Name') }}</th>
+                  <th>{{ t('Email') }}</th>
+                  <th>{{ t('Joined') }}</th>
+                  <th class="data-table__actions-col">{{ t('Actions') }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="u in filteredUsers" :key="u.id" @click="selectedUserId = u.id">
+                  <td class="data-table__name">{{ u.first_name }} {{ u.last_name }}</td>
+                  <td class="data-table__muted">{{ u.email }}</td>
+                  <td class="data-table__muted">{{ formatDate(u.created_at) }}</td>
+                  <td class="data-table__actions" @click.stop>
+                    <TDropdown>
+                      <template #trigger>
+                        <button class="row-action" :aria-label="t('Actions')">
+                          <MoreHorizontal />
+                        </button>
+                      </template>
+                      <TDropdownItem @click="selectedUserId = u.id"
+                        ><Eye class="item-icon" />{{ t('View profile') }}</TDropdownItem
+                      >
+                      <TDropdownItem><Send class="item-icon" />{{ t('Reach out') }}</TDropdownItem>
+                      <TDropdownItem
+                        ><Gift class="item-icon" />{{ t('Grant discount') }}</TDropdownItem
+                      >
+                    </TDropdown>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <p v-else class="state">{{ users.length ? t('No matches') : t('No users yet') }}</p>
+          </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>
+          <table v-if="outreaches.length" class="data-table">
+            <thead>
+              <tr>
+                <th>{{ t('Subject') }}</th>
+                <th>{{ t('Audience') }}</th>
+                <th>{{ t('Sent') }}</th>
+                <th>{{ t('Date') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="o in outreaches" :key="o.id">
+                <td class="data-table__name">{{ o.subject }}</td>
+                <td class="data-table__muted">{{ o.audience }}</td>
+                <td>{{ o.sent }}</td>
+                <td class="data-table__muted">{{ formatDate(o.created_at) }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <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>
+        <SectionPlaceholder
+          :icon="IconUsage"
+          :title="t('AI usage')"
+          :body="
+            t(
+              'Track assistant token usage and cost per user once the assistant reports it. The metric plugs in as a provider, so no console change is needed when it lands.'
+            )
+          "
+        />
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, 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 IconUsage from '~icons/solar/cpu-bold-duotone';
+import Logo from '@/components/Logo.vue';
+import TCard from '@/components/TCard.vue';
+import TButton from '@/components/TButton.vue';
+import TDropdown from '@/components/TDropdown.vue';
+import TDropdownItem from '@/components/TDropdownItem.vue';
+import OutreachComposer from '@/components/admin/OutreachComposer.vue';
+import UserDetail from '@/components/admin/UserDetail.vue';
+import {
+  adminApi,
+  type EngagementReport,
+  type Metric,
+  type AdminUser,
+  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 days = ref(30);
+
+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: '-',
+    sub: t('Coming soon'),
+    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 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 filteredUsers = computed(() => {
+  const q = userQuery.value.trim().toLowerCase();
+  if (!q) return users.value;
+  return users.value.filter((u) =>
+    `${u.first_name} ${u.last_name} ${u.email}`.toLowerCase().includes(q)
+  );
+});
+
+const exit = () => router.push('/dashboard');
+
+const load = async () => {
+  loading.value = true;
+  metricsError.value = '';
+
+  const [metricsResult, usersResult] = await Promise.allSettled([
+    adminApi.metrics({ days: days.value }),
+    adminApi.users()
+  ]);
+
+  if (metricsResult.status === 'fulfilled') {
+    report.value = metricsResult.value;
+  } else {
+    report.value = null;
+    metricsError.value = t('Metrics are not available yet.');
+  }
+
+  users.value = usersResult.status === 'fulfilled' ? usersResult.value : [];
+  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() : '');
+
+onMounted(() => {
+  load();
+  loadOutreaches();
+});
+</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;
+  }
+}
+
+.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%;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: $font-size-sm;
+
+  th {
+    text-align: left;
+    padding: $table-header-padding;
+    color: $text-muted;
+    font-size: $font-size-xs;
+    font-weight: $font-semibold;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-bottom: 1px solid $border-color;
+  }
+
+  td {
+    padding: $table-cell-padding;
+    border-bottom: 1px solid $border-color;
+    color: $text-primary;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+
+  tbody tr:hover {
+    background: $bg-light;
+  }
+}
+
+.data-table__name {
+  font-weight: $font-semibold;
+}
+
+.data-table__muted {
+  color: $text-muted;
+}
+
+.data-table__actions-col,
+.data-table__actions {
+  text-align: right;
+  width: 1%;
+  white-space: nowrap;
+}
+
+.row-action {
+  display: inline-flex;
+  align-items: center;
+  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;
+}
+
+.data-table--clickable tbody tr {
+  cursor: pointer;
+}
+
+.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/login.vue b/pages/login.vue
index 9c22fc8..800249a 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -52,10 +52,11 @@ const handleSubmit = async () => {
     return;
   }
 
-  // Login succeeded – now check onboarding status (errors here should not affect login error)
+  // Login succeeded; checking onboarding status must not affect the login error.
   let isOnboardingComplete = false;
+  let configs = null;
   try {
-    const configs = await sharedData.loadConfigurations();
+    configs = await sharedData.loadConfigurations();
     isOnboardingComplete = !!configs?.[CONFIGURATION_KEYS.ONBOARDING_COMPLETE];
     if (isOnboardingComplete) {
       setOnboardingComplete();
diff --git a/pages/onboarding.vue b/pages/onboarding.vue
index 63a39c2..b699e84 100644
--- a/pages/onboarding.vue
+++ b/pages/onboarding.vue
@@ -21,17 +21,7 @@
         <!-- Step 1: Language Selection -->
         <div v-if="currentStep === 1" class="step-content">
           <div class="step-icon">
-            <svg
-              class="language-icon"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"
-                fill="currentColor"
-              />
-            </svg>
+            <IconLanguage />
           </div>
           <div class="step-info">
             <h2 class="step-title">{{ $t('Choose your language') }}</h2>
@@ -58,6 +48,16 @@
                 </button>
               </div>
 
+              <div class="country-field">
+                <label class="country-label">{{ $t('Where are you based?') }}</label>
+                <select v-model="selectedCountry" class="country-select">
+                  <option value="">{{ $t('Select your country') }}</option>
+                  <option v-for="country in countries" :key="country.code" :value="country.name">
+                    {{ country.name }}
+                  </option>
+                </select>
+              </div>
+
               <div class="step-actions">
                 <button
                   class="primary-btn"
@@ -74,7 +74,7 @@
         <!-- Step 2: Wallet and Currency Setup -->
         <div v-if="currentStep === 2" class="step-content">
           <div class="step-icon">
-            <CreditCardIcon />
+            <IconWallet />
           </div>
           <div class="step-info">
             <h2 class="step-title">{{ $t('Set up your wallet') }}</h2>
@@ -206,7 +206,7 @@
         <!-- Step 3: Categories Setup -->
         <div v-if="currentStep === 3" class="step-content">
           <div class="step-icon">
-            <TagIcon />
+            <IconCategory />
           </div>
           <div class="step-info">
             <h2 class="step-title">{{ $t('Set up categories') }}</h2>
@@ -314,11 +314,15 @@ import {
   CheckCircleIcon,
   TagIcon
 } from '@heroicons/vue/24/outline';
+import IconLanguage from '~icons/solar/translation-bold-duotone';
+import IconWallet from '~icons/solar/wallet-money-bold-duotone';
+import IconCategory from '~icons/solar/widget-5-bold-duotone';
 import { useSharedData } from '@/composables/useSharedData';
 import { useNotifications } from '@/composables/useNotifications';
 import { useWallets } from '@/composables/useWallets';
 import configurationsApi from '@/services/api/configurationsApi';
 import { CONFIGURATION_KEYS } from '@/utils/configurationKeys';
+import { getCountries } from '@/utils/countries';
 import { CURRENCIES } from '@/utils/currencies';
 import { categoriesApi } from '@/services/api/categoriesApi';
 
@@ -353,6 +357,8 @@ const transactionCount = computed(() => 0);
 
 // Language setup
 const selectedLanguage = ref('en');
+const selectedCountry = ref('');
+const countries = getCountries();
 const availableLanguages = [
   { code: 'en', name: 'English', flag: '🇺🇸' },
   { code: 'es', name: 'Español', flag: '🇪🇸' },
@@ -475,6 +481,14 @@ const completeOnboarding = async () => {
       });
     }
 
+    if (selectedCountry.value) {
+      configurationsToSave.push({
+        key: CONFIGURATION_KEYS.COUNTRY,
+        value: selectedCountry.value,
+        type: 'string'
+      });
+    }
+
     // Ensure a wallet exists and persist default-wallet
     let targetWalletId: string | null = null;
 
@@ -624,4 +638,36 @@ onBeforeRouteLeave(() => {
 
 <style lang="scss" scoped>
 @use '~/assets/scss/_onboarding' as *;
+@use '~/assets/scss/_variables' as *;
+
+.country-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-top: 1.25rem;
+  text-align: left;
+}
+
+.country-label {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-secondary;
+}
+
+.country-select {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  padding: 0.7rem 0.85rem;
+  font-size: $font-size-base;
+  font-family: inherit;
+  color: $text-primary;
+  background: $bg-white;
+
+  &:focus {
+    outline: none;
+    border-color: $primary;
+  }
+}
 </style>
diff --git a/services/api/adminApi.ts b/services/api/adminApi.ts
new file mode 100644
index 0000000..da5641f
--- /dev/null
+++ b/services/api/adminApi.ts
@@ -0,0 +1,157 @@
+export type MetricType = 'count' | 'sum' | 'ratio' | 'series' | 'ranking';
+
+export interface MetricPoint {
+  date: string;
+  value: number;
+}
+
+export interface MetricRow {
+  label: string;
+  value: number;
+}
+
+export interface Metric {
+  key: string;
+  label: string;
+  type: MetricType;
+  value: number | null;
+  series: MetricPoint[];
+  rows: MetricRow[];
+  unit: string | null;
+}
+
+export interface MetricGroup {
+  key: string;
+  label: string;
+  metrics: Metric[];
+}
+
+export interface EngagementReport {
+  period: { start: string; end: string; granularity: string };
+  groups: MetricGroup[];
+}
+
+export interface AdminUser {
+  id: number;
+  first_name: string;
+  last_name: string;
+  email: string;
+  created_at: string;
+  is_admin?: boolean;
+}
+
+export interface OutreachSummary {
+  id: number;
+  subject: string;
+  audience: string;
+  recipients: number;
+  sent: number;
+  created_at: string;
+}
+
+export interface UserDetail {
+  user: AdminUser & { username?: string; phone?: string };
+  counts: Record<string, number>;
+  preferences: { country: string | null; language: string | null; currency: string | null };
+  last_transaction_at: string | null;
+}
+
+export interface MetricsParams {
+  days?: number;
+  granularity?: 'day' | 'week' | 'month';
+}
+
+export type OutreachAudience = 'all' | 'active' | 'inactive' | 'test' | 'specific';
+
+export interface OutreachPayload {
+  subject: string;
+  body: string;
+  cta_label?: string;
+  cta_url?: string;
+  image_url?: string;
+  audience: OutreachAudience;
+  user_ids?: number[];
+  files?: File[];
+}
+
+const adminApi = {
+  async metrics(params: MetricsParams = {}): Promise<EngagementReport> {
+    const api = useApi();
+    const query = new URLSearchParams();
+    if (params.days) {
+      query.append('days', String(params.days));
+    }
+    if (params.granularity) {
+      query.append('granularity', params.granularity);
+    }
+    const qs = query.toString();
+    const response = await api<{ data: EngagementReport }>(`/admin/metrics${qs ? `?${qs}` : ''}`);
+    return response.data;
+  },
+
+  async users(): Promise<AdminUser[]> {
+    const api = useApi();
+    const response = await api<{ data: AdminUser[] | { data: AdminUser[] } }>('/admin/users');
+    const payload = response.data as AdminUser[] | { data: AdminUser[] };
+    return Array.isArray(payload) ? payload : (payload?.data ?? []);
+  },
+
+  async outreachHistory(): Promise<OutreachSummary[]> {
+    const api = useApi();
+    const response = await api<{ data: OutreachSummary[] }>('/admin/outreach');
+    return response.data ?? [];
+  },
+
+  async userDetail(id: number): Promise<UserDetail> {
+    const api = useApi();
+    const response = await api<{ data: UserDetail }>(`/admin/users/${id}`);
+    return response.data;
+  },
+
+  async uploadOutreachMedia(image: File): Promise<{ url: string }> {
+    const api = useApi();
+    const form = new FormData();
+    form.append('image', image);
+    const response = await api<{ data: { url: string } }>('/admin/outreach/media', {
+      method: 'POST',
+      body: form
+    });
+    return response.data;
+  },
+
+  async sendOutreach(payload: OutreachPayload): Promise<{ sent: number }> {
+    const api = useApi();
+    let body: OutreachPayload | FormData = payload;
+
+    if (payload.files && payload.files.length) {
+      const form = new FormData();
+      form.append('subject', payload.subject);
+      form.append('body', payload.body);
+      form.append('audience', payload.audience);
+      if (payload.cta_label) form.append('cta_label', payload.cta_label);
+      if (payload.cta_url) form.append('cta_url', payload.cta_url);
+      if (payload.image_url) form.append('image_url', payload.image_url);
+      (payload.user_ids ?? []).forEach((id) => form.append('user_ids[]', String(id)));
+      payload.files.forEach((file) => form.append('files[]', file));
+      body = form;
+    }
+
+    const response = await api<{ data: { sent: number } }>('/admin/outreach/send', {
+      method: 'POST',
+      body
+    });
+    return response.data;
+  },
+
+  async previewOutreach(payload: Partial<OutreachPayload>): Promise<string> {
+    const api = useApi();
+    const response = await api<{ data: { html: string } }>('/admin/outreach/preview', {
+      method: 'POST',
+      body: payload
+    });
+    return response.data.html;
+  }
+};
+
+export default adminApi;
+export { adminApi };
diff --git a/tests/components/TAvatar.test.ts b/tests/components/TAvatar.test.ts
new file mode 100644
index 0000000..8bce96e
--- /dev/null
+++ b/tests/components/TAvatar.test.ts
@@ -0,0 +1,42 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+import TAvatar from '@/components/TAvatar.vue';
+
+const push = vi.fn();
+vi.mock('vue-router', () => ({ useRouter: () => ({ push }) }));
+
+const mockUser = ref<Record<string, unknown> | null>(null);
+vi.mock('@/composables/useAuth', () => ({
+  useAuth: () => ({ user: mockUser, logout: vi.fn() })
+}));
+
+vi.mock('@/composables/useDropdown', () => ({
+  useDropdown: () => ({ isOpen: ref(true), rootRef: ref(null), toggle: vi.fn(), close: vi.fn() })
+}));
+
+const mountAvatar = () => mount(TAvatar, { props: { imageUrl: '/a.png' } });
+
+describe('TAvatar admin entry', () => {
+  it('hides the admin button for non-admins', () => {
+    mockUser.value = { first_name: 'Sam', last_name: 'Lee', email: 's@x.io', is_admin: false };
+    const w = mountAvatar();
+    expect(w.text()).not.toContain('Admin');
+  });
+
+  it('shows the admin button for admins', () => {
+    mockUser.value = { first_name: 'Sam', last_name: 'Lee', email: 's@x.io', is_admin: true };
+    const w = mountAvatar();
+    expect(w.text()).toContain('Admin');
+  });
+
+  it('navigates to the admin area when clicked', async () => {
+    mockUser.value = { first_name: 'Sam', last_name: 'Lee', email: 's@x.io', is_admin: true };
+    const w = mountAvatar();
+
+    const adminButton = w.findAll('.menu-item').find((b) => b.text().includes('Admin'));
+    await adminButton!.trigger('click');
+
+    expect(push).toHaveBeenCalledWith('/admin');
+  });
+});
diff --git a/tests/utils/countries.test.ts b/tests/utils/countries.test.ts
new file mode 100644
index 0000000..dea2408
--- /dev/null
+++ b/tests/utils/countries.test.ts
@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+import { getCountries } from '@/utils/countries';
+
+describe('getCountries', () => {
+  it('returns an array of code/name pairs', () => {
+    const list = getCountries();
+    expect(Array.isArray(list)).toBe(true);
+    expect(list.length).toBeGreaterThan(150);
+    expect(list.every((c) => typeof c.code === 'string' && c.code.length === 2)).toBe(true);
+    expect(list.find((c) => c.code === 'US')).toBeTruthy();
+  });
+
+  it('sorts by name', () => {
+    const names = getCountries().map((c) => c.name);
+    expect(names).toEqual([...names].sort((a, b) => a.localeCompare(b)));
+  });
+});
diff --git a/utils/configurationKeys.ts b/utils/configurationKeys.ts
index a5aea53..35411e1 100644
--- a/utils/configurationKeys.ts
+++ b/utils/configurationKeys.ts
@@ -6,6 +6,7 @@
 
 export const CONFIGURATION_KEYS = {
   LANGUAGE: 'default-lang',
+  COUNTRY: 'default-country',
   CURRENCY: 'default-currency',
   WALLET: 'default-wallet',
   GROUP: 'default-group',
diff --git a/utils/countries.ts b/utils/countries.ts
new file mode 100644
index 0000000..7a9db7c
--- /dev/null
+++ b/utils/countries.ts
@@ -0,0 +1,27 @@
+// ISO 3166-1 alpha-2 codes; names are resolved via Intl.DisplayNames so we
+// don't hard-code a localized name table.
+const COUNTRY_CODES = (
+  'AD AE AF AG AI AL AM AO AR AT AU AW AZ BA BB BD BE BF BG BH BI BJ BN BO BR BS BT BW BY BZ ' +
+  'CA CD CF CG CH CI CL CM CN CO CR CU CV CY CZ DE DJ DK DM DO DZ EC EE EG ER ES ET FI FJ FM ' +
+  'FR GA GB GD GE GH GM GN GQ GR GT GW GY HN HR HT HU ID IE IL IN IQ IR IS IT JM JO JP KE KG ' +
+  'KH KI KM KN KP KR KW KZ LA LB LC LI LK LR LS LT LU LV LY MA MC MD ME MG MH MK ML MM MN MR ' +
+  'MT MU MV MW MX MY MZ NA NE NG NI NL NO NP NR NZ OM PA PE PG PH PK PL PT PW PY QA RO RS RU ' +
+  'RW SA SB SC SD SE SG SI SK SL SM SN SO SR SS ST SV SY SZ TD TG TH TJ TL TM TN TO TR TT TV ' +
+  'TZ UA UG US UY UZ VA VC VE VN VU WS YE ZA ZM ZW'
+).split(' ');
+
+let cache: { code: string; name: string }[] | null = null;
+
+export function getCountries(): { code: string; name: string }[] {
+  if (cache) return cache;
+  let display: Intl.DisplayNames | null = null;
+  try {
+    display = new Intl.DisplayNames(['en'], { type: 'region' });
+  } catch {
+    display = null;
+  }
+  cache = COUNTRY_CODES.map((code) => ({ code, name: display?.of(code) || code })).sort((a, b) =>
+    a.name.localeCompare(b.name)
+  );
+  return cache;
+}