diff --git a/components/PageLeaveGuard.vue b/components/PageLeaveGuard.vue
new file mode 100644
index 0000000..af9a563
--- /dev/null
+++ b/components/PageLeaveGuard.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
+
+// Wir erwarten eine Prop, die sagt, ob geschützt werden soll
+const props = defineProps<{
+  when: boolean // z.B. true, wenn Formular dirty ist
+}>()
+
+const showModal = ref(false)
+const pendingNext = ref<null | ((val?: boolean) => void)>(null)
+
+// --- 1. Interne Navigation (Nuxt) ---
+onBeforeRouteLeave((to, from, next) => {
+  if (!props.when) {
+    next()
+    return
+  }
+
+  // Navigation pausieren & Modal zeigen
+  pendingNext.value = next
+  showModal.value = true
+})
+
+const confirmLeave = () => {
+  if (pendingNext.value) pendingNext.value()
+  showModal.value = false
+}
+
+const cancelLeave = () => {
+  showModal.value = false
+  // Navigation wird implizit abgebrochen
+}
+
+// --- 2. Externe Navigation (Browser Tab schließen) ---
+const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+  if (props.when) {
+    e.preventDefault()
+    e.returnValue = ''
+  }
+}
+
+onMounted(() => window.addEventListener('beforeunload', handleBeforeUnload))
+onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnload))
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="showModal" class="guard-overlay">
+      <div class="guard-modal">
+
+        <div class="guard-header">
+          <slot name="title">Seite wirklich verlassen?</slot>
+        </div>
+
+        <div class="guard-body">
+          <slot>
+            Du hast ungespeicherte Änderungen. Diese gehen verloren, wenn du die Seite verlässt.
+          </slot>
+        </div>
+
+        <div class="guard-actions">
+          <button @click="cancelLeave" class="btn-cancel">
+            Nein, bleiben
+          </button>
+          <button @click="confirmLeave" class="btn-confirm">
+            Ja, verlassen
+          </button>
+        </div>
+
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+/* Basis-Styling - passe dies an dein Design System an */
+.guard-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 9999; backdrop-filter: blur(2px);
+}
+.guard-modal {
+  background: white; padding: 24px; border-radius: 12px;
+  width: 90%; max-width: 400px; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+  font-family: sans-serif;
+}
+.guard-header { font-size: 1.25rem; font-weight: bold; margin-bottom: 1rem; }
+.guard-body { margin-bottom: 1.5rem; color: #4a5568; }
+.guard-actions { display: flex; justify-content: flex-end; gap: 12px; }
+
+/* Buttons */
+button { padding: 8px 16px; border-radius: 6px; cursor: pointer; border: none; font-weight: 600;}
+.btn-cancel { background: #edf2f7; color: #2d3748; }
+.btn-cancel:hover { background: #e2e8f0; }
+.btn-confirm { background: #e53e3e; color: white; }
+.btn-confirm:hover { background: #c53030; }
+</style>
\ No newline at end of file
diff --git a/pages/banking/index.vue b/pages/banking/index.vue
index 2f646e6..f815d1d 100644
--- a/pages/banking/index.vue
+++ b/pages/banking/index.vue
@@ -1,11 +1,12 @@
 <script setup>
-
 import dayjs from "dayjs";
 
+// Zugriff auf $api und Toast Notification
+const { $api } = useNuxtApp()
+const toast = useToast()
+
 defineShortcuts({
   '/': () => {
-    //console.log(searchinput)
-    //searchinput.value.focus()
     document.getElementById("searchinput").focus()
   }
 })
@@ -18,6 +19,8 @@ const bankstatements = ref([])
 const bankaccounts = ref([])
 const filterAccount = ref([])
 
+// Status für den Lade-Button
+const isSyncing = ref(false)
 
 const setupPage = async () => {
   bankstatements.value = (await useEntities("bankstatements").select("*, statementallocations(*)", "date", false))
@@ -25,6 +28,34 @@ const setupPage = async () => {
   if(bankaccounts.value.length > 0) filterAccount.value = bankaccounts.value
 }
 
+// Funktion für den Bankabruf
+const syncBankStatements = async () => {
+  isSyncing.value = true
+  try {
+    await $api('/api/functions/services/bankstatementsync', { method: 'POST' })
+
+    toast.add({
+      title: 'Erfolg',
+      description: 'Bankdaten wurden erfolgreich synchronisiert.',
+      icon: 'i-heroicons-check-circle',
+      color: 'green'
+    })
+
+    // Wichtig: Daten neu laden, damit die neuen Buchungen direkt sichtbar sind
+    await setupPage()
+  } catch (error) {
+    console.error(error)
+    toast.add({
+      title: 'Fehler',
+      description: 'Beim Abrufen der Bankdaten ist ein Fehler aufgetreten.',
+      icon: 'i-heroicons-exclamation-circle',
+      color: 'red'
+    })
+  } finally {
+    isSyncing.value = false
+  }
+}
+
 const templateColumns = [
   {
     key: "account",
@@ -100,9 +131,6 @@ const filteredRows = computed(() => {
     }
   }
 
-
-
-
   return useSearch(searchString.value, temp.filter(i => filterAccount.value.find(x => x.id === i.account)))
 })
 
@@ -112,6 +140,17 @@ setupPage()
 <template>
   <UDashboardNavbar title="Bankbuchungen" :badge="filteredRows.length">
     <template #right>
+
+      <UButton
+          label="Bankabruf"
+          icon="i-heroicons-arrow-path"
+          color="primary"
+          variant="solid"
+          :loading="isSyncing"
+          @click="syncBankStatements"
+          class="mr-2"
+      />
+
       <UInput
           id="searchinput"
           name="searchinput"
@@ -139,12 +178,12 @@ setupPage()
   <UDashboardToolbar>
     <template #left>
       <USelectMenu
-        :options="bankaccounts"
-        v-model="filterAccount"
-        option-attribute="iban"
-        multiple
-        by="id"
-        :ui-menu="{ width: 'min-w-max' }"
+          :options="bankaccounts"
+          v-model="filterAccount"
+          option-attribute="iban"
+          multiple
+          by="id"
+          :ui-menu="{ width: 'min-w-max' }"
       >
         <template #label>
           Konto
@@ -152,19 +191,6 @@ setupPage()
       </USelectMenu>
     </template>
     <template #right>
-<!--      <USelectMenu
-          v-model="selectedColumns"
-          icon="i-heroicons-adjustments-horizontal-solid"
-          :options="templateColumns"
-          multiple
-          class="hidden lg:block"
-          by="key"
-          :ui-menu="{ width: 'min-w-max' }"
-      >
-        <template #label>
-          Spalten
-        </template>
-      </USelectMenu>-->
       <USelectMenu
           icon="i-heroicons-adjustments-horizontal-solid"
           multiple
@@ -197,12 +223,12 @@ setupPage()
     </template>
     <template #amount-data="{row}">
       <span
-        v-if="row.amount >= 0"
-        class="text-primary-500"
+          v-if="row.amount >= 0"
+          class="text-primary-500"
       >{{String(row.amount.toFixed(2)).replace(".",",")}} €</span>
       <span
-        v-else-if="row.amount < 0"
-        class="text-rose-500"
+          v-else-if="row.amount < 0"
+          class="text-rose-500"
       >{{String(row.amount.toFixed(2)).replace(".",",")}} €</span>
     </template>
     <template #openAmount-data="{row}">
@@ -210,23 +236,20 @@ setupPage()
     </template>
     <template #partner-data="{row}">
       <span
-        v-if="row.amount < 0"
+          v-if="row.amount < 0"
       >
           {{row.credName}}
       </span>
       <span
-        v-else-if="row.amount > 0"
+          v-else-if="row.amount > 0"
       >
         {{row.debName}}
       </span>
     </template>
   </UTable>
-
-
+  <PageLeaveGuard :when="isSyncing"/>
 </template>
 
-
-
 <style scoped>
 
 </style>
\ No newline at end of file
diff --git a/pages/createDocument/edit/[[id]].vue b/pages/createDocument/edit/[[id]].vue
index 3ba7e88..7231861 100644
--- a/pages/createDocument/edit/[[id]].vue
+++ b/pages/createDocument/edit/[[id]].vue
@@ -1290,6 +1290,7 @@ const saveSerialInvoice = async () => {
     contactPerson: itemInfo.value.contactPerson,
     serialConfig: itemInfo.value.serialConfig,
     letterhead: itemInfo.value.letterhead,
+    taxType:itemInfo.value.taxType
   }
 
   let data = null
@@ -1693,7 +1694,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
               <UFormGroup
                   label="Steuertyp:"
-                  v-if="['invoices','advanceInvoices','quotes','confirmationOrders'].includes(itemInfo.type)"
+                  v-if="['invoices','advanceInvoices','quotes','confirmationOrders','serialInvoices'].includes(itemInfo.type)"
               >
                 <USelectMenu
                     :options="[{key:'Standard', label: 'Standard'},{key:'13b UStG', label: '13b UStG'},{key:'19 UStG', label: '19 UStG Kleinunternehmer'}/*,{key:'12.3 UStG', label: 'PV 0% USt'}*/]"
@@ -3136,6 +3137,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
     </UTabs>
     <UProgress animation="carousel" v-else/>
   </UDashboardPanelContent>
+  <PageLeaveGuard :when="true"/>
 
 
 
diff --git a/pages/createDocument/index.vue b/pages/createDocument/index.vue
index b62a84c..10378ab 100644
--- a/pages/createDocument/index.vue
+++ b/pages/createDocument/index.vue
@@ -68,78 +68,69 @@
           class="ml-2"
           variant="outline"
       >
-        {{ filteredRows.filter(i => item.key === 'invoices' ? ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type) : item.key === i.type).length }}
+        {{ getRowsForTab(item.key).length }}
       </UBadge>
     </template>
     <template #item="{item}">
       <div style="height: 80vh; overflow-y: scroll">
         <UTable
-            :columns="columns"
+            :columns="getColumnsForTab(item.key)"
             :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
-            :rows="filteredRows.filter(i => item.key === 'invoices' ? ['invoices','advanceInvoices','cancellationInvoices'].includes(i.type) : item.key === i.type)"
+            :rows="getRowsForTab(item.key)"
             :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
             class="w-full"
             @select="selectItem"
         >
           <template #type-data="{row}">
-            {{ dataStore.documentTypesForCreation[row.type].labelSingle }}
-            <!--
-                        <span v-if="row.type === 'cancellationInvoices'"> zu {{row.linkedDocument.documentNumber}}</span>
-            -->
+            <span v-if="row.type === 'cancellationInvoices'" class="text-cyan-500">{{
+                dataStore.documentTypesForCreation[row.type].labelSingle
+              }} für {{ filteredRows.find(i => row.createddocument?.id === i.id)?.documentNumber }}</span>
+            <span v-else>{{ dataStore.documentTypesForCreation[row.type].labelSingle }}</span>
           </template>
+
           <template #state-data="{row}">
-      <span
-          v-if="row.state === 'Entwurf'"
-          class="text-rose-500"
-      >
-        {{ row.state }}
-      </span>
-            <!--      <span
-                      v-if="row.state === 'Gebucht'"
-                      class="text-cyan-500"
-                  >
-                      {{row.state}}
-                  </span>-->
+            <span v-if="row.state === 'Entwurf'" class="text-rose-500">{{ row.state }}</span>
             <span
                 v-if="row.state === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === row.id)"
                 class="text-primary-500"
             >
-          {{ row.state }}
-      </span>
+              {{ row.state }}
+            </span>
             <span
                 v-else-if="row.state === 'Gebucht' && items.find(i => i.createddocument && i.createddocument.id === row.id && i.type === 'cancellationInvoices') && ['invoices','advanceInvoices'].includes(row.type)"
                 class="text-cyan-500"
             >
-          Storniert mit {{ items.find(i => i.createddocument && i.createddocument.id === row.id).documentNumber }}
-      </span>
-            <span
-                v-else-if="row.state === 'Gebucht'"
-                class="text-primary-500"
-            >
-          {{ row.state }}
-      </span>
+              Storniert mit {{ items.find(i => i.createddocument && i.createddocument.id === row.id).documentNumber }}
+            </span>
+            <span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{ row.state }}</span>
           </template>
+
           <template #partner-data="{row}">
-            <span v-if="row.customer && row.customer.name.length <21">{{ row.customer ? row.customer.name : "" }}</span>
+            <span v-if="row.customer && row.customer.name.length < 21">{{ row.customer ? row.customer.name : "" }}</span>
             <UTooltip v-else-if="row.customer && row.customer.name.length > 20" :text="row.customer.name">
               {{ row.customer.name.substring(0, 20) }}...
             </UTooltip>
           </template>
+
           <template #reference-data="{row}">
-            <span v-if="row === filteredRows[selectedItem]"
-                  class="text-primary-500 font-bold">{{ row.documentNumber }}</span>
+            <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.documentNumber }}</span>
             <span v-else>{{ row.documentNumber }}</span>
           </template>
+
           <template #date-data="{row}">
             <span v-if="row.date">{{ row.date ? dayjs(row.date).format("DD.MM.YY") : '' }}</span>
-            <span
-                v-if="row.documentDate">{{ row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : '' }}</span>
+            <span v-if="row.documentDate">{{ row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : '' }}</span>
           </template>
+
           <template #dueDate-data="{row}">
-            <span
-                v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)"
-                :class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' ">{{ row.documentDate ? dayjs(row.documentDate).add(row.paymentDays, 'day').format("DD.MM.YY") : '' }}</span>
+             <span
+                 v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)"
+                 :class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' "
+             >
+               {{ row.documentDate ? dayjs(row.documentDate).add(row.paymentDays, 'day').format("DD.MM.YY") : '' }}
+             </span>
           </template>
