Added Frontend

frontend/pages/createDocument/index.vue

@@ -0,0 +1,355 @@
+<template>
+  <UDashboardNavbar :badge="filteredRows.length" title="Ausgangsbelege">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          autocomplete="off"
+          class="hidden lg:block"
+          icon="i-heroicons-funnel"
+          placeholder="Suche..."
+          @change="tempStore.modifySearchString('createddocuments',searchString)"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/"/>
+        </template>
+      </UInput>
+      <UButton
+          v-if="searchString.length > 0"
+          color="rose"
+          icon="i-heroicons-x-mark"
+          variant="outline"
+          @click="clearSearchString()"
+      />
+      <UButton
+          @click="router.push(`/createDocument/edit`)"
+      >
+        + Ausgangsbeleg
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+
+
+    <template #right>
+<!--      <USelectMenu
+          v-model="selectedColumns"
+          :options="templateColumns"
+          by="key"
+          class="hidden lg:block"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          multiple
+          @change="tempStore.modifyColumns('createddocuments',selectedColumns)"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>-->
+      <USelectMenu
+          v-if="selectableFilters.length > 0"
+          v-model="selectedFilters"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
+          :options="selectableFilters"
+          :ui-menu="{ width: 'min-w-max' }"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          multiple
+      >
+        <template #label>
+          Filter
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+  <UTabs :items="selectedTypes" class="m-3">
+    <template #default="{item}">
+      {{ item.label }}
+      <UBadge
+          class="ml-2"
+          variant="outline"
+      >
+        {{ getRowsForTab(item.key).length }}
+      </UBadge>
+    </template>
+    <template #item="{item}">
+      <div style="height: 80vh; overflow-y: scroll">
+        <UTable
+            :columns="getColumnsForTab(item.key)"
+            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+            :rows="getRowsForTab(item.key)"
+            :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+            class="w-full"
+            @select="selectItem"
+        >
+          <template #type-data="{row}">
+            <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' && !items.find(i => i.createddocument && i.createddocument.id === row.id)"
+                class="text-primary-500"
+            >
+              {{ 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>
+          </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]" 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
+                 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)">
+              <span v-if="useSum().getIsPaid(row,items)" class="text-primary-500">Bezahlt</span>
+              <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>
+          </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>
+          </template>
+        </UTable>
+      </div>
+    </template>
+  </UTabs>
+</template>
+
+<script setup>
+import dayjs from "dayjs";
+
+defineShortcuts({
+  '/': () => {
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push('/createDocument/edit')
+  },
+  '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) {
+      selectedItem.value += 1
+    } else {
+      selectedItem.value = 0
+    }
+  },
+  'arrowup': () => {
+    if (selectedItem.value === 0) {
+      selectedItem.value = filteredRows.value.length - 1
+    } else {
+      selectedItem.value -= 1
+    }
+  }
+})
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+const router = useRouter()
+
+const type = "createddocuments"
+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))
+}
+
+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"}
+]
+
+// 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"
+  }, {
+    key: "deliveryNotes",
+    label: "Lieferscheine"
+  }, {
+    key: "confirmationOrders",
+    label: "Auftragsbestätigungen"
+  }
+]
+const selectedTypes = ref(tempStore.filters["createddocuments"] ? tempStore.filters["createddocuments"] : templateTypes)
+const types = computed(() => {
+  return templateTypes.filter((type) => selectedTypes.value.find(i => i.key === type.key))
+})
+
+const selectItem = (item) => {
+  console.log(item)
+  if (item.state === "Entwurf") {
+    router.push(`/createDocument/edit/${item.id}`)
+  } else if (item.state !== "Entwurf") {
+    router.push(`/createDocument/show/${item.id}`)
+  }
+}
+
+const displayCurrency = (value, currency = "€") => {
+  return `${Number(value).toFixed(2).replace(".", ",")} ${currency}`
+}
+
+const searchString = ref(tempStore.searchStrings['createddocuments'] || '')
+
+const clearSearchString = () => {
+  tempStore.clearSearchString('createddocuments')
+  searchString.value = ''
+}
+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
+  }))
+
+  tempItems = tempItems.filter(i => i.type !== "serialInvoices")
+
+  tempItems = tempItems.map(i => {
+    return {
+      ...i,
+      class: i.archived ? 'bg-red-500/50 dark:bg-red-400/50' : null
+    }
+  })
+
+  if (selectedFilters.value.length > 0) {
+    selectedFilters.value.forEach(filterName => {
+      let filter = dataType.filters.find(i => i.name === filterName)
+      tempItems = tempItems.filter(filter.filterFunction)
+    })
+  }
+
+  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>

