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:
parent
be00c61c77
commit
9c4b14f382
1 changed files with 13 additions and 4 deletions
|
|
@ -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'
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue