Merge branch 'beta' into 'main'

Beta

See merge request fedeo/software!60

components/LabelPrintModal.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import LabelPrinterButton from "~/components/LabelPrinterButton.vue";
+
+const labelPrinter = useLabelPrinterStore()
+
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+
+defineShortcuts({
+  meta_p: {
+    usingInput: true,
+    handler: () => {
+      if(!labelPrinter.connected) return
+      printLabel()
+    }
+  },
+  escape: {
+    usingInput: true,
+    handler: () => {
+      modal.close()
+    }
+  }
+})
+
+const emit = defineEmits(["printed"])
+const modal = useModal()
+const { $api } = useNuxtApp()
+
+const loading = ref(true)
+const printing = ref(false)
+const labelData = ref<any>(null) // gerendertes Bild vom Backend
+
+
+
+/** Label vom Backend rendern */
+async function loadLabel() {
+  loading.value = true
+  try {
+    labelData.value = await $api(`/api/print/label`, {
+      method: "POST",
+      body: JSON.stringify({
+        context: props.context || null
+      })
+    })
+  } catch (err) {
+    console.error("Label render error", err)
+  }
+  loading.value = false
+}
+
+/** Drucken */
+async function printLabel() {
+  if (!labelPrinter.connected) return
+
+  printing.value = true
+  try {
+    await labelPrinter.print(labelData.value.encoded, { density: 5, pages: 1 })
+    modal.close()
+  } catch (err) {
+    console.error("Print error", err)
+  }
+  printing.value = false
+}
+const handleConnect = async () => {
+  await loadLabel()
+  await labelPrinter.connect("ble")
+}
+onMounted(() => {
+  if(labelPrinter.connected) {
+    loadLabel()
+  }
+
+
+})
+
+</script>
+
+<template>
+  <UModal>
+    <UCard>
+
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-lg font-semibold">Label drucken</h3>
+          <UButton icon="i-heroicons-x-mark" variant="ghost" @click="modal.close()" />
+        </div>
+      </template>
+
+      <div v-if="!loading && labelPrinter.connected">
+        <img
+            :src="`data:image/png;base64,${labelData.base64}`"
+            alt="Label Preview"
+            class="max-w-full max-h-64 object-contain"
+        />
+      </div>
+      <div v-else-if="loading && !labelPrinter.connected">
+        Kein Drucker verbunden
+
+        <LabelPrinterButton/>
+
+      </div>
+      <UProgress animation="carousel" v-else/>
+
+
+
+      <template #footer>
+        <div class="flex justify-between">
+          <UButton variant="ghost" @click="modal.close()">Abbrechen</UButton>
+
+          <UButton
+              color="primary"
+              :disabled="!labelPrinter.connected || printing"
+              :loading="printing"
+              @click="printLabel"
+          >
+            Drucken
+            <UKbd>⌘</UKbd>
+            <UKbd>P</UKbd>
+          </UButton>
+        </div>
+      </template>
+
+    </UCard>
+  </UModal>
+</template>

components/LabelPrinterButton.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+
+const labelPrinter = useLabelPrinterStore()
+
+const showPrinterInfo = ref(false)
+
+const handleClick = async () => {
+  if(labelPrinter.connected) {
+    showPrinterInfo.value = true
+  } else {
+    await labelPrinter.connect('ble')
+  }
+}
+
+
+</script>
+
+<template>
+  <!-- Printer Button -->
+
+  <UModal v-model="showPrinterInfo">
+    <UCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-lg font-semibold">Drucker Informationen</h3>
+          <UButton icon="i-heroicons-x-mark" variant="ghost" @click="showPrinterInfo = false" />
+        </div>
+      </template>
+      <p>Seriennummer: {{labelPrinter.info.serial}}</p>
+      <p>MAC: {{labelPrinter.info.mac}}</p>
+      <p>Modell: {{labelPrinter.info.modelId}}</p>
+      <p>Charge: {{labelPrinter.info.charge}}</p>
+      <p>Hardware Version: {{labelPrinter.info.hardwareVersion}}</p>
+      <p>Software Version: {{labelPrinter.info.softwareVersion}}</p>
+    </UCard>
+  </UModal>
+
+  <UButton
+      :icon="labelPrinter.connected ? 'i-heroicons-printer' : 'i-heroicons-printer'"
+      :color="labelPrinter.connected ? 'green' : 'gray'"
+      variant="soft"
+      class="w-full justify-start"
+      :loading="labelPrinter.connectLoading"
+      @click="handleClick"
+  >
+    <span v-if="labelPrinter.connected">Drucker verbunden</span>
+    <span v-else>Drucker verbinden</span>
+  </UButton>
+</template>
+
+<style scoped>
+
+</style>

components/MainNav.vue

@@ -339,8 +339,7 @@ const links = computed(() => {
         },{
           label: "Export",
           to: "/export",
-          icon: "i-heroicons-clipboard-document-list",
+          icon: "i-heroicons-clipboard-document-list"
-          disabled: true
         }
       ]
     }

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>

components/PublicDynamicForm.vue

@@ -0,0 +1,201 @@
+<script setup>
+import dayjs from 'dayjs'
+
+const props = defineProps({
+  context: { type: Object, required: true },
+  token: { type: String, required: true },
+  pin: { type: String, default: '' }
+})
+
+const emit = defineEmits(['success'])
+const { $api } = useNuxtApp()
+const toast = useToast()
+
+const config = computed(() => props.context.config)
+const data = computed(() => props.context.data)
+
+// Initiale Werte setzen
+const form = ref({
+  profile: props.context.meta?.defaultProfileId || null,
+  project: null,
+  service: config.value?.defaults?.serviceId || null,
+  // Wenn manualTime erlaubt, setze Startzeit auf jetzt, sonst null (wird im Backend gesetzt)
+  startDate: config.value?.features?.timeTracking?.allowManualTime ? new Date() : null,
+  endDate: config.value?.features?.timeTracking?.allowManualTime ? dayjs().add(1, 'hour').toDate() : null,
+  dieselUsage: 0,
+  description: ''
+})
+
+const isSubmitting = ref(false)
+const errors = ref({})
+
+// Validierung basierend auf JSON Config
+const validate = () => {
+  errors.value = {}
+  let isValid = true
+  const validationRules = config.value.validation || {}
+
+  // Standard-Validierung
+  if (!form.value.project && data.value.projects?.length > 0) {
+    errors.value.project = 'Pflichtfeld'
+    isValid = false
+  }
+
+  if (!form.value.service && data.value.services?.length > 0) {
+    errors.value.service = 'Pflichtfeld'
+    isValid = false
+  }
+
+  // Profil nur validieren, wenn Auswahl möglich ist
+  if (!form.value.profile && data.value.profiles?.length > 0 && !props.context.meta.defaultProfileId) {
+    errors.value.profile = 'Bitte Mitarbeiter wählen'
+    isValid = false
+  }
+
+  // Feature: Agriculture
+  if (config.value.features?.agriculture?.showDieselUsage && validationRules.requireDiesel) {
+    if (!form.value.dieselUsage || form.value.dieselUsage <= 0) {
+      errors.value.diesel = 'Dieselverbrauch erforderlich'
+      isValid = false
+    }
+  }
+
+  return isValid
+}
+
+const submit = async () => {
+  if (!validate()) return
+
+  isSubmitting.value = true
+  try {
+    const payload = { ...form.value }
+
+    // Headers vorbereiten (PIN mitsenden!)
+    const headers = {}
+    if (props.pin) headers['x-public-pin'] = props.pin
+
+    // An den Submit-Endpunkt senden (den müssen wir im Backend noch bauen!)
+    await $fetch(`http://localhost:3100/workflows/submit/${props.token}`, {
+      method: 'POST',
+      body: payload,
+      headers
+    })
+
+    emit('success')
+  } catch (e) {
+    console.error(e)
+    toast.add({ title: 'Fehler beim Speichern', color: 'red' })
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <UCard :ui="{ body: { padding: 'p-6 sm:p-8' } }" v-if="props.context && props.token">
+    <template #header>
+      <div class="text-center">
+        <h1 class="text-xl font-bold text-gray-900">{{ config?.ui?.title || 'Erfassung' }}</h1>
+        <p v-if="config?.ui?.description" class="text-sm text-gray-500 mt-1">{{ config?.ui?.description }}</p>
+      </div>
+    </template>
+
+    <div class="space-y-5">
+
+      <UFormGroup
+          v-if="!context?.meta?.defaultProfileId && data?.profiles?.length > 0"
+          label="Mitarbeiter"
+          :error="errors.profile"
+          required
+      >
+        <USelectMenu
+            v-model="form.profile"
+            :options="data.profiles"
+            option-attribute="fullName"
+            value-attribute="id"
+            placeholder="Name auswählen..."
+            searchable
+            searchable-placeholder="Suchen..."
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          v-if="data?.projects?.length > 0"
+          :label="config.ui?.labels?.project || 'Projekt'"
+          :error="errors.project"
+          required
+      >
+        <USelectMenu
+            v-model="form.project"
+            :options="data.projects"
+            option-attribute="name"
+            value-attribute="id"
+            placeholder="Wählen..."
+            searchable
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          v-if="data?.services?.length > 0"
+          :label="config?.ui?.labels?.service || 'Leistung'"
+          :error="errors.service"
+          required
+      >
+        <USelectMenu
+            v-model="form.service"
+            :options="data.services"
+            option-attribute="name"
+            value-attribute="id"
+            placeholder="Wählen..."
+        />
+      </UFormGroup>
+
+      <div v-if="config?.features?.timeTracking?.allowManualTime" class="grid grid-cols-2 gap-3">
+        <UFormGroup label="Start">
+          <input
+              type="datetime-local"
+              class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-600 sm:text-sm sm:leading-6 px-2"
+              :value="dayjs(form.startDate).format('YYYY-MM-DDTHH:mm')"
+              @input="e => form.startDate = new Date(e.target.value)"
+          />
+        </UFormGroup>
+        <UFormGroup label="Ende">
+          <input
+              type="datetime-local"
+              class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-600 sm:text-sm sm:leading-6 px-2"
+              :value="dayjs(form.endDate).format('YYYY-MM-DDTHH:mm')"
+              @input="e => form.endDate = new Date(e.target.value)"
+          />
+        </UFormGroup>
+      </div>
+
+      <UFormGroup
+          v-if="config?.features?.agriculture?.showDieselUsage"
+          label="Dieselverbrauch"
+          :error="errors.diesel"
+          :required="config?.validation?.requireDiesel"
+      >
+        <UInput v-model="form.dieselUsage" type="number" step="0.1" placeholder="0.0">
+          <template #trailing>
+            <span class="text-gray-500 text-xs">Liter</span>
+          </template>
+        </UInput>
+      </UFormGroup>
+
+      <UFormGroup :label="config?.ui?.labels?.description || 'Notiz'">
+        <UTextarea v-model="form.description" :rows="3" />
+      </UFormGroup>
+
+    </div>
+
+    <template #footer>
+      <UButton
+          block
+          size="xl"
+          :loading="isSubmitting"
+          @click="submit"
+          :label="config?.ui?.submitButtonText || 'Speichern'"
+      />
+    </template>
+  </UCard>
+</template>

components/displayBankaccounts.vue

@@ -37,7 +37,7 @@ const calculateOpenSum = (statement) => {
     <tr v-for="account in bankaccounts.filter(i => !i.expired)">
       <td>{{ account.name }}:</td>
       <td>
-        {{dayjs(account.synced_at).format("DD.MM.YY HH:mm")}}
+        {{dayjs(account.syncedAt).format("DD.MM.YY HH:mm")}}
       </td>
       <td>
         <span v-if="account.balance < 0" class=" text-nowrap text-rose-600 font-bold">{{useCurrency(account.balance)}}</span>

components/nimbot.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+
+const labelPrinter = useLabelPrinterStore()
+
+
+const { $api } = useNuxtApp()
+
+const labelWidth = ref(50)
+const labelHeight = ref(30)
+const zpl = ref(`^XA
+^FO5,5
+^GB545,325,3^FS
+^CF0,30
+^FO20,20^FDHello from Bluetooth!^FS
+^FO20,100^BY2
+^BXN,10,200
+^FD12345678901234567^FS
+^XZ`)
+
+
+
+async function handlePrint() {
+  const dpmm = 12
+  const res = await $api("/api/print/label", {
+    method: "POST",
+    body: JSON.stringify({
+      zpl: zpl.value,
+      width: labelWidth.value,
+      height: labelHeight.value,
+      dpmm,
+    }),
+  })
+  await labelPrinter.print(res, { density: 5, pages: 1 })
+}
+</script>
+
+<template>
+  <UCard class="p-4">
+    <div class="flex gap-2 mb-2">
+      <UButton @click="labelPrinter.connect('serial')">Connect S </UButton>
+      <UButton @click="labelPrinter.connect('ble')">Connect B</UButton>
+      <UButton color="red" @click="labelPrinter.disconnect">Disconnect</UButton>
+      <UButton color="primary" @click="handlePrint" :disabled="!labelPrinter.connected">Print</UButton>
+    </div>
+
+    {{labelPrinter.info}}
+
+    {{labelPrinter.printProgress}}
+
+    <UFormGroup label="Breite">
+      <UInput v-model="labelWidth"><template #trailing>mm</template></UInput>
+    </UFormGroup>
+    <UFormGroup label="Höhe">
+      <UInput v-model="labelHeight"><template #trailing>mm</template></UInput>
+    </UFormGroup>
+    <UFormGroup label="ZPL">
+      <UTextarea v-model="zpl" rows="6" />
+    </UFormGroup>
+  </UCard>
+</template>

layouts/default.vue

@@ -6,6 +6,7 @@ import dayjs from "dayjs";
 import {useCapacitor} from "../composables/useCapacitor.js";
 import GlobalMessages from "~/components/GlobalMessages.vue";
 import TenantDropdown from "~/components/TenantDropdown.vue";
+import LabelPrinterButton from "~/components/LabelPrinterButton.vue";
 
 const dataStore = useDataStore()
 const colorMode = useColorMode()
@@ -14,6 +15,7 @@ const router = useRouter()
 const route = useRoute()
 
 const auth = useAuthStore()
+const labelPrinter = useLabelPrinterStore()
 
 
 const month = dayjs().format("MM")
@@ -240,13 +242,16 @@ const footerLinks = [
 
 
           <template #footer>
-            <div class="flex flex-col w-full">
+            <div class="flex flex-col gap-3 w-full">
 
+              <LabelPrinterButton/>
+
+              <!-- Footer Links -->
               <UDashboardSidebarLinks :links="footerLinks" />
+
               <UDivider class="sticky bottom-0" />
               <UserDropdown style="margin-bottom: env(safe-area-inset-bottom, 10px) !important;"/>
             </div>
-
           </template>
         </UDashboardSidebar>
       </UDashboardPanel>

pages/accounts/index.vue

@@ -26,13 +26,13 @@ const setupPage = async () => {
   incominginvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)"))
 
   items.value = await Promise.all(items.value.map(async (i) => {
-    let renderedAllocationsTemp = await renderedAllocations(i.id)
+    // let renderedAllocationsTemp = await renderedAllocations(i.id)
-    let saldo = getSaldo(renderedAllocationsTemp)
+    // let saldo = getSaldo(renderedAllocationsTemp)
 
     return {
       ...i,
-      saldo: saldo,
+      // saldo: saldo,
-      allocations: renderedAllocationsTemp.length,
+      // allocations: renderedAllocationsTemp.length,
     }
 
   }))
@@ -103,13 +103,13 @@ const templateColumns = [
   },{
     key: "label",
     label: "Name"
-  },{
+  },/*{
     key: "allocations",
     label: "Buchungen"
   },{
     key: "saldo",
     label: "Saldo"
-  }, {
+  },*/ {
     key: "description",
     label: "Beschreibung"
   },
@@ -166,7 +166,7 @@ setupPage()
   </UDashboardNavbar>
   <UDashboardToolbar>
     <template #right>
-      <USelectMenu
+<!--      <USelectMenu
           v-model="selectedColumns"
           icon="i-heroicons-adjustments-horizontal-solid"
           :options="templateColumns"
@@ -178,7 +178,7 @@ setupPage()
         <template #label>
           Spalten
         </template>
-      </USelectMenu>
+      </USelectMenu>-->
       <USelectMenu
           icon="i-heroicons-adjustments-horizontal-solid"
           multiple

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()
   }
 })
@@ -16,10 +17,43 @@ const route = useRoute()
 
 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))
   bankaccounts.value = await useEntities("bankaccounts").select()
+  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 = [
@@ -58,7 +92,6 @@ const clearSearchString = () => {
   searchString.value = ''
 }
 
-const filterAccount = ref(bankaccounts.value || [])
 
 const displayCurrency = (value, currency = "€") => {
   return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
@@ -98,9 +131,6 @@ const filteredRows = computed(() => {
     }
   }
 
-
-
-
   return useSearch(searchString.value, temp.filter(i => filterAccount.value.find(x => x.id === i.account)))
 })
 
@@ -110,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"
@@ -150,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
@@ -219,12 +247,9 @@ setupPage()
       </span>
     </template>
   </UTable>
-
+  <PageLeaveGuard :when="isSyncing"/>
-
 </template>
 
-
-
 <style scoped>
 
 </style>

pages/createDocument/edit/[[id]].vue

@@ -632,7 +632,7 @@ const findDocumentErrors = computed(() => {
   if (itemInfo.value.customer === null) errors.push({message: "Es ist kein Kunde ausgewählt", type: "breaking"})
   if (itemInfo.value.contact === null) errors.push({message: "Es ist kein Kontakt ausgewählt", type: "info"})
   if (itemInfo.value.letterhead === null) errors.push({message: "Es ist kein Briefpapier ausgewählt", type: "breaking"})
-  if (itemInfo.value.created_by === null || !itemInfo.value.created_by) errors.push({message: "Es ist kein Ansprechpartner im Unternehmen ausgewählt", type: "breaking"})
+  if (itemInfo.value.created_by === null || !itemInfo.value.created_by) errors.push({message: "Es ist kein Mitarbeiter ausgewählt", type: "breaking"})
   if (itemInfo.value.address.street === null) errors.push({
     message: "Es ist keine Straße im Adressat angegeben",
     type: "breaking"
@@ -697,11 +697,11 @@ const findDocumentErrors = computed(() => {
 
       if (["normal", "service", "free"].includes(row.mode)) {
 
-        if (!row.taxPercent && typeof row.taxPercent !== "number") errors.push({
+        if (!row.taxPercent && typeof row.taxPercent !== "number" && itemInfo.value.type !== "deliveryNotes") errors.push({
           message: `In Position ${row.pos} ist kein Steuersatz hinterlegt`,
           type: "breaking"
         })
-        if (!row.price && typeof row.price !== "number") errors.push({
+        if (!row.price && typeof row.price !== "number" && itemInfo.value.type !== "deliveryNotes") errors.push({
           message: `In Position ${row.pos} ist kein Preis hinterlegt`,
           type: "breaking"
         })
@@ -1281,6 +1281,7 @@ const saveSerialInvoice = async () => {
     payment_type: itemInfo.value.payment_type,
     deliveryDateType: "Leistungszeitraum",
     createdBy: itemInfo.value.createdBy,
+    created_by: itemInfo.value.created_by,
     title: itemInfo.value.title,
     description: itemInfo.value.description,
     startText: itemInfo.value.startText,
@@ -1289,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
@@ -1692,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'}*/]"
@@ -2026,7 +2028,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 </UFormGroup>
               </InputGroup>
               <UFormGroup
-                  label="Ansprechpartner im Unternehmen:"
+                  label="Mitarbeiter:"
               >
                 <USelectMenu
                     :options="tenantUsers"
@@ -3135,6 +3137,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
     </UTabs>
     <UProgress animation="carousel" v-else/>
   </UDashboardPanelContent>
+  <PageLeaveGuard :when="true"/>
 
 
 

pages/createDocument/index.vue

@@ -68,38 +68,28 @@
           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'" class="text-cyan-500">{{
-            <!--
+                dataStore.documentTypesForCreation[row.type].labelSingle
-                        <span v-if="row.type === 'cancellationInvoices'"> zu {{row.linkedDocument.documentNumber}}</span>
+              }} 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
+            <span v-if="row.state === 'Entwurf'" class="text-rose-500">{{ row.state }}</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 === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === row.id)"
                 class="text-primary-500"
@@ -112,34 +102,35 @@
             >
               Storniert mit {{ items.find(i => i.createddocument && i.createddocument.id === row.id).documentNumber }}
             </span>
-            <span
+            <span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{ row.state }}</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>
             <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]"
+            <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.documentNumber }}</span>
-                  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
+            <span v-if="row.documentDate">{{ row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : '' }}</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>
+                 :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
+            <span v-if="row.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items)) }}</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,8 +168,14 @@ defineShortcuts({
   'Enter': {
     usingInput: true,
     handler: () => {
+      // 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': () => {
     if (selectedItem.value < filteredRows.value.length - 1) {
@@ -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: "reference",
+  {key: 'type', label: "Typ"},
-    label: "Referenz"
+  {key: 'state', label: "Status"},
-  },
+  {key: "amount", label: "Betrag"},
-  {
+  {key: 'partner', label: "Kunde"},
-    key: 'type',
+  {key: "date", label: "Datum"},
-    label: "Typ"
+  {key: "amountOpen", label: "Offener Betrag"},
-  }, {
+  {key: "paid", label: "Bezahlt"},
-    key: 'state',
+  {key: "dueDate", label: "Fällig"}
-    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>

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>
@@ -98,27 +133,248 @@
       <span v-if="row.serialConfig?.intervall === 'monatlich'">Monatlich</span>
       <span v-if="row.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
     </template>
+    <template #payment_type-data="{row}">
+      <span v-if="row.payment_type === 'transfer'">Überweisung</span>
+      <span v-else-if="row.payment_type === 'direct-debit'">SEPA - Einzug</span>
+    </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="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+          <UInput
+              v-model="modalSearch"
+              icon="i-heroicons-magnifying-glass"
+              placeholder="Kunde oder Vertrag suchen..."
+              class="w-full sm:w-64"
+              size="sm"
+          />
+
+          <div class="flex items-center gap-2">
+                <span class="text-xs text-gray-500 hidden sm:inline">
+                   {{ filteredExecutionList.length }} sichtbar
+                </span>
+            <UButton
+                size="2xs"
+                color="gray"
+                variant="soft"
+                label="Alle auswählen"
+                @click="selectAllTemplates"
+            />
+            <UButton
+                size="2xs"
+                color="gray"
+                variant="ghost"
+                label="Keine"
+                @click="selectedExecutionRows = []"
+            />
+          </div>
+        </div>
+
+        <div class="max-h-96 overflow-y-auto border border-gray-200 dark:border-gray-800 rounded-md">
+          <UTable
+              v-model="selectedExecutionRows"
+              :rows="filteredExecutionList"
+              :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>
+            <template #contract-data="{row}">
+              {{row.contract?.contractNumber}} - {{row.contract?.name}}
+            </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)
+const modalSearch = ref("") // NEU: Suchstring für das Modal
+
+// --- SerialExecutions State ---
+const showExecutionsSlideover = ref(false)
+const executionItems = ref([])
+const executionsLoading = ref(false)
+const finishingId = ref(null)
+
 const setupPage = async () => {
   items.value = await useEntities("createddocuments").select("*, customer(id,name), contract(id,name, contractNumber)","documentDate",undefined,true)
+  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(() => {
+  return executionItems.value.filter(i => i.status === 'draft')
+})
+
+const completedExecutions = computed(() => {
+  return executionItems.value.filter(i => i.status !== 'running' && i.status !== 'pending' && i.status !== 'draft')
+})
+
+const openExecutionsSlideover = () => {
+  showExecutionsSlideover.value = true
+  fetchExecutions()
+}
+
+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'
+    })
+    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': 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 +382,98 @@ 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 = [
+// Basis Liste für das Modal (nur Aktive)
-  {
+const activeTemplates = computed(() => {
-    key: 'serialConfig.active',
+  return items.value
-    label: "Aktiv"
+      .filter(i => i.type === "serialInvoices" && !!i.serialConfig?.active)
-  },{
+      .map(i => ({...i}))
-    key: "amount",
+})
-    label: "Betrag"
+
-  },
+// NEU: Gefilterte Liste für das Modal basierend auf der Suche
-  {
+const filteredExecutionList = computed(() => {
-    key: 'partner',
+  if (!modalSearch.value) return activeTemplates.value
-    label: "Kunde"
+
-  },
+  const term = modalSearch.value.toLowerCase()
-  {
+
-    key: 'contract',
+  return activeTemplates.value.filter(row => {
-    label: "Vertrag"
+    const customerName = row.customer?.name?.toLowerCase() || ""
-  },
+    const contractNum = row.contract?.contractNumber?.toLowerCase() || ""
-  {
+    const contractName = row.contract?.name?.toLowerCase() || ""
-    key: 'serialConfig.intervall',
+
-    label: "Rhythmus"
+    return customerName.includes(term) ||
+        contractNum.includes(term) ||
+        contractName.includes(term)
+  })
+})
+
+// NEU: Alle auswählen (nur die aktuell sichtbaren/gefilterten)
+const selectAllTemplates = () => {
+  // WICHTIG: Überschreibt nicht bestehende Auswahl, sondern fügt hinzu oder ersetzt.
+  // Hier ersetzen wir die Auswahl komplett mit dem aktuellen Filterergebnis
+  selectedExecutionRows.value = [...filteredExecutionList.value]
 }
+
+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
+  row.serialConfig.active = newState
+  try {
+    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)
+    row.serialConfig.active = !newState
+    toast.add({
+      title: 'Fehler',
+      description: 'Status konnte nicht gespeichert werden.',
+      color: 'red'
+    })
+  }
+}
+
+const templateColumns = [
+  { key: 'actions', label: '' },
+  { key: 'serialConfig.active', label: "Aktiv" },
+  { key: "amount", label: "Betrag" },
+  { key: 'partner', label: "Kunde" },
+  { key: 'contract', label: "Vertrag" },
+  { key: 'serialConfig.intervall', label: "Rhythmus" },
+  { key: 'payment_type', label: "Zahlart" }
+]
+
+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 +482,79 @@ const filterOptions = ref([
     name: "Archivierte ausblenden",
     default: true,
     "filterFunction": function (row) {
-      if(!row.archived) {
+      return !row.archived;
-        return true
-      } else {
-        return false
-      }
     }
   }, {
     name: "Inaktive ausblenden",
-    default: true,
     "filterFunction": function (row) {
-      if(row.serialConfig.active) {
+      return !!row.serialConfig.active;
-        return true
-      } else {
-        return false
-      }
     }
   }
 ])
 const selectedFilters = ref(filterOptions.value.filter(i => i.default).map(i => i.name) || [])
 
-
 const displayCurrency = (value, 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") {
       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 = []
+  modalSearch.value = "" // Reset Search
+  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 = []
+
+    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>

pages/export/create/sepa.vue

@@ -0,0 +1,47 @@
+<script setup>
+
+const createddocuments = ref([])
+const selected = ref([])
+const setup = async () => {
+    createddocuments.value = (await useEntities("createddocuments").select()).filter(i => i.payment_type === "direct-debit")
+    selected.value = createddocuments.value
+}
+
+setup()
+
+const createExport = async () => {
+  //NUMMERN MAPPEN ZU IDS UND AN BACKEND FUNKTION ÜBERGEBEN
+  const ids = selected.value.map((i) => i.id)
+
+  const res = await useNuxtApp().$api("/api/exports/sepa", {
+    method: "POST",
+    body: {
+      idsToExport: ids
+    }
+  })
+
+
+}
+
+
+</script>
+
+<template>
+  <UDashboardNavbar title="SEPA Export erstellen">
+    <template #right>
+      <UButton @click="createExport">
+        Erstellen
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UTable
+      v-if="createddocuments.length > 0"
+      :loading="true"
+      v-model="selected"
+      :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
+      :rows="createddocuments" />
+</template>
+
+<style scoped>
+
+</style>

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"/>
 
 
 

pages/incomingInvoices/index.vue

@@ -2,6 +2,9 @@
 import dayjs from "dayjs"
 import {useSum} from "~/composables/useSum.js";
 
+// Zugriff auf API und Toast
+const { $api } = useNuxtApp()
+const toast = useToast()
 
 defineShortcuts({
   '/': () => {
@@ -47,6 +50,9 @@ const sort = ref({
   direction: 'desc'
 })
 
+// Status für den Button
+const isPreparing = ref(false)
+
 const type = "incominginvoices"
 const dataType = dataStore.dataTypes[type]
 
@@ -54,6 +60,34 @@ const setupPage = async () => {
   items.value = await useEntities(type).select("*, vendor(id,name), statementallocations(id,amount)",sort.value.column,sort.value.direction === "asc")
 }
 
+// Funktion zum Vorbereiten der Belege
+const prepareInvoices = async () => {
+  isPreparing.value = true
+  try {
+    await $api('/api/functions/services/prepareincominginvoices', { method: 'POST' })
+
+    toast.add({
+      title: 'Erfolg',
+      description: 'Eingangsbelege wurden vorbereitet.',
+      icon: 'i-heroicons-check-circle',
+      color: 'green'
+    })
+
+    // Liste neu laden
+    await setupPage()
+  } catch (error) {
+    console.error(error)
+    toast.add({
+      title: 'Fehler',
+      description: 'Beim Vorbereiten der Belege ist ein Fehler aufgetreten.',
+      icon: 'i-heroicons-exclamation-circle',
+      color: 'red'
+    })
+  } finally {
+    isPreparing.value = false
+  }
+}
+
 setupPage()
 
 const selectedColumns = ref(tempStore.columns[type] ? tempStore.columns[type] : dataType.templateColumns.filter(i => !i.disabledInTable))
@@ -128,6 +162,17 @@ const selectIncomingInvoice = (invoice) => {
 <template>
   <UDashboardNavbar title="Eingangsbelege" :badge="filteredRows.length">
     <template #right>
+
+      <UButton
+          label="Belege vorbereiten"
+          icon="i-heroicons-sparkles"
+          color="primary"
+          variant="solid"
+          :loading="isPreparing"
+          @click="prepareInvoices"
+          class="mr-2"
+      />
+
       <UInput
           id="searchinput"
           v-model="searchString"
@@ -150,7 +195,6 @@ const selectIncomingInvoice = (invoice) => {
           v-if="searchString.length > 0"
       />
 
-<!--      <UButton @click="router.push(`/incomingInvoices/create`)">+ Beleg</UButton>-->
     </template>
   </UDashboardNavbar>
   <UDashboardToolbar>

pages/index.vue

@@ -56,16 +56,36 @@
       >
         <display-open-tasks/>
       </UDashboardCard>
+      <UDashboardCard
+        title="Label Test"
+      >
+        <UButton
+            @click="modal.open(LabelPrintModal, {
+              context: {
+                datamatrix: '1234',
+                text: 'FEDEO TEST'
+              }
+            })"
+            icon="i-heroicons-printer"
+        >
+          Label Drucken
+        </UButton>
+      </UDashboardCard>
     </UPageGrid>
   </UDashboardPanelContent>
 </template>
 
 <script setup>
 
+import Nimbot from "~/components/nimbot.vue";
+import LabelPrintModal from "~/components/LabelPrintModal.vue";
+
 definePageMeta({
   middleware: 'redirect-to-mobile-index'
 })
 
+const modal = useModal();
+
 const { isNotificationsSlideoverOpen } = useDashboard()
 
 </script>

pages/workflows/[token].vue

@@ -0,0 +1,121 @@
+<script setup>
+definePageMeta({
+  layout: 'blank', // Kein Menü, keine Sidebar
+  middleware: [], // Keine Auth-Checks durch Nuxt
+  auth: false     // Falls du das nuxt-auth Modul nutzt
+})
+
+const route = useRoute()
+const token = route.params.token
+const { $api } = useNuxtApp() // Dein Fetch-Wrapper
+const toast = useToast()
+
+// States
+const status = ref('loading') // loading, pin_required, ready, error, success
+const pin = ref('')
+const context = ref(null)
+const errorMsg = ref('')
+
+// Daten laden
+const loadContext = async () => {
+  status.value = 'loading'
+  errorMsg.value = ''
+
+  try {
+    const headers = {}
+    if (pin.value) headers['x-public-pin'] = pin.value
+
+    // Abruf an dein Fastify Backend
+    // Pfad evtl. anpassen, wenn du Proxy nutzt
+    const res = await $fetch(`http://localhost:3100/workflows/context/${token}`, { headers })
+
+    context.value = res
+    status.value = 'ready'
+  } catch (err) {
+    if (err.statusCode === 401) {
+      status.value = 'pin_required' // PIN nötig (aber noch keine eingegeben)
+    } else if (err.statusCode === 403) {
+      status.value = 'pin_required'
+      errorMsg.value = 'Falsche PIN'
+      pin.value = ''
+    } else {
+      status.value = 'error'
+      errorMsg.value = 'Link ungültig oder abgelaufen.'
+    }
+  }
+}
+
+// Initialer Aufruf
+onMounted(() => {
+  loadContext()
+})
+
+const handlePinSubmit = () => {
+  if (pin.value.length >= 4) loadContext()
+}
+
+const handleFormSuccess = () => {
+  status.value = 'success'
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4 font-sans">
+
+    <div v-if="status === 'loading'" class="text-center">
+      <UIcon name="i-heroicons-arrow-path" class="w-10 h-10 animate-spin text-primary-500 mx-auto" />
+      <p class="mt-4 text-gray-500">Lade Formular...</p>
+    </div>
+
+    <UCard v-else-if="status === 'error'" class="w-full max-w-md border-red-200">
+      <div class="text-center text-red-600 space-y-2">
+        <UIcon name="i-heroicons-exclamation-circle" class="w-12 h-12 mx-auto" />
+        <h3 class="font-bold text-lg">Fehler</h3>
+        <p>{{ errorMsg }}</p>
+      </div>
+    </UCard>
+
+    <UCard v-else-if="status === 'pin_required'" class="w-full max-w-sm shadow-xl">
+      <div class="text-center mb-6">
+        <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
+          <UIcon name="i-heroicons-lock-closed" class="w-6 h-6 text-primary-600" />
+        </div>
+        <h2 class="text-xl font-bold text-gray-900">Geschützter Bereich</h2>
+        <p class="text-sm text-gray-500">Bitte PIN eingeben</p>
+      </div>
+
+      <form @submit.prevent="handlePinSubmit" class="space-y-4">
+        <UInput
+            v-model="pin"
+            type="password"
+            placeholder="PIN"
+            input-class="text-center text-lg tracking-widest"
+            autofocus
+            icon="i-heroicons-key"
+        />
+        <div v-if="errorMsg" class="text-red-500 text-xs text-center font-medium">{{ errorMsg }}</div>
+        <UButton type="submit" block label="Entsperren" size="lg" />
+      </form>
+    </UCard>
+
+    <UCard v-else-if="status === 'success'" class="w-full max-w-md text-center py-10">
+      <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+        <UIcon name="i-heroicons-check" class="w-8 h-8 text-green-600" />
+      </div>
+      <h2 class="text-2xl font-bold text-gray-900 mb-2">Gespeichert!</h2>
+      <p class="text-gray-500 mb-6">Die Daten wurden erfolgreich übertragen.</p>
+      <UButton variant="outline" @click="() => window.location.reload()">Neuen Eintrag erfassen</UButton>
+    </UCard>
+
+    <div v-else-if="status === 'ready'" class="w-full max-w-lg">
+      <PublicDynamicForm
+          v-if="context && token"
+          :context="context"
+          :token="token"
+          :pin="pin"
+          @success="handleFormSuccess"
+      />
+    </div>
+
+  </div>
+</template>

stores/data.js

@@ -2608,7 +2608,7 @@ export const useDataStore = defineStore('data', () => {
         },
         cancellationInvoices: {
             label: "Stornorechnungen",
-            labelSingle: "Stornorechnung"
+            labelSingle: "Storno"
         },
         quotes: {
             label: "Angebote",

stores/labelPrinter.ts

@@ -0,0 +1,190 @@
+import { defineStore } from "pinia"
+import {
+    Utils,
+    RequestCommandId,
+    ResponseCommandId,
+    NiimbotBluetoothClient,
+    NiimbotSerialClient
+} from "@mmote/niimbluelib"
+import { useToast } from "#imports"
+
+export const useLabelPrinterStore = defineStore("labelPrinter", {
+    state: () => ({
+        client: null as NiimbotBluetoothClient | NiimbotSerialClient | null,
+        connected: false,
+        connectLoading: false,
+        transportLastUsed: "",
+        printProgress: 0,
+        info: {} as any
+    }),
+
+    actions: {
+
+        /** Logging Helper */
+        logger(...args: any[]) {
+            console.debug("[Printer]", ...args)
+        },
+
+        /** --- Client erzeugen --- */
+        newClient(transport: "ble" | "serial" = "serial") {
+            const toast = useToast()
+
+            // alten Client trennen
+            if (this.client) {
+                try { this.client.disconnect() } catch {}
+            }
+
+            // neuen Client erzeugen
+            this.client =
+                transport === "ble"
+                    ? new NiimbotBluetoothClient()
+                    : new NiimbotSerialClient()
+
+            /** Events registrieren */
+
+            this.client.on("printerinfofetched", (e) => {
+                console.log("printerInfoFetched")
+                console.log(e.info)
+                this.info = e.info
+            })
+
+            this.client.on("connect", () => {
+                this.connected = true
+                toast.add({ title: "Drucker verbunden" })
+                this.logger("connected")
+            })
+
+            this.client.on("disconnect", () => {
+                this.connected = false
+                toast.add({ title: "Drucker getrennt" })
+                this.logger("disconnected")
+            })
+
+            this.client.on("printprogress", (e) => {
+                if (e.pagePrintProgress) this.printProgress = e.pagePrintProgress
+                this.logger(
+                    `Page ${e.page}/${e.pagesTotal}, Page print ${e.pagePrintProgress}%, Page feed ${e.pageFeedProgress}%`
+                )
+            })
+
+            return this.client
+        },
+
+        /** --- Verbinden --- */
+        async connect(transport: "ble" | "serial" = "serial") {
+            const toast = useToast()
+
+            this.connectLoading = true
+
+            this.newClient(transport)
+
+            try {
+                await this.client!.connect()
+                this.transportLastUsed = transport
+                this.connectLoading = false
+            } catch (err) {
+                console.error("[Printer] Connect failed:", err)
+                toast.add({ title: "Verbindung fehlgeschlagen", color: "red" })
+                this.connectLoading = false
+            }
+        },
+
+        /** --- Trennen --- */
+        async disconnect({ forget = false } = {}) {
+            const toast = useToast()
+            this.logger("Disconnect requested…")
+
+            if (!this.client) return
+
+            try {
+                // Timer stoppen
+                try {
+                    if (this.client.heartbeatTimer) {
+                        clearInterval(this.client.heartbeatTimer)
+                        this.client.heartbeatTimer = null
+                    }
+                    if (this.client.abstraction?.statusPollTimer) {
+                        clearInterval(this.client.abstraction.statusPollTimer)
+                        this.client.abstraction.statusPollTimer = null
+                    }
+                } catch {}
+
+                await this.client.disconnect?.()
+
+                // Serial-Port schließen
+                const port = (this.client as any).port
+                if (port) {
+                    try {
+                        if (port.readable) port.readable.cancel?.()
+                        if (port.writable) await port.writable.abort?.()
+                        await port.close?.()
+
+                        if (forget && navigator.serial?.forgetPort) {
+                            await navigator.serial.forgetPort(port)
+                        }
+                    } catch (err) {
+                        this.logger("Error closing port:", err)
+                    }
+                }
+
+                // BLE GATT
+                if (
+                    this.client instanceof NiimbotBluetoothClient &&
+                    this.client.device?.gatt?.connected
+                ) {
+                    try {
+                        this.client.device.gatt.disconnect()
+                    } catch {}
+                }
+
+                this.connected = false
+                this.client = null
+                toast.add({ title: "Drucker getrennt" })
+            } catch (err) {
+                console.error("[Printer] Disconnect error", err)
+                toast.add({ title: "Fehler beim Trennen", color: "red" })
+            }
+        },
+
+        /** Hilfsfunktion: EncodedImage reparieren */
+        reviveEncodedImage(encoded: any) {
+            if (!encoded?.rowsData) return encoded
+            for (const row of encoded.rowsData) {
+                if (row.rowData && !(row.rowData instanceof Uint8Array)) {
+                    row.rowData = new Uint8Array(Object.values(row.rowData))
+                }
+            }
+            return encoded
+        },
+
+        /** --- Drucken --- */
+        async print(encoded: any, options?: { density?: number; pages?: number }) {
+            const toast = useToast()
+
+            if (!this.client) throw new Error("Kein Drucker verbunden")
+
+            const fixed = this.reviveEncodedImage(encoded)
+            const taskName = this.client.getPrintTaskType() ?? "B1"
+
+            const task = this.client.abstraction.newPrintTask(taskName, {
+                totalPages: options?.pages ?? 1,
+                statusPollIntervalMs: 100,
+                statusTimeoutMs: 8000,
+                density: options?.density ?? 5
+            })
+
+            try {
+                this.printProgress = 0
+                await task.printInit()
+                await task.printPage(fixed, options?.pages ?? 1)
+                await task.waitForFinished()
+                toast.add({ title: "Druck abgeschlossen" })
+            } catch (e) {
+                console.error("[Printer] print error", e)
+                toast.add({ title: "Druckfehler", color: "red" })
+            } finally {
+                await task.printEnd()
+            }
+        }
+    }
+})