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.

components/ExpenseDetailsModal.vue

@@ -190,7 +190,17 @@
       </v-card-text>
 
       <v-card-actions class="px-6 pb-4">
+        <v-btn
+          @click="editExpense"
+          color="primary"
+          variant="outlined"
+        >
+          <v-icon class="mr-1">mdi-pencil</v-icon>
+          Edit Expense
+        </v-btn>
+        
         <v-spacer />
+        
         <v-btn
           @click="closeModal"
           variant="text"
@@ -306,6 +316,12 @@ const openReceiptInNewTab = (receipt: ExpenseReceipt) => {
   }
 };
 
+const editExpense = () => {
+  // For now, just show a message that editing is not yet implemented
+  // In a real implementation, this would open an edit modal or switch to edit mode
+  alert('Expense editing functionality is coming soon! Please contact support if you need to make changes.');
+};
+
 const downloadAllReceipts = async () => {
   if (!props.expense?.Receipt?.length) return;
   

components/ExpenseList.vue

@@ -94,9 +94,19 @@
             <!-- Price -->
             <div class="price-display">
               {{ expense.DisplayPrice || expense.Price }}
-              <span v-if="expense.PriceUSD && expense.PriceUSD !== expense.PriceNumber" class="converted-price">
-                (≈ ${{ expense.PriceUSD.toFixed(2) }})
-              </span>
+              <div v-if="expense.ConversionRate && expense.ConversionRate !== 1" class="d-flex align-center mt-1">
+                <v-chip
+                  color="info"
+                  size="x-small"
+                  variant="tonal"
+                  class="mr-2"
+                >
+                  Converted
+                </v-chip>
+                <span class="converted-price">
+                  ≈ ${{ expense.PriceUSD?.toFixed(2) }} USD
+                </span>
+              </div>
             </div>
             
             <!-- Category and Payment Method -->