From 9c4b14f382348762902f3248410a5e14102c355f Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Thu, 13 Nov 2025 16:57:06 +0100
Subject: [PATCH] Emphasize pending approval status in expense success dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added prominent orange "Pending Admin Approval" badge with clock icon
- Updated messaging to clarify admin review process
- Improved visual hierarchy in success confirmation
- Enhanced user awareness of approval workflow

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/modules/expenses/components/AddExpense.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index 8a83ef2..99f3462 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -9,13 +9,22 @@
         </div>
 
         <!-- Success Message -->
-        <div class="text-center space-y-2">
+        <div class="text-center space-y-3">
           <h2 class="text-2xl font-bold">Expense Submitted Successfully!</h2>
+
+          <!-- Pending Approval Badge -->
+          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-orange-100 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800">
+            <Clock class="h-4 w-4 text-orange-600 dark:text-orange-400" />
+            <span class="text-sm font-medium text-orange-700 dark:text-orange-300">
+              Pending Admin Approval
+            </span>
+          </div>
+
           <p class="text-muted-foreground">
-            Your expense has been submitted and is pending admin approval.
+            Your expense has been submitted successfully. An administrator will review and approve it shortly.
           </p>
           <p class="text-sm text-muted-foreground">
-            You can track the status in your transactions page.
+            You can track the approval status in your transactions page.
           </p>
         </div>
 
@@ -270,7 +279,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { DollarSign, ChevronLeft, Loader2, CheckCircle2, Receipt } from 'lucide-vue-next'
+import { DollarSign, ChevronLeft, Loader2, CheckCircle2, Receipt, Clock } from 'lucide-vue-next'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { useAuth } from '@/composables/useAuthService'
 import { useToast } from '@/core/composables/useToast'