feat: Improve UI styling in ExpenseDetailsModal and ExpenseList, enhance authentication middleware caching, and optimize PDF generation for receipt fetching

pages/dashboard/expenses.vue

@@ -24,7 +24,7 @@
     <v-card class="mb-6">
       <v-card-text class="pa-6">
         <v-row align="center" class="mb-0">
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="2">
             <v-text-field
               v-model="filters.startDate"
               type="date"
@@ -32,11 +32,10 @@
               variant="outlined"
               density="comfortable"
               hide-details
-              @change="fetchExpenses"
             />
           </v-col>
           
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="2">
             <v-text-field
               v-model="filters.endDate"
               type="date"
@@ -44,11 +43,10 @@
               variant="outlined"
               density="comfortable"
               hide-details
-              @change="fetchExpenses"
             />
           </v-col>
           
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="2">
             <v-select
               v-model="filters.category"
               :items="['', 'Food/Drinks', 'Shop', 'Online', 'Other']"
@@ -57,11 +55,23 @@
               density="comfortable"
               hide-details
               clearable
-              @update:model-value="fetchExpenses"
             />
           </v-col>
           
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="2">
+            <v-btn
+              @click="fetchExpenses"
+              color="primary"
+              variant="flat"
+              size="large"
+              class="w-100"
+              prepend-icon="mdi-magnify"
+            >
+              Apply
+            </v-btn>
+          </v-col>
+          
+          <v-col cols="12" sm="6" md="2">
             <v-btn
               @click="resetToCurrentMonth"
               variant="outlined"
@@ -187,7 +197,7 @@
         <div class="d-flex flex-wrap align-center">
           <span class="text-subtitle-1 font-weight-medium mr-6">Export Options:</span>
           
-          <div class="d-flex gap-4">
+          <div class="d-flex gap-6">
             <v-btn
               @click="exportCSV"
               :disabled="selectedExpenses.length === 0"

pages/dashboard/interest-berth-status.vue

@@ -116,7 +116,7 @@
               </v-card-title>
               <v-divider />
               <v-card-text class="pa-4" style="max-height: 600px; overflow-y: auto;">
-                <div class="d-flex flex-column gap-6">
+                <div class="d-flex flex-column gap-4">
                   <v-card
                     v-for="berth in getBerthsByStatus(status.value)"
                     :key="berth.Id"
@@ -137,14 +137,24 @@
                       </div>
                       <div class="d-flex justify-space-between align-center">
                         <span class="text-body-2 font-weight-medium">${{ formatPrice(berth.Price) }}</span>
-                        <v-chip
-                          v-if="getInterestedCount(berth)"
-                          size="x-small"
-                          color="primary"
-                          variant="flat"
-                        >
-                          {{ getInterestedCount(berth) }} interested
-                        </v-chip>
+                        <v-tooltip v-if="getInterestedCount(berth)" location="top">
+                          <template v-slot:activator="{ props }">
+                            <v-chip
+                              v-bind="props"
+                              size="x-small"
+                              color="primary"
+                              variant="flat"
+                            >
+                              {{ getInterestedCount(berth) }} interested
+                            </v-chip>
+                          </template>
+                          <div class="pa-2">
+                            <div class="text-subtitle-2 mb-1">Interested Parties:</div>
+                            <div v-for="party in berth['Interested Parties']" :key="party.Id" class="text-body-2">
+                              {{ party['Full Name'] }}
+                            </div>
+                          </div>
+                        </v-tooltip>
                       </div>
                     </v-card-text>
                   </v-card>