+
           <template #paid-data="{row}">
             <div
                 v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)">
@@ -147,20 +138,21 @@
               <span v-else class="text-rose-600">Offen</span>
             </div>
           </template>
+
           <template #amount-data="{row}">
-            <span
-                v-if="row.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items)) }}</span>
+            <span v-if="row.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items)) }}</span>
           </template>
+
           <template #amountOpen-data="{row}">
             <span
-                v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n, {amount}) => n + amount, 0)) }}</span>
+                v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">
+              {{ displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n, {amount}) => n + amount, 0)) }}
+            </span>
           </template>
         </UTable>
       </div>
-
     </template>
   </UTabs>
-
 </template>
 
 <script setup>
@@ -168,8 +160,6 @@ import dayjs from "dayjs";
 
 defineShortcuts({
   '/': () => {
-    //console.log(searchinput)
-    //searchinput.value.focus()
     document.getElementById("searchinput").focus()
   },
   '+': () => {
@@ -178,7 +168,13 @@ defineShortcuts({
   'Enter': {
     usingInput: true,
     handler: () => {
-      router.push(`/createDocument/show/${filteredRows.value[selectedItem.value].id}`)
+      // Zugriff auf das aktuell sichtbare Element basierend auf Tab und Selektion
+      const currentList = getRowsForTab(selectedTypes.value[activeTabIndex.value]?.key || 'drafts')
+
+      // Fallback auf globale Liste falls nötig, aber Logik sollte auf Tab passen
+      if (filteredRows.value[selectedItem.value]) {
+        router.push(`/createDocument/show/${filteredRows.value[selectedItem.value].id}`)
+      }
     }
   },
   'arrowdown': () => {
@@ -206,7 +202,7 @@ const dataType = dataStore.dataTypes[type]
 
 const items = ref([])
 const selectedItem = ref(0)
-
+const activeTabIndex = ref(0)
 
 const setupPage = async () => {
   items.value = (await useEntities("createddocuments").select("*, customer(id,name), statementallocations(id,amount),linkedDocument(*)", "documentNumber", true, true))
@@ -215,56 +211,53 @@ const setupPage = async () => {
 setupPage()
 
 const templateColumns = [
-  {
-    key: "reference",
-    label: "Referenz"
-  },
-  {
-    key: 'type',
-    label: "Typ"
-  }, {
-    key: 'state',
-    label: "Status"
-  },
-  {
-    key: "amount",
-    label: "Betrag"
-  },
-  {
-    key: 'partner',
-    label: "Kunde"
-  },
-  {
-    key: "date",
-    label: "Datum"
-  },
-  {
-    key: "amountOpen",
-    label: "Offener Betrag"
-  },
-  {
-    key: "paid",
-    label: "Bezahlt"
-  },
-  {
-    key: "dueDate",
-    label: "Fällig"
-  }
+  {key: "reference", label: "Referenz"},
+  {key: 'type', label: "Typ"},
+  {key: 'state', label: "Status"},
+  {key: "amount", label: "Betrag"},
+  {key: 'partner', label: "Kunde"},
+  {key: "date", label: "Datum"},
+  {key: "amountOpen", label: "Offener Betrag"},
+  {key: "paid", label: "Bezahlt"},
+  {key: "dueDate", label: "Fällig"}
 ]
+
+// Eigene Spalten für Entwürfe: Referenz raus, Status rein
+const draftColumns = [
+  {key: 'type', label: "Typ"},
+  {key: 'state', label: "Status"}, // Status wieder drin
+  {key: 'partner', label: "Kunde"},
+  {key: "date", label: "Erstellt am"},
+  {key: "amount", label: "Betrag"}
+]
+
 const selectedColumns = ref(tempStore.columns["createddocuments"] ? tempStore.columns["createddocuments"] : templateColumns)
 const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.find(i => i.key === column.key)))
 
+const getColumnsForTab = (tabKey) => {
+  if (tabKey === 'drafts') {
+    return draftColumns
+  }
+  return columns.value
+}
+
 const templateTypes = [
+  {
+    key: "drafts",
+    label: "Entwürfe"
+  },
   {
     key: "invoices",
     label: "Rechnungen"
-  }/*,{
+  },
+  /*,{
     key: "cancellationInvoices",
     label: "Stornorechnungen"
   },{
     key: "advanceInvoices",
     label: "Abschlagsrechnungen"
-  }*/, {
+  },*/
+  {
     key: "quotes",
     label: "Angebote"
   }, {
@@ -282,7 +275,6 @@ const types = computed(() => {
 
 const selectItem = (item) => {
   console.log(item)
-
   if (item.state === "Entwurf") {
     router.push(`/createDocument/edit/${item.id}`)
   } else if (item.state !== "Entwurf") {
@@ -294,7 +286,6 @@ const displayCurrency = (value, currency = "€") => {
   return `${Number(value).toFixed(2).replace(".", ",")} ${currency}`
 }
 
-
 const searchString = ref(tempStore.searchStrings['createddocuments'] || '')
 
 const clearSearchString = () => {
@@ -305,8 +296,18 @@ const selectableFilters = ref(dataType.filters.map(i => i.name))
 const selectedFilters = ref(dataType.filters.filter(i => i.default).map(i => i.name) || [])
 
 const filteredRows = computed(() => {
+  let tempItems = items.value.filter(i => types.value.find(x => {
+    // 1. Draft Tab Logic
+    if (x.key === 'drafts') return i.state === 'Entwurf'
+
+    // 2. Global Draft Exclusion (drafts shouldn't be in other tabs)
+    if (i.state === 'Entwurf' && x.key !== 'drafts') return false
+
+    // 3. Normal Type Logic
+    if (x.key === 'invoices') return ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type)
+    return x.key === i.type
+  }))
 
-  let tempItems = items.value.filter(i => types.value.find(x => x.key === 'invoices' ? ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type) : x.key === i.type))
   tempItems = tempItems.filter(i => i.type !== "serialInvoices")
 
   tempItems = tempItems.map(i => {
@@ -323,23 +324,32 @@ const filteredRows = computed(() => {
     })
   }
 
-
   tempItems = useSearch(searchString.value, tempItems)
 
-
   return useSearch(searchString.value, tempItems.slice().reverse())
-
 })
 
+const getRowsForTab = (tabKey) => {
+  return filteredRows.value.filter(row => {
+    if (tabKey === 'drafts') {
+      return row.state === 'Entwurf'
+    }
+
+    if (row.state === 'Entwurf') return false
+
+    if (tabKey === 'invoices') {
+      return ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(row.type)
+    }
+    return row.type === tabKey
+  })
+}
 
 const isPaid = (item) => {
   let amountPaid = 0
   item.statementallocations.forEach(allocation => amountPaid += allocation.amount)
-
   return Number(amountPaid.toFixed(2)) === useSum().getCreatedDocumentSum(item, items.value)
 }
 </script>
 
 <style scoped>
-
 </style>
\ No newline at end of file
diff --git a/pages/createDocument/serialInvoice.vue b/pages/createDocument/serialInvoice.vue
index 8900d36..cd0c893 100644
--- a/pages/createDocument/serialInvoice.vue
+++ b/pages/createDocument/serialInvoice.vue
@@ -14,6 +14,23 @@
           <UKbd value="/" />
         </template>
       </UInput>
+
+      <UButton
+          icon="i-heroicons-queue-list"
+          color="gray"
+          variant="ghost"
+          label="Ausführungen"
+          @click="openExecutionsSlideover"
+      />
+
+      <UButton
+          icon="i-heroicons-play"
+          color="white"
+          variant="solid"
+          label="Ausführen"
+          @click="openExecutionModal"
+      />
+
       <UButton
           @click="router.push(`/createDocument/edit?type=serialInvoices`)"
       >
@@ -21,20 +38,9 @@
       </UButton>
     </template>
   </UDashboardNavbar>
+
   <UDashboardToolbar>
     <template #right>
-<!--      <USelectMenu
-          v-model="selectedColumns"
-          icon="i-heroicons-adjustments-horizontal-solid"
-          :options="templateColumns"
-          multiple
-          class="hidden lg:block"
-          by="key"
-      >
-        <template #label>
-          Spalten
-        </template>
-      </USelectMenu>-->
       <USelectMenu
           v-model="selectedFilters"
           icon="i-heroicons-adjustments-horizontal-solid"
@@ -52,6 +58,40 @@
       </USelectMenu>
     </template>
   </UDashboardToolbar>
+
+  <div v-if="runningExecutions.length > 0" class="p-4 space-y-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
+    <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 flex items-center gap-2">
+      <UIcon name="i-heroicons-arrow-path" class="animate-spin text-primary" />
+      Laufende Ausführungen
+    </h3>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <UCard v-for="exec in runningExecutions" :key="exec.id" :ui="{ body: { padding: 'p-4' } }">
+        <div class="flex justify-between items-start mb-2">
+          <div>
+            <p class="text-sm font-medium">Start: {{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</p>
+          </div>
+          <UBadge color="primary" variant="subtle">Läuft</UBadge>
+        </div>
+
+        <div class="text-xs text-gray-500 flex justify-between mb-3">
+          <span>{{exec.summary}}</span>
+        </div>
+
+        <div class="flex justify-end pt-2 border-t border-gray-100 dark:border-gray-800">
+          <UButton
+              size="xs"
+              color="white"
+              variant="solid"
+              icon="i-heroicons-check"
+              label="Fertigstellen"
+              :loading="finishingId === exec.id"
+              @click="finishExecution(exec.id)"
+          />
+        </div>
+      </UCard>
+    </div>
+  </div>
+
   <UTable
       :rows="filteredRows"
       :columns="columns"
@@ -60,6 +100,18 @@
       @select="(row) => router.push(`/createDocument/edit/${row.id}`)"
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
   >
+    <template #actions-data="{ row }">
+      <div @click.stop>
+        <UDropdown :items="getActionItems(row)" :popper="{ placement: 'bottom-end' }">
+          <UButton
+              color="gray"
+              variant="ghost"
+              icon="i-heroicons-ellipsis-horizontal-20-solid"
+          />
+        </UDropdown>
+      </div>
+    </template>
+
     <template #type-data="{row}">
       {{dataStore.documentTypesForCreation[row.type].labelSingle}}
     </template>
@@ -67,23 +119,6 @@
       <span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
 
     </template>
-    <!--<template #reference-data="{row}">
-      <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span>
-      <span v-else>{{row.documentNumber}}</span>
-    </template>
-    <template #date-data="{row}">
-      <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
-      <span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span>
-    </template>
-    <template #dueDate-data="{row}">
-      <span :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : '' ">{{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}</span>
-    </template>
-    <template #paid-data="{row}">
-      <div v-if="row.type === 'invoices' ||row.type === 'advanceInvoices'">
-        <span v-if="isPaid(row)" class="text-primary-500">Bezahlt</span>
-        <span v-else class="text-rose-600">Offen</span>
-      </div>
-    </template>-->
     <template #amount-data="{row}">
       {{displayCurrency(calculateDocSum(row))}}
     </template>
@@ -100,25 +135,231 @@
     </template>
   </UTable>
 
+  <UModal v-model="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
+    <UCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Serienrechnungen manuell ausführen
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
+        </div>
+      </template>
+
+      <div class="space-y-4">
+        <UFormGroup label="Ausführungsdatum (Belegdatum)" help="Dieses Datum steuert auch den Leistungszeitraum (z.B. Vormonat bei 'Rückwirkend').">
+          <UInput type="date" v-model="executionDate" />
+        </UFormGroup>
+
+        <UDivider label="Vorlagen auswählen" />
+
+        <div class="max-h-96 overflow-y-auto border border-gray-200 dark:border-gray-800 rounded-md">
+          <UTable
+              v-model="selectedExecutionRows"
+              :rows="activeTemplates"
+              :columns="executionColumns"
+              :ui="{ th: { base: 'whitespace-nowrap' } }"
+          >
+            <template #partner-data="{row}">
+              {{row.customer ? row.customer.name : "-"}}
+            </template>
+            <template #amount-data="{row}">
+              {{displayCurrency(calculateDocSum(row))}}
+            </template>
+            <template #serialConfig.intervall-data="{row}">
+              {{ row.serialConfig?.intervall }}
+            </template>
+          </UTable>
+        </div>
+
+        <div class="text-sm text-gray-500">
+          {{ selectedExecutionRows.length }} Vorlage(n) ausgewählt.
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
+          <UButton
+              color="primary"
+              :loading="isExecuting"
+              :disabled="selectedExecutionRows.length === 0"
+              @click="executeSerialInvoices"
+          >
+            Jetzt ausführen
+          </UButton>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+
+  <USlideover v-model="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }">
+    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Alle Ausführungen
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
+        </div>
+      </template>
+
+      <div class="space-y-4 overflow-y-auto h-full p-1">
+        <div v-if="executionsLoading" class="flex justify-center py-4">
+          <UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 w-6 h-6" />
+        </div>
+
+        <div v-else-if="completedExecutions.length === 0" class="text-center text-gray-500 py-8">
+          Keine abgeschlossenen Ausführungen gefunden.
+        </div>
+
+        <div v-for="exec in completedExecutions" :key="exec.id" class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
+          <div class="flex justify-between items-start mb-2">
+            <span class="text-sm font-semibold">{{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</span>
+            <UBadge :color="getStatusColor(exec.status)" variant="subtle" size="xs">
+              {{ getStatusLabel(exec.status) }}
+            </UBadge>
+          </div>
+          <div class="text-xs text-gray-500 grid grid-cols-2 gap-2 mt-2">
+            <div>
+              <UIcon name="i-heroicons-check-circle" class="text-green-500 w-3 h-3 align-text-bottom" />
+              {{exec.summary}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </UCard>
+  </USlideover>
+
 </template>
 
 <script setup>
 import dayjs from "dayjs";
 
 const router = useRouter()
+const { $api } = useNuxtApp()
+const toast = useToast()
 const dataStore = useDataStore()
+
 const items = ref([])
 const selectedItem = ref(0)
 
+// --- Execution State ---
+const showExecutionModal = ref(false)
+const executionDate = ref(dayjs().format('YYYY-MM-DD'))
+const selectedExecutionRows = ref([])
+const isExecuting = ref(false)
+
+// --- SerialExecutions State (Liste der Ausführungen) ---
+const showExecutionsSlideover = ref(false)
+const executionItems = ref([])
+const executionsLoading = ref(false)
+// NEU: Statusvariable für den Fertigstellungs-Prozess
+const finishingId = ref(null)
+
 const setupPage = async () => {
+  // 1. Vorlagen laden
   items.value = await useEntities("createddocuments").select("*, customer(id,name), contract(id,name, contractNumber)","documentDate",undefined,true)
+
+  // 2. Ausführungen laden
+  await fetchExecutions()
 }
 
+// --- Logic für Ausführungen ---
+
+const fetchExecutions = async () => {
+  executionsLoading.value = true
+  try {
+    const res = await useEntities("serialexecutions").select("*", "createdAt", true)
+    executionItems.value = res || []
+  } catch (e) {
+    console.error("Fehler beim Laden der serialexecutions", e)
+  } finally {
+    executionsLoading.value = false
+  }
+}
+
+const runningExecutions = computed(() => {
+  // Filtert nach Status 'draft'
+  return executionItems.value.filter(i => i.status === 'draft')
+})
+
+const completedExecutions = computed(() => {
+  // Filtert alles was NICHT läuft (und nicht 'draft' ist, um Dopplungen zu vermeiden)
+  return executionItems.value.filter(i => i.status !== 'running' && i.status !== 'pending' && i.status !== 'draft')
+})
+
+const openExecutionsSlideover = () => {
+  showExecutionsSlideover.value = true
+  fetchExecutions() // Refresh beim Öffnen
+}
+
+// NEU: Funktion zum Fertigstellen
+const finishExecution = async (executionId) => {
+  if (!executionId) return
+
+  finishingId.value = executionId
+
+  try {
+    await $api(`/api/functions/serial/finish/${executionId}`, {
+      method: 'POST'
+    })
+
+    toast.add({
+      title: 'Ausführung beendet',
+      description: 'Der Prozess wurde erfolgreich als fertig markiert.',
+      icon: 'i-heroicons-check-circle',
+      color: 'green'
+    })
+
+    // Liste aktualisieren, damit die Karte aus "Laufend" verschwindet
+    await fetchExecutions()
+
+  } catch (error) {
+    console.error(error)
+    toast.add({
+      title: 'Fehler',
+      description: 'Die Ausführung konnte nicht beendet werden.',
+      icon: 'i-heroicons-exclamation-triangle',
+      color: 'red'
+    })
+  } finally {
+    finishingId.value = null
+  }
+}
+
+const getStatusColor = (status) => {
+  switch (status) {
+    case 'completed':
+      return 'green'
+    case 'error':
+      return 'red'
+    case 'running':
+    case 'draft': // Draft auch als Primary färben
+      return 'primary'
+    default:
+      return 'gray'
+  }
+}
+
+const getStatusLabel = (status) => {
+  switch (status) {
+    case 'completed':
+      return 'Abgeschlossen'
+    case 'error':
+      return 'Fehlerhaft'
+    case 'draft':
+      return 'Gestartet'
+    default:
+      return status
+  }
+}
+
+// --- Bestehende Logik ---
+
 const searchString = ref("")
+
 const filteredRows = computed(() => {
-
-
-
   let temp = items.value.filter(i => i.type === "serialInvoices").map(i => {
     return {
       ...i,
@@ -126,42 +367,83 @@ const filteredRows = computed(() => {
     }
   })
 
-  /*if(showDrafts.value === true) {
-    temp = temp.filter(i => i.state === "Entwurf")
-  } else {
-    temp = temp.filter(i => i.state !== "Entwurf")
-  }*/
-
   selectedFilters.value.forEach(filterName => {
     let filter = filterOptions.value.find(i => i.name === filterName)
     temp = temp.filter(filter.filterFunction)
   })
 
   return useSearch(searchString.value, temp.slice().reverse())
-
 })
 
-const templateColumns = [
-  {
-    key: 'serialConfig.active',
-    label: "Aktiv"
-  },{
-    key: "amount",
-    label: "Betrag"
-  },
-  {
-    key: 'partner',
-    label: "Kunde"
-  },
-  {
-    key: 'contract',
-    label: "Vertrag"
-  },
-  {
-    key: 'serialConfig.intervall',
-    label: "Rhythmus"
+const activeTemplates = computed(() => {
+  return items.value
+      .filter(i => i.type === "serialInvoices" && i.serialConfig?.active === true)
+      .map(i => ({...i}))
+})
+
+// NEU: Schnellaktionen Logik
+const getActionItems = (row) => {
+  const isActive = row.serialConfig && row.serialConfig.active
+
+  return [
+    [{
+      label: isActive ? 'Deaktivieren' : 'Aktivieren',
+      icon: isActive ? 'i-heroicons-pause' : 'i-heroicons-play',
+      class: isActive ? 'text-red-500' : 'text-primary',
+      click: () => toggleActiveState(row)
+    }]
+  ]
+}
+
+const toggleActiveState = async (row) => {
+  const newState = !row.serialConfig.active
+
+  // Optimistisches Update im UI
+  row.serialConfig.active = newState
+
+  try {
+    // Annahme: createddocuments Tabelle erlaubt update
+    await useEntities('createddocuments').update(row.id, {
+      serialConfig: {
+        ...row.serialConfig,
+        active: newState
+      }
+    })
+
+    toast.add({
+      title: newState ? 'Aktiviert' : 'Deaktiviert',
+      description: `Die Vorlage wurde ${newState ? 'aktiviert' : 'deaktiviert'}.`,
+      icon: 'i-heroicons-check',
+      color: 'green'
+    })
+  } catch (e) {
+    console.error(e)
+    // Rollback im Fehlerfall
+    row.serialConfig.active = !newState
+    toast.add({
+      title: 'Fehler',
+      description: 'Status konnte nicht gespeichert werden.',
+      color: 'red'
+    })
   }
+}
+
+const templateColumns = [
+  { key: 'actions', label: '' }, // NEU: Spalte für Menü ganz links
+  { key: 'serialConfig.active', label: "Aktiv" },
+  { key: "amount", label: "Betrag" },
+  { key: 'partner', label: "Kunde" },
+  { key: 'contract', label: "Vertrag" },
+  { key: 'serialConfig.intervall', label: "Rhythmus" }
 ]
+
+const executionColumns = [
+  {key: 'partner', label: "Kunde"},
+  {key: 'contract', label: "Vertrag"},
+  {key: 'serialConfig.intervall', label: "Intervall"},
+  {key: "amount", label: "Betrag"},
+]
+
 const selectedColumns = ref(templateColumns)
 const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
@@ -170,46 +452,79 @@ const filterOptions = ref([
     name: "Archivierte ausblenden",
     default: true,
     "filterFunction": function (row) {
-      if(!row.archived) {
-        return true
-      } else {
-        return false
-      }
+      return !row.archived;
     }
-  },{
+  }, {
     name: "Inaktive ausblenden",
-    default: true,
     "filterFunction": function (row) {
-      if(row.serialConfig.active) {
-        return true
-      } else {
-        return false
-      }
+      return !!row.serialConfig.active;
     }
   }
 ])
-const selectedFilters = ref(filterOptions.value.filter(i => i.default).map(i => i.name) ||[])
-
+const selectedFilters = ref(filterOptions.value.filter(i => i.default).map(i => i.name) || [])
 
 const displayCurrency = (value, currency = "€") => {
-  return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
+  return `${Number(value).toFixed(2).replace(".", ",")} ${currency}`
 }
 
 const calculateDocSum = (row) => {
   let sum = 0
-
   row.rows.forEach(row => {
-    if(row.mode === "normal" || row.mode === "service" || row.mode === "free") {
+    if (row.mode === "normal" || row.mode === "service" || row.mode === "free") {
       sum += row.quantity * row.price * (1 - row.discountPercent / 100) * (1 + row.taxPercent / 100)
     }
   })
-
   return sum.toFixed(2)
 }
 
+const openExecutionModal = () => {
+  executionDate.value = dayjs().format('YYYY-MM-DD')
+  selectedExecutionRows.value = []
+  showExecutionModal.value = true
+}
+
+const executeSerialInvoices = async () => {
+  if (selectedExecutionRows.value.length === 0) return;
+
+  isExecuting.value = true
+
+  try {
+    const payload = {
+      tenantId: dataStore.currentTenantId || items.value[0]?.tenant,
+      executionDate: executionDate.value,
+      templateIds: selectedExecutionRows.value.map(row => row.id)
+    }
+
+    const res = await $api('/api/functions/serial/start', {
+      method: 'POST',
+      body: payload
+    })
+
+    toast.add({
+      title: 'Ausführung gestartet',
+      description: `${res.length} Rechnungen werden im Hintergrund generiert.`,
+      icon: 'i-heroicons-check-circle',
+      color: 'green'
+    })
+
+    showExecutionModal.value = false
+    selectedExecutionRows.value = []
+
+    // Liste aktualisieren, um den "Läuft" Status zu sehen
+    await fetchExecutions()
+
+  } catch (error) {
+    console.error(error)
+    toast.add({
+      title: 'Fehler',
+      description: 'Die Ausführung konnte nicht gestartet werden.',
+      icon: 'i-heroicons-exclamation-triangle',
+      color: 'red'
+    })
+  } finally {
+    isExecuting.value = false
+  }
+}
+
 setupPage()
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/pages/incomingInvoices/[mode]/[id].vue b/pages/incomingInvoices/[mode]/[id].vue
index 319fc26..ed07dbf 100644
--- a/pages/incomingInvoices/[mode]/[id].vue
+++ b/pages/incomingInvoices/[mode]/[id].vue
@@ -43,6 +43,10 @@ const setup = async () => {
   accounts.value = await useEntities("accounts").selectSpecial()
 
   itemInfo.value = await useEntities("incominginvoices").selectSingle(route.params.id, "*, files(*)")
+
+  //TODO: Dirty Fix
+  itemInfo.value.vendor = itemInfo.value.vendor?.id
+
   await loadFile(itemInfo.value.files[itemInfo.value.files.length-1].id)
 
   if(itemInfo.value.date && !itemInfo.value.dueDate) itemInfo.value.dueDate = itemInfo.value.date
@@ -412,7 +416,7 @@ const findIncomingInvoiceErrors = computed(() => {
                   value-attribute="id"
                   searchable
                   :disabled="mode === 'show'"
-                  :search-attributes="['label']"
+                  :search-attributes="['label','number']"
                   searchable-placeholder="Suche..."
                   v-model="item.account"
                   :color="(item.account && accounts.find(i => i.id === item.account)) ? 'primary' : 'rose'"
@@ -420,6 +424,9 @@ const findIncomingInvoiceErrors = computed(() => {
                 <template #label>
                   {{accounts.find(account => account.id === item.account) ? accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
                 </template>
+                <template #option="{ option}">
+                  {{option.number}} - {{option.label}}
+                </template>
 
               </USelectMenu>
             </UFormGroup>
@@ -575,6 +582,7 @@ const findIncomingInvoiceErrors = computed(() => {
     <UProgress v-else animation="carousel"/>
   </UDashboardPanelContent>
 
+  <PageLeaveGuard :when="true"/>
 
 
 
diff --git a/stores/data.js b/stores/data.js
index dd805a7..a28952b 100644
--- a/stores/data.js
+++ b/stores/data.js
@@ -2608,7 +2608,7 @@ export const useDataStore = defineStore('data', () => {
         },
         cancellationInvoices: {
             label: "Stornorechnungen",
-            labelSingle: "Stornorechnung"
+            labelSingle: "Storno"
         },
         quotes: {
             label: "Angebote",