Emphasize pending approval status in expense success dialog

- 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>
This commit is contained in:
padreug 2025-11-13 16:57:06 +01:00
parent be00c61c77
commit 9c4b14f382

View file

@ -9,13 +9,22 @@
</div> </div>
<!-- Success Message --> <!-- 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> <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"> <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>
<p class="text-sm text-muted-foreground"> <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> </p>
</div> </div>
@ -270,7 +279,7 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from '@/components/ui/dialog' } 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 { injectService, SERVICE_TOKENS } from '@/core/di-container'
import { useAuth } from '@/composables/useAuthService' import { useAuth } from '@/composables/useAuthService'
import { useToast } from '@/core/composables/useToast' import { useToast } from '@/core/composables/useToast'