Fix for Incoming Invoices

frontend/pages/banking/index.vue

@@ -43,7 +43,10 @@ const bankingFilterItems = [
 ]
 
 // Initialisierungswerte
-const selectedPeriod = ref(periodOptions[0])
+const selectedPeriod = ref(periodOptions[0].key)
+const selectedPeriodOption = computed(() => {
+  return periodOptions.find(period => period.key === selectedPeriod.value) || periodOptions[0]
+})
 const dateRange = ref({
   start: $dayjs().startOf('month').format('YYYY-MM-DD'),
   end: $dayjs().endOf('month').format('YYYY-MM-DD')
@@ -107,7 +110,7 @@ const setupPage = async () => {
     const savedBanking = tempStore.settings?.['banking'] || {}
     if (savedBanking.periodKey) {
       const found = periodOptions.find(p => p.key === savedBanking.periodKey)
-      if (found) selectedPeriod.value = found
+      if (found) selectedPeriod.value = found.key
     }
     if (savedBanking.range) {
       dateRange.value = savedBanking.range
@@ -120,12 +123,12 @@ const setupPage = async () => {
 }
 
 // Watcher für Schnellwahlen & Persistenz
-watch([selectedPeriod, dateRange], ([newPeriod, newRange], [oldPeriod, oldRange]) => {
+watch(selectedPeriod, (newPeriod, oldPeriod) => {
   const now = $dayjs()
 
   // Nur berechnen, wenn sich die Periode geändert hat
-  if (newPeriod.key !== oldPeriod?.key) {
-    switch (newPeriod.key) {
+  if (newPeriod !== oldPeriod) {
+    switch (newPeriod) {
       case 'current_month':
         dateRange.value = {start: now.startOf('month').format('YYYY-MM-DD'), end: now.endOf('month').format('YYYY-MM-DD')}
         break
@@ -142,8 +145,10 @@ watch([selectedPeriod, dateRange], ([newPeriod, newRange], [oldPeriod, oldRange]
         break
     }
   }
-  // Speichern im Store
-  tempStore.modifyBankingPeriod(selectedPeriod.value.key, dateRange.value)
+})
+
+watch([selectedPeriod, dateRange], () => {
+  tempStore.modifyBankingPeriod(selectedPeriod.value, dateRange.value)
 }, { deep: true })
 
 const syncBankStatements = async () => {
@@ -541,7 +546,7 @@ onMounted(() => {
               icon="i-heroicons-calendar-days"
           >
             <template #default>
-              {{ selectedPeriod?.label || 'Zeitraum' }}
+              {{ selectedPeriodOption.label || 'Zeitraum' }}
             </template>
           </USelectMenu>
           <div v-if="selectedPeriod === 'custom'" class="flex items-center gap-1">