From 4ec4cdf4ba28c7bdb40d23ad57dd23b593bb820b Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Fri, 26 Jun 2026 10:54:40 +0200
Subject: [PATCH] feat(libra): surface the "Other" account hint as a warning
 callout

Move the "Use the Other account if you're not sure" guidance out of
the plain instruction line and into a prominent amber Alert with a
warning icon, on both the expense and income account-selection steps.

Split the income i18n string into selectAccount + a new
otherAccountHint key (en/fr/es + types).
---
 src/accounting-app/views/AddIncome.vue         |  9 ++++++++-
 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 | 12 +++++++++---
 6 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/accounting-app/views/AddIncome.vue b/src/accounting-app/views/AddIncome.vue
index a3d044f..cc2938f 100644
--- a/src/accounting-app/views/AddIncome.vue
+++ b/src/accounting-app/views/AddIncome.vue
@@ -81,6 +81,12 @@
             <p class="text-sm text-muted-foreground mb-4">
               {{ t('libra.income.selectAccount') }}
             </p>
+            <Alert class="mb-4 border-amber-500/50 bg-amber-50 text-amber-800 dark:border-amber-500/40 dark:bg-amber-950/30 dark:text-amber-200">
+              <AlertTriangle class="text-amber-600 dark:text-amber-400" />
+              <AlertDescription class="text-amber-800 dark:text-amber-200">
+                {{ t('libra.income.otherAccountHint') }}
+              </AlertDescription>
+            </Alert>
             <AccountSelector
               v-model="selectedRevenueAccount"
               root-account="Income"
@@ -197,6 +203,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Badge } from '@/components/ui/badge'
+import { Alert, AlertDescription } from '@/components/ui/alert'
 import {
   FormControl,
   FormField,
@@ -218,7 +225,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..214f431 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -85,9 +85,14 @@
       <!-- 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.
+          Select the account for this expense.
         </p>
+        <Alert class="mb-4 border-amber-500/50 bg-amber-50 text-amber-800 dark:border-amber-500/40 dark:bg-amber-950/30 dark:text-amber-200">
+          <AlertTriangle class="text-amber-600 dark:text-amber-400" />
+          <AlertDescription class="text-amber-800 dark:text-amber-200">
+            Use the "Other" account if you're not sure.
+          </AlertDescription>
+        </Alert>
         <AccountSelector
           v-model="selectedAccount"
           root-account="Expenses"
@@ -249,6 +254,7 @@ import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Badge } from '@/components/ui/badge'
+import { Alert, AlertDescription } from '@/components/ui/alert'
 import {
   FormControl,
   FormDescription,
@@ -271,7 +277,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'