fix: Address remaining expense page UI issues and functionality

� Enhanced Visual Design:
- Improved form spacing in date range filters with proper responsive grid layout
- Added 'Converted' chip tags to show currency conversion status clearly
- Better field spacing and padding throughout the expense page
- Enhanced button sizes and spacing for better visual hierarchy

✨ Improved User Experience:
- Added conversion indicators with blue 'Converted' chips for foreign currencies
- Better visual feedback for converted prices with USD amounts
- Improved spacing and layout consistency across all components
- Enhanced responsive design for mobile and desktop

� Technical Improvements:
- Fixed PDF generation to show helpful error message instead of crashing
- Added edit button to ExpenseDetailsModal (with placeholder functionality)
- Improved component structure and prop handling
- Better error handling and user feedback for PDF generation

� UI/UX Enhancements:
- Replaced compact density with comfortable for better touch targets
- Added proper v-row/v-col structure for consistent spacing
- Improved button sizing and visual weight
- Better color contrast and accessibility

� Functionality Updates:
- PDF generation now shows informative error message instead of technical failure
- Edit button added to expense details (ready for future implementation)
- Better currency display with conversion status indicators
- Improved form layouts and field spacing

The expense page now has professional spacing, clear currency indicators, and handles edge cases gracefully.

pages/dashboard/expenses.vue

@@ -19,48 +19,56 @@
 
     <!-- Date Range Filter -->
     <v-card class="mb-6">
-      <v-card-text>
-        <div class="d-flex flex-wrap gap-4 align-center">
-          <div class="d-flex gap-3">
+      <v-card-text class="pa-6">
+        <v-row align="center" class="mb-0">
+          <v-col cols="12" sm="6" md="3">
             <v-text-field
               v-model="filters.startDate"
               type="date"
               label="Start Date"
               variant="outlined"
-              density="compact"
+              density="comfortable"
               hide-details
               @change="fetchExpenses"
             />
+          </v-col>
+          
+          <v-col cols="12" sm="6" md="3">
             <v-text-field
               v-model="filters.endDate"
               type="date"
               label="End Date"
               variant="outlined"
-              density="compact"
+              density="comfortable"
               hide-details
               @change="fetchExpenses"
             />
-          </div>
+          </v-col>
           
-          <v-select
-            v-model="filters.category"
-            :items="['', 'Food/Drinks', 'Shop', 'Online', 'Other']"
-            label="Category"
-            variant="outlined"
-            density="compact"
-            hide-details
-            clearable
-            @update:model-value="fetchExpenses"
-          />
+          <v-col cols="12" sm="6" md="3">
+            <v-select
+              v-model="filters.category"
+              :items="['', 'Food/Drinks', 'Shop', 'Online', 'Other']"
+              label="Category"
+              variant="outlined"
+              density="comfortable"
+              hide-details
+              clearable
+              @update:model-value="fetchExpenses"
+            />
+          </v-col>
           
-          <v-btn
-            @click="resetToCurrentMonth"
-            variant="outlined"
-            size="small"
-          >
-            Current Month
-          </v-btn>
-        </div>
+          <v-col cols="12" sm="6" md="3">
+            <v-btn
+              @click="resetToCurrentMonth"
+              variant="outlined"
+              size="large"
+              class="w-100"
+            >
+              Current Month
+            </v-btn>
+          </v-col>
+        </v-row>
       </v-card-text>
     </v-card>