padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wraps expense form in Dialog component

Browse source 
Refactors the AddExpense component to utilize the Dialog component
from the UI library. This provides a more structured and accessible
modal for adding expenses, and includes a header with title and description.
It also improves the layout using flexbox for better content management
and scrollability.
This commit is contained in:
padreug 2025-11-07 22:05:27 +01:00
parent f6ecbc8faf
commit 358c3056c7
1 changed files with 25 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/modules/expenses/components/AddExpense.vue
View file

@ -1,22 +1,19 @@
<template> <template>
<div class="bg-card border border-border rounded-lg shadow-lg overflow-hidden"> <Dialog :open="true" @update:open="(open) => !open && $emit('close')">
<!-- Header --> <DialogContent class="max-w-2xl max-h-[90vh] overflow-hidden flex flex-col p-0">
<div class="flex items-center justify-between p-4 border-b border-border"> <!-- Header -->
<div class="flex items-center gap-2"> <DialogHeader class="px-6 pt-6 pb-4 border-b">
<DollarSign class="h-5 w-5 text-primary" /> <DialogTitle class="flex items-center gap-2">
<h3 class="font-semibold text-foreground">Add Expense</h3> <DollarSign class="h-5 w-5 text-primary" />
</div> <span>Add Expense</span>
<Button </DialogTitle>
variant="ghost" <DialogDescription>
size="icon" Submit an expense for admin approval
@click="$emit('close')" </DialogDescription>
> </DialogHeader>
<X class="h-4 w-4" />
</Button>
</div>
<!-- Form --> <!-- Scrollable Form Content -->
<div class="p-4 space-y-4"> <div class="flex-1 overflow-y-auto px-6 py-4 space-y-4">
<!-- Step indicator --> <!-- Step indicator -->
<div class="flex items-center justify-center gap-2 mb-4"> <div class="flex items-center justify-center gap-2 mb-4">
<div <div
@ -201,8 +198,9 @@
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </DialogContent>
</Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -229,7 +227,14 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from '@/components/ui/select' } from '@/components/ui/select'
import { DollarSign, X, ChevronLeft, Loader2 } from 'lucide-vue-next' import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
import { DollarSign, ChevronLeft, Loader2 } 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'