From c035fc2bfcb8c87487c8d2ce5e3518cfc51d9418 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Fri, 26 Jun 2026 11:07:37 +0200
Subject: [PATCH] feat(libra): flag the "Other" account hint on the account
 step
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a compact inline amber warning (icon + text) next to the
"Select the account…" instruction on both the expense and income
account-selection steps, so users know to fall back to the "Other"
account when unsure.

Splits the income i18n into selectAccount + a new otherAccountHint
key (en/fr/es + types).
---
 src/accounting-app/views/AddIncome.vue         | 10 +++++++---
 src/i18n/locales/en.ts                         |  3 ++-
 src/i18n/locales/es.ts                         |  3 ++-
 src/i18n/locales/fr.ts                         |  3 ++-
 src/i18n/types.ts                              |  1 +
 src/modules/expenses/components/AddExpense.vue | 11 +++++++----
 6 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/accounting-app/views/AddIncome.vue b/src/accounting-app/views/AddIncome.vue
index a3d044f..e4b5954 100644
--- a/src/accounting-app/views/AddIncome.vue
+++ b/src/accounting-app/views/AddIncome.vue
@@ -78,8 +78,12 @@
 
           <!-- Step 1: Revenue Account Selection -->
           <div v-if="currentStep === 1">
-            <p class="text-sm text-muted-foreground mb-4">
-              {{ t('libra.income.selectAccount') }}
+            <p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 mb-4 text-sm">
+              <span class="text-muted-foreground">{{ t('libra.income.selectAccount') }}</span>
+              <span class="inline-flex items-center gap-1 font-medium text-amber-600 dark:text-amber-400">
+                <AlertTriangle class="h-4 w-4 shrink-0" />
+                {{ t('libra.income.otherAccountHint') }}
+              </span>
             </p>
             <AccountSelector
               v-model="selectedRevenueAccount"
@@ -218,7 +222,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { TrendingUp, ChevronLeft, Loader2, CheckCircle2, Receipt, Clock } from 'lucide-vue-next'
+import { TrendingUp, ChevronLeft, Loader2, CheckCircle2, Receipt, Clock, AlertTriangle } from 'lucide-vue-next'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { useAuth } from '@/composables/useAuthService'
 import { useToast } from '@/core/composables/useToast'
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 8abe3bf..dbb408c 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -202,7 +202,8 @@ const messages: LocaleMessages = {
     income: {
       title: 'Add Income',
       description: 'Submit income for the organization',
-      selectAccount: 'Select the revenue account. Use the "Other" account if you\'re not sure.',
+      selectAccount: 'Select the revenue account.',
+      otherAccountHint: 'Use the "Other" account if you\'re not sure.',
       submitIncome: 'Submit Income',
       notAvailable: 'Income submission is not yet available. This feature is coming soon.',
     },
diff --git a/src/i18n/locales/es.ts b/src/i18n/locales/es.ts
index 34fadb0..9ca8958 100644
--- a/src/i18n/locales/es.ts
+++ b/src/i18n/locales/es.ts
@@ -202,7 +202,8 @@ const messages: LocaleMessages = {
     income: {
       title: 'A\u00f1adir ingreso',
       description: 'Enviar un ingreso para la organizaci\u00f3n',
-      selectAccount: 'Seleccionar la cuenta de ingresos. Use la cuenta "Other" si no está seguro.',
+      selectAccount: 'Seleccionar la cuenta de ingresos.',
+      otherAccountHint: 'Use la cuenta "Other" si no está seguro.',
       submitIncome: 'Enviar ingreso',
       notAvailable: 'El registro de ingresos a\u00fan no est\u00e1 disponible. Esta funci\u00f3n llegar\u00e1 pronto.',
     },
diff --git a/src/i18n/locales/fr.ts b/src/i18n/locales/fr.ts
index 0d7cdfb..ef37aaa 100644
--- a/src/i18n/locales/fr.ts
+++ b/src/i18n/locales/fr.ts
@@ -202,7 +202,8 @@ const messages: LocaleMessages = {
     income: {
       title: 'Ajouter un revenu',
       description: 'Soumettre un revenu pour l\u2019organisation',
-      selectAccount: 'S\u00e9lectionner le compte de revenus. Utilisez le compte "Other" si vous n\'\u00eates pas s\u00fbr.',
+      selectAccount: 'S\u00e9lectionner le compte de revenus.',
+      otherAccountHint: 'Utilisez le compte "Other" si vous n\'\u00eates pas s\u00fbr.',
       submitIncome: 'Soumettre le revenu',
       notAvailable: 'La saisie de revenus n\u2019est pas encore disponible. Cette fonctionnalit\u00e9 arrive bient\u00f4t.',
     },
diff --git a/src/i18n/types.ts b/src/i18n/types.ts
index ecdf42f..ccce8f7 100644
--- a/src/i18n/types.ts
+++ b/src/i18n/types.ts
@@ -179,6 +179,7 @@ export interface LocaleMessages {
       title: string
       description: string
       selectAccount: string
+      otherAccountHint: string
       submitIncome: string
       notAvailable: string
     }
diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index f49d24e..c591a0c 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -84,9 +84,12 @@
 
       <!-- Step 1: Account Selection -->
       <div v-if="currentStep === 1">
-        <p class="text-sm text-muted-foreground mb-4">
-          Select the account for this expense. Use the "Other" account if
-          you're not sure.
+        <p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 mb-4 text-sm">
+          <span class="text-muted-foreground">Select the account for this expense.</span>
+          <span class="inline-flex items-center gap-1 font-medium text-amber-600 dark:text-amber-400">
+            <AlertTriangle class="h-4 w-4 shrink-0" />
+            Use the "Other" account if you're not sure.
+          </span>
         </p>
         <AccountSelector
           v-model="selectedAccount"
@@ -271,7 +274,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { DollarSign, ChevronLeft, Loader2, CheckCircle2, Receipt, Clock } from 'lucide-vue-next'
+import { DollarSign, ChevronLeft, Loader2, CheckCircle2, Receipt, Clock, AlertTriangle } from 'lucide-vue-next'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { useAuth } from '@/composables/useAuthService'
 import { useToast } from '@/core/composables/useToast'