From d7cd72f8507e11a8a216d0f89064a1ad94d4ac9b Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sat, 8 Nov 2025 00:22:13 +0100
Subject: [PATCH] Enhances account display in expense form

Improves the visual presentation of the selected account in the add expense form by using a badge.

This makes the selected account more prominent and provides a clearer distinction from other text elements.
---
 src/modules/expenses/components/AddExpense.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index 4772057..abb9079 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -161,9 +161,10 @@
 
           <!-- Selected account info -->
           <div class="p-3 rounded-lg bg-muted/50">
-            <p class="text-sm font-medium text-foreground mb-1">
-              Account: {{ selectedAccount?.name }}
-            </p>
+            <div class="flex items-center gap-2 mb-1">
+              <span class="text-sm text-muted-foreground">Account:</span>
+              <Badge variant="secondary" class="font-mono">{{ selectedAccount?.name }}</Badge>
+            </div>
             <p
               v-if="selectedAccount?.description"
               class="text-xs text-muted-foreground"
@@ -212,6 +213,7 @@ import { Button } from '@/components/ui/button'
 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 {
   FormControl,
   FormDescription,