From 358c3056c7d6f55041f47f88bc740be28d379652 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 7 Nov 2025 22:05:27 +0100
Subject: [PATCH] Wraps expense form in Dialog component

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.
---
 .../expenses/components/AddExpense.vue        | 45 ++++++++++---------
 1 file changed, 25 insertions(+), 20 deletions(-)

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