frontend/pages/createDocument/serialInvoice.vue

@@ -0,0 +1,560 @@
+<template>
+  <UDashboardNavbar title="Serienrechnungen" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <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`)"
+      >
+        + Serienrechnung
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedFilters"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="filterOptions"
+          option-attribute="name"
+          value-attribute="name"
+          multiple
+          class="hidden lg:block"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
+          :ui-menu="{ width: 'min-w-max' }"
+      >
+        <template #label>
+          Filter
+        </template>
+      </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"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @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>
+    <template #partner-data="{row}">
+      <span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
+
+    </template>
+    <template #amount-data="{row}">
+      {{displayCurrency(calculateDocSum(row))}}
+    </template>
+    <template #serialConfig.active-data="{row}">
+      <span v-if="row.serialConfig.active" class="text-primary">Ja</span>
+      <span v-else class="text-rose-600">Nein</span>
+    </template>
+    <template #contract-data="{row}">
+      <span v-if="row.contract">{{row.contract.contractNumber}} - {{row.contract.name}}</span>
+    </template>
+    <template #serialConfig.intervall-data="{row}">
+      <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,
+      class: i.archived ? 'bg-red-500/50 dark:bg-red-400/50' : null
+    }
+  })
+
+  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())
+})
+
+// Basis Liste für das Modal (nur Aktive)
+const activeTemplates = computed(() => {
+  return items.value
+      .filter(i => i.type === "serialInvoices" && !!i.serialConfig?.active)
+      .map(i => ({...i}))
+})
+
+// NEU: Gefilterte Liste für das Modal basierend auf der Suche
+const filteredExecutionList = computed(() => {
+  if (!modalSearch.value) return activeTemplates.value
+
+  const term = modalSearch.value.toLowerCase()
+
+  return activeTemplates.value.filter(row => {
+    const customerName = row.customer?.name?.toLowerCase() || ""
+    const contractNum = row.contract?.contractNumber?.toLowerCase() || ""
+    const contractName = row.contract?.name?.toLowerCase() || ""
+
+    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)))
+
+const filterOptions = ref([
+  {
+    name: "Archivierte ausblenden",
+    default: true,
+    "filterFunction": function (row) {
+      return !row.archived;
+    }
+  }, {
+    name: "Inaktive ausblenden",
+    "filterFunction": function (row) {
+      return !!row.serialConfig.active;
+    }
+  }
+])
+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>

frontend/pages/createDocument/show/[id].vue

@@ -0,0 +1,153 @@
+<script setup>
+import CopyCreatedDocumentModal from "~/components/copyCreatedDocumentModal.vue";
+
+
+
+defineShortcuts({
+  'backspace': () => {
+    router.push("/createDocument")
+  },
+})
+
+const modal = useModal()
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+const dataStore = useDataStore()
+
+const itemInfo = ref({})
+const linkedDocument =ref({})
+const setupPage = async () => {
+  if(route.params) {
+    if(route.params.id) itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id,"*,files(*),linkedDocument(*), statementallocations(bs_id)")
+
+    console.log(itemInfo.value)
+
+    linkedDocument.value = await useFiles().selectDocument(itemInfo.value.files[0].id)
+  }
+}
+
+setupPage()
+
+const openEmail = () => {
+  if(["invoices","advanceInvoices"].includes(itemInfo.value.type)){
+    router.push(`/email/new?loadDocuments=["${linkedDocument.value.id}"]&bcc=${encodeURIComponent(auth.activeTenantData.standardEmailForInvoices || "")}`)
+  } else {
+    router.push(`/email/new?loadDocuments=["${linkedDocument.value.id}"]`)
+  }
+}
+
+const openBankstatements = () => {
+  if(itemInfo.value.statementallocations.length > 1) {
+    navigateTo(`/banking/?filter=${JSON.stringify(itemInfo.value.statementallocations.map(i => i.bankstatement))}`)
+  } else {
+    navigateTo(`/banking/statements/edit/${itemInfo.value.statementallocations[0].bankstatement}`)
+  }
+}
+</script>
+
+<template>
+  <UDashboardNavbar
+      title="Erstelltes Dokument anzeigen"
+  >
+
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #left>
+      <UButton
+          @click="router.push(`/createDocument/edit/${itemInfo.id}`)"
+          v-if="itemInfo.state === 'Entwurf'"
+      >
+        Bearbeiten
+      </UButton>
+      <!--      <UButton
+                :to="dataStore.documents.find(i => i.createdDocument === itemInfo.id) ? dataStore.documents.find(i => i.createdDocument === itemInfo.id).url : ''"
+                target="_blank"
+            >In neuen Tab anzeigen</UButton>-->
+      <UButton
+          icon="i-heroicons-arrow-right-end-on-rectangle"
+          @click="modal.open(CopyCreatedDocumentModal, {
+              id: itemInfo.id,
+              type: itemInfo.type
+          })"
+          variant="outline"
+      >
+        Kopieren
+      </UButton>
+      <UButton
+          @click="openEmail"
+          icon="i-heroicons-envelope"
+      >
+        E-Mail
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?linkedDocument=${itemInfo.id}&loadMode=storno`)"
+          variant="outline"
+          color="rose"
+          v-if="itemInfo.type === 'invoices' || itemInfo.type === 'advanceInvoices'"
+      >
+        Stornieren
+      </UButton>
+      <UButton
+          v-if="itemInfo.project"
+          @click="router.push(`/standardEntity/projects/show/${itemInfo.project}`)"
+          icon="i-heroicons-link"
+          variant="outline"
+      >
+        Projekt
+      </UButton>
+      <UButton
+          v-if="itemInfo.customer"
+          @click="router.push(`/standardEntity/customers/show/${itemInfo.customer}`)"
+          icon="i-heroicons-link"
+          variant="outline"
+      >
+        Kunde
+      </UButton>
+      <UButton
+          v-if="itemInfo.createddocument"
+          @click="router.push(`/createDocument/show/${itemInfo.createddocument}`)"
+          icon="i-heroicons-link"
+          variant="outline"
+      >
+        {{dataStore.documentTypesForCreation[itemInfo.createddocument.type].labelSingle}} - {{itemInfo.createddocument.documentNumber}}
+      </UButton>
+      <UButton
+          v-for="item in itemInfo.createddocuments"
+          v-if="itemInfo.createddocuments"
+          @click="router.push(`/createDocument/show/${item.id}`)"
+          icon="i-heroicons-link"
+          variant="outline"
+      >
+        {{dataStore.documentTypesForCreation[item.type].labelSingle}} - {{item.documentNumber}}
+      </UButton>
+      <UButton
+          v-if="itemInfo.statementallocations?.length > 0"
+          @click="openBankstatements"
+          icon="i-heroicons-link"
+          variant="outline"
+      >
+        Bankbuchungen
+      </UButton>
+
+    </template>
+  </UDashboardToolbar>
+  <UDashboardPanelContent>
+<!--    <object
+        :data="linkedDocument.url"
+        class="w-full previewDocumentMobile"
+    />-->
+    <PDFViewer v-if="linkedDocument.id" :file-id="linkedDocument.id" location="show_create_document" />
+
+
+
+
+  </UDashboardPanelContent>
+</template>
+
+<style scoped>
+.previewDocumentMobile {
+  aspect-ratio: 1 / 1.414;
+
+}
+</style>