From b4013ea82179dee9f6ab62a7b83c94291067e0df Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sat, 27 Jun 2026 13:41:58 +0100
Subject: [PATCH] feat: Add financial position, holdings, and intent tagging UI

- Add the Financial Position screen: net worth, a money in/out ledger
  by intent, and a drill-down into the underlying transactions.
- Add a Holdings screen and form backed by the holdings API, with live
  crypto pricing and manual assets; holdings feed total net worth.
- Add an intent selector to the transaction form so income and expenses
  can be tagged as loans, debt, investments or gifts.
- Refine navigation: the dashboard is the default landing, the AI
  assistant is one entry with a Discussions sub-item, and less-used
  items move down.
- Let budgets be created in any supported currency, not just the
  currencies of existing wallets.
- Use Solar duotone icons (via Iconify) for the assistant landing
  stat cards so the large art reads richly instead of as thin lines.
---
 assets/scss/_surfaces.scss                    |  33 +
 assets/scss/_transaction-form.scss            |  44 +
 components/TSidebar.vue                       |  88 +-
 components/TransactionForm.vue                |  59 +-
 components/ai/ChatLandingInsights.vue         |  92 +-
 components/budgets/BudgetForm.vue             |  32 +-
 .../FinancialPositionDrill.vue                | 499 ++++++++++
 .../FinancialPositionView.vue                 | 856 ++++++++++++++++++
 components/holdings/HoldingForm.vue           | 391 ++++++++
 components/settings/SettingsDisplay.vue       |  13 +-
 composables/useLanding.ts                     |   9 +-
 i18n/locales/en.json                          |  91 +-
 nuxt.config.ts                                |   4 +
 package-lock.json                             |  83 ++
 package.json                                  |   2 +
 pages/financial-position/index.vue            |  17 +
 pages/holdings/index.vue                      | 394 ++++++++
 pages/login.vue                               |   4 +-
 pages/reports.vue                             |  22 +-
 services/api/holdingsApi.ts                   |  62 ++
 services/api/statsApi.ts                      |  21 +-
 services/transactionApi.ts                    |   6 +
 tests/components/TransactionForm.test.ts      |  51 +-
 tests/components/budgetForm.test.ts           |  31 +
 .../components/financialPositionView.test.ts  | 157 ++++
 tests/pages/holdings.test.ts                  | 102 +++
 tests/utils/transactionMapper.test.ts         |  27 +
 types/holding.ts                              |  44 +
 types/icons.d.ts                              |   1 +
 types/transaction.ts                          |  33 +
 utils/transactionMapper.ts                    |   3 +
 vitest.config.ts                              |   3 +-
 32 files changed, 3167 insertions(+), 107 deletions(-)
 create mode 100644 components/financial-position/FinancialPositionDrill.vue
 create mode 100644 components/financial-position/FinancialPositionView.vue
 create mode 100644 components/holdings/HoldingForm.vue
 create mode 100644 pages/financial-position/index.vue
 create mode 100644 pages/holdings/index.vue
 create mode 100644 services/api/holdingsApi.ts
 create mode 100644 tests/components/budgetForm.test.ts
 create mode 100644 tests/components/financialPositionView.test.ts
 create mode 100644 tests/pages/holdings.test.ts
 create mode 100644 types/holding.ts
 create mode 100644 types/icons.d.ts

diff --git a/assets/scss/_surfaces.scss b/assets/scss/_surfaces.scss
index ba23dd2..68bf92e 100644
--- a/assets/scss/_surfaces.scss
+++ b/assets/scss/_surfaces.scss
@@ -34,6 +34,24 @@
     --surface-accent: var(--color-border-medium);
     --surface-deep: var(--color-text-secondary);
   }
+  &--investment {
+    --surface-bg: rgba(14, 165, 233, 0.12);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: rgba(14, 165, 233, 0.5);
+    --surface-deep: #0284c7;
+  }
+  &--loan {
+    --surface-bg: rgba(217, 119, 6, 0.12);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: rgba(217, 119, 6, 0.5);
+    --surface-deep: #b45309;
+  }
+  &--gift {
+    --surface-bg: rgba(124, 58, 237, 0.12);
+    --surface-ink: var(--color-text-primary);
+    --surface-accent: rgba(124, 58, 237, 0.5);
+    --surface-deep: #6d28d9;
+  }
 }
 
 // In dark mode the surface bg becomes a subtle tint so it sits on the page
@@ -65,6 +83,21 @@
     --surface-accent: var(--color-border-medium);
     --surface-deep: var(--color-text-secondary);
   }
+  .surface--investment {
+    --surface-bg: rgba(14, 165, 233, 0.16);
+    --surface-accent: rgba(56, 189, 248, 0.5);
+    --surface-deep: #38bdf8;
+  }
+  .surface--loan {
+    --surface-bg: rgba(217, 119, 6, 0.16);
+    --surface-accent: rgba(251, 191, 36, 0.5);
+    --surface-deep: #fbbf24;
+  }
+  .surface--gift {
+    --surface-bg: rgba(124, 58, 237, 0.16);
+    --surface-accent: rgba(167, 139, 250, 0.5);
+    --surface-deep: #a78bfa;
+  }
 }
 
 .display-1 {
diff --git a/assets/scss/_transaction-form.scss b/assets/scss/_transaction-form.scss
index 54a2161..340a117 100644
--- a/assets/scss/_transaction-form.scss
+++ b/assets/scss/_transaction-form.scss
@@ -675,6 +675,50 @@
   font-size: $font-size-sm;
 }
 
+.intent-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.intent-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 1px solid $border-color;
+  border-radius: 999px;
+  background: $bg-white;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    border-color: $primary;
+    color: $text-primary;
+  }
+
+  .intent-pill-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.intent-pill--active {
+  background: $primary;
+  border-color: $primary;
+  color: white;
+
+  &:hover {
+    color: white;
+  }
+}
+
 .wallet-field-wrapper,
 .group-field-wrapper {
   position: relative;
diff --git a/components/TSidebar.vue b/components/TSidebar.vue
index 55135e6..b304c57 100644
--- a/components/TSidebar.vue
+++ b/components/TSidebar.vue
@@ -10,7 +10,7 @@
     }"
   >
     <div class="sidebar-header">
-      <NuxtLink to="/home" class="sidebar-brand" :aria-label="t('Home')">
+      <NuxtLink to="/dashboard" class="sidebar-brand" :aria-label="t('Home')">
         <img v-if="isCompact" src="/logo-mark.svg" alt="Trakli" class="sidebar-brand__mark" />
         <Logo v-else size="small" alt="Trakli Logo" />
       </NuxtLink>
@@ -33,10 +33,11 @@
             class="nav-button"
             :class="{
               'nav-button--with-subtext': !isCompact && item.hint,
-              'nav-button--compact': isCompact
+              'nav-button--compact': isCompact,
+              selected: subPathActive(item)
             }"
             active-class="selected"
-            :title="isCompact ? `${t(item.label)} — ${t(item.hint ?? '')}` : undefined"
+            :title="isCompact ? `${t(item.label)}: ${t(item.hint ?? '')}` : undefined"
             @click="handleNavClick"
           >
             <component :is="item.icon" class="icon" />
@@ -48,10 +49,13 @@
             <span v-else class="compact-label">{{ t(item.label) }}</span>
           </NuxtLink>
 
-          <ul v-if="!isCompact && item.subItems && isActive(item.to)" class="sub-list">
+          <ul
+            v-if="!isCompact && item.subItems && (isActive(item.to) || subPathActive(item))"
+            class="sub-list"
+          >
             <li v-for="sub in item.subItems" :key="sub.label">
               <NuxtLink
-                :to="sub.query ? { path: item.to, query: sub.query } : item.to"
+                :to="sub.to ? sub.to : sub.query ? { path: item.to, query: sub.query } : item.to"
                 class="sub-link"
                 :class="{ selected: isSubActive(item.to, sub) }"
                 @click="handleNavClick"
@@ -119,7 +123,7 @@ import {
   WalletIcon,
   XMarkIcon
 } from '@heroicons/vue/24/outline';
-import { Bot, Sparkles } from 'lucide-vue-next';
+import { Sparkles, Scale, Coins } from 'lucide-vue-next';
 import { computed } from 'vue';
 import Logo from './Logo.vue';
 import { useSidebar } from '@/composables/useSidebar';
@@ -141,13 +145,19 @@ const route = useRoute();
 const isCompact = computed(() => desktopCollapsed.value && !isMobile.value);
 
 const primary = [
-  { to: '/home', label: 'Ask', hint: 'Your AI chat home', icon: Bot },
   {
     to: '/dashboard',
     label: 'Dashboard',
     hint: 'Overview of your finances',
     icon: Squares2X2Icon
   },
+  {
+    to: '/home',
+    label: 'Assistant',
+    hint: 'Chat and ask about your finances',
+    icon: Sparkles,
+    subItems: [{ label: 'Discussions', to: '/assistant', tone: 'info' }]
+  },
   {
     to: '/transactions',
     label: 'Transactions',
@@ -155,28 +165,28 @@ const primary = [
     icon: RectangleGroupIcon
   },
   {
-    to: '/categories',
-    label: 'Categories',
-    hint: 'Organize transactions by type',
-    icon: TagIcon
+    to: '/wallets',
+    label: 'Wallets',
+    hint: 'Accounts money moves through',
+    icon: WalletIcon
   },
   {
-    to: '/groups',
-    label: 'Groups',
-    hint: 'Bundle related transactions',
-    icon: UserGroupIcon
+    to: '/financial-position',
+    label: 'Financial position',
+    hint: 'Net worth, grouped by intent',
+    icon: Scale
   },
   {
-    to: '/parties',
-    label: 'Parties',
-    hint: 'People and organizations you transact with',
-    icon: UsersIcon
+    to: '/holdings',
+    label: 'Holdings',
+    hint: 'Assets you own: crypto, stocks, property',
+    icon: Coins
   },
   {
-    to: '/wallets',
-    label: 'Wallets',
-    hint: 'Accounts money moves through',
-    icon: WalletIcon
+    to: '/reports',
+    label: 'Reports',
+    hint: 'Charts and insights',
+    icon: ChartBarIcon
   },
   {
     to: '/budgets',
@@ -190,28 +200,40 @@ const primary = [
     ]
   },
   {
-    to: '/reminders',
-    label: 'Reminders',
-    hint: 'Track upcoming or expected transactions',
-    icon: BellIcon
+    to: '/categories',
+    label: 'Categories',
+    hint: 'Organize transactions by type',
+    icon: TagIcon
   },
   {
-    to: '/imports',
-    label: 'Import',
-    hint: 'Import transactions from documents',
-    icon: ArrowUpTrayIcon
+    to: '/parties',
+    label: 'Parties',
+    hint: 'People and organizations you transact with',
+    icon: UsersIcon
+  },
+  {
+    to: '/groups',
+    label: 'Groups',
+    hint: 'Bundle related transactions',
+    icon: UserGroupIcon
   }
 ];
 
 const footer = [
-  { to: '/assistant', label: 'Assistant', icon: Sparkles },
-  { to: '/reports', label: 'Reports', icon: ChartBarIcon },
+  { to: '/reminders', label: 'Reminders', icon: BellIcon },
+  { to: '/imports', label: 'Import', icon: ArrowUpTrayIcon },
   { to: '/settings', label: 'Settings', icon: Cog8ToothIcon }
 ];
 
 const isActive = (path) => route.path === path || route.path.startsWith(path + '/');
 
+// True when one of the item's sub-items navigates to its own route (e.g. the
+// Assistant "Discussions" sub points at /assistant), so the parent stays lit
+// and its sub-list stays open while on that route.
+const subPathActive = (item) => (item.subItems ?? []).some((sub) => sub.to && isActive(sub.to));
+
 const isSubActive = (parentTo, sub) => {
+  if (sub.to) return isActive(sub.to);
   if (route.path !== parentTo) return false;
   if (!sub.query) return !route.query.scope;
   const key = Object.keys(sub.query)[0];
diff --git a/components/TransactionForm.vue b/components/TransactionForm.vue
index 89416c9..9812cf2 100644
--- a/components/TransactionForm.vue
+++ b/components/TransactionForm.vue
@@ -34,6 +34,27 @@
         <textarea v-model="formDescription" :placeholder="t('Type here...')" />
       </div>
 
+      <div class="transaction-date">
+        <span
+          >{{ t('Intent') }} <span class="optional-label">({{ t('optional') }})</span></span
+        >
+        <div class="intent-pills" role="radiogroup" :aria-label="t('Intent')">
+          <button
+            v-for="opt in intentOptions"
+            :key="opt.value"
+            type="button"
+            class="intent-pill"
+            :class="{ 'intent-pill--active': formIntent === opt.value }"
+            role="radio"
+            :aria-checked="formIntent === opt.value"
+            @click="formIntent = opt.value"
+          >
+            <component :is="intentIcons[opt.value]" class="intent-pill-icon" />
+            <span>{{ t(opt.label) }}</span>
+          </button>
+        </div>
+      </div>
+
       <div class="form-transaction">
         <div class="transaction-date">
           <span>{{ t('Transaction date') }}</span>
@@ -258,10 +279,21 @@ import { toRefs, ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import TButton from './TButton.vue';
 import SearchableDropdown from './SearchableDropdown.vue';
 import { CheckIcon, PencilIcon } from '@heroicons/vue/24/outline';
+import {
+  Circle,
+  HandCoins,
+  Banknote,
+  Scale,
+  Handshake,
+  TrendingUp,
+  PiggyBank,
+  Gift
+} from 'lucide-vue-next';
 import { useSharedData } from '~/composables/useSharedData';
 import { fetchAllPages } from '~/services/api/apiHelpers';
 import { api } from '@/services/api';
-import type { TransactionFile } from '~/types/transaction';
+import type { TransactionFile, TransactionIntent } from '~/types/transaction';
+import { TRANSACTION_INTENT_OPTIONS } from '~/types/transaction';
 
 const { t } = useI18n();
 
@@ -291,6 +323,23 @@ const formAmount = ref('');
 const formParty = ref('');
 const formCategory = ref('');
 const formDescription = ref('');
+const formIntent = ref<TransactionIntent>('regular');
+
+const intentIcons: Record<TransactionIntent, unknown> = {
+  regular: Circle,
+  loan_received: HandCoins,
+  loan_repayment: Banknote,
+  debt_owed: Scale,
+  debt_settled: Handshake,
+  investment_buy: TrendingUp,
+  investment_return: PiggyBank,
+  gift: Gift
+};
+
+const intentOptions = computed(() => {
+  const side = isOutcomeSelected.value ? 'expense' : 'income';
+  return TRANSACTION_INTENT_OPTIONS.filter((o) => o.side === 'both' || o.side === side);
+});
 
 const selectedPartyId = ref<number | null>(null);
 const selectedWalletId = ref<number | null>(null);
@@ -371,6 +420,7 @@ function onSubmit() {
     date,
     time,
     type: isOutcomeSelected.value ? 'EXPENSE' : 'INCOME',
+    intent: formIntent.value,
     party: formParty.value,
     partyId: selectedPartyId.value,
     amount: `${amountNum} ${selectedCurrency.value}`,
@@ -550,6 +600,11 @@ watch(isOutcomeSelected, (isExpense) => {
     formIsRefund.value = false;
     formRefundOfTransactionId.value = null;
   }
+  // Drop an intent that no longer applies to the selected side (e.g. an
+  // income-only intent after switching to expense).
+  if (!intentOptions.value.some((o) => o.value === formIntent.value)) {
+    formIntent.value = 'regular';
+  }
 });
 
 onMounted(async () => {
@@ -722,6 +777,8 @@ watch(
       formDescription.value = item.description;
     }
 
+    formIntent.value = item.intent || 'regular';
+
     if (item.amount) {
       const num = parseFloat(String(item.amount).replace(/[^\d.]/g, ''));
       formAmount.value = Number.isFinite(num) ? String(num) : '';
diff --git a/components/ai/ChatLandingInsights.vue b/components/ai/ChatLandingInsights.vue
index 88caa4c..2595925 100644
--- a/components/ai/ChatLandingInsights.vue
+++ b/components/ai/ChatLandingInsights.vue
@@ -43,9 +43,9 @@
       <section class="panel">
         <div class="stat-row">
           <article class="stat green" style="--i: 0">
-            <ArrowDownUp class="stat-art" :size="104" :stroke-width="1.25" />
+            <ArtNetFlow class="stat-art" />
             <header class="stat-head">
-              <span class="stat-coin"><ArrowDownUp :size="18" /></span>
+              <span class="stat-coin"><IconNetFlow /></span>
               <span class="stat-label">{{ t('Net flow') }}</span>
             </header>
             <span class="stat-value" :class="net >= 0 ? 'pos' : 'neg'">{{ money(net) }}</span>
@@ -64,9 +64,9 @@
           </article>
 
           <article class="stat amber" style="--i: 1">
-            <PiggyBank class="stat-art" :size="104" :stroke-width="1.25" />
+            <ArtSaved class="stat-art" />
             <header class="stat-head">
-              <span class="stat-coin"><PiggyBank :size="18" /></span>
+              <span class="stat-coin"><IconSaved /></span>
               <span class="stat-label">{{ t('Saved') }}</span>
             </header>
             <span class="stat-value">{{ savingsRate }}<i>%</i></span>
@@ -77,9 +77,9 @@
           </article>
 
           <article class="stat blue" style="--i: 2">
-            <PieChart class="stat-art" :size="104" :stroke-width="1.25" />
+            <ArtCategory class="stat-art" />
             <header class="stat-head">
-              <span class="stat-coin"><PieChart :size="18" /></span>
+              <span class="stat-coin"><IconCategory /></span>
               <span class="stat-label">{{ t('Top category') }}</span>
             </header>
             <span class="stat-value cat-name">{{ topCategory.name }}</span>
@@ -96,10 +96,10 @@
       <!-- Panel 2: same warm pattern, cashflow hero + three cards -->
       <section class="panel">
         <article class="stat green wide" style="--i: 0">
-          <ChartSpline class="stat-art" :size="116" :stroke-width="1.25" />
+          <ArtTrend class="stat-art stat-art--wide" />
           <header class="stat-head spread">
             <span class="stat-head-left">
-              <span class="stat-coin"><ChartSpline :size="18" /></span>
+              <span class="stat-coin"><IconTrend /></span>
               <span class="stat-label">{{ t('Cashflow trend') }}</span>
             </span>
             <span class="stat-value sm" :class="net >= 0 ? 'pos' : 'neg'">{{ money(net) }}</span>
@@ -118,9 +118,9 @@
 
         <div class="stat-row">
           <article class="stat blue" style="--i: 1">
-            <ReceiptText class="stat-art" :size="104" :stroke-width="1.25" />
+            <ArtTransactions class="stat-art" />
             <header class="stat-head">
-              <span class="stat-coin"><ReceiptText :size="18" /></span>
+              <span class="stat-coin"><IconTransactions /></span>
               <span class="stat-label">{{ t('Transactions') }}</span>
             </header>
             <span class="stat-value">{{ txCount }}</span>
@@ -128,9 +128,9 @@
           </article>
 
           <article class="stat amber" style="--i: 2">
-            <Coins class="stat-art" :size="104" :stroke-width="1.25" />
+            <ArtAvg class="stat-art" />
             <header class="stat-head">
-              <span class="stat-coin"><Coins :size="18" /></span>
+              <span class="stat-coin"><IconAvg /></span>
               <span class="stat-label">{{ t('Avg expense') }}</span>
             </header>
             <span class="stat-value">{{ money(avgExpense) }}</span>
@@ -138,9 +138,9 @@
           </article>
 
           <article class="stat rose" style="--i: 3">
-            <Store class="stat-art" :size="104" :stroke-width="1.25" />
+            <ArtBiggest class="stat-art" />
             <header class="stat-head">
-              <span class="stat-coin"><Store :size="18" /></span>
+              <span class="stat-coin"><IconBiggest /></span>
               <span class="stat-label">{{ t('Biggest expense') }}</span>
             </header>
             <span class="stat-value cat-name">{{ biggestExpense }}</span>
@@ -166,16 +166,23 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
-import {
-  Lightbulb,
-  ArrowDownUp,
-  PiggyBank,
-  PieChart,
-  ChartSpline,
-  ReceiptText,
-  Coins,
-  Store
-} from 'lucide-vue-next';
+import { Lightbulb } from 'lucide-vue-next';
+// Solid (-bold) glyphs for the small chips, duotone (-bold-duotone) for the
+// large watermarks.
+import IconNetFlow from '~icons/solar/transfer-vertical-bold';
+import IconSaved from '~icons/solar/safe-2-bold';
+import IconCategory from '~icons/solar/pie-chart-2-bold';
+import IconTrend from '~icons/solar/graph-new-bold';
+import IconTransactions from '~icons/solar/bill-list-bold';
+import IconAvg from '~icons/solar/wad-of-money-bold';
+import IconBiggest from '~icons/solar/shop-2-bold';
+import ArtNetFlow from '~icons/solar/transfer-vertical-bold-duotone';
+import ArtSaved from '~icons/solar/safe-2-bold-duotone';
+import ArtCategory from '~icons/solar/pie-chart-2-bold-duotone';
+import ArtTrend from '~icons/solar/graph-new-bold-duotone';
+import ArtTransactions from '~icons/solar/bill-list-bold-duotone';
+import ArtAvg from '~icons/solar/wad-of-money-bold-duotone';
+import ArtBiggest from '~icons/solar/shop-2-bold-duotone';
 import SparkLine from '@/components/reports/SparkLine.vue';
 import { useStatistics, type WalletStatistics } from '@/composables/useStatistics';
 import { useSharedData } from '@/composables/useSharedData';
@@ -514,12 +521,19 @@ onBeforeUnmount(() => {
 
 .stat-art {
   position: absolute;
-  right: -20px;
-  bottom: -22px;
+  right: -14px;
+  bottom: -16px;
+  width: 104px;
+  height: 104px;
   z-index: 0;
-  opacity: 0.08;
+  opacity: 0.16;
   pointer-events: none;
-  transform: rotate(-8deg);
+  transform: rotate(-6deg);
+
+  &--wide {
+    width: 120px;
+    height: 120px;
+  }
 
   .green & {
     color: $primary;
@@ -552,25 +566,27 @@ onBeforeUnmount(() => {
 }
 
 .stat-coin {
-  display: grid;
-  place-items: center;
-  width: 34px;
-  height: 34px;
-  border-radius: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
-  color: #fff;
+
+  svg {
+    width: 26px;
+    height: 26px;
+  }
 
   .green & {
-    background: $primary;
+    color: $primary;
   }
   .amber & {
-    background: $warning;
+    color: $warning;
   }
   .blue & {
-    background: $info;
+    color: $info;
   }
   .rose & {
-    background: $error-color;
+    color: $error-color;
   }
 }
 
diff --git a/components/budgets/BudgetForm.vue b/components/budgets/BudgetForm.vue
index 09824f4..e2ea77e 100644
--- a/components/budgets/BudgetForm.vue
+++ b/components/budgets/BudgetForm.vue
@@ -149,6 +149,7 @@
 import { computed, reactive, ref, watch } from 'vue';
 import type { Budget, BudgetPeriodType, BudgetTargetType } from '~/types/budget';
 import { useSharedData } from '~/composables/useSharedData';
+import { CURRENCIES } from '@/utils/currencies';
 
 const props = defineProps<{
   editingItem?: Budget | null;
@@ -177,19 +178,30 @@ const defaultCurrency = computed(() => props.defaults?.currency ?? 'USD');
 // <input type="date"> needs a bare `YYYY-MM-DD` or it renders empty.
 const toDateInput = (value: string): string => (value ? value.slice(0, 10) : '');
 
-// Pull distinct currency codes from the user's wallets. If the user has
-// no wallets yet, fall back to the configured default so the dropdown
-// is never empty when there's a currency configured globally.
+// Budgets aren't limited to wallet currencies: offer every supported currency,
+// with the user's own wallet currencies (and configured default) surfaced first
+// so the most relevant options sit at the top of the list.
 const currencyOptions = computed<string[]>(() => {
-  const wallets = (shared.wallets?.value ?? []) as Array<{ currency?: string }>;
-  const codes = new Set<string>();
-  for (const w of wallets) {
-    if (w.currency) codes.add(w.currency.toUpperCase());
+  const ordered: string[] = [];
+  const seen = new Set<string>();
+  const add = (code?: string) => {
+    if (!code) return;
+    const upper = code.toUpperCase();
+    if (!seen.has(upper)) {
+      seen.add(upper);
+      ordered.push(upper);
+    }
+  };
+
+  for (const w of (shared.wallets?.value ?? []) as Array<{ currency?: string }>) {
+    add(w.currency);
   }
-  if (codes.size === 0 && defaultCurrency.value) {
-    codes.add(defaultCurrency.value.toUpperCase());
+  add(defaultCurrency.value);
+  for (const c of CURRENCIES) {
+    add(c.code);
   }
-  return Array.from(codes).sort();
+
+  return ordered;
 });
 
 const buildInitial = () => ({
diff --git a/components/financial-position/FinancialPositionDrill.vue b/components/financial-position/FinancialPositionDrill.vue
new file mode 100644
index 0000000..747f00d
--- /dev/null
+++ b/components/financial-position/FinancialPositionDrill.vue
@@ -0,0 +1,499 @@
+<template>
+  <Transition name="drawer">
+    <div v-if="open" class="drawer-root" @click.self="$emit('close')">
+      <aside
+        class="drawer-panel surface"
+        :class="`surface--${group?.tone || 'neutral'}`"
+        role="dialog"
+        aria-modal="true"
+      >
+        <header class="drawer-head">
+          <button class="icon-btn" :aria-label="t('Close')" @click="$emit('close')">
+            <ArrowLeft :size="18" />
+          </button>
+          <span class="head-chip">
+            <component :is="group?.icon" :size="22" />
+          </span>
+          <div class="head-id">
+            <span class="head-eyebrow">{{ group?.eyebrow }}</span>
+            <h2 class="head-title">{{ group?.label }}</h2>
+          </div>
+          <button class="icon-btn icon-btn--close" :aria-label="t('Close')" @click="$emit('close')">
+            <X :size="18" />
+          </button>
+        </header>
+
+        <section class="detail-hero">
+          <span class="detail-metric" :class="group?.metricClass">{{ group?.metric }}</span>
+          <p v-if="group?.hint" class="detail-hint">{{ group.hint }}</p>
+        </section>
+
+        <div v-if="isLoading" class="drawer-body">
+          <LoadingSkeleton variant="list" :count="6" />
+        </div>
+
+        <div v-else-if="rows.length === 0" class="drawer-empty">
+          <span class="empty-ico"><Inbox :size="34" /></span>
+          <p>{{ t('No transactions for this in the selected period.') }}</p>
+        </div>
+
+        <div v-else class="drawer-body">
+          <section v-for="bucket in buckets" :key="bucket.intent" class="bucket">
+            <header v-if="buckets.length > 1" class="bucket-head">
+              <span class="bucket-dir" :class="bucket.type === 'income' ? 'is-in' : 'is-out'">
+                <component
+                  :is="bucket.type === 'income' ? ArrowDownLeft : ArrowUpRight"
+                  :size="13"
+                />
+              </span>
+              <span class="bucket-label">{{ bucket.label }}</span>
+              <span class="bucket-sub">{{ t('{n} transactions', { n: bucket.rows.length }) }}</span>
+              <span class="bucket-total" :class="bucket.type === 'income' ? 'is-in' : 'is-out'">
+                {{ bucket.total }}
+              </span>
+            </header>
+
+            <ul class="row-list">
+              <li v-for="row in bucket.rows" :key="row.id" class="row">
+                <span class="row-dir" :class="row.type === 'income' ? 'is-in' : 'is-out'">
+                  <component
+                    :is="row.type === 'income' ? ArrowDownLeft : ArrowUpRight"
+                    :size="14"
+                  />
+                </span>
+                <div class="row-main">
+                  <span class="row-title">{{ row.title }}</span>
+                  <span class="row-meta">{{ row.meta }}</span>
+                </div>
+                <span class="row-amount" :class="row.type === 'income' ? 'is-in' : 'is-out'">
+                  {{ row.type === 'income' ? '+' : '−' }}{{ row.amount }}
+                </span>
+              </li>
+            </ul>
+          </section>
+        </div>
+      </aside>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { X, ArrowLeft, Inbox, ArrowDownLeft, ArrowUpRight } from 'lucide-vue-next';
+import LoadingSkeleton from '@/components/LoadingSkeleton.vue';
+import transactionApi from '@/services/transactionApi';
+import { formatFullAmount } from '@/utils/currency';
+import { TRANSACTION_INTENT_OPTIONS, type ApiTransaction } from '@/types/transaction';
+
+export interface DrillGroup {
+  key: string;
+  label: string;
+  intents: string[];
+  type?: 'income' | 'expense';
+  tone: string;
+  hint?: string;
+  metric?: string;
+  metricClass?: string;
+  eyebrow?: string;
+  icon: unknown;
+}
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  open: boolean;
+  group: DrillGroup | null;
+  range: { date_from?: string; date_to?: string };
+}>();
+
+defineEmits<{ close: [] }>();
+
+interface Row {
+  id: number;
+  title: string;
+  meta: string;
+  amount: string;
+  amountNum: number;
+  currency: string;
+  intent: string;
+  type: 'income' | 'expense';
+}
+
+const rows = ref<Row[]>([]);
+const isLoading = ref(false);
+
+const intentLabel = (value: string) =>
+  TRANSACTION_INTENT_OPTIONS.find((o) => o.value === value)?.label ?? value;
+
+const dateLabel = (iso: string) => {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime())
+    ? ''
+    : d.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
+};
+
+const toRow = (txn: ApiTransaction): Row => {
+  const currency = txn.wallet?.currency || 'XAF';
+  const party = txn.party?.name;
+  const title = txn.description || party || t('Transaction');
+  const metaBits = [dateLabel(txn.datetime), party && party !== title ? party : null].filter(
+    Boolean
+  );
+  return {
+    id: txn.id,
+    title,
+    meta: metaBits.join(' · '),
+    amount: formatFullAmount(`${txn.amount} ${currency}`),
+    amountNum: Number(txn.amount) || 0,
+    currency,
+    intent: txn.intent || 'regular',
+    type: txn.type
+  };
+};
+
+const buckets = computed(() => {
+  const order = props.group?.intents ?? [];
+  return order
+    .map((intent) => {
+      const bucketRows = rows.value.filter((r) => r.intent === intent);
+      if (bucketRows.length === 0) return null;
+      const currency = bucketRows[0].currency;
+      const sum = bucketRows.reduce((acc, r) => acc + r.amountNum, 0);
+      return {
+        intent,
+        label: t(intentLabel(intent)),
+        type: bucketRows[0].type,
+        rows: bucketRows,
+        total: formatFullAmount(`${sum} ${currency}`)
+      };
+    })
+    .filter((b): b is NonNullable<typeof b> => b !== null);
+});
+
+async function load() {
+  if (!props.open || !props.group) return;
+  isLoading.value = true;
+  rows.value = [];
+  try {
+    const res = await transactionApi.fetchAll({
+      intent: props.group.intents.join(','),
+      type: props.group.type,
+      exclude_transfers: true,
+      date_from: props.range.date_from,
+      date_to: props.range.date_to,
+      limit: 100
+    });
+    rows.value = (res.data || []).map(toRow);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+watch(() => [props.open, props.group?.key], load, { immediate: true });
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+@use '@/assets/scss/_surfaces.scss' as *;
+
+.drawer-root {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  justify-content: flex-end;
+  z-index: $z-index-modal;
+}
+
+.drawer-panel {
+  display: flex;
+  flex-direction: column;
+  width: min(480px, 100%);
+  height: 100%;
+  background: $bg-white;
+  box-shadow: $elevation-5;
+  overflow: hidden;
+}
+
+.drawer-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-4 $spacing-5;
+  background: var(--surface-bg);
+  border-bottom: 1px solid var(--surface-accent);
+}
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: $text-secondary;
+  cursor: pointer;
+  transition: background $duration-base $easing-standard;
+
+  &:hover {
+    background: var(--glass-bg-strong);
+  }
+}
+
+// The back arrow is the primary affordance on mobile; the X sits on the right
+// for desktop muscle memory. Both close.
+.icon-btn--close {
+  margin-left: auto;
+
+  @media (max-width: $breakpoint-sm) {
+    display: none;
+  }
+}
+
+.head-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+  border-radius: 13px;
+  background: var(--glass-bg-strong);
+  color: var(--surface-deep);
+}
+
+.head-id {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.head-eyebrow {
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--surface-deep);
+}
+
+.head-title {
+  margin: 0;
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.detail-hero {
+  padding: $spacing-5;
+  background: var(--surface-bg);
+  border-bottom: 1px solid var(--surface-accent);
+}
+
+.detail-metric {
+  font-size: 2rem;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  line-height: 1.05;
+  color: $text-primary;
+}
+
+.detail-hint {
+  margin: 6px 0 0;
+  font-size: $font-size-sm;
+  color: $text-secondary;
+}
+
+.drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: $spacing-4 $spacing-5 $spacing-6;
+}
+
+.drawer-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-3;
+  padding: $spacing-6;
+  text-align: center;
+  color: $text-muted;
+}
+
+.empty-ico {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: $bg-light;
+  color: var(--color-border-medium, #cbd5e1);
+}
+
+.bucket {
+  margin-bottom: $spacing-5;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.bucket-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding-bottom: $spacing-2;
+  margin-bottom: 4px;
+  border-bottom: 1px solid $border-light;
+}
+
+.bucket-dir {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+
+  &.is-in {
+    background: var(--color-income-soft);
+    color: var(--color-income);
+  }
+  &.is-out {
+    background: var(--color-expense-soft);
+    color: var(--color-expense);
+  }
+}
+
+.bucket-label {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.bucket-sub {
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.bucket-total {
+  margin-left: auto;
+  font-size: $font-size-sm;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+
+  &.is-in {
+    color: var(--color-income);
+  }
+  &.is-out {
+    color: var(--color-expense);
+  }
+}
+
+.row-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-3 0;
+  border-bottom: 1px solid $border-light;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.row-dir {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 9px;
+
+  &.is-in {
+    background: var(--color-income-soft);
+    color: var(--color-income);
+  }
+  &.is-out {
+    background: var(--color-expense-soft);
+    color: var(--color-expense);
+  }
+}
+
+.row-main {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+
+.row-title {
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.row-meta {
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.row-amount {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+
+  &.is-in {
+    color: var(--color-income);
+  }
+  &.is-out {
+    color: var(--color-expense);
+  }
+}
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: opacity $duration-base $easing-standard;
+}
+.drawer-enter-active .drawer-panel,
+.drawer-leave-active .drawer-panel {
+  transition: transform $duration-base $easing-standard;
+}
+.drawer-enter-from,
+.drawer-leave-to {
+  opacity: 0;
+}
+.drawer-enter-from .drawer-panel,
+.drawer-leave-to .drawer-panel {
+  transform: translateX(100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drawer-enter-active .drawer-panel,
+  .drawer-leave-active .drawer-panel {
+    transition: none;
+  }
+}
+</style>
diff --git a/components/financial-position/FinancialPositionView.vue b/components/financial-position/FinancialPositionView.vue
new file mode 100644
index 0000000..2e76c4e
--- /dev/null
+++ b/components/financial-position/FinancialPositionView.vue
@@ -0,0 +1,856 @@
+<template>
+  <div class="fp">
+    <header class="fp-head">
+      <div class="fp-head-text">
+        <h2 class="fp-title">{{ t('Financial position') }}</h2>
+        <p class="fp-subtitle">
+          {{ t('Where your money came from and where it went, grouped by what it really was.') }}
+        </p>
+      </div>
+
+      <div v-if="!props.params" class="fp-presets">
+        <button
+          v-for="p in presets"
+          :key="p.value"
+          type="button"
+          class="fp-preset"
+          :class="{ 'fp-preset--active': preset === p.value }"
+          @click="preset = p.value"
+        >
+          {{ t(p.label) }}
+        </button>
+      </div>
+    </header>
+
+    <p v-if="partial" class="fp-note" role="status">
+      {{
+        t(
+          'Some amounts could not be converted to your default currency and were left out, so figures may be understated. Affected: {currencies}.',
+          { currencies: unconvertedCurrencies.join(', ') }
+        )
+      }}
+    </p>
+
+    <LoadingSkeleton v-if="isLoading && !position" variant="card" :count="3" />
+
+    <template v-else-if="position && hasAny">
+      <section class="fp-hero surface" :class="netSurface">
+        <div class="fp-hero-headline">
+          <span class="eyebrow">{{ t('Net worth change') }}</span>
+          <div class="fp-hero-value-row">
+            <p class="fp-hero-value">{{ signedMoney(position.net_worth_delta) }}</p>
+            <span class="fp-hero-pill">
+              <component
+                :is="position.net_worth_delta >= 0 ? TrendingUp : TrendingDown"
+                :size="14"
+              />
+              {{ position.net_worth_delta >= 0 ? t('Building') : t('Shrinking') }}
+            </span>
+          </div>
+          <p class="fp-hero-sub">
+            {{
+              t(
+                'Real earnings, returns and gifts, minus real spend. Borrowed money and money parked in investments do not count.'
+              )
+            }}
+          </p>
+        </div>
+
+        <div class="fp-hero-scales">
+          <div class="fp-scale">
+            <span class="fp-scale-label">{{ t('Money in') }}</span>
+            <span class="fp-scale-value fp-up">{{ money(totalIn) }}</span>
+          </div>
+          <span class="fp-scale-arrow"><ArrowRight :size="18" /></span>
+          <div class="fp-scale">
+            <span class="fp-scale-label">{{ t('Money out') }}</span>
+            <span class="fp-scale-value fp-down">{{ money(totalOut) }}</span>
+          </div>
+        </div>
+      </section>
+
+      <NuxtLink to="/holdings" class="fp-worth surface tone-card">
+        <div class="fp-worth-main">
+          <span class="eyebrow">{{ t('Total net worth now') }}</span>
+          <p class="fp-worth-value">{{ money(position.total_net_worth) }}</p>
+        </div>
+        <div class="fp-worth-split">
+          <div class="fp-worth-part">
+            <Wallet :size="15" />
+            <span class="fp-worth-part-label">{{ t('Cash') }}</span>
+            <span class="fp-worth-part-value">{{ money(position.cash_balance) }}</span>
+          </div>
+          <div class="fp-worth-part">
+            <Coins :size="15" />
+            <span class="fp-worth-part-label">{{ t('Holdings') }}</span>
+            <span class="fp-worth-part-value">{{ money(position.holdings_value) }}</span>
+          </div>
+          <ChevronRight :size="16" class="fp-worth-go" />
+        </div>
+      </NuxtLink>
+
+      <div class="fp-ledger">
+        <section class="fp-col surface tone-card">
+          <header class="fp-col-head">
+            <span class="fp-col-ico fp-col-ico--in"><ArrowDownLeft :size="16" /></span>
+            <h3 class="fp-col-title">{{ t('Money in') }}</h3>
+            <span class="fp-col-total fp-up">{{ money(totalIn) }}</span>
+          </header>
+          <ul class="fp-rows">
+            <li v-for="row in moneyIn" :key="row.key">
+              <button
+                type="button"
+                class="fp-row"
+                :class="{ 'fp-row--neutral': !row.counts }"
+                @click="openDrill(row)"
+              >
+                <span class="fp-row-marker" :style="{ background: row.color }" />
+                <span class="fp-row-ico"><component :is="row.icon" :size="16" /></span>
+                <span class="fp-row-text">
+                  <span class="fp-row-label">{{ row.label }}</span>
+                  <span v-if="!row.counts" class="fp-row-tag">{{ t('cash, not net worth') }}</span>
+                </span>
+                <span class="fp-row-figure">
+                  <span class="fp-row-amount">{{ money(row.value) }}</span>
+                  <span class="fp-row-bar"
+                    ><span
+                      class="fp-row-fill"
+                      :style="{ width: barPct(row, maxIn), background: row.color }"
+                  /></span>
+                </span>
+                <ChevronRight :size="15" class="fp-row-chevron" />
+              </button>
+            </li>
+          </ul>
+        </section>
+
+        <section class="fp-col surface tone-card">
+          <header class="fp-col-head">
+            <span class="fp-col-ico fp-col-ico--out"><ArrowUpRight :size="16" /></span>
+            <h3 class="fp-col-title">{{ t('Money out') }}</h3>
+            <span class="fp-col-total fp-down">{{ money(totalOut) }}</span>
+          </header>
+          <ul class="fp-rows">
+            <li v-for="row in moneyOut" :key="row.key">
+              <button
+                type="button"
+                class="fp-row"
+                :class="{ 'fp-row--neutral': !row.counts }"
+                @click="openDrill(row)"
+              >
+                <span class="fp-row-marker" :style="{ background: row.color }" />
+                <span class="fp-row-ico"><component :is="row.icon" :size="16" /></span>
+                <span class="fp-row-text">
+                  <span class="fp-row-label">{{ row.label }}</span>
+                  <span v-if="!row.counts" class="fp-row-tag">{{ t('cash, not net worth') }}</span>
+                </span>
+                <span class="fp-row-figure">
+                  <span class="fp-row-amount">{{ money(row.value) }}</span>
+                  <span class="fp-row-bar"
+                    ><span
+                      class="fp-row-fill"
+                      :style="{ width: barPct(row, maxOut), background: row.color }"
+                  /></span>
+                </span>
+                <ChevronRight :size="15" class="fp-row-chevron" />
+              </button>
+            </li>
+          </ul>
+        </section>
+      </div>
+
+      <p class="fp-foot">
+        <Info :size="14" />
+        {{
+          t(
+            'Greyed rows move cash but not net worth: borrowed money, debt, and money parked in investments.'
+          )
+        }}
+      </p>
+    </template>
+
+    <div v-else class="fp-empty">
+      <PiggyBank :size="44" class="fp-empty-ico" />
+      <p>{{ t('No data for this period yet.') }}</p>
+    </div>
+
+    <FinancialPositionDrill
+      :open="drillOpen"
+      :group="activeGroup"
+      :range="drillRange"
+      @close="drillOpen = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import {
+  Wallet,
+  ShoppingBag,
+  PiggyBank,
+  Landmark,
+  HandCoins,
+  TrendingUp,
+  TrendingDown,
+  Gift,
+  Coins,
+  ChevronRight,
+  ArrowDownLeft,
+  ArrowUpRight,
+  ArrowRight,
+  Info
+} from 'lucide-vue-next';
+import LoadingSkeleton from '@/components/LoadingSkeleton.vue';
+import FinancialPositionDrill, {
+  type DrillGroup
+} from '@/components/financial-position/FinancialPositionDrill.vue';
+import { statsApi, type StatsParams, type PositionData } from '@/services/api/statsApi';
+import { formatShortAmount } from '@/utils/currency';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  params?: StatsParams | null;
+}>();
+
+const presets = [
+  { value: 'current_month', label: 'This month' },
+  { value: 'last_3_months', label: 'Last 3 months' },
+  { value: 'all_time', label: 'All time' }
+] as const;
+
+const preset = ref<StatsParams['preset']>('current_month');
+const position = ref<PositionData | null>(null);
+const currency = ref('');
+const partial = ref(false);
+const unconvertedCurrencies = ref<string[]>([]);
+const isLoading = ref(false);
+
+const drillOpen = ref(false);
+const activeGroup = ref<DrillGroup | null>(null);
+
+const COLOR = {
+  income: 'var(--color-income, #16a34a)',
+  expense: 'var(--color-expense, #dc2626)',
+  returns: '#0ea5e9',
+  gifts: '#7c3aed',
+  loan: '#d97706',
+  principal: '#6366f1'
+};
+
+const effectiveParams = computed<StatsParams>(() =>
+  props.params ? { ...props.params } : { preset: preset.value }
+);
+
+const money = (n: number) =>
+  formatShortAmount(`${Math.round((n || 0) * 100) / 100} ${currency.value}`);
+const signedMoney = (n: number) => (n > 0 ? '+' : '') + money(n);
+
+const netSurface = computed(() =>
+  (position.value?.net_worth_delta ?? 0) >= 0 ? 'surface--income' : 'surface--expense'
+);
+
+interface LedgerRow {
+  key: string;
+  label: string;
+  value: number;
+  color: string;
+  tone: string;
+  icon: unknown;
+  counts: boolean;
+  intents: string[];
+  type?: 'income' | 'expense';
+}
+
+const moneyIn = computed<LedgerRow[]>(() => {
+  const p = position.value;
+  if (!p) return [];
+  return (
+    [
+      {
+        key: 'earned',
+        label: t('Earned income'),
+        value: p.earned_income,
+        color: COLOR.income,
+        tone: 'income',
+        icon: Wallet,
+        counts: true,
+        intents: ['regular'],
+        type: 'income'
+      },
+      {
+        key: 'returns',
+        label: t('Investment returns'),
+        value: p.investment_returns,
+        color: COLOR.returns,
+        tone: 'investment',
+        icon: TrendingUp,
+        counts: true,
+        intents: ['investment_return'],
+        type: 'income'
+      },
+      {
+        key: 'gift',
+        label: t('Gifts received'),
+        value: p.gifts_received,
+        color: COLOR.gifts,
+        tone: 'gift',
+        icon: Gift,
+        counts: true,
+        intents: ['gift'],
+        type: 'income'
+      },
+      {
+        key: 'loan_in',
+        label: t('Loan received'),
+        value: p.loan_received,
+        color: COLOR.loan,
+        tone: 'loan',
+        icon: Landmark,
+        counts: false,
+        intents: ['loan_received'],
+        type: 'income'
+      },
+      {
+        key: 'debt_in',
+        label: t('Debt repaid to you'),
+        value: p.debt_owed,
+        color: COLOR.loan,
+        tone: 'loan',
+        icon: HandCoins,
+        counts: false,
+        intents: ['debt_owed'],
+        type: 'income'
+      }
+    ] as LedgerRow[]
+  ).filter((r) => r.value > 0);
+});
+
+const moneyOut = computed<LedgerRow[]>(() => {
+  const p = position.value;
+  if (!p) return [];
+  return (
+    [
+      {
+        key: 'spend',
+        label: t('Discretionary spend'),
+        value: p.discretionary_spend,
+        color: COLOR.expense,
+        tone: 'expense',
+        icon: ShoppingBag,
+        counts: true,
+        intents: ['regular'],
+        type: 'expense'
+      },
+      {
+        key: 'invested',
+        label: t('Invested'),
+        value: p.investment_principal,
+        color: COLOR.principal,
+        tone: 'investment',
+        icon: TrendingUp,
+        counts: false,
+        intents: ['investment_buy'],
+        type: 'expense'
+      },
+      {
+        key: 'loan_out',
+        label: t('Loan repayment'),
+        value: p.loan_repayment,
+        color: COLOR.loan,
+        tone: 'loan',
+        icon: Landmark,
+        counts: false,
+        intents: ['loan_repayment'],
+        type: 'expense'
+      },
+      {
+        key: 'debt_out',
+        label: t('Debt settled'),
+        value: p.debt_settled,
+        color: COLOR.loan,
+        tone: 'loan',
+        icon: HandCoins,
+        counts: false,
+        intents: ['debt_settled'],
+        type: 'expense'
+      }
+    ] as LedgerRow[]
+  ).filter((r) => r.value > 0);
+});
+
+const totalIn = computed(() => moneyIn.value.reduce((sum, r) => sum + r.value, 0));
+const totalOut = computed(() => moneyOut.value.reduce((sum, r) => sum + r.value, 0));
+const maxIn = computed(() => Math.max(1, ...moneyIn.value.map((r) => r.value)));
+const maxOut = computed(() => Math.max(1, ...moneyOut.value.map((r) => r.value)));
+const barPct = (row: LedgerRow, max: number) => `${Math.max(6, (row.value / max) * 100)}%`;
+
+const drillRange = computed<{ date_from?: string; date_to?: string }>(() => {
+  if (props.params?.start_date) {
+    return { date_from: props.params.start_date, date_to: props.params.end_date };
+  }
+  const iso = (d: Date) => d.toISOString().slice(0, 10);
+  const now = new Date();
+  if (preset.value === 'current_month') {
+    return { date_from: iso(new Date(now.getFullYear(), now.getMonth(), 1)), date_to: iso(now) };
+  }
+  if (preset.value === 'last_3_months') {
+    return {
+      date_from: iso(new Date(now.getFullYear(), now.getMonth() - 3, now.getDate())),
+      date_to: iso(now)
+    };
+  }
+  return {};
+});
+
+function openDrill(row: LedgerRow) {
+  activeGroup.value = {
+    key: row.key,
+    label: row.label,
+    eyebrow: row.type === 'income' ? t('Money in') : t('Money out'),
+    intents: row.intents,
+    type: row.type,
+    tone: row.tone,
+    hint: row.counts ? undefined : t('Moves cash, but not your net worth.'),
+    metric: money(row.value),
+    icon: row.icon
+  };
+  drillOpen.value = true;
+}
+
+const hasAny = computed(() => totalIn.value > 0 || totalOut.value > 0);
+
+async function load() {
+  isLoading.value = true;
+  try {
+    const res = await statsApi.fetch({ ...effectiveParams.value, section: 'position' });
+    position.value = res.data?.position ?? null;
+    currency.value = (res.data as { currency?: string })?.currency || currency.value;
+    partial.value = !!res.data?.partial;
+    unconvertedCurrencies.value = res.data?.unconverted_currencies || [];
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+watch(effectiveParams, load, { deep: true, immediate: true });
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+@use '@/assets/scss/_surfaces.scss' as *;
+
+.fp {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-5;
+}
+
+.fp-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: $spacing-4;
+  flex-wrap: wrap;
+}
+
+.fp-title {
+  margin: 0;
+  font-size: $font-size-lg;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.fp-subtitle {
+  margin: 4px 0 0;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  max-width: 54ch;
+}
+
+.fp-presets {
+  display: inline-flex;
+  padding: 3px;
+  gap: 2px;
+  background: $bg-light;
+  border-radius: 999px;
+}
+
+.fp-preset {
+  padding: 6px 14px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+  transition: all $duration-base $easing-standard;
+
+  &--active {
+    background: $bg-white;
+    color: $text-primary;
+    box-shadow: $elevation-1;
+  }
+}
+
+.fp-note {
+  margin: 0;
+  padding: $spacing-3 $spacing-4;
+  border-radius: $radius-lg;
+  background: rgba(245, 158, 11, 0.12);
+  color: #92400e;
+  font-size: $font-size-sm;
+}
+
+.fp-hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: $spacing-5;
+  padding: $spacing-5 $spacing-6;
+  background: var(--surface-bg);
+  border: 1px solid var(--color-border-light);
+  border-radius: 20px;
+  box-shadow: $elevation-1;
+}
+
+.fp-hero-headline {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 240px;
+  flex: 1;
+}
+
+.fp-hero-value-row {
+  display: flex;
+  align-items: baseline;
+  gap: $spacing-2;
+  flex-wrap: wrap;
+}
+
+.fp-hero-value {
+  margin: 0;
+  font-size: 2.4rem;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  line-height: 1.02;
+  color: var(--surface-deep);
+
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.8rem;
+  }
+}
+
+.fp-hero-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--glass-bg-strong);
+  color: var(--surface-deep);
+}
+
+.fp-hero-sub {
+  margin: 2px 0 0;
+  font-size: $font-size-sm;
+  color: $text-secondary;
+  max-width: 46ch;
+}
+
+.fp-hero-scales {
+  display: flex;
+  align-items: center;
+  gap: $spacing-4;
+  padding: $spacing-3 $spacing-4;
+  border-radius: 16px;
+  background: var(--glass-bg-strong);
+}
+
+.fp-scale {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.fp-scale-label {
+  font-size: 10px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: $text-muted;
+}
+
+.fp-scale-value {
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+}
+
+.fp-scale-arrow {
+  color: $text-muted;
+}
+
+.fp-worth {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: $spacing-4;
+  padding: $spacing-4 $spacing-5;
+  text-decoration: none;
+  color: inherit;
+}
+
+.fp-worth-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.fp-worth-value {
+  margin: 0;
+  font-size: 1.6rem;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  color: $text-primary;
+}
+
+.fp-worth-split {
+  display: flex;
+  align-items: center;
+  gap: $spacing-4;
+  color: $text-secondary;
+}
+
+.fp-worth-part {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: $font-size-sm;
+}
+
+.fp-worth-part-label {
+  color: $text-muted;
+}
+
+.fp-worth-part-value {
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+  color: $text-primary;
+}
+
+.fp-worth-go {
+  color: $text-muted;
+}
+
+.fp-ledger {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-4;
+
+  @media (min-width: $breakpoint-md) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.fp-col {
+  padding: $spacing-4 $spacing-5 $spacing-5;
+}
+
+.fp-col-head {
+  display: flex;
+  align-items: center;
+  gap: $spacing-2;
+  padding-bottom: $spacing-3;
+  margin-bottom: $spacing-2;
+  border-bottom: 1px solid $border-light;
+}
+
+.fp-col-ico {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 9px;
+
+  &--in {
+    background: var(--color-income-soft);
+    color: var(--color-income);
+  }
+  &--out {
+    background: var(--color-expense-soft);
+    color: var(--color-expense);
+  }
+}
+
+.fp-col-title {
+  margin: 0;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: $text-secondary;
+}
+
+.fp-col-total {
+  margin-left: auto;
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+}
+
+.fp-rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.fp-row {
+  display: grid;
+  grid-template-columns: 4px 28px 1fr auto 16px;
+  align-items: center;
+  gap: $spacing-3;
+  width: 100%;
+  padding: $spacing-3 0;
+  border: none;
+  border-bottom: 1px solid $border-light;
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  transition: background $duration-base $easing-standard;
+
+  &:last-child {
+    border-bottom: none;
+  }
+  &:hover {
+    background: var(--color-bg-light, #f8fafc);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+    border-radius: 8px;
+  }
+}
+
+.fp-row--neutral {
+  opacity: 0.72;
+}
+
+.fp-row-marker {
+  width: 4px;
+  height: 28px;
+  border-radius: 999px;
+}
+
+.fp-row-ico {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: $bg-light;
+  color: $text-secondary;
+}
+
+.fp-row-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.fp-row-label {
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  color: $text-primary;
+}
+
+.fp-row-tag {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: $text-muted;
+}
+
+.fp-row-figure {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  min-width: 96px;
+}
+
+.fp-row-amount {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  font-variant-numeric: tabular-nums;
+  color: $text-primary;
+}
+
+.fp-row-bar {
+  display: block;
+  width: 88px;
+  height: 5px;
+  border-radius: 999px;
+  background: $bg-light;
+  overflow: hidden;
+}
+
+.fp-row-fill {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+}
+
+.fp-row-chevron {
+  color: $text-muted;
+}
+
+.fp-foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.fp-up {
+  color: var(--color-income, #16a34a);
+}
+
+.fp-down {
+  color: var(--color-expense, #dc2626);
+}
+
+.fp-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-6;
+  text-align: center;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  background: $bg-white;
+  border: 1px dashed $border-color;
+  border-radius: 18px;
+}
+
+.fp-empty-ico {
+  color: var(--color-border-medium, #cbd5e1);
+}
+</style>
diff --git a/components/holdings/HoldingForm.vue b/components/holdings/HoldingForm.vue
new file mode 100644
index 0000000..cfad809
--- /dev/null
+++ b/components/holdings/HoldingForm.vue
@@ -0,0 +1,391 @@
+<template>
+  <Transition name="modal">
+    <div v-if="open" class="modal-root" @click.self="$emit('close')">
+      <div class="modal-panel" role="dialog" aria-modal="true">
+        <header class="modal-head">
+          <h2 class="modal-title">{{ editing ? t('Edit holding') : t('Add holding') }}</h2>
+          <button class="icon-btn" :aria-label="t('Close')" @click="$emit('close')">
+            <X :size="18" />
+          </button>
+        </header>
+
+        <div class="field">
+          <label>{{ t('Price source') }}</label>
+          <div class="seg">
+            <button
+              type="button"
+              class="seg-btn"
+              :class="{ 'seg-btn--active': form.price_source === 'auto' }"
+              @click="form.price_source = 'auto'"
+            >
+              <Zap :size="14" /> {{ t('Live') }}
+            </button>
+            <button
+              type="button"
+              class="seg-btn"
+              :class="{ 'seg-btn--active': form.price_source === 'manual' }"
+              @click="form.price_source = 'manual'"
+            >
+              <Pencil :size="14" /> {{ t('Manual') }}
+            </button>
+          </div>
+        </div>
+
+        <div v-if="form.price_source === 'auto'" class="field">
+          <label>{{ t('Coin') }}</label>
+          <input
+            v-model="coinQuery"
+            type="text"
+            :placeholder="t('Search Bitcoin, Ethereum...')"
+            @input="onSearch"
+          />
+          <ul v-if="results.length" class="coin-results">
+            <li v-for="c in results" :key="c.id">
+              <button type="button" class="coin-option" @click="pickCoin(c)">
+                <span class="coin-symbol">{{ c.symbol }}</span> {{ c.name }}
+              </button>
+            </li>
+          </ul>
+          <p v-if="form.external_ref" class="coin-picked">
+            {{ t('Priced automatically from CoinGecko') }} ({{ form.external_ref }})
+          </p>
+        </div>
+
+        <div class="field">
+          <label>{{ t('Name') }}</label>
+          <input
+            v-model="form.name"
+            type="text"
+            :placeholder="t('Bitcoin, Apple, Rental flat...')"
+          />
+        </div>
+
+        <div class="field-row">
+          <div class="field">
+            <label
+              >{{ t('Symbol') }} <span class="opt">({{ t('optional') }})</span></label
+            >
+            <input v-model="form.symbol" type="text" placeholder="BTC" />
+          </div>
+          <div class="field">
+            <label>{{ t('Quantity') }}</label>
+            <input v-model.number="form.quantity" type="number" step="any" min="0" />
+          </div>
+        </div>
+
+        <div class="field-row">
+          <div class="field">
+            <label>{{ t('Currency') }}</label>
+            <select v-model="form.currency">
+              <option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
+            </select>
+          </div>
+          <div v-if="form.price_source === 'manual'" class="field">
+            <label>{{ t('Price per unit') }}</label>
+            <input v-model.number="form.unit_price" type="number" step="any" min="0" />
+          </div>
+        </div>
+
+        <p v-if="error" class="form-error">{{ error }}</p>
+
+        <button type="button" class="submit" :disabled="submitting" @click="submit">
+          {{ editing ? t('Save changes') : t('Add holding') }}
+        </button>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue';
+import { X, Pencil, Zap } from 'lucide-vue-next';
+import { CURRENCIES } from '@/utils/currencies';
+import holdingsApi from '@/services/api/holdingsApi';
+import { useSharedData } from '~/composables/useSharedData';
+import type { Holding, HoldingPayload, CoinSearchResult } from '~/types/holding';
+
+const { t } = useI18n();
+const sharedData = useSharedData();
+const currencies = CURRENCIES;
+
+const props = defineProps<{ open: boolean; editing: Holding | null; submitting?: boolean }>();
+const emit = defineEmits<{ submit: [HoldingPayload]; close: [] }>();
+
+const blank = (): HoldingPayload => ({
+  name: '',
+  symbol: '',
+  quantity: 0,
+  currency: sharedData.getDefaultCurrency.value || 'USD',
+  unit_price: 0,
+  price_source: 'manual',
+  provider: null,
+  external_ref: null
+});
+
+const form = reactive<HoldingPayload>(blank());
+const coinQuery = ref('');
+const results = ref<CoinSearchResult[]>([]);
+const error = ref('');
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+
+watch(
+  () => props.open,
+  (open) => {
+    if (!open) return;
+    error.value = '';
+    results.value = [];
+    if (props.editing) {
+      Object.assign(form, {
+        name: props.editing.name,
+        symbol: props.editing.symbol ?? '',
+        quantity: props.editing.quantity,
+        currency: props.editing.currency,
+        unit_price: props.editing.unit_price,
+        price_source: props.editing.price_source,
+        provider: props.editing.provider ?? null,
+        external_ref: props.editing.external_ref ?? null
+      });
+      coinQuery.value = props.editing.external_ref ?? '';
+    } else {
+      Object.assign(form, blank());
+      coinQuery.value = '';
+    }
+  }
+);
+
+function onSearch() {
+  form.provider = null;
+  form.external_ref = null;
+  if (searchTimer) clearTimeout(searchTimer);
+  const q = coinQuery.value.trim();
+  if (q.length < 2) {
+    results.value = [];
+    return;
+  }
+  searchTimer = setTimeout(async () => {
+    results.value = await holdingsApi.search(q);
+  }, 300);
+}
+
+function pickCoin(c: CoinSearchResult) {
+  form.provider = 'coingecko';
+  form.external_ref = c.id;
+  form.symbol = c.symbol;
+  if (!form.name) form.name = c.name;
+  coinQuery.value = c.name;
+  results.value = [];
+}
+
+function submit() {
+  error.value = '';
+  if (!form.name.trim()) {
+    error.value = t('Name is required.');
+    return;
+  }
+  if (!form.quantity || form.quantity <= 0) {
+    error.value = t('Enter a quantity greater than 0.');
+    return;
+  }
+  if (form.price_source === 'auto' && !form.external_ref) {
+    error.value = t('Pick a coin to price it automatically.');
+    return;
+  }
+  emit('submit', { ...form });
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+
+.modal-root {
+  position: fixed;
+  inset: 0;
+  z-index: $z-index-modal;
+  background: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+
+  @media (min-width: $breakpoint-md) {
+    align-items: center;
+    padding: $spacing-6;
+  }
+}
+
+.modal-panel {
+  width: 100%;
+  max-width: 460px;
+  max-height: 90vh;
+  overflow-y: auto;
+  background: $bg-white;
+  border-radius: 20px 20px 0 0;
+  padding: $spacing-5;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-4;
+  box-shadow: $elevation-5;
+
+  @media (min-width: $breakpoint-md) {
+    border-radius: 20px;
+  }
+}
+
+.modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.icon-btn {
+  width: 34px;
+  height: 34px;
+  border: none;
+  border-radius: 50%;
+  background: $bg-light;
+  color: $text-secondary;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+
+  label {
+    font-size: $font-size-sm;
+    font-weight: $font-medium;
+    color: $text-primary;
+  }
+
+  .opt {
+    color: $text-muted;
+    font-weight: $font-normal;
+  }
+
+  input,
+  select {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    height: 46px;
+    padding: 0 12px;
+    border: 1px solid $border-color;
+    border-radius: $radius-lg;
+    background: $bg-white;
+    color: $text-primary;
+    font-size: 15px;
+
+    &:focus {
+      outline: none;
+      border-color: $primary;
+    }
+  }
+}
+
+.field-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $spacing-3;
+}
+
+.seg {
+  display: flex;
+  gap: 6px;
+  padding: 4px;
+  background: $bg-light;
+  border-radius: 12px;
+}
+
+.seg-btn {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px;
+  border: none;
+  border-radius: 9px;
+  background: transparent;
+  color: $text-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-medium;
+  cursor: pointer;
+}
+
+.seg-btn--active {
+  background: $bg-white;
+  color: $text-primary;
+  box-shadow: $elevation-1;
+}
+
+.coin-results {
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  border: 1px solid $border-color;
+  border-radius: $radius-lg;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.coin-option {
+  width: 100%;
+  text-align: left;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: $font-size-sm;
+  color: $text-primary;
+
+  &:hover {
+    background: $bg-light;
+  }
+}
+
+.coin-symbol {
+  font-weight: $font-bold;
+  margin-right: 6px;
+}
+
+.coin-picked {
+  margin: 0;
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.form-error {
+  margin: 0;
+  color: var(--color-expense, #dc2626);
+  font-size: $font-size-sm;
+}
+
+.submit {
+  height: 48px;
+  border: none;
+  border-radius: $radius-lg;
+  background: $primary;
+  color: #fff;
+  font-weight: $font-semibold;
+  font-size: 15px;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+</style>
diff --git a/components/settings/SettingsDisplay.vue b/components/settings/SettingsDisplay.vue
index 1b22eed..f726280 100644
--- a/components/settings/SettingsDisplay.vue
+++ b/components/settings/SettingsDisplay.vue
@@ -33,11 +33,13 @@
 import { ref, onMounted } from 'vue';
 import { Sun, Moon, MessageSquare } from 'lucide-vue-next';
 import { useTheme } from '~/composables/useTheme';
+import { useNotifications } from '~/composables/useNotifications';
 import configurationsApi from '@/services/api/configurationsApi';
 import { CONFIGURATION_KEYS } from '@/utils/configurationKeys';
 
 const { t } = useI18n();
 const { isDark, toggleTheme } = useTheme();
+const { showError } = useNotifications();
 
 const chatFirst = ref(true);
 const savingLanding = ref(false);
@@ -49,10 +51,9 @@ onMounted(async () => {
     const item = (Array.isArray(items) ? items : []).find(
       (i) => i.key === CONFIGURATION_KEYS.LANDING_MODE
     );
-    // Default to chat-first when unset.
-    chatFirst.value = item ? item.value !== 'dashboard' : true;
+    chatFirst.value = item ? item.value === 'chat' : false;
   } catch {
-    chatFirst.value = true;
+    chatFirst.value = false;
   }
 });
 
@@ -61,9 +62,13 @@ const toggleLanding = async () => {
   const next = !chatFirst.value;
   try {
     await configurationsApi.update(CONFIGURATION_KEYS.LANDING_MODE, {
-      value: next ? 'chat' : 'dashboard'
+      value: next ? 'chat' : 'dashboard',
+      type: 'string'
     });
     chatFirst.value = next;
+  } catch {
+    // Leave the toggle on its previous value and tell the user it didn't save.
+    showError(t('Could not save that setting. Please try again.'));
   } finally {
     savingLanding.value = false;
   }
diff --git a/composables/useLanding.ts b/composables/useLanding.ts
index 7628d5e..a2abfb5 100644
--- a/composables/useLanding.ts
+++ b/composables/useLanding.ts
@@ -1,15 +1,16 @@
 import { CONFIGURATION_KEYS } from '~/utils/configurationKeys';
 
 /**
- * Where an authenticated, onboarded user should land. Chat-first (the centered
- * chat at /home) is the default; users can switch to the dashboard in settings.
+ * Where an authenticated, onboarded user should land. The dashboard is the
+ * default; users can opt into the chat-first home (the centered chat at /home)
+ * in settings.
  */
 export async function resolveLandingPath(): Promise<string> {
   try {
     const sharedData = useSharedData();
     const configs = await sharedData.loadConfigurations();
-    return configs?.[CONFIGURATION_KEYS.LANDING_MODE] === 'dashboard' ? '/dashboard' : '/home';
+    return configs?.[CONFIGURATION_KEYS.LANDING_MODE] === 'chat' ? '/home' : '/dashboard';
   } catch {
-    return '/home';
+    return '/dashboard';
   }
 }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 766e4d6..fb5768b 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1148,5 +1148,94 @@
   "per transaction": "per transaction",
   "top destination": "top destination",
   "Hey {name}": "Hey {name}",
-  "Showing {period}.": "Showing {period}."
+  "Showing {period}.": "Showing {period}.",
+  "Intent": "Intent",
+  "Regular": "Regular",
+  "Loan received": "Loan received",
+  "Loan repayment": "Loan repayment",
+  "Debt owed": "Debt owed",
+  "Debt settled": "Debt settled",
+  "Investment purchase": "Investment purchase",
+  "Investment return": "Investment return",
+  "Gift": "Gift",
+  "Financial position": "Financial position",
+  "Earnings and spending, with borrowed money and investments separated out.": "Earnings and spending, with borrowed money and investments separated out.",
+  "Earned income": "Earned income",
+  "Excludes loans, gifts and investment returns": "Excludes loans, gifts and investment returns",
+  "Discretionary spend": "Discretionary spend",
+  "Excludes loan repayments and investment buys": "Excludes loan repayments and investment buys",
+  "Outstanding loans & debt": "Outstanding loans & debt",
+  "Net of what you borrowed and repaid": "Net of what you borrowed and repaid",
+  "Investments": "Investments",
+  "Returns": "Returns",
+  "Principal": "Principal",
+  "Net worth change": "Net worth change",
+  "Earned income minus real spend, plus investment returns and gifts": "Earned income minus real spend, plus investment returns and gifts",
+  "No data for this period yet.": "No data for this period yet.",
+  "Position": "Position",
+  "This month": "This month",
+  "Shrinking": "Shrinking",
+  "Real earnings and returns, minus real spend. Loans and debt are left out.": "Real earnings and returns, minus real spend. Loans and debt are left out.",
+  "Builds": "Builds",
+  "Reduces": "Reduces",
+  "Real money": "Real money",
+  "Real savings": "Real savings",
+  "Earned income minus discretionary spend": "Earned income minus discretionary spend",
+  "Tracked separately": "Tracked separately",
+  "Not counted as earnings": "Not counted as earnings",
+  "Money in that you did not earn": "Money in that you did not earn",
+  "Gifts received": "Gifts received",
+  "{n} transactions": "{n} transactions",
+  "No transactions for this in the selected period.": "No transactions for this in the selected period.",
+  "Invested {invested} · Returns {returns}": "Invested {invested} · Returns {returns}",
+  "Real earnings, returns and gifts, minus real spend. Loans, debt and money moved into investments are left out.": "Real earnings, returns and gifts, minus real spend. Loans, debt and money moved into investments are left out.",
+  "Where your money came from and where it went, grouped by what it really was.": "Where your money came from and where it went, grouped by what it really was.",
+  "Real earnings, returns and gifts, minus real spend. Borrowed money and money parked in investments do not count.": "Real earnings, returns and gifts, minus real spend. Borrowed money and money parked in investments do not count.",
+  "Money in": "Money in",
+  "Money out": "Money out",
+  "cash, not net worth": "cash, not net worth",
+  "Greyed rows move cash but not net worth: borrowed money, debt, and money parked in investments.": "Greyed rows move cash but not net worth: borrowed money, debt, and money parked in investments.",
+  "Investment returns": "Investment returns",
+  "Debt repaid to you": "Debt repaid to you",
+  "Invested": "Invested",
+  "Moves cash, but not your net worth.": "Moves cash, but not your net worth.",
+  "Holdings": "Holdings",
+  "Assets you own: crypto, stocks, property and more.": "Assets you own: crypto, stocks, property and more.",
+  "Assets you own: crypto, stocks, property": "Assets you own: crypto, stocks, property",
+  "Net worth, grouped by intent": "Net worth, grouped by intent",
+  "Charts and insights": "Charts and insights",
+  "Refresh prices": "Refresh prices",
+  "Add holding": "Add holding",
+  "Edit holding": "Edit holding",
+  "Total value": "Total value",
+  "Total net worth now": "Total net worth now",
+  "Cash": "Cash",
+  "No holdings yet. Add Bitcoin, a stock, or any asset you own.": "No holdings yet. Add Bitcoin, a stock, or any asset you own.",
+  "Live": "Live",
+  "Price source": "Price source",
+  "Live crypto": "Live crypto",
+  "Coin": "Coin",
+  "Search Bitcoin, Ethereum...": "Search Bitcoin, Ethereum...",
+  "Priced automatically from CoinGecko": "Priced automatically from CoinGecko",
+  "Name": "Name",
+  "Bitcoin, Apple, Rental flat...": "Bitcoin, Apple, Rental flat...",
+  "Symbol": "Symbol",
+  "Quantity": "Quantity",
+  "Currency": "Currency",
+  "Price per unit": "Price per unit",
+  "Name is required.": "Name is required.",
+  "Enter a quantity greater than 0.": "Enter a quantity greater than 0.",
+  "Pick a coin to price it automatically.": "Pick a coin to price it automatically.",
+  "Save changes": "Save changes",
+  "Holding updated": "Holding updated",
+  "Holding added": "Holding added",
+  "Holding deleted": "Holding deleted",
+  "Could not save the holding.": "Could not save the holding.",
+  "Could not delete the holding.": "Could not delete the holding.",
+  "Could not refresh prices.": "Could not refresh prices.",
+  "Prices refreshed": "Prices refreshed",
+  "Delete \"{name}\"?": "Delete \"{name}\"?",
+  "Discussions": "Discussions",
+  "Chat and ask about your finances": "Chat and ask about your finances",
+  "Could not save that setting. Please try again.": "Could not save that setting. Please try again."
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d227dc5..af4a350 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,7 +1,11 @@
 import { defineNuxtConfig } from 'nuxt/config';
+import Icons from 'unplugin-icons/vite';
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  vite: {
+    plugins: [Icons({ compiler: 'vue3', autoInstall: false })]
+  },
   compatibilityDate: '2024-04-03',
   devtools: { enabled: false },
   ssr: true,
diff --git a/package-lock.json b/package-lock.json
index eecac7e..98fa0d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
       "devDependencies": {
         "@commitlint/cli": "^19.8.1",
         "@commitlint/config-conventional": "^19.8.1",
+        "@iconify-json/solar": "^1.2.5",
         "@nuxt/eslint": "^1.9.0",
         "@nuxt/test-utils": "^3.21.0",
         "@rushstack/eslint-patch": "^1.10.3",
@@ -43,6 +44,7 @@
         "happy-dom": "^20.0.11",
         "prettier": "^3.3.3",
         "sass": "^1.89.0",
+        "unplugin-icons": "^23.0.1",
         "vitest": "^3.2.4"
       }
     },
@@ -1955,6 +1957,35 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify-json/solar": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@iconify-json/solar/-/solar-1.2.5.tgz",
+      "integrity": "sha512-WMAiNwchU8zhfrySww6KQBRIBbsQ6SvgIu2yA+CHGyMima/0KQwT5MXogrZPJGoQF+1Ye3Qj6K+1CiyNn3YkoA==",
+      "dev": true,
+      "license": "CC-BY-4.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.3.tgz",
+      "integrity": "sha512-LPKOXPn/zV+zis1oOfGWogaXVpqUybF3ZS6SCZIsz8vg0ivVp9+fVqyYB7xq0aiST/VhUQYGO1qo6uoYSiEJqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/types": "^2.0.0",
+        "import-meta-resolve": "^4.2.0"
+      }
+    },
     "node_modules/@internationalized/date": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.1.tgz",
@@ -3276,6 +3307,7 @@
       "version": "13.2.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
       "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==",
+      "license": "MIT",
       "optional": true,
       "peer": true,
       "engines": {
@@ -12540,6 +12572,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/obug": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.3.tgz",
+      "integrity": "sha512-9miFgM2OFba7hB+pRgvtV84pYTBaoTHohvmIgiRt6dRIzbwEOIaNaP+dIlGs2fNFoB0SeISs0Jz5WFVRid6Xyg==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/ofetch": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.5.1.tgz",
@@ -15351,6 +15397,43 @@
         "node": ">=18.12.0"
       }
     },
+    "node_modules/unplugin-icons": {
+      "version": "23.0.1",
+      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-23.0.1.tgz",
+      "integrity": "sha512-rv0XEJepajKzDLvRUWASM8K+8+/CCfZn2jtogXqg6RIp7kpatRc/aFrVJn8ANQA09e++lPEEv9yX8cC9enc+QQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/utils": "^3.1.0",
+        "local-pkg": "^1.1.2",
+        "obug": "^2.1.1",
+        "unplugin": "^2.3.11"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@svgr/core": ">=7.0.0",
+        "@svgx/core": "^1.0.1",
+        "@vue/compiler-sfc": "^3.0.2",
+        "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@svgr/core": {
+          "optional": true
+        },
+        "@svgx/core": {
+          "optional": true
+        },
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/unplugin-utils": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.2.5.tgz",
diff --git a/package.json b/package.json
index d294962..6881556 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
+    "@iconify-json/solar": "^1.2.5",
     "@nuxt/eslint": "^1.9.0",
     "@nuxt/test-utils": "^3.21.0",
     "@rushstack/eslint-patch": "^1.10.3",
@@ -53,6 +54,7 @@
     "happy-dom": "^20.0.11",
     "prettier": "^3.3.3",
     "sass": "^1.89.0",
+    "unplugin-icons": "^23.0.1",
     "vitest": "^3.2.4"
   }
 }
diff --git a/pages/financial-position/index.vue b/pages/financial-position/index.vue
new file mode 100644
index 0000000..ceb26b8
--- /dev/null
+++ b/pages/financial-position/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="financial-position-page">
+    <FinancialPositionView />
+  </div>
+</template>
+
+<script setup lang="ts">
+import FinancialPositionView from '@/components/financial-position/FinancialPositionView.vue';
+
+definePageMeta({ layout: 'dashboard', middleware: 'auth' });
+</script>
+
+<style lang="scss" scoped>
+.financial-position-page {
+  width: 100%;
+}
+</style>
diff --git a/pages/holdings/index.vue b/pages/holdings/index.vue
new file mode 100644
index 0000000..d5dd028
--- /dev/null
+++ b/pages/holdings/index.vue
@@ -0,0 +1,394 @@
+<template>
+  <div class="holdings">
+    <header class="hd-head">
+      <div>
+        <h1 class="hd-title">{{ t('Holdings') }}</h1>
+        <p class="hd-sub">{{ t('Assets you own: crypto, stocks, property and more.') }}</p>
+      </div>
+      <div class="hd-actions">
+        <button class="btn btn--ghost" :disabled="refreshing" @click="refresh">
+          <RefreshCw :size="15" :class="{ spin: refreshing }" /> {{ t('Refresh prices') }}
+        </button>
+        <button class="btn btn--primary" @click="openCreate">
+          <Plus :size="16" /> {{ t('Add holding') }}
+        </button>
+      </div>
+    </header>
+
+    <section class="hd-total surface surface--brand tone-card">
+      <span class="eyebrow">{{ t('Total value') }}</span>
+      <p class="hd-total-value">{{ money(totalValue, totalCurrency) }}</p>
+    </section>
+
+    <LoadingSkeleton v-if="loading && !holdings.length" variant="list" :count="4" />
+
+    <div v-else-if="!holdings.length" class="hd-empty">
+      <Coins :size="44" class="hd-empty-ico" />
+      <p>{{ t('No holdings yet. Add Bitcoin, a stock, or any asset you own.') }}</p>
+    </div>
+
+    <ul v-else class="hd-list">
+      <li v-for="h in holdings" :key="h.id" class="hd-card surface tone-card">
+        <span class="hd-ico"
+          ><component :is="h.price_source === 'auto' ? Bitcoin : Landmark" :size="18"
+        /></span>
+        <div class="hd-main">
+          <div class="hd-name-row">
+            <span class="hd-name">{{ h.name }}</span>
+            <span v-if="h.symbol" class="hd-symbol">{{ h.symbol }}</span>
+            <span class="hd-badge" :class="`hd-badge--${h.price_source}`">
+              {{ h.price_source === 'auto' ? t('Live') : t('Manual') }}
+            </span>
+          </div>
+          <span class="hd-meta">
+            {{ formatQty(h.quantity) }} × {{ money(h.unit_price, h.currency) }}
+          </span>
+        </div>
+        <span class="hd-value">{{ money(h.value, h.currency) }}</span>
+        <div class="hd-row-actions">
+          <button class="icon-btn" :aria-label="t('Edit')" @click="openEdit(h)">
+            <Pencil :size="15" />
+          </button>
+          <button class="icon-btn" :aria-label="t('Delete')" @click="remove(h)">
+            <Trash2 :size="15" />
+          </button>
+        </div>
+      </li>
+    </ul>
+
+    <HoldingForm
+      :open="formOpen"
+      :editing="editing"
+      :submitting="submitting"
+      @submit="save"
+      @close="formOpen = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Plus, RefreshCw, Pencil, Trash2, Coins, Bitcoin, Landmark } from 'lucide-vue-next';
+import LoadingSkeleton from '@/components/LoadingSkeleton.vue';
+import HoldingForm from '@/components/holdings/HoldingForm.vue';
+import holdingsApi from '@/services/api/holdingsApi';
+import statsApi from '@/services/api/statsApi';
+import { formatShortAmount } from '@/utils/currency';
+import { useNotifications } from '~/composables/useNotifications';
+import { useAuth } from '~/composables/useAuth';
+import type { Holding, HoldingPayload } from '~/types/holding';
+
+definePageMeta({ layout: 'dashboard', middleware: 'auth' });
+
+const { t } = useI18n();
+const { confirmDelete, showSuccess, showError } = useNotifications();
+const { user } = useAuth();
+
+const holdings = ref<Holding[]>([]);
+const totalValue = ref(0);
+const totalCurrency = ref('USD');
+const loading = ref(false);
+const refreshing = ref(false);
+const submitting = ref(false);
+const formOpen = ref(false);
+const editing = ref<Holding | null>(null);
+
+const money = (n: number, currency: string) =>
+  formatShortAmount(`${Math.round((n || 0) * 100) / 100} ${currency}`);
+const formatQty = (n: number) => Number(n).toLocaleString(undefined, { maximumFractionDigits: 8 });
+
+async function load() {
+  loading.value = true;
+  try {
+    const res = await holdingsApi.fetchAll();
+    holdings.value = res.data || [];
+    // The package list isn't currency-converted; the converted total comes from
+    // the same place the Financial Position net worth does.
+    try {
+      const stats = await statsApi.fetch({ section: 'position' });
+      totalValue.value = stats.data?.position?.holdings_value ?? 0;
+      totalCurrency.value = (stats.data as { currency?: string })?.currency ?? 'USD';
+    } catch {
+      totalValue.value = 0;
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openCreate() {
+  editing.value = null;
+  formOpen.value = true;
+}
+
+function openEdit(h: Holding) {
+  editing.value = h;
+  formOpen.value = true;
+}
+
+async function save(payload: HoldingPayload) {
+  submitting.value = true;
+  try {
+    if (editing.value) {
+      await holdingsApi.update(editing.value.id, payload);
+      showSuccess(t('Holding updated'));
+    } else {
+      const ownerId = Number((user.value as { id?: number } | null)?.id);
+      if (!ownerId) {
+        showError(t('Could not save the holding.'));
+        return;
+      }
+      await holdingsApi.create(payload, { owner_type: 'App\\Models\\User', owner_id: ownerId });
+      showSuccess(t('Holding added'));
+    }
+    formOpen.value = false;
+    await load();
+  } catch {
+    showError(t('Could not save the holding.'));
+  } finally {
+    submitting.value = false;
+  }
+}
+
+async function remove(h: Holding) {
+  const ok = await confirmDelete(t('Delete "{name}"?', { name: h.name }));
+  if (!ok) return;
+  try {
+    await holdingsApi.delete(h.id);
+    showSuccess(t('Holding deleted'));
+    await load();
+  } catch {
+    showError(t('Could not delete the holding.'));
+  }
+}
+
+async function refresh() {
+  refreshing.value = true;
+  try {
+    await holdingsApi.refreshPrices();
+    await load();
+    showSuccess(t('Prices refreshed'));
+  } catch {
+    showError(t('Could not refresh prices.'));
+  } finally {
+    refreshing.value = false;
+  }
+}
+
+onMounted(load);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/_variables.scss' as *;
+@use '@/assets/scss/_surfaces.scss' as *;
+
+.holdings {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-4;
+}
+
+.hd-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: $spacing-4;
+  flex-wrap: wrap;
+}
+
+.hd-title {
+  margin: 0;
+  font-size: $font-size-xl;
+  font-weight: $font-bold;
+  color: $text-primary;
+}
+
+.hd-sub {
+  margin: 4px 0 0;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.hd-actions {
+  display: flex;
+  gap: $spacing-2;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 40px;
+  padding: 0 16px;
+  border-radius: 999px;
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  cursor: pointer;
+  border: 1px solid transparent;
+
+  &--primary {
+    background: $primary;
+    color: #fff;
+  }
+  &--ghost {
+    background: $bg-white;
+    border-color: $border-color;
+    color: $text-primary;
+  }
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.hd-total {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: $spacing-4 $spacing-5;
+}
+
+.hd-total-value {
+  margin: 0;
+  font-size: 2rem;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  color: var(--surface-deep);
+}
+
+.hd-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-3;
+}
+
+.hd-card {
+  display: flex;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-3 $spacing-4;
+}
+
+.hd-ico {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: 12px;
+  background: $bg-light;
+  color: $text-secondary;
+}
+
+.hd-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.hd-name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.hd-name {
+  font-size: $font-size-sm;
+  font-weight: $font-semibold;
+  color: $text-primary;
+}
+
+.hd-symbol {
+  font-size: 11px;
+  font-weight: $font-bold;
+  color: $text-muted;
+}
+
+.hd-badge {
+  font-size: 9px;
+  font-weight: $font-bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 2px 7px;
+  border-radius: 999px;
+
+  &--auto {
+    background: rgba(14, 165, 233, 0.14);
+    color: #0284c7;
+  }
+  &--manual {
+    background: $bg-light;
+    color: $text-muted;
+  }
+}
+
+.hd-meta {
+  font-size: 11px;
+  color: $text-muted;
+  font-variant-numeric: tabular-nums;
+}
+
+.hd-value {
+  font-size: $font-size-lg;
+  font-weight: $font-bold;
+  font-variant-numeric: tabular-nums;
+  color: $text-primary;
+}
+
+.hd-row-actions {
+  display: flex;
+  gap: 2px;
+}
+
+.icon-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: $text-muted;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background: $bg-light;
+    color: $text-primary;
+  }
+}
+
+.hd-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-3;
+  padding: $spacing-6;
+  text-align: center;
+  color: $text-muted;
+  background: $bg-white;
+  border: 1px dashed $border-color;
+  border-radius: 18px;
+}
+
+.hd-empty-ico {
+  color: var(--color-border-medium, #cbd5e1);
+}
+</style>
diff --git a/pages/login.vue b/pages/login.vue
index fe54fa7..9c22fc8 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -67,10 +67,8 @@ const handleSubmit = async () => {
   if (!isOnboardingComplete) {
     router.push('/onboarding');
   } else {
-    // Chat-first (the centered chat at /home) is the default landing; the user
-    // can switch to the dashboard in settings.
     const landingMode = configs?.[CONFIGURATION_KEYS.LANDING_MODE];
-    router.push(landingMode === 'dashboard' ? '/dashboard' : '/home');
+    router.push(landingMode === 'chat' ? '/home' : '/dashboard');
   }
   loading.value = false;
 };
diff --git a/pages/reports.vue b/pages/reports.vue
index 29e122f..684f6d8 100644
--- a/pages/reports.vue
+++ b/pages/reports.vue
@@ -92,6 +92,10 @@
             @drill="openDrill"
           />
         </template>
+
+        <template v-else-if="activeTab === 'position'">
+          <FinancialPositionView :params="positionParams" />
+        </template>
       </div>
     </Transition>
 
@@ -117,7 +121,15 @@
 
 <script setup>
 import { ref, computed } from 'vue';
-import { LayoutDashboard, Calendar as CalIcon, Workflow, Layers, BarChart3 } from 'lucide-vue-next';
+import {
+  LayoutDashboard,
+  Calendar as CalIcon,
+  Workflow,
+  Layers,
+  BarChart3,
+  Scale
+} from 'lucide-vue-next';
+import FinancialPositionView from '@/components/financial-position/FinancialPositionView.vue';
 import ReportsTabs from '@/components/reports/ReportsTabs.vue';
 import PeriodControl from '@/components/reports/PeriodControl.vue';
 import CashflowHero from '@/components/reports/CashflowHero.vue';
@@ -177,11 +189,17 @@ const tabs = computed(() => [
     label: t('Categories'),
     icon: Layers,
     count: expenseCategories.value.length + incomeCategories.value.length
-  }
+  },
+  { value: 'position', label: t('Position'), icon: Scale }
 ]);
 
 const currency = computed(() => primaryCurrency.value);
 
+const positionParams = computed(() => ({
+  start_date: range.value.start.toISOString().slice(0, 10),
+  end_date: range.value.end.toISOString().slice(0, 10)
+}));
+
 const format = (n, cur) =>
   formatShortAmount(`${Math.round((n || 0) * 100) / 100} ${cur || currency.value}`);
 
diff --git a/services/api/holdingsApi.ts b/services/api/holdingsApi.ts
new file mode 100644
index 0000000..5ea0e48
--- /dev/null
+++ b/services/api/holdingsApi.ts
@@ -0,0 +1,62 @@
+import type {
+  Holding,
+  HoldingPayload,
+  HoldingOwner,
+  HoldingsResponse,
+  CoinSearchResult
+} from '~/types/holding';
+import type { ApiResponse } from '~/types/transaction';
+
+// The package returns a paginated envelope under `data`.
+interface Paginated<T> {
+  data: T[];
+}
+
+const holdingsApi = {
+  async fetchAll(): Promise<HoldingsResponse> {
+    const api = useApi();
+    const response = await api<ApiResponse<Paginated<Holding>>>('/holdings?per_page=200');
+    return { data: response?.data?.data ?? [] };
+  },
+
+  async create(payload: HoldingPayload, owner: HoldingOwner): Promise<Holding | null> {
+    const api = useApi();
+    const response = await api<ApiResponse<Holding>>('/holdings', {
+      method: 'POST',
+      body: { ...payload, ...owner }
+    });
+    return response?.data ?? null;
+  },
+
+  async update(id: number, payload: Partial<HoldingPayload>): Promise<Holding | null> {
+    const api = useApi();
+    const response = await api<ApiResponse<Holding>>(`/holdings/${id}`, {
+      method: 'PUT',
+      body: payload
+    });
+    return response?.data ?? null;
+  },
+
+  async delete(id: number): Promise<boolean> {
+    const api = useApi();
+    await api(`/holdings/${id}`, { method: 'DELETE' });
+    return true;
+  },
+
+  async refreshPrices(): Promise<boolean> {
+    const api = useApi();
+    await api('/holdings/reprice', { method: 'POST' });
+    return true;
+  },
+
+  async search(query: string): Promise<CoinSearchResult[]> {
+    const api = useApi();
+    const response = await api<ApiResponse<CoinSearchResult[]>>(
+      `/asset-prices/search?q=${encodeURIComponent(query)}`
+    );
+    return response?.data ?? [];
+  }
+};
+
+export default holdingsApi;
+export { holdingsApi };
diff --git a/services/api/statsApi.ts b/services/api/statsApi.ts
index 60ffbc5..d4327ea 100644
--- a/services/api/statsApi.ts
+++ b/services/api/statsApi.ts
@@ -4,7 +4,25 @@ export type StatsSection =
   | 'comparisons'
   | 'categories'
   | 'parties'
-  | 'cashflow';
+  | 'cashflow'
+  | 'position';
+
+export interface PositionData {
+  earned_income: number;
+  discretionary_spend: number;
+  cash_balance: number;
+  holdings_value: number;
+  total_net_worth: number;
+  loan_received: number;
+  loan_repayment: number;
+  debt_owed: number;
+  debt_settled: number;
+  loans_debt_net: number;
+  investment_principal: number;
+  investment_returns: number;
+  gifts_received: number;
+  net_worth_delta: number;
+}
 
 export interface StatsParams {
   preset?: 'all_time' | 'current_week' | 'current_month' | 'last_3_months';
@@ -74,6 +92,7 @@ export interface StatsResponse {
       monthly_cash_flow: MonthlyCashFlow[];
       expense_by_wallet?: PartyData[];
     };
+    position?: PositionData;
     // Set when amounts in a currency with no available exchange rate were
     // excluded from the totals, so figures are understated for those currencies.
     partial?: boolean;
diff --git a/services/transactionApi.ts b/services/transactionApi.ts
index 02bf897..34fd3fd 100644
--- a/services/transactionApi.ts
+++ b/services/transactionApi.ts
@@ -23,6 +23,12 @@ const transactionApi = {
     if (params?.type) {
       queryParams.append('type', params.type);
     }
+    if (params?.intent) {
+      queryParams.append('intent', params.intent);
+    }
+    if (params?.exclude_transfers) {
+      queryParams.append('exclude_transfers', '1');
+    }
     if (params?.limit) {
       queryParams.append('limit', params.limit.toString());
     }
diff --git a/tests/components/TransactionForm.test.ts b/tests/components/TransactionForm.test.ts
index 73ed30d..c6956dc 100644
--- a/tests/components/TransactionForm.test.ts
+++ b/tests/components/TransactionForm.test.ts
@@ -170,7 +170,7 @@ describe('TransactionForm', () => {
         global: { stubs }
       });
 
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.text()).toContain('Enter a valid amount greater than 0');
     });
@@ -181,7 +181,7 @@ describe('TransactionForm', () => {
       });
 
       await wrapper.find('input[type="number"]').setValue('0');
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.text()).toContain('Enter a valid amount greater than 0');
     });
@@ -192,7 +192,7 @@ describe('TransactionForm', () => {
       });
 
       await wrapper.find('input[type="number"]').setValue('-50');
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.text()).toContain('Enter a valid amount greater than 0');
     });
@@ -202,7 +202,7 @@ describe('TransactionForm', () => {
         global: { stubs }
       });
 
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.emitted('submit')).toBeFalsy();
     });
@@ -217,7 +217,7 @@ describe('TransactionForm', () => {
 
       await wrapper.find('input[type="number"]').setValue('100');
       await wrapper.find('textarea').setValue('Test expense');
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.emitted('submit')).toBeTruthy();
       const payload = wrapper.emitted('submit')?.[0]?.[0];
@@ -233,7 +233,7 @@ describe('TransactionForm', () => {
 
       await wrapper.find('input[type="number"]').setValue('500');
       await wrapper.find('textarea').setValue('Test income');
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.emitted('submit')).toBeTruthy();
       const payload = wrapper.emitted('submit')?.[0]?.[0];
@@ -241,6 +241,39 @@ describe('TransactionForm', () => {
       expect(payload.amount).toContain('500');
     });
 
+    it('defaults intent to regular and submits the chosen intent', async () => {
+      const wrapper = mount(TransactionForm, {
+        props: { isOutcomeSelected: false },
+        global: { stubs }
+      });
+
+      await wrapper.find('input[type="number"]').setValue('5000');
+
+      const pills = wrapper.findAll('.intent-pill');
+      expect(pills.length).toBeGreaterThan(1);
+
+      // Pick the "Loan received" intent (income side).
+      const loanPill = pills.find((p) => p.text().includes('Loan received'));
+      expect(loanPill).toBeTruthy();
+      await loanPill!.trigger('click');
+
+      await wrapper.find('.submit-button').trigger('click');
+
+      const payload = wrapper.emitted('submit')?.[0]?.[0];
+      expect(payload.intent).toBe('loan_received');
+    });
+
+    it('only offers income-side intents when recording income', () => {
+      const wrapper = mount(TransactionForm, {
+        props: { isOutcomeSelected: false },
+        global: { stubs }
+      });
+
+      const labels = wrapper.findAll('.intent-pill').map((p) => p.text());
+      expect(labels).toContain('Loan received');
+      expect(labels).not.toContain('Loan repayment');
+    });
+
     it('includes id in payload when editing', async () => {
       const wrapper = mount(TransactionForm, {
         props: {
@@ -251,7 +284,7 @@ describe('TransactionForm', () => {
       });
 
       await wrapper.find('input[type="number"]').setValue('150');
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       const payload = wrapper.emitted('submit')?.[0]?.[0];
       expect(payload.id).toBe(123);
@@ -433,7 +466,7 @@ describe('TransactionForm', () => {
         capturedSelectHandler([1, 2]);
       }
 
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.emitted('submit')).toBeTruthy();
       const payload = wrapper.emitted('submit')?.[0]?.[0];
@@ -447,7 +480,7 @@ describe('TransactionForm', () => {
       });
 
       await wrapper.find('input[type="number"]').setValue('100');
-      await wrapper.find('button').trigger('click');
+      await wrapper.find('.submit-button').trigger('click');
 
       expect(wrapper.emitted('submit')).toBeTruthy();
       const payload = wrapper.emitted('submit')?.[0]?.[0];
diff --git a/tests/components/budgetForm.test.ts b/tests/components/budgetForm.test.ts
new file mode 100644
index 0000000..e73cbd6
--- /dev/null
+++ b/tests/components/budgetForm.test.ts
@@ -0,0 +1,31 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+import BudgetForm from '@/components/budgets/BudgetForm.vue';
+
+vi.mock('~/composables/useSharedData', () => ({
+  useSharedData: () => ({
+    wallets: ref([{ id: 1, name: 'Cash', currency: 'USD' }]),
+    categories: ref([]),
+    groups: ref([])
+  })
+}));
+
+describe('BudgetForm currency options', () => {
+  it('offers every supported currency, not just wallet currencies', () => {
+    const wrapper = mount(BudgetForm);
+    const codes = wrapper.findAll('select.currency option').map((o) => o.text());
+
+    expect(codes).toContain('USD'); // the user's wallet currency
+    expect(codes).toContain('EUR'); // not a wallet currency
+    expect(codes).toContain('XAF'); // not a wallet currency
+    expect(codes.length).toBeGreaterThan(1);
+  });
+
+  it('surfaces the user wallet currency first', () => {
+    const wrapper = mount(BudgetForm);
+    const codes = wrapper.findAll('select.currency option').map((o) => o.text());
+
+    expect(codes[0]).toBe('USD');
+  });
+});
diff --git a/tests/components/financialPositionView.test.ts b/tests/components/financialPositionView.test.ts
new file mode 100644
index 0000000..f6cdcb8
--- /dev/null
+++ b/tests/components/financialPositionView.test.ts
@@ -0,0 +1,157 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import FinancialPositionView from '@/components/financial-position/FinancialPositionView.vue';
+import { statsApi } from '@/services/api/statsApi';
+import transactionApi from '@/services/transactionApi';
+
+vi.mock('@/services/api/statsApi', () => ({
+  statsApi: { fetch: vi.fn() }
+}));
+
+vi.mock('@/services/transactionApi', () => ({
+  default: { fetchAll: vi.fn() }
+}));
+
+const position = {
+  earned_income: 5000,
+  discretionary_spend: 500,
+  loan_received: 3000,
+  loan_repayment: 1000,
+  debt_owed: 0,
+  debt_settled: 0,
+  loans_debt_net: 2000,
+  investment_principal: 2000,
+  investment_returns: 400,
+  gifts_received: 100,
+  net_worth_delta: 5000,
+  cash_balance: 8000,
+  holdings_value: 12000,
+  total_net_worth: 20000
+};
+
+const stubs = {
+  LoadingSkeleton: { template: '<div class="skeleton" />' },
+  NuxtLink: { template: '<a><slot /></a>' }
+};
+
+describe('FinancialPositionView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (statsApi.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({
+      data: { currency: 'USD', position }
+    });
+    (transactionApi.fetchAll as ReturnType<typeof vi.fn>).mockResolvedValue({ data: [] });
+  });
+
+  it('requests the position section', async () => {
+    mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    expect(statsApi.fetch).toHaveBeenCalledWith(expect.objectContaining({ section: 'position' }));
+  });
+
+  it('leads with the net worth result', async () => {
+    const wrapper = mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    const text = wrapper.text();
+    expect(text).toContain('Net worth change');
+    expect(text).toContain('Building'); // net_worth_delta 5000 > 0
+    expect(text).toContain('+5K');
+  });
+
+  it('shows total net worth as cash plus holdings', async () => {
+    const wrapper = mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    const text = wrapper.text();
+    expect(text).toContain('Total net worth now');
+    expect(text).toContain('20K'); // total_net_worth 20000
+    expect(text).toContain('Cash');
+    expect(text).toContain('Holdings');
+  });
+
+  it('organises every intent stream into money in and money out', async () => {
+    const wrapper = mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    const text = wrapper.text();
+    expect(text).toContain('Money in');
+    expect(text).toContain('Money out');
+    // in: earned, returns, gifts, loan received (debt_owed 0 is dropped)
+    // out: discretionary spend, invested, loan repayment (debt_settled 0 dropped)
+    expect(text).toContain('Earned income');
+    expect(text).toContain('Invested'); // investing shows as money out
+    expect(text).toContain('Loan received');
+    expect(wrapper.findAll('.fp-row').length).toBe(7);
+  });
+
+  it('marks borrowed and invested cash as not affecting net worth', async () => {
+    const wrapper = mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    expect(wrapper.findAll('.fp-row--neutral').length).toBe(3); // loan in, invested, loan repayment
+  });
+
+  it('drills into a single intent stream, excluding transfers', async () => {
+    const wrapper = mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    const row = wrapper.findAll('.fp-row').find((node) => node.text().includes('Invested'));
+    expect(row).toBeTruthy();
+    await row!.trigger('click');
+    await flushPromises();
+
+    expect(transactionApi.fetchAll).toHaveBeenCalledWith(
+      expect.objectContaining({
+        intent: 'investment_buy',
+        exclude_transfers: true,
+        type: 'expense'
+      })
+    );
+  });
+
+  it('shows the underlying transactions in the detail drawer', async () => {
+    (transactionApi.fetchAll as ReturnType<typeof vi.fn>).mockResolvedValue({
+      data: [
+        {
+          id: 1,
+          type: 'expense',
+          intent: 'investment_buy',
+          amount: 2000,
+          datetime: '2026-05-10T10:00:00.000Z',
+          wallet: { currency: 'USD' },
+          party: { name: 'Brokerage' },
+          description: 'Index fund'
+        }
+      ]
+    });
+
+    const wrapper = mount(FinancialPositionView, { global: { stubs } });
+    await flushPromises();
+
+    const row = wrapper.findAll('.fp-row').find((node) => node.text().includes('Invested'));
+    await row!.trigger('click');
+    await flushPromises();
+
+    const text = wrapper.text();
+    expect(text).toContain('Index fund');
+    expect(wrapper.findAll('.row').length).toBe(1);
+  });
+
+  it('passes provided params through to the fetch', async () => {
+    mount(FinancialPositionView, {
+      props: { params: { start_date: '2026-01-01', end_date: '2026-01-31' } },
+      global: { stubs }
+    });
+    await flushPromises();
+
+    expect(statsApi.fetch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        section: 'position',
+        start_date: '2026-01-01',
+        end_date: '2026-01-31'
+      })
+    );
+  });
+});
diff --git a/tests/pages/holdings.test.ts b/tests/pages/holdings.test.ts
new file mode 100644
index 0000000..38eb02b
--- /dev/null
+++ b/tests/pages/holdings.test.ts
@@ -0,0 +1,102 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import HoldingsPage from '@/pages/holdings/index.vue';
+import holdingsApi from '@/services/api/holdingsApi';
+
+vi.stubGlobal('definePageMeta', vi.fn());
+
+vi.mock('@/services/api/holdingsApi', () => ({
+  default: {
+    fetchAll: vi.fn(),
+    create: vi.fn(),
+    update: vi.fn(),
+    delete: vi.fn(),
+    refreshPrices: vi.fn(),
+    search: vi.fn()
+  }
+}));
+
+vi.mock('~/composables/useNotifications', () => ({
+  useNotifications: () => ({
+    confirmDelete: vi.fn().mockResolvedValue(true),
+    showSuccess: vi.fn(),
+    showError: vi.fn()
+  })
+}));
+
+vi.mock('~/composables/useSharedData', () => ({
+  useSharedData: () => ({ getDefaultCurrency: { value: 'USD' } })
+}));
+
+vi.mock('~/composables/useAuth', () => ({
+  useAuth: () => ({ user: { value: { id: 7 } } })
+}));
+
+vi.mock('@/services/api/statsApi', () => ({
+  default: {
+    fetch: vi.fn().mockResolvedValue({
+      data: { currency: 'USD', position: { holdings_value: 150000 } }
+    })
+  }
+}));
+
+const stubs = {
+  LoadingSkeleton: { template: '<div class="skeleton" />' },
+  HoldingForm: { template: '<div class="holding-form" />' },
+  NuxtLink: { template: '<a><slot /></a>' }
+};
+
+describe('Holdings page', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (holdingsApi.fetchAll as ReturnType<typeof vi.fn>).mockResolvedValue({
+      data: [
+        {
+          id: 1,
+          name: 'Bitcoin',
+          symbol: 'BTC',
+          quantity: 0.5,
+          currency: 'USD',
+          unit_price: 60000,
+          price_source: 'auto',
+          provider: 'coingecko',
+          external_ref: 'bitcoin',
+          value: 30000
+        },
+        {
+          id: 2,
+          name: 'Rental flat',
+          quantity: 1,
+          currency: 'USD',
+          unit_price: 120000,
+          price_source: 'manual',
+          value: 120000
+        }
+      ],
+      totals: { holdings_value: 150000, currency: 'USD' }
+    });
+  });
+
+  it('lists holdings with their values and total', async () => {
+    const wrapper = mount(HoldingsPage, { global: { stubs } });
+    await flushPromises();
+
+    const text = wrapper.text();
+    expect(text).toContain('Bitcoin');
+    expect(text).toContain('Rental flat');
+    expect(text).toContain('Live'); // crypto source badge
+    expect(text).toContain('Manual'); // manual source badge
+    expect(wrapper.findAll('.hd-card').length).toBe(2);
+  });
+
+  it('refreshes prices on demand', async () => {
+    (holdingsApi.refreshPrices as ReturnType<typeof vi.fn>).mockResolvedValue([]);
+    const wrapper = mount(HoldingsPage, { global: { stubs } });
+    await flushPromises();
+
+    await wrapper.find('.btn--ghost').trigger('click');
+    await flushPromises();
+
+    expect(holdingsApi.refreshPrices).toHaveBeenCalled();
+  });
+});
diff --git a/tests/utils/transactionMapper.test.ts b/tests/utils/transactionMapper.test.ts
index b50e8ef..b6b9c6f 100644
--- a/tests/utils/transactionMapper.test.ts
+++ b/tests/utils/transactionMapper.test.ts
@@ -150,6 +150,33 @@ describe('transactionMapper - recurring fields', () => {
     });
   });
 
+  describe('intent', () => {
+    it('defaults intent to regular when absent from the API', () => {
+      expect(transactionMapper.toFrontend(baseApiTransaction).intent).toBe('regular');
+      expect(transactionMapper.toEditForm(baseApiTransaction).intent).toBe('regular');
+    });
+
+    it('preserves a non-regular intent from the API', () => {
+      const api = { ...baseApiTransaction, intent: 'loan_received' as const };
+      expect(transactionMapper.toFrontend(api).intent).toBe('loan_received');
+      expect(transactionMapper.toEditForm(api).intent).toBe('loan_received');
+    });
+
+    it('round-trips intent through toApi and defaults to regular', () => {
+      const base = {
+        type: 'INCOME' as const,
+        amount: '500 USD',
+        description: 'Salary',
+        date: '2025-06-15',
+        time: '10:30'
+      };
+      expect(transactionMapper.toApi(base).intent).toBe('regular');
+      expect(transactionMapper.toApi({ ...base, intent: 'investment_return' }).intent).toBe(
+        'investment_return'
+      );
+    });
+  });
+
   describe('toFrontendBatch', () => {
     it('maps recurring status for multiple transactions', () => {
       const apiTransactions = [
diff --git a/types/holding.ts b/types/holding.ts
new file mode 100644
index 0000000..18eb504
--- /dev/null
+++ b/types/holding.ts
@@ -0,0 +1,44 @@
+export type PriceSource = 'manual' | 'auto';
+
+export interface Holding {
+  id: number;
+  owner_type?: string;
+  owner_id?: number;
+  name: string;
+  symbol?: string | null;
+  quantity: number;
+  currency: string;
+  unit_price: number;
+  value: number;
+  price_source: PriceSource;
+  provider?: string | null;
+  external_ref?: string | null;
+  last_priced_at?: string | null;
+}
+
+// What the form emits; the owner is attached by the page on create.
+export interface HoldingPayload {
+  name: string;
+  symbol?: string | null;
+  quantity: number;
+  currency: string;
+  unit_price?: number;
+  price_source: PriceSource;
+  provider?: string | null;
+  external_ref?: string | null;
+}
+
+export interface HoldingOwner {
+  owner_type: string;
+  owner_id: number;
+}
+
+export interface HoldingsResponse {
+  data: Holding[];
+}
+
+export interface CoinSearchResult {
+  id: string;
+  name: string;
+  symbol: string;
+}
diff --git a/types/icons.d.ts b/types/icons.d.ts
new file mode 100644
index 0000000..f71a96d
--- /dev/null
+++ b/types/icons.d.ts
@@ -0,0 +1 @@
+/// <reference types="unplugin-icons/types/vue" />
diff --git a/types/transaction.ts b/types/transaction.ts
index 9aaf051..bf5b88a 100644
--- a/types/transaction.ts
+++ b/types/transaction.ts
@@ -1,6 +1,35 @@
+// Intent tag distinguishing real earnings/spend from loan, debt and investment movement
+export type TransactionIntent =
+  | 'regular'
+  | 'loan_received'
+  | 'loan_repayment'
+  | 'debt_owed'
+  | 'debt_settled'
+  | 'investment_buy'
+  | 'investment_return'
+  | 'gift';
+
+export interface IntentOption {
+  value: TransactionIntent;
+  label: string; // English text, also used as the i18n key
+  side: 'income' | 'expense' | 'both';
+}
+
+export const TRANSACTION_INTENT_OPTIONS: IntentOption[] = [
+  { value: 'regular', label: 'Regular', side: 'both' },
+  { value: 'loan_received', label: 'Loan received', side: 'income' },
+  { value: 'loan_repayment', label: 'Loan repayment', side: 'expense' },
+  { value: 'debt_owed', label: 'Debt owed', side: 'income' },
+  { value: 'debt_settled', label: 'Debt settled', side: 'expense' },
+  { value: 'investment_buy', label: 'Investment purchase', side: 'expense' },
+  { value: 'investment_return', label: 'Investment return', side: 'income' },
+  { value: 'gift', label: 'Gift', side: 'income' }
+];
+
 export interface ApiTransaction {
   id: number;
   type: 'income' | 'expense';
+  intent?: TransactionIntent;
   amount: number;
   description: string;
   datetime: string;
@@ -42,6 +71,7 @@ export interface FrontendTransaction {
   date: string; // YYYY-MM-DD
   time: string; // HH:mm
   type: 'INCOME' | 'EXPENSE'; // Uppercase for UI
+  intent?: TransactionIntent;
   party: string; // Display name
   partyId?: number; // Numeric ID
   amount: string; // Formatted with currency e.g., "5000 XAF"
@@ -68,6 +98,7 @@ export interface TransactionCreatePayload {
   client_id?: string; // Concatenated UUID pair (optional)
   amount: number;
   type: 'income' | 'expense';
+  intent?: TransactionIntent;
   description: string;
   datetime: string; // ISO 8601 format
   created_at?: string; // ISO 8601 format
@@ -109,6 +140,8 @@ export interface ApiResponse<T> {
 // Query parameters for GET /transactions
 export interface TransactionQueryParams {
   type?: 'income' | 'expense';
+  intent?: string; // single intent or comma-separated list
+  exclude_transfers?: boolean;
   limit?: number;
   page?: number;
   synced_since?: string;
diff --git a/utils/transactionMapper.ts b/utils/transactionMapper.ts
index 5ad8271..13dd251 100644
--- a/utils/transactionMapper.ts
+++ b/utils/transactionMapper.ts
@@ -75,6 +75,7 @@ export const transactionMapper = {
       date,
       time,
       type: api.type.toUpperCase() as 'INCOME' | 'EXPENSE',
+      intent: api.intent || 'regular',
       party: party?.name || '',
       partyId: party?.id,
       amount: formattedAmount,
@@ -135,6 +136,7 @@ export const transactionMapper = {
       date,
       time,
       type: api.type.toUpperCase() as 'INCOME' | 'EXPENSE',
+      intent: api.intent || 'regular',
       party: party?.name || '',
       partyId: party?.id,
       amount: String(api.amount),
@@ -197,6 +199,7 @@ export const transactionMapper = {
     const payload: TransactionCreatePayload = {
       amount,
       type: (frontend.type?.toLowerCase() as 'income' | 'expense') || 'income',
+      intent: frontend.intent || 'regular',
       description: frontend.description || '',
       datetime,
       party_id: partyId ?? undefined,
diff --git a/vitest.config.ts b/vitest.config.ts
index b0be4e7..b7ddf25 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,9 +1,10 @@
 import { defineConfig } from 'vitest/config';
 import vue from '@vitejs/plugin-vue';
+import Icons from 'unplugin-icons/vite';
 import { resolve } from 'path';
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [Icons({ compiler: 'vue3', autoInstall: false }), vue()],
   test: {
     globals: true,
     environment: 'happy-dom',