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>
|
</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'
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue