From 9f665fc3b8c9c44e9a25ed5c9144ee5e7a3f09fe Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Sun, 22 Mar 2026 13:53:29 +0100
Subject: [PATCH] 3. Zwischenstand

---
 frontend/app.vue                              |   3 +-
 frontend/components/EntityModalButtons.vue    |  14 +-
 .../EntityShowSubCreatedDocuments.vue         |   7 +-
 .../EntityShowSubOwnAccountsStatements.vue    | 313 +++++++---
 frontend/components/EntityShowSubTimes.vue    |   7 +-
 frontend/components/LabelPrinterButton.vue    |   2 +-
 frontend/components/MainNav.vue               |   5 +
 frontend/components/UCalendar.vue             | 166 +++++
 frontend/components/UDashboardNavbar.vue      |  94 +++
 frontend/components/UserDropdown.vue          |  10 +-
 frontend/components/costcentreDisplay.vue     | 199 +++++-
 frontend/components/materialComposing.vue     |  57 +-
 frontend/components/personalComposing.vue     |  66 +-
 frontend/layouts/default.vue                  |   8 +-
 frontend/pages/accounting/bwa.vue             | 545 +++++++++++++++++
 frontend/pages/accounts/index.vue             |   2 +-
 frontend/pages/accounts/show/[id].vue         |  87 +--
 frontend/pages/createDocument/edit/[[id]].vue | 566 +++++++++++-------
 .../pages/createDocument/serialInvoice.vue    |   2 +-
 .../pages/incomingInvoices/[mode]/[id].vue    | 156 +++--
 frontend/pages/incomingInvoices/index.vue     |  12 +-
 frontend/pages/login.vue                      | 113 ++--
 frontend/pages/password-change.vue            |  77 ++-
 frontend/pages/password-reset.vue             |  60 +-
 frontend/pages/settings/tenant.vue            |   2 +
 .../pages/standardEntity/[type]/index.vue     |  47 +-
 26 files changed, 2037 insertions(+), 583 deletions(-)
 create mode 100644 frontend/components/UCalendar.vue
 create mode 100644 frontend/components/UDashboardNavbar.vue
 create mode 100644 frontend/pages/accounting/bwa.vue

diff --git a/frontend/app.vue b/frontend/app.vue
index 2a84181..4a28cd3 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -1,5 +1,6 @@
 <script setup>
 import * as Sentry from "@sentry/browser"
+import { de as germanLocale } from "@nuxt/ui/locale"
 
 
 
@@ -47,7 +48,7 @@ useSeoMeta({
 </script>
 
 <template>
-  <UApp>
+  <UApp :locale="germanLocale">
     <div class="safearea">
       <NuxtLayout>
         <NuxtPage/>
diff --git a/frontend/components/EntityModalButtons.vue b/frontend/components/EntityModalButtons.vue
index b754b05..726cd04 100644
--- a/frontend/components/EntityModalButtons.vue
+++ b/frontend/components/EntityModalButtons.vue
@@ -39,7 +39,9 @@ const modal = useModal()
 <template>
   <UButton
       variant="outline"
-      class="w-25 ml-2"
+      size="sm"
+      square
+      class="ml-2 shrink-0"
       v-if="props.id && props.buttonShow"
       icon="i-heroicons-eye"
       @click="modal.open(StandardEntityModal, {
@@ -50,7 +52,9 @@ const modal = useModal()
   />
   <UButton
       variant="outline"
-      class="w-25 ml-2"
+      size="sm"
+      square
+      class="ml-2 shrink-0"
       v-if="props.id && props.buttonEdit"
       icon="i-heroicons-pencil-solid"
       @click="modal.open(StandardEntityModal, {
@@ -64,7 +68,9 @@ const modal = useModal()
   />
   <UButton
       variant="outline"
-      class="w-25 ml-2"
+      size="sm"
+      square
+      class="ml-2 shrink-0"
       v-if="!props.id && props.buttonCreate"
       icon="i-heroicons-plus"
       @click="modal.open(StandardEntityModal, {
@@ -80,4 +86,4 @@ const modal = useModal()
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/components/EntityShowSubCreatedDocuments.vue b/frontend/components/EntityShowSubCreatedDocuments.vue
index ff8c53d..6593399 100644
--- a/frontend/components/EntityShowSubCreatedDocuments.vue
+++ b/frontend/components/EntityShowSubCreatedDocuments.vue
@@ -255,9 +255,14 @@ const selectItem = (item) => {
         class="w-full"
         :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
         :on-select="(row) => selectItem(row.original)"
-        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
         style="height: 70vh"
     >
+      <template #empty>
+        <div class="flex flex-col items-center justify-center py-8 text-center text-sm text-muted">
+          <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 size-5" />
+          <span>Keine Belege anzuzeigen</span>
+        </div>
+      </template>
       <template #type-cell="{ row }">
         {{ dataStore.documentTypesForCreation[row.original.type].labelSingle }}
       </template>
diff --git a/frontend/components/EntityShowSubOwnAccountsStatements.vue b/frontend/components/EntityShowSubOwnAccountsStatements.vue
index 62657a9..00b4d66 100644
--- a/frontend/components/EntityShowSubOwnAccountsStatements.vue
+++ b/frontend/components/EntityShowSubOwnAccountsStatements.vue
@@ -1,7 +1,7 @@
 <script setup>
-import dayjs from "dayjs";
-const router = useRouter()
+import dayjs from "dayjs"
 
+const router = useRouter()
 
 const props = defineProps({
   queryStringData: {
@@ -21,83 +21,260 @@ const props = defineProps({
   }
 })
 
-const statementallocations = ref([])
-const incominginvoices = ref([])
+const loading = ref(true)
+const incomingInvoices = ref([])
+const statementAllocations = ref([])
+const selectedYear = ref(String(dayjs().year()))
+const selectedMonth = ref("all")
+
+const currency = (value) => `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`
+const currentAccountId = computed(() => String(props.item?.id ?? ""))
+const sameAccount = (value) => String(value ?? "") === currentAccountId.value
+const getStatementId = (allocation) => allocation?.bankstatement?.id || allocation?.bs_id?.id || allocation?.bs_id || null
+const getStatementLike = (allocation) => allocation?.bankstatement || (typeof allocation?.bs_id === "object" ? allocation.bs_id : null)
+const getAllocationDate = (allocation) => {
+  const statement = getStatementLike(allocation)
+
+  return statement?.date || statement?.valueDate || allocation?.bs_id?.date || allocation?.bs_id?.valueDate || null
+}
+const getAllocationPartner = (allocation) => {
+  const statement = getStatementLike(allocation)
+
+  return statement?.debName || statement?.credName || statement?.partner || allocation?.bs_id?.debName || allocation?.bs_id?.credName || ""
+}
+const getAllocationDescription = (allocation) => {
+  const statement = getStatementLike(allocation)
+
+  return allocation?.description || statement?.purpose || statement?.text || statement?.description || allocation?.bs_id?.purpose || allocation?.bs_id?.text || ""
+}
+const hasContent = (value) => value !== null && value !== undefined && String(value).trim() !== ""
+
+const monthItems = [
+  { label: "Ganzes Jahr", value: "all" },
+  { label: "Januar", value: "1" },
+  { label: "Februar", value: "2" },
+  { label: "Maerz", value: "3" },
+  { label: "April", value: "4" },
+  { label: "Mai", value: "5" },
+  { label: "Juni", value: "6" },
+  { label: "Juli", value: "7" },
+  { label: "August", value: "8" },
+  { label: "September", value: "9" },
+  { label: "Oktober", value: "10" },
+  { label: "November", value: "11" },
+  { label: "Dezember", value: "12" }
+]
+
+const allAllocations = computed(() => {
+  const statementRows = statementAllocations.value.map((allocation) => ({
+    ...allocation,
+    type: "statementallocation",
+    bankstatement: allocation.bankstatement || getStatementLike(allocation),
+    date: getAllocationDate(allocation),
+    partner: getAllocationPartner(allocation),
+    description: getAllocationDescription(allocation),
+    amount: Number(allocation.amount || 0)
+  }))
+
+  const incomingInvoiceRows = incomingInvoices.value.flatMap((invoice) => {
+    return (invoice.accounts || [])
+      .filter((account) => sameAccount(account.account?.id || account.account))
+      .map((account, index) => ({
+        id: `${invoice.id}-${index}`,
+        incominginvoiceid: invoice.id,
+        type: "incominginvoice",
+        amount: Number(account.amountGross || account.amountNet || 0),
+        date: invoice.date,
+        partner: invoice.vendor?.name || "",
+        description: account.description || invoice.description || "",
+        color: invoice.expense ? "red" : "green",
+        expense: invoice.expense,
+        reference: invoice.reference || "-"
+      }))
+  })
+
+  return [...statementRows, ...incomingInvoiceRows]
+})
+
+const yearItems = computed(() => {
+  const years = [...new Set(
+    allAllocations.value
+      .map((allocation) => allocation.bankstatement?.date || allocation.date)
+      .filter(Boolean)
+      .map((date) => String(dayjs(date).year()))
+  )].sort((a, b) => Number(b) - Number(a))
+
+  return years.length > 0
+    ? years.map((year) => ({ label: year, value: year }))
+    : [{ label: String(dayjs().year()), value: String(dayjs().year()) }]
+})
+
+const renderedAllocations = computed(() => {
+  return allAllocations.value.filter((allocation) => {
+    const allocationDateValue = allocation.bankstatement?.date || allocation.date
+    const allocationDate = allocationDateValue ? dayjs(allocationDateValue) : null
+
+    if (allocationDate && allocationDate.year().toString() !== selectedYear.value) {
+      return false
+    }
+
+    if (allocationDate && selectedMonth.value !== "all" && allocationDate.month() + 1 !== Number(selectedMonth.value)) {
+      return false
+    }
+
+    return true
+  })
+})
+
+const totals = computed(() => {
+  return renderedAllocations.value.reduce((acc, allocation) => {
+    const amount = Number(allocation.amount || 0)
+
+    if (allocation.incominginvoiceid) {
+      if (allocation.expense) {
+        acc.expenses += amount
+        acc.balance -= amount
+      } else {
+        acc.income += amount
+        acc.balance += amount
+      }
+    } else {
+      if (amount < 0) {
+        acc.expenses += Math.abs(amount)
+      } else {
+        acc.income += amount
+      }
+      acc.balance += amount
+    }
+
+    return acc
+  }, { income: 0, expenses: 0, balance: 0 })
+})
+
+const columns = [
+  { accessorKey: "amount", header: "Betrag" },
+  { accessorKey: "date", header: "Datum" },
+  { accessorKey: "partner", header: "Partner" },
+  { accessorKey: "description", header: "Beschreibung" }
+]
 
 const setup = async () => {
+  loading.value = true
+
+  statementAllocations.value = (await useEntities("statementallocations").select("*, bankstatement(*), createddocument(*), incominginvoice(*)"))
+    .filter((allocation) => sameAccount(allocation.account?.id || allocation.account) || sameAccount(allocation.ownaccount?.id || allocation.ownaccount))
+
+  incomingInvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)"))
+    .filter((invoice) => (invoice.accounts || []).some((account) => sameAccount(account.account?.id || account.account)))
+
+  const firstYear = yearItems.value[0]?.value
+  if (firstYear && !yearItems.value.some((item) => item.value === selectedYear.value)) {
+    selectedYear.value = firstYear
+  }
+
+  loading.value = false
 }
 
 setup()
 
-const selectAllocation = (allocation) => {
-  if(allocation.type === "statementallocation") {
-    router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
-  } else if(allocation.type === "incominginvoice") {
-    router.push(`/incominginvoices/show/${allocation.incominginvoiceid}`)
+const unwrapAllocationRow = (allocationLike) => allocationLike?.original || allocationLike
+
+const selectAllocation = (allocationLike) => {
+  const allocation = unwrapAllocationRow(allocationLike)
+
+  if (!allocation) {
+    return
+  }
+
+  const statementId = getStatementId(allocation)
+
+  if (allocation.type === "statementallocation" && statementId) {
+    router.push(`/banking/statements/edit/${statementId}`)
+  } else if (allocation.type === "incominginvoice" && allocation.incominginvoiceid) {
+    router.push(`/incomingInvoices/show/${allocation.incominginvoiceid}`)
   }
 }
-
-const renderedAllocations = computed(() => {
-
-  let tempstatementallocations = props.item.statementallocations.map(i => {
-    return {
-      ...i,
-      type: "statementallocation",
-      date: i.bs_id.date,
-      partner: i.bs_id ? (i.bs_id.debName ? i.bs_id.debName : (i.bs_id.credName ? i.bs_id.credName : '')) : ''
-    }
-  })
-
-
-  /*let incominginvoicesallocations = []
-
-  incominginvoices.value.forEach(i => {
-
-    incominginvoicesallocations.push(...i.accounts.filter(x => x.account == route.params.id).map(x => {
-      return {
-        ...x,
-        incominginvoiceid: i.id,
-        type: "incominginvoice",
-        amount: x.amountGross ? x.amountGross : x.amountNet,
-        date: i.date,
-        partner: i.vendor.name,
-        description: i.description,
-        color: i.expense ? "red" : "green"
-      }
-    }))
-  })*/
-
-  return [...tempstatementallocations/*, ... incominginvoicesallocations*/]
-})
-
-
 </script>
 
 <template>
   <UCard class="mt-5">
-    <UTable
-        v-if="props.item.statementallocations"
-        :data="renderedAllocations"
-        :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
-        :on-select="(i) => selectAllocation(i)"
-        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
-    >
-      <template #amount-cell="{row}">
-        <span class="text-right text-rose-600" v-if="row.original.amount < 0 || row.original.color === 'red'">{{useCurrency(row.original.amount)}}</span>
-        <span class="text-right text-primary-500" v-else-if="row.original.amount > 0 || row.original.color === 'green'">{{useCurrency(row.original.amount)}}</span>
-        <span v-else>{{useCurrency(row.original.amount)}}</span>
-      </template>
-      <template #date-cell="{row}">
-        {{row.original.date ? dayjs(row.original.date).format('DD.MM.YYYY') : ''}}
-      </template>
-      <template #description-cell="{row}">
-        {{row.original.description ? row.original.description : ''}}
-      </template>
-    </UTable>
+    <div class="space-y-4">
+      <div class="flex flex-col gap-3 md:flex-row md:items-end">
+        <UFormField label="Jahr" class="w-full md:w-48">
+          <USelectMenu
+              v-model="selectedYear"
+              :items="yearItems"
+              value-key="value"
+              label-key="label"
+              class="w-full"
+          />
+        </UFormField>
+
+        <UFormField label="Monat" class="w-full md:w-56">
+          <USelectMenu
+              v-model="selectedMonth"
+              :items="monthItems"
+              value-key="value"
+              label-key="label"
+              class="w-full"
+          />
+        </UFormField>
+      </div>
+
+      <div class="grid gap-3 md:grid-cols-3">
+        <UCard>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Einnahmen</div>
+          <div class="mt-1 text-xl font-semibold">{{ currency(totals.income) }}</div>
+        </UCard>
+
+        <UCard>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Ausgaben</div>
+          <div class="mt-1 text-xl font-semibold">{{ currency(totals.expenses) }}</div>
+        </UCard>
+
+        <UCard>
+          <div class="text-sm text-gray-500 dark:text-gray-400">Saldo</div>
+          <div class="mt-1 text-xl font-semibold">{{ currency(totals.balance) }}</div>
+        </UCard>
+      </div>
+
+      <div v-if="!loading" class="overflow-auto max-h-[60vh]">
+        <UTable
+            :data="renderedAllocations"
+            :columns="normalizeTableColumns(columns)"
+            :on-select="selectAllocation"
+            class="w-full"
+        >
+          <template #empty>
+            <div class="flex flex-col items-center justify-center py-10 text-center">
+              <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 h-10 w-10 text-gray-400" />
+              <p class="font-medium">Keine Buchungen im ausgewaehlten Zeitraum</p>
+            </div>
+          </template>
+
+          <template #amount-cell="{ row }">
+            <span class="text-right text-error" v-if="row.original.amount < 0 || row.original.color === 'red'">{{ useCurrency(row.original.amount) }}</span>
+            <span class="text-right text-primary-500" v-else-if="row.original.amount > 0 || row.original.color === 'green'">{{ useCurrency(row.original.amount) }}</span>
+            <span v-else>{{ useCurrency(row.original.amount) }}</span>
+          </template>
+
+          <template #date-cell="{ row }">
+            {{ row.original.bankstatement.date && dayjs(row.original.bankstatement.date).isValid() ? dayjs(row.original.bankstatement.date).format('DD.MM.YYYY') : '-' }}
+          </template>
+
+          <template #partner-cell="{ row }">
+            <div class="truncate">{{ hasContent(row.original.partner) ? row.original.partner : '-' }}</div>
+          </template>
+
+          <template #description-cell="{ row }">
+            <UTooltip :text="hasContent(row.original.description) ? row.original.description : '-'">
+              <div class="max-w-[22rem] truncate">{{ hasContent(row.original.description) ? row.original.description : '-' }}</div>
+            </UTooltip>
+          </template>
+        </UTable>
+      </div>
+
+      <UProgress v-else animation="carousel" class="w-3/4 mx-auto" />
+    </div>
   </UCard>
-
 </template>
-
-<style scoped>
-
-</style>
diff --git a/frontend/components/EntityShowSubTimes.vue b/frontend/components/EntityShowSubTimes.vue
index 112250b..f0834d2 100644
--- a/frontend/components/EntityShowSubTimes.vue
+++ b/frontend/components/EntityShowSubTimes.vue
@@ -69,8 +69,13 @@ const columns = [
         class="mt-3"
         :columns="normalizeTableColumns(columns)"
         :data="props.item.times"
-        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     >
+      <template #empty>
+        <div class="flex flex-col items-center justify-center py-8 text-center text-sm text-muted">
+          <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 size-5" />
+          <span>Noch keine Einträge</span>
+        </div>
+      </template>
       <template #state-cell="{ row }">
                 <span
                     v-if="row.original.state === 'Entwurf'"
diff --git a/frontend/components/LabelPrinterButton.vue b/frontend/components/LabelPrinterButton.vue
index d73f3d0..1569aab 100644
--- a/frontend/components/LabelPrinterButton.vue
+++ b/frontend/components/LabelPrinterButton.vue
@@ -41,7 +41,7 @@ const handleClick = async () => {
       :icon="labelPrinter.connected ? 'i-heroicons-printer' : 'i-heroicons-printer'"
       :color="labelPrinter.connected ? 'green' : ''"
       variant="soft"
-      class="w-full justify-start"
+      class="w-full justify-start rounded-lg px-2.5 py-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
       :loading="labelPrinter.connectLoading"
       @click="handleClick"
   >
diff --git a/frontend/components/MainNav.vue b/frontend/components/MainNav.vue
index 295f518..bfd5f6e 100644
--- a/frontend/components/MainNav.vue
+++ b/frontend/components/MainNav.vue
@@ -141,6 +141,11 @@ const links = computed(() => {
       to: "/accounting/tax",
       icon: "i-heroicons-calculator",
     } : null,
+    (featureEnabled("createDocument") || featureEnabled("incomingInvoices") || featureEnabled("accounts") || featureEnabled("ownaccounts")) ? {
+      label: "BWA",
+      to: "/accounting/bwa",
+      icon: "i-heroicons-chart-bar-square",
+    } : null,
     featureEnabled("costcentres") ? {
       label: "Kostenstellen",
       to: "/standardEntity/costcentres",
diff --git a/frontend/components/UCalendar.vue b/frontend/components/UCalendar.vue
new file mode 100644
index 0000000..8f0cd53
--- /dev/null
+++ b/frontend/components/UCalendar.vue
@@ -0,0 +1,166 @@
+<script>
+import theme from "#build/ui/calendar";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useForwardPropsEmits } from "reka-ui";
+import { Calendar as SingleCalendar, RangeCalendar } from "reka-ui/namespaced";
+import { reactiveOmit } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "@nuxt/ui/composables/useLocale";
+import { tv } from "@nuxt/ui/utils/tv";
+import UButton from "@nuxt/ui/components/Button.vue";
+
+const props = defineProps({
+  as: { type: null, required: false },
+  nextYearIcon: { type: String, required: false },
+  nextYear: { type: Object, required: false },
+  nextMonthIcon: { type: String, required: false },
+  nextMonth: { type: Object, required: false },
+  prevYearIcon: { type: String, required: false },
+  prevYear: { type: Object, required: false },
+  prevMonthIcon: { type: String, required: false },
+  prevMonth: { type: Object, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  range: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
+  monthControls: { type: Boolean, required: false, default: true },
+  yearControls: { type: Boolean, required: false, default: true },
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultPlaceholder: { type: null, required: false },
+  placeholder: { type: null, required: false },
+  allowNonContiguousRanges: { type: Boolean, required: false },
+  pagedNavigation: { type: Boolean, required: false },
+  preventDeselect: { type: Boolean, required: false },
+  maximumDays: { type: Number, required: false },
+  weekStartsOn: { type: Number, required: false, default: 1 },
+  weekdayFormat: { type: String, required: false },
+  fixedWeeks: { type: Boolean, required: false, default: true },
+  maxValue: { type: null, required: false },
+  minValue: { type: null, required: false },
+  numberOfMonths: { type: Number, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  initialFocus: { type: Boolean, required: false },
+  isDateDisabled: { type: Function, required: false },
+  isDateUnavailable: { type: Function, required: false },
+  isDateHighlightable: { type: Function, required: false },
+  nextPage: { type: Function, required: false },
+  prevPage: { type: Function, required: false },
+  disableDaysOutsideCurrentView: { type: Boolean, required: false },
+  fixedDate: { type: String, required: false }
+});
+
+const emits = defineEmits(["update:modelValue", "update:placeholder", "update:validModelValue", "update:startValue"]);
+
+defineSlots();
+
+const { code: locale, dir, t } = useLocale();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(
+  reactiveOmit(props, "range", "modelValue", "defaultValue", "color", "size", "monthControls", "yearControls", "class", "ui"),
+  emits
+);
+
+const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight));
+const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
+const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft));
+const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.calendar || {} })({
+  color: props.color,
+  size: props.size
+}));
+const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
+
+function paginateYear(date, sign) {
+  if (sign === -1) {
+    return date.subtract({ years: 1 });
+  }
+
+  return date.add({ years: 1 });
+}
+</script>
+
+<template>
+  <Calendar.Root
+      v-slot="{ weekDays, grid }"
+      v-bind="rootProps"
+      :model-value="modelValue"
+      :default-value="defaultValue"
+      :locale="locale"
+      :dir="dir"
+      :class="ui.root({ class: [props.ui?.root, props.class] })"
+  >
+    <Calendar.Header :class="ui.header({ class: props.ui?.header })">
+      <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
+        <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
+      </Calendar.Prev>
+      <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
+        <UButton :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
+      </Calendar.Prev>
+      <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
+        <slot name="heading" :value="headingValue">
+          {{ headingValue }}
+        </slot>
+      </Calendar.Heading>
+      <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
+        <UButton :icon="nextMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextMonth" />
+      </Calendar.Next>
+      <Calendar.Next v-if="props.yearControls" :next-page="(date) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
+        <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
+      </Calendar.Next>
+    </Calendar.Header>
+
+    <div :class="ui.body({ class: props.ui?.body })">
+      <Calendar.Grid
+          v-for="month in grid"
+          :key="month.value.toString()"
+          :class="ui.grid({ class: props.ui?.grid })"
+      >
+        <Calendar.GridHead>
+          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <Calendar.HeadCell
+                v-for="day in weekDays"
+                :key="day"
+                :class="ui.headCell({ class: props.ui?.headCell })"
+            >
+              <slot name="week-day" :day="day">
+                {{ day }}
+              </slot>
+            </Calendar.HeadCell>
+          </Calendar.GridRow>
+        </Calendar.GridHead>
+
+        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })">
+          <Calendar.GridRow
+              v-for="(weekDates, index) in month.rows"
+              :key="`weekDate-${index}`"
+              :class="ui.gridRow({ class: props.ui?.gridRow })"
+          >
+            <Calendar.Cell
+                v-for="weekDate in weekDates"
+                :key="weekDate.toString()"
+                :date="weekDate"
+                :class="ui.cell({ class: props.ui?.cell })"
+            >
+              <Calendar.CellTrigger
+                  :day="weekDate"
+                  :month="month.value"
+                  :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
+              >
+                <slot name="day" :day="weekDate">
+                  {{ weekDate.day }}
+                </slot>
+              </Calendar.CellTrigger>
+            </Calendar.Cell>
+          </Calendar.GridRow>
+        </Calendar.GridBody>
+      </Calendar.Grid>
+    </div>
+  </Calendar.Root>
+</template>
diff --git a/frontend/components/UDashboardNavbar.vue b/frontend/components/UDashboardNavbar.vue
new file mode 100644
index 0000000..9944daa
--- /dev/null
+++ b/frontend/components/UDashboardNavbar.vue
@@ -0,0 +1,94 @@
+<script setup>
+import DashboardNavbarBase from "@nuxt/ui-pro/runtime/components/DashboardNavbar.vue"
+import UBadge from "@nuxt/ui/components/Badge.vue"
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  as: {
+    type: null,
+    required: false
+  },
+  icon: {
+    type: String,
+    required: false
+  },
+  title: {
+    type: String,
+    required: false
+  },
+  toggle: {
+    type: [Boolean, Object],
+    required: false,
+    default: true
+  },
+  toggleSide: {
+    type: String,
+    required: false,
+    default: "left"
+  },
+  badge: {
+    type: [String, Number],
+    required: false
+  },
+  class: {
+    type: null,
+    required: false
+  },
+  ui: {
+    type: null,
+    required: false
+  }
+})
+</script>
+
+<template>
+  <DashboardNavbarBase
+      :as="as"
+      :icon="icon"
+      :title="title"
+      :toggle="toggle"
+      :toggle-side="toggleSide"
+      :class="props.class"
+      :ui="ui"
+      v-bind="$attrs"
+  >
+    <template v-if="$slots.toggle" #toggle="slotProps">
+      <slot name="toggle" v-bind="slotProps" />
+    </template>
+
+    <template v-if="$slots.left" #left="slotProps">
+      <slot name="left" v-bind="slotProps" />
+    </template>
+
+    <template v-if="$slots.leading" #leading="slotProps">
+      <slot name="leading" v-bind="slotProps" />
+    </template>
+
+    <template #title>
+      <slot name="title">
+        <span class="inline-flex min-w-0 items-center gap-2">
+          <span class="truncate">{{ title }}</span>
+          <UBadge
+              v-if="badge !== undefined && badge !== null && badge !== ''"
+              size="sm"
+              color="neutral"
+              variant="subtle"
+          >
+            {{ badge }}
+          </UBadge>
+        </span>
+      </slot>
+    </template>
+
+    <template v-if="$slots.trailing" #trailing="slotProps">
+      <slot name="trailing" v-bind="slotProps" />
+    </template>
+
+    <slot />
+
+    <template v-if="$slots.right" #right="slotProps">
+      <slot name="right" v-bind="slotProps" />
+    </template>
+  </DashboardNavbarBase>
+</template>
diff --git a/frontend/components/UserDropdown.vue b/frontend/components/UserDropdown.vue
index c5e7aac..9472a84 100644
--- a/frontend/components/UserDropdown.vue
+++ b/frontend/components/UserDropdown.vue
@@ -28,16 +28,16 @@ const userItems = computed(() => [[
       <UButton
         color="gray"
         variant="ghost"
-        class="w-full min-w-0 justify-start gap-2 rounded-lg px-2.5 py-2 text-left"
+        class="w-full min-w-0 justify-start gap-2 rounded-lg px-2.5 py-2 text-left transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
         :class="[open && 'bg-gray-100 dark:bg-gray-800']"
       >
-        <span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
+        <div class="flex items-space gap-2">
+          <span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
           {{ auth.user.email }}
         </span>
-
-        <template #trailing>
           <UIcon name="i-heroicons-ellipsis-vertical" class="h-5 w-5 shrink-0" />
-        </template>
+        </div>
+
       </UButton>
     </template>
   </UDropdownMenu>
diff --git a/frontend/components/costcentreDisplay.vue b/frontend/components/costcentreDisplay.vue
index d3adf6d..5c8beec 100644
--- a/frontend/components/costcentreDisplay.vue
+++ b/frontend/components/costcentreDisplay.vue
@@ -1,26 +1,205 @@
 <script setup>
+import dayjs from "dayjs"
+
 const props = defineProps({
   item: {
     required: true,
-    type: String
+    type: Object
   }
 })
 
-const incomingInvoices = ref({})
+const loading = ref(true)
+const incomingInvoices = ref([])
+const selectedYear = ref(String(dayjs().year()))
+const selectedMonth = ref("all")
+
+const currency = (value) => `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`
+
+const yearItems = computed(() => {
+  const years = [...new Set(
+    incomingInvoices.value
+      .map((invoice) => invoice.date ? String(dayjs(invoice.date).year()) : null)
+      .filter(Boolean)
+  )].sort((a, b) => Number(b) - Number(a))
+
+  return years.length > 0 ? years.map((year) => ({ label: year, value: year })) : [{ label: String(dayjs().year()), value: String(dayjs().year()) }]
+})
+
+const monthItems = [
+  { label: "Ganzes Jahr", value: "all" },
+  { label: "Januar", value: "1" },
+  { label: "Februar", value: "2" },
+  { label: "Maerz", value: "3" },
+  { label: "April", value: "4" },
+  { label: "Mai", value: "5" },
+  { label: "Juni", value: "6" },
+  { label: "Juli", value: "7" },
+  { label: "August", value: "8" },
+  { label: "September", value: "9" },
+  { label: "Oktober", value: "10" },
+  { label: "November", value: "11" },
+  { label: "Dezember", value: "12" }
+]
+
+const reportRows = computed(() => {
+  return incomingInvoices.value.flatMap((invoice) => {
+    const invoiceDate = invoice.date ? dayjs(invoice.date) : null
+
+    if (invoiceDate && invoiceDate.year().toString() !== selectedYear.value) {
+      return []
+    }
+
+    if (invoiceDate && selectedMonth.value !== "all" && invoiceDate.month() + 1 !== Number(selectedMonth.value)) {
+      return []
+    }
+
+    const matchingAccounts = (invoice.accounts || []).filter((account) => account.costCentre === props.item.id)
+
+    return matchingAccounts.map((account, index) => {
+      const amountNet = Number(account.amountNet || 0)
+      const amountTax = Number(account.amountTax || 0)
+      const amountGross = Number(account.amountGross || amountNet + amountTax || 0)
+
+      return {
+        id: `${invoice.id}-${index}`,
+        invoiceId: invoice.id,
+        reference: invoice.reference || "-",
+        date: invoice.date,
+        state: invoice.state || "-",
+        vendorName: invoice.vendor?.name || "-",
+        accountLabel: account.account?.label || account.accountLabel || "-",
+        description: account.description || invoice.description || "-",
+        amountNet,
+        amountTax,
+        amountGross
+      }
+    })
+  })
+})
+
+const totals = computed(() => {
+  return reportRows.value.reduce((acc, row) => {
+    acc.net += row.amountNet
+    acc.tax += row.amountTax
+    acc.gross += row.amountGross
+    return acc
+  }, { net: 0, tax: 0, gross: 0 })
+})
+
+const columns = [
+  { accessorKey: "reference", header: "Beleg" },
+  { accessorKey: "date", header: "Datum" },
+  { accessorKey: "vendorName", header: "Lieferant" },
+  { accessorKey: "accountLabel", header: "Konto" },
+  { accessorKey: "description", header: "Beschreibung" },
+  { accessorKey: "amountNet", header: "Netto" },
+  { accessorKey: "amountTax", header: "Steuer" },
+  { accessorKey: "amountGross", header: "Brutto" }
+]
 
 const setupPage = async () => {
-  incomingInvoices.value = (await useEntities("incominginvoices").select()).filter(i => i.accounts.find(x => x.costCentre === props.item.id))
+  loading.value = true
+
+  const invoices = await useEntities("incominginvoices").select("*, vendor(id,name)")
+
+  incomingInvoices.value = invoices.filter((invoice) =>
+    (invoice.accounts || []).some((account) => account.costCentre === props.item.id)
+  )
+
+  const firstYear = yearItems.value[0]?.value
+  if (firstYear && !yearItems.value.some((item) => item.value === selectedYear.value)) {
+    selectedYear.value = firstYear
+  }
+
+  loading.value = false
 }
 
 setupPage()
-
 </script>
 
 <template>
-  {{props.item}}
-  {{incomingInvoices}}
+  <div class="space-y-4">
+    <div class="flex flex-col gap-3 md:flex-row md:items-end">
+      <UFormField label="Jahr" class="w-full md:w-48">
+        <USelectMenu
+            v-model="selectedYear"
+            :items="yearItems"
+            value-key="value"
+            label-key="label"
+            class="w-full"
+        />
+      </UFormField>
+
+      <UFormField label="Monat" class="w-full md:w-56">
+        <USelectMenu
+            v-model="selectedMonth"
+            :items="monthItems"
+            value-key="value"
+            label-key="label"
+            class="w-full"
+        />
+      </UFormField>
+    </div>
+
+    <div class="grid gap-3 md:grid-cols-3">
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Netto gesamt</div>
+        <div class="mt-1 text-xl font-semibold">{{ currency(totals.net) }}</div>
+      </UCard>
+
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Steuer gesamt</div>
+        <div class="mt-1 text-xl font-semibold">{{ currency(totals.tax) }}</div>
+      </UCard>
+
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Brutto gesamt</div>
+        <div class="mt-1 text-xl font-semibold">{{ currency(totals.gross) }}</div>
+      </UCard>
+    </div>
+
+    <UTable
+        v-if="!loading"
+        :data="reportRows"
+        :columns="columns"
+        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Eingangsbelege mit dieser Kostenstelle gefunden' }"
+        class="w-full"
+    >
+      <template #reference-cell="{ row }">
+        <div class="truncate font-medium">{{ row.original.reference }}</div>
+      </template>
+
+      <template #date-cell="{ row }">
+        <div class="truncate">{{ row.original.date ? dayjs(row.original.date).format("DD.MM.YYYY") : "-" }}</div>
+      </template>
+
+      <template #vendorName-cell="{ row }">
+        <div class="truncate">{{ row.original.vendorName }}</div>
+      </template>
+
+      <template #accountLabel-cell="{ row }">
+        <div class="truncate">{{ row.original.accountLabel }}</div>
+      </template>
+
+      <template #description-cell="{ row }">
+        <UTooltip :text="row.original.description">
+          <div class="max-w-[18rem] truncate">{{ row.original.description }}</div>
+        </UTooltip>
+      </template>
+
+      <template #amountNet-cell="{ row }">
+        <div class="text-right tabular-nums">{{ currency(row.original.amountNet) }}</div>
+      </template>
+
+      <template #amountTax-cell="{ row }">
+        <div class="text-right tabular-nums">{{ currency(row.original.amountTax) }}</div>
+      </template>
+
+      <template #amountGross-cell="{ row }">
+        <div class="text-right font-medium tabular-nums">{{ currency(row.original.amountGross) }}</div>
+      </template>
+    </UTable>
+
+    <UProgress v-else animation="carousel" class="w-3/4 mx-auto" />
+  </div>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/frontend/components/materialComposing.vue b/frontend/components/materialComposing.vue
index 46662bc..55ec12a 100644
--- a/frontend/components/materialComposing.vue
+++ b/frontend/components/materialComposing.vue
@@ -72,18 +72,26 @@ const setRowData = (row) => {
       + Artikel
     </UButton>
 
-    <table class="w-full mt-3">
-      <tr>
-        <th>Artikel</th>
-        <th>Menge</th>
-        <th>Einheit</th>
-        <th>Verkaufspreis</th>
-      </tr>
-      <tr
-          v-for="product in props.item.materialComposition"
-      >
-        <td>
+    <div class="mt-3 overflow-x-auto">
+      <table class="w-full min-w-[44rem] table-fixed">
+        <thead>
+          <tr class="border-b border-gray-200 dark:border-gray-800">
+            <th class="px-2 py-2 text-left font-medium">Artikel</th>
+            <th class="px-2 py-2 text-left font-medium">Menge</th>
+            <th class="px-2 py-2 text-left font-medium">Einheit</th>
+            <th class="px-2 py-2 text-left font-medium">Verkaufspreis</th>
+            <th class="w-12 px-2 py-2"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+              v-for="product in props.item.materialComposition"
+              :key="product.id"
+              class="border-b border-gray-100 align-top dark:border-gray-800"
+          >
+        <td class="px-2 py-2">
           <USelectMenu
+            class="w-full"
             :items="products"
             label-key="name"
             value-key="id"
@@ -91,38 +99,45 @@ const setRowData = (row) => {
             :filter-fields="['name']"
             v-model="product.product"
             :color="product.product ? 'primary' : 'error'"
-            @change="setRowData(product)"
+            @update:model-value="setRowData(product)"
           >
             <template #default>
-              {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
+              {{ products.find(i => i.id === product.product)?.name || 'Kein Artikel ausgewählt' }}
             </template>
           </USelectMenu>
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="product.quantity"
             :step="units.find(i => i.id === product.unit) ? units.find(i => i.id === product.unit).step : 1"
             @change="calculateTotalMaterialPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <USelectMenu
+            class="w-full"
             :items="units"
             label-key="name"
             value-key="id"
             v-model="product.unit"
-          ></USelectMenu>
+          >
+            <template #default>
+              {{ units.find(i => i.id === product.unit)?.name || 'Einheit wählen' }}
+            </template>
+          </USelectMenu>
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="product.price"
             step="0.01"
             @change="calculateTotalMaterialPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UButton
             icon="i-heroicons-x-mark"
             @click="removeProductFromMaterialComposition(product.id)"
@@ -130,8 +145,10 @@ const setRowData = (row) => {
             color="error"
           />
         </td>
-      </tr>
-    </table>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </UCard>
 </template>
 
diff --git a/frontend/components/personalComposing.vue b/frontend/components/personalComposing.vue
index 28398dc..fe725de 100644
--- a/frontend/components/personalComposing.vue
+++ b/frontend/components/personalComposing.vue
@@ -73,19 +73,27 @@ const setRowData = (row) => {
       + Stundensatz
     </UButton>
 
-    <table class="w-full mt-3">
-      <tr>
-        <th>Name</th>
-        <th>Menge</th>
-        <th>Einheit</th>
-        <th>Einkaufpreis</th>
-        <th>Verkaufspreis</th>
-      </tr>
-      <tr
-          v-for="row in props.item.personalComposition"
-      >
-        <td>
+    <div class="mt-3 overflow-x-auto">
+      <table class="w-full min-w-[52rem] table-fixed">
+        <thead>
+          <tr class="border-b border-gray-200 dark:border-gray-800">
+            <th class="px-2 py-2 text-left font-medium">Name</th>
+            <th class="px-2 py-2 text-left font-medium">Menge</th>
+            <th class="px-2 py-2 text-left font-medium">Einheit</th>
+            <th class="px-2 py-2 text-left font-medium">Einkaufspreis</th>
+            <th class="px-2 py-2 text-left font-medium">Verkaufspreis</th>
+            <th class="w-12 px-2 py-2"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+              v-for="row in props.item.personalComposition"
+              :key="row.id"
+              class="border-b border-gray-100 align-top dark:border-gray-800"
+          >
+        <td class="px-2 py-2">
           <USelectMenu
+            class="w-full"
             :items="hourrates"
             label-key="name"
             value-key="id"
@@ -93,47 +101,55 @@ const setRowData = (row) => {
             :filter-fields="['name']"
             v-model="row.hourrate"
             :color="row.hourrate ? 'primary' : 'error'"
-            @change="setRowData(row)"
+            @update:model-value="setRowData(row)"
           >
-<!--            <template #label>
-              {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
-            </template>-->
+            <template #default>
+              {{ hourrates.find(i => i.id === row.hourrate)?.name || 'Kein Stundensatz ausgewählt' }}
+            </template>
           </USelectMenu>
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="row.quantity"
             :step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : 1"
             @change="calculateTotalPersonalPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <USelectMenu
+            class="w-full"
             :items="units"
             disabled
             label-key="name"
             value-key="id"
             v-model="row.unit"
-          ></USelectMenu>
+          >
+            <template #default>
+              {{ units.find(i => i.id === row.unit)?.name || 'Einheit' }}
+            </template>
+          </USelectMenu>
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="row.purchasePrice"
             step="0.01"
             @change="calculateTotalPersonalPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="row.price"
             step="0.01"
             @change="calculateTotalPersonalPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UButton
             icon="i-heroicons-x-mark"
             @click="removeRowFromPersonalComposition(row.id)"
@@ -141,8 +157,10 @@ const setRowData = (row) => {
             color="error"
           />
         </td>
-      </tr>
-    </table>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </UCard>
 </template>
 
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 6281786..1f354af 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -270,7 +270,7 @@ onMounted(() => {
           </template>
 
           <template #footer="{ collapsed }">
-            <div class="flex flex-col gap-3">
+            <div class="flex flex-col gap-3 w-full">
               <div class="flex items-center gap-2">
                 <UColorModeSwitch :class="[collapsed ? 'mx-auto' : 'ml-3']"/>
                 <UDashboardSidebarCollapse v-if="collapsed" class="mx-auto" />
@@ -284,7 +284,7 @@ onMounted(() => {
                     :key="item.label"
                     color="gray"
                     variant="ghost"
-                    class="w-full"
+                    class="w-full min-w-0 justify-start rounded-lg px-2.5 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-800"
                     :icon="item.icon"
                     @click="item.click ? item.click() : null"
                 >
@@ -305,10 +305,10 @@ onMounted(() => {
         </UDashboardSidebar>
 
 
-        <div class="flex min-w-0 flex-1 flex-col overflow-hidden">
+        <UDashboardPanel class="flex min-w-0 flex-1 flex-col overflow-hidden">
           <slot/>
 
-        </div>
+        </UDashboardPanel>
       </UDashboardGroup>
 
       <HelpSlideover/>
diff --git a/frontend/pages/accounting/bwa.vue b/frontend/pages/accounting/bwa.vue
new file mode 100644
index 0000000..e5637d4
--- /dev/null
+++ b/frontend/pages/accounting/bwa.vue
@@ -0,0 +1,545 @@
+<script setup lang="ts">
+import dayjs from "dayjs"
+import {
+  getCreatedDocumentTaxBreakdown,
+  getIncomingInvoiceTaxBreakdown
+} from "~/composables/useTaxEvaluation"
+
+const router = useRouter()
+
+const loading = ref(true)
+const createdDocuments = ref<any[]>([])
+const incomingInvoices = ref<any[]>([])
+const accounts = ref<any[]>([])
+const ownAccounts = ref<any[]>([])
+const statementAllocations = ref<any[]>([])
+
+const selectedYear = ref(String(dayjs().year()))
+const selectedMonth = ref("all")
+
+const monthItems = [
+  { label: "Ganzes Jahr", value: "all" },
+  { label: "Januar", value: "1" },
+  { label: "Februar", value: "2" },
+  { label: "Maerz", value: "3" },
+  { label: "April", value: "4" },
+  { label: "Mai", value: "5" },
+  { label: "Juni", value: "6" },
+  { label: "Juli", value: "7" },
+  { label: "August", value: "8" },
+  { label: "September", value: "9" },
+  { label: "Oktober", value: "10" },
+  { label: "November", value: "11" },
+  { label: "Dezember", value: "12" }
+]
+
+const accountColumns = [
+  { accessorKey: "number", header: "Nummer" },
+  { accessorKey: "label", header: "Konto" },
+  { accessorKey: "bookings", header: "Buchungen" },
+  { accessorKey: "net", header: "Netto" },
+  { accessorKey: "tax", header: "Steuer" },
+  { accessorKey: "gross", header: "Brutto" }
+]
+
+const ownAccountColumns = [
+  { accessorKey: "number", header: "Nummer" },
+  { accessorKey: "label", header: "Konto" },
+  { accessorKey: "bookings", header: "Buchungen" },
+  { accessorKey: "income", header: "Einnahmen" },
+  { accessorKey: "expenses", header: "Ausgaben" },
+  { accessorKey: "balance", header: "Saldo" }
+]
+
+const isRelevantOutputDocument = (doc: any) => {
+  return doc?.state === "Gebucht" && ["invoices", "advanceInvoices", "cancellationInvoices"].includes(doc?.type)
+}
+
+const isRelevantInputInvoice = (invoice: any) => {
+  return invoice?.state === "Gebucht" && !!invoice?.date
+}
+
+const sameId = (left: any, right: any) => String(left ?? "") === String(right ?? "")
+
+const getStatementDate = (allocation: any) => {
+  return allocation?.bankstatement?.date || allocation?.bankstatement?.valueDate || allocation?.date || allocation?.created_at || null
+}
+
+const matchesSelectedPeriod = (dateValue: any) => {
+  const parsed = dayjs(dateValue)
+
+  if (!parsed.isValid()) {
+    return false
+  }
+
+  if (String(parsed.year()) !== selectedYear.value) {
+    return false
+  }
+
+  if (selectedMonth.value !== "all" && parsed.month() + 1 !== Number(selectedMonth.value)) {
+    return false
+  }
+
+  return true
+}
+
+const computeDocumentNet = (doc: any) => {
+  return Number((doc?.rows || []).reduce((sum: number, row: any) => {
+    if (!row || ["pagebreak", "title", "text"].includes(row.mode)) {
+      return sum
+    }
+
+    const quantity = Number(row.quantity || 0)
+    const price = Number(row.price || 0)
+    const discountPercent = Number(row.discountPercent || 0)
+
+    return sum + (quantity * price * (1 - discountPercent / 100))
+  }, 0).toFixed(2))
+}
+
+const computeIncomingInvoiceGross = (invoice: any) => {
+  return Number((invoice?.accounts || []).reduce((sum: number, account: any) => {
+    const amountNet = Number(account?.amountNet || 0)
+    const amountTax = Number(account?.amountTax || 0)
+    const amountGross = Number(account?.amountGross)
+
+    return sum + (Number.isFinite(amountGross) ? amountGross : amountNet + amountTax)
+  }, 0).toFixed(2))
+}
+
+const yearItems = computed(() => {
+  const years = new Set<string>([String(dayjs().year())])
+
+  createdDocuments.value.forEach((doc) => {
+    const parsed = dayjs(doc.documentDate)
+    if (parsed.isValid()) {
+      years.add(String(parsed.year()))
+    }
+  })
+
+  incomingInvoices.value.forEach((invoice) => {
+    const parsed = dayjs(invoice.date)
+    if (parsed.isValid()) {
+      years.add(String(parsed.year()))
+    }
+  })
+
+  statementAllocations.value.forEach((allocation) => {
+    const parsed = dayjs(getStatementDate(allocation))
+    if (parsed.isValid()) {
+      years.add(String(parsed.year()))
+    }
+  })
+
+  return Array.from(years)
+    .sort((a, b) => Number(b) - Number(a))
+    .map((year) => ({ label: year, value: year }))
+})
+
+const filteredDocuments = computed(() => {
+  return createdDocuments.value.filter((doc) => matchesSelectedPeriod(doc.documentDate))
+})
+
+const filteredIncomingInvoices = computed(() => {
+  return incomingInvoices.value.filter((invoice) => matchesSelectedPeriod(invoice.date))
+})
+
+const filteredStatementAllocations = computed(() => {
+  return statementAllocations.value.filter((allocation) => matchesSelectedPeriod(getStatementDate(allocation)))
+})
+
+const incomeTotal = computed(() => {
+  return Number(filteredDocuments.value.reduce((sum, doc) => sum + computeDocumentNet(doc), 0).toFixed(2))
+})
+
+const expenseNetTotal = computed(() => {
+  return Number(filteredIncomingInvoices.value.reduce((sum, invoice) => {
+    return sum + (invoice.accounts || []).reduce((accountSum: number, account: any) => accountSum + Number(account.amountNet || 0), 0)
+  }, 0).toFixed(2))
+})
+
+const expenseGrossTotal = computed(() => {
+  return Number(filteredIncomingInvoices.value.reduce((sum, invoice) => sum + computeIncomingInvoiceGross(invoice), 0).toFixed(2))
+})
+
+const taxSummary = computed(() => {
+  const output = filteredDocuments.value.reduce((sum, doc) => {
+    const breakdown = getCreatedDocumentTaxBreakdown(doc)
+    return {
+      net19: sum.net19 + breakdown.net19,
+      tax19: sum.tax19 + breakdown.tax19,
+      net7: sum.net7 + breakdown.net7,
+      tax7: sum.tax7 + breakdown.tax7,
+      net0: sum.net0 + breakdown.net0
+    }
+  }, { net19: 0, tax19: 0, net7: 0, tax7: 0, net0: 0 })
+
+  const input = filteredIncomingInvoices.value.reduce((sum, invoice) => {
+    const breakdown = getIncomingInvoiceTaxBreakdown(invoice)
+    return {
+      net19: sum.net19 + breakdown.net19,
+      tax19: sum.tax19 + breakdown.tax19,
+      net7: sum.net7 + breakdown.net7,
+      tax7: sum.tax7 + breakdown.tax7,
+      net0: sum.net0 + breakdown.net0
+    }
+  }, { net19: 0, tax19: 0, net7: 0, tax7: 0, net0: 0 })
+
+  const outputTax = Number((output.tax19 + output.tax7).toFixed(2))
+  const inputTax = Number((input.tax19 + input.tax7).toFixed(2))
+
+  return {
+    output,
+    input,
+    outputTax,
+    inputTax,
+    balance: Number((outputTax - inputTax).toFixed(2))
+  }
+})
+
+const operatingResult = computed(() => {
+  return Number((incomeTotal.value - expenseNetTotal.value).toFixed(2))
+})
+
+const accountRows = computed(() => {
+  return accounts.value
+    .map((account) => {
+      const bookings = filteredIncomingInvoices.value.flatMap((invoice) => {
+        return (invoice.accounts || [])
+          .filter((invoiceAccount: any) => sameId(invoiceAccount.account?.id || invoiceAccount.account, account.id))
+      })
+
+      if (bookings.length === 0) {
+        return null
+      }
+
+      const net = bookings.reduce((sum, booking: any) => sum + Number(booking.amountNet || 0), 0)
+      const tax = bookings.reduce((sum, booking: any) => sum + Number(booking.amountTax || 0), 0)
+      const gross = bookings.reduce((sum, booking: any) => {
+        const amountGross = Number(booking.amountGross)
+        return sum + (Number.isFinite(amountGross) ? amountGross : Number(booking.amountNet || 0) + Number(booking.amountTax || 0))
+      }, 0)
+
+      return {
+        id: account.id,
+        number: account.number || "-",
+        label: account.label || account.name || "-",
+        bookings: bookings.length,
+        net: Number(net.toFixed(2)),
+        tax: Number(tax.toFixed(2)),
+        gross: Number(gross.toFixed(2))
+      }
+    })
+    .filter(Boolean)
+    .sort((left: any, right: any) => Number(right.gross) - Number(left.gross))
+})
+
+const ownAccountRows = computed(() => {
+  return ownAccounts.value
+    .map((account) => {
+      const bookings = filteredStatementAllocations.value.filter((allocation) => sameId(allocation.ownaccount?.id || allocation.ownaccount, account.id))
+
+      if (bookings.length === 0) {
+        return null
+      }
+
+      const income = bookings.reduce((sum, booking) => {
+        const amount = Number(booking.amount || 0)
+        return amount > 0 ? sum + amount : sum
+      }, 0)
+
+      const expenses = bookings.reduce((sum, booking) => {
+        const amount = Number(booking.amount || 0)
+        return amount < 0 ? sum + Math.abs(amount) : sum
+      }, 0)
+
+      const balance = bookings.reduce((sum, booking) => sum + Number(booking.amount || 0), 0)
+
+      return {
+        id: account.id,
+        number: account.number || "-",
+        label: account.name || account.label || "-",
+        bookings: bookings.length,
+        income: Number(income.toFixed(2)),
+        expenses: Number(expenses.toFixed(2)),
+        balance: Number(balance.toFixed(2))
+      }
+    })
+    .filter(Boolean)
+    .sort((left: any, right: any) => Math.abs(Number(right.balance)) - Math.abs(Number(left.balance)))
+})
+
+const setupPage = async () => {
+  loading.value = true
+
+  try {
+    const [docs, invoices, accountItems, ownAccountItems, allocationItems] = await Promise.all([
+      useEntities("createddocuments").select(),
+      useEntities("incominginvoices").select("*, vendor(*)"),
+      useEntities("accounts").selectSpecial(),
+      useEntities("ownaccounts").select(),
+      useEntities("statementallocations").select("*, bankstatement(*), createddocument(*), incominginvoice(*)")
+    ])
+
+    createdDocuments.value = (docs || []).filter(isRelevantOutputDocument)
+    incomingInvoices.value = (invoices || []).filter(isRelevantInputInvoice)
+    accounts.value = accountItems || []
+    ownAccounts.value = ownAccountItems || []
+    statementAllocations.value = allocationItems || []
+
+    const firstYear = yearItems.value[0]?.value
+    if (firstYear && !yearItems.value.some((item) => item.value === selectedYear.value)) {
+      selectedYear.value = firstYear
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+const openAccount = (rowLike: any) => {
+  const row = rowLike?.original || rowLike
+  if (row?.id) {
+    router.push(`/accounts/show/${row.id}`)
+  }
+}
+
+const openOwnAccount = (rowLike: any) => {
+  const row = rowLike?.original || rowLike
+  if (row?.id) {
+    router.push(`/standardEntity/ownaccounts/show/${row.id}`)
+  }
+}
+
+onMounted(setupPage)
+</script>
+
+<template>
+  <UDashboardNavbar title="BWA">
+    <template #right>
+      <UButton
+          icon="i-heroicons-arrow-path"
+          variant="outline"
+          :loading="loading"
+          @click="setupPage"
+      >
+        Aktualisieren
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardPanelContent class="min-w-0 space-y-6 overflow-x-hidden overflow-y-auto p-4 md:p-6">
+    <div class="flex flex-col gap-3 md:flex-row md:items-end">
+      <UFormField label="Jahr" class="w-full md:w-48">
+        <USelectMenu
+            v-model="selectedYear"
+            :items="yearItems"
+            value-key="value"
+            label-key="label"
+            class="w-full"
+        />
+      </UFormField>
+
+      <UFormField label="Monat" class="w-full md:w-56">
+        <USelectMenu
+            v-model="selectedMonth"
+            :items="monthItems"
+            value-key="value"
+            label-key="label"
+            class="w-full"
+        />
+      </UFormField>
+    </div>
+
+    <div class="grid min-w-0 gap-4 md:grid-cols-2 xl:grid-cols-4">
+      <UCard class="min-w-0">
+        <div class="text-sm text-gray-500 dark:text-gray-400">Einnahmen netto</div>
+        <div class="mt-2 text-2xl font-semibold">{{ useCurrency(incomeTotal) }}</div>
+        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+          {{ filteredDocuments.length }} gebuchte Ausgangsbelege
+        </div>
+      </UCard>
+
+      <UCard class="min-w-0">
+        <div class="text-sm text-gray-500 dark:text-gray-400">Ausgaben netto</div>
+        <div class="mt-2 text-2xl font-semibold">{{ useCurrency(expenseNetTotal) }}</div>
+        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+          Brutto: {{ useCurrency(expenseGrossTotal) }}
+        </div>
+      </UCard>
+
+      <UCard class="min-w-0">
+        <div class="text-sm text-gray-500 dark:text-gray-400">Betriebsergebnis</div>
+        <div class="mt-2 text-2xl font-semibold" :class="operatingResult >= 0 ? 'text-primary-500' : 'text-error'">
+          {{ useCurrency(operatingResult) }}
+        </div>
+        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+          Einnahmen minus Ausgaben netto
+        </div>
+      </UCard>
+
+      <UCard class="min-w-0">
+        <div class="text-sm text-gray-500 dark:text-gray-400">USt-Saldo</div>
+        <div class="mt-2 text-2xl font-semibold" :class="taxSummary.balance >= 0 ? 'text-amber-600 dark:text-amber-400' : 'text-primary-500'">
+          {{ useCurrency(taxSummary.balance) }}
+        </div>
+        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+          USt {{ useCurrency(taxSummary.outputTax) }} | Vorsteuer {{ useCurrency(taxSummary.inputTax) }}
+        </div>
+      </UCard>
+    </div>
+
+    <div class="grid min-w-0 gap-4 xl:grid-cols-2">
+      <UCard class="min-w-0">
+        <template #header>
+          <div class="font-semibold">USt-Details</div>
+        </template>
+
+        <div class="space-y-3 text-sm">
+          <div class="flex items-center justify-between">
+            <span>Netto 19% Ausgangsbelege</span>
+            <span>{{ useCurrency(taxSummary.output.net19) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>USt 19%</span>
+            <span>{{ useCurrency(taxSummary.output.tax19) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Netto 7% Ausgangsbelege</span>
+            <span>{{ useCurrency(taxSummary.output.net7) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>USt 7%</span>
+            <span>{{ useCurrency(taxSummary.output.tax7) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Steuerfrei</span>
+            <span>{{ useCurrency(taxSummary.output.net0 + taxSummary.input.net0) }}</span>
+          </div>
+        </div>
+      </UCard>
+
+      <UCard class="min-w-0">
+        <template #header>
+          <div class="font-semibold">Vorsteuer-Details</div>
+        </template>
+
+        <div class="space-y-3 text-sm">
+          <div class="flex items-center justify-between">
+            <span>Netto 19% Eingangsbelege</span>
+            <span>{{ useCurrency(taxSummary.input.net19) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Vorsteuer 19%</span>
+            <span>{{ useCurrency(taxSummary.input.tax19) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Netto 7% Eingangsbelege</span>
+            <span>{{ useCurrency(taxSummary.input.net7) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Vorsteuer 7%</span>
+            <span>{{ useCurrency(taxSummary.input.tax7) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Steuerfrei</span>
+            <span>{{ useCurrency(taxSummary.input.net0) }}</span>
+          </div>
+        </div>
+      </UCard>
+    </div>
+
+    <div class="grid min-w-0 gap-4 xl:grid-cols-2">
+      <UCard class="min-w-0">
+        <template #header>
+          <div class="flex items-center justify-between gap-3">
+            <span class="font-semibold">Buchungskonten</span>
+            <UBadge color="neutral" variant="soft">{{ accountRows.length }}</UBadge>
+          </div>
+        </template>
+
+        <div class="min-w-0">
+          <UTable
+              :data="accountRows"
+              :columns="normalizeTableColumns(accountColumns)"
+              :loading="loading"
+              :on-select="openAccount"
+          >
+            <template #empty>
+              <div class="flex flex-col items-center justify-center py-10 text-center">
+                <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 h-10 w-10 text-gray-400" />
+                <p class="font-medium">Keine Buchungskonten im ausgewaehlten Zeitraum</p>
+              </div>
+            </template>
+
+            <template #label-cell="{ row }">
+              <div class="truncate font-medium">{{ row.original.label }}</div>
+            </template>
+
+            <template #bookings-cell="{ row }">
+              <div class="text-right">{{ row.original.bookings }}</div>
+            </template>
+
+            <template #net-cell="{ row }">
+              <div class="text-right tabular-nums">{{ useCurrency(row.original.net) }}</div>
+            </template>
+
+            <template #tax-cell="{ row }">
+              <div class="text-right tabular-nums">{{ useCurrency(row.original.tax) }}</div>
+            </template>
+
+            <template #gross-cell="{ row }">
+              <div class="text-right font-medium tabular-nums">{{ useCurrency(row.original.gross) }}</div>
+            </template>
+          </UTable>
+        </div>
+      </UCard>
+
+      <UCard class="min-w-0">
+        <template #header>
+          <div class="flex items-center justify-between gap-3">
+            <span class="font-semibold">Eigene Buchungskonten</span>
+            <UBadge color="neutral" variant="soft">{{ ownAccountRows.length }}</UBadge>
+          </div>
+        </template>
+
+        <div class="min-w-0">
+          <UTable
+              :data="ownAccountRows"
+              :columns="normalizeTableColumns(ownAccountColumns)"
+              :loading="loading"
+              :on-select="openOwnAccount"
+          >
+            <template #empty>
+              <div class="flex flex-col items-center justify-center py-10 text-center">
+                <UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 h-10 w-10 text-gray-400" />
+                <p class="font-medium">Keine eigenen Buchungen im ausgewaehlten Zeitraum</p>
+              </div>
+            </template>
+
+            <template #label-cell="{ row }">
+              <div class="truncate font-medium">{{ row.original.label }}</div>
+            </template>
+
+            <template #bookings-cell="{ row }">
+              <div class="text-right">{{ row.original.bookings }}</div>
+            </template>
+
+            <template #income-cell="{ row }">
+              <div class="text-right text-primary-500 tabular-nums">{{ useCurrency(row.original.income) }}</div>
+            </template>
+
+            <template #expenses-cell="{ row }">
+              <div class="text-right text-error tabular-nums">{{ useCurrency(row.original.expenses) }}</div>
+            </template>
+
+            <template #balance-cell="{ row }">
+              <div class="text-right font-medium tabular-nums" :class="row.original.balance >= 0 ? 'text-primary-500' : 'text-error'">
+                {{ useCurrency(row.original.balance) }}
+              </div>
+            </template>
+          </UTable>
+        </div>
+      </UCard>
+    </div>
+  </UDashboardPanelContent>
+</template>
diff --git a/frontend/pages/accounts/index.vue b/frontend/pages/accounts/index.vue
index 52ec3ef..030297f 100644
--- a/frontend/pages/accounts/index.vue
+++ b/frontend/pages/accounts/index.vue
@@ -198,7 +198,7 @@ setupPage()
       :columns="normalizeTableColumns(columns)"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      :on-select="(i) => router.push(`/accounts/show/${i.id}`)"
+      :on-select="(row) => router.push(`/accounts/show/${row.original.id}`)"
       :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
   >
     <template #allocations-cell="{row}">
diff --git a/frontend/pages/accounts/show/[id].vue b/frontend/pages/accounts/show/[id].vue
index ea113b6..36ce142 100644
--- a/frontend/pages/accounts/show/[id].vue
+++ b/frontend/pages/accounts/show/[id].vue
@@ -1,62 +1,44 @@
 <script setup>
 
-import dayjs from "dayjs";
-
 const route = useRoute()
 const router = useRouter()
 
 const itemInfo = ref(null)
 const statementallocations = ref([])
 const incominginvoices = ref([])
+const currentAccountId = computed(() => String(route.params.id))
+const sameAccount = (value) => String(value ?? "") === currentAccountId.value
 
 const setup = async () => {
   itemInfo.value = (await useEntities("accounts").selectSpecial("*")).find(i => i.id === Number(route.params.id))
-  statementallocations.value = (await useEntities("statementallocations").select("*, bs_id(*)")).filter(i => i.account === Number(route.params.id))
-  incominginvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)")).filter(i => i.accounts.find(x => x.account === Number(route.params.id)))
+  statementallocations.value = (await useEntities("statementallocations").select("*, bankstatement(*)"))
+      .filter((allocation) => sameAccount(allocation.account?.id || allocation.account))
+  incominginvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)"))
+      .filter((invoice) => (invoice.accounts || []).some((account) => sameAccount(account.account?.id || account.account)))
 }
 
 setup()
 
-const selectAllocation = (allocation) => {
-  if(allocation.type === "statementallocation") {
-    router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
-  } else if(allocation.type === "incominginvoice") {
-    router.push(`/incominginvoices/show/${allocation.incominginvoiceid}`)
-  }
-}
-
 const renderedAllocations = computed(() => {
+  const statementRows = statementallocations.value.map((allocation) => ({
+    ...allocation,
+    type: "statementallocation",
+    amount: Number(allocation.amount || 0)
+  }))
 
-  let tempstatementallocations = statementallocations.value.map(i => {
-    return {
-      ...i,
-      type: "statementallocation",
-      date: i.bs_id.date,
-      partner: i.bs_id ? (i.bs_id.debName ? i.bs_id.debName : (i.bs_id.credName ? i.bs_id.credName : '')) : ''
-    }
+  const incomingInvoiceRows = incominginvoices.value.flatMap((invoice) => {
+    return (invoice.accounts || [])
+        .filter((account) => sameAccount(account.account?.id || account.account))
+        .map((account, index) => ({
+          id: `${invoice.id}-${index}`,
+          incominginvoiceid: invoice.id,
+          type: "incominginvoice",
+          amount: Number(account.amountGross || account.amountNet || 0),
+          expense: invoice.expense
+        }))
   })
 
-
-  let incominginvoicesallocations = []
-
-  incominginvoices.value.forEach(i => {
-
-    incominginvoicesallocations.push(...i.accounts.filter(x => x.account == route.params.id).map(x => {
-      return {
-        ...x,
-        incominginvoiceid: i.id,
-        type: "incominginvoice",
-        amount: x.amountGross ? x.amountGross : x.amountNet,
-        date: i.date,
-        partner: i.vendor.name,
-        description: i.description,
-        color: i.expense ? "red" : "green",
-        expense: i.expense
-      }
-    }))
-  })
-
-  return [...tempstatementallocations, ... incominginvoicesallocations]
+  return [...statementRows, ...incomingInvoiceRows]
 })
 
 const saldo = computed(() => {
@@ -135,25 +117,12 @@ const saldo = computed(() => {
           </div>
         </UCard>
         <UCard class="mt-5" v-if="item.label === 'Buchungen'">
-          <UTable
-              v-if="statementallocations"
-            :data="renderedAllocations"
-              :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
-              :on-select="(i) => selectAllocation(i)"
-              :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
-          >
-            <template #amount-cell="{row}">
-              <span class="text-right text-rose-600" v-if="row.original.amount < 0 || row.original.color === 'red'">{{useCurrency(row.original.amount)}}</span>
-              <span class="text-right text-primary-500" v-else-if="row.original.amount > 0 || row.original.color === 'green'">{{useCurrency(row.original.amount)}}</span>
-              <span v-else>{{useCurrency(row.original.amount)}}</span>
-            </template>
-            <template #date-cell="{row}">
-              {{row.original.date ? dayjs(row.original.date).format('DD.MM.YYYY') : ''}}
-            </template>
-            <template #description-cell="{row}">
-              {{row.original.description ? row.original.description : ''}}
-            </template>
-          </UTable>
+          <EntityShowSubOwnAccountsStatements
+              v-if="itemInfo"
+              :item="itemInfo"
+              top-level-type="accounts"
+              platform="desktop"
+          />
         </UCard>
       </template>
     </UTabs>
diff --git a/frontend/pages/createDocument/edit/[[id]].vue b/frontend/pages/createDocument/edit/[[id]].vue
index 5e4ba57..94d90ab 100644
--- a/frontend/pages/createDocument/edit/[[id]].vue
+++ b/frontend/pages/createDocument/edit/[[id]].vue
@@ -1,5 +1,6 @@
 <script setup>
 import dayjs from "dayjs"
+import { parseDate } from "@internationalized/date"
 import { v4 as uuidv4 } from 'uuid';
 import {useFunctions} from "~/composables/useFunctions.js";
 import EntityModalButtons from "~/components/EntityModalButtons.vue";
@@ -78,6 +79,65 @@ const contracts = ref([])
 const texttemplates = ref([])
 const units = ref([])
 const tenantUsers = ref([])
+const documentTypeItems = computed(() => Object.keys(dataStore.documentTypesForCreation).map((key) => ({
+  label: dataStore.documentTypesForCreation[key].labelSingle,
+  type: key
+})))
+const taxTypeItems = [
+  { key: 'Standard', label: 'Standard' },
+  { key: '13b UStG', label: '13b UStG' },
+  { key: '19 UStG', label: '19 UStG Kleinunternehmer' }
+]
+const deliveryDateTypeItems = ['Lieferdatum', 'Lieferzeitraum', 'Leistungsdatum', 'Leistungszeitraum', 'Kein Lieferdatum anzeigen']
+const paymentTypeItems = [
+  { key: 'transfer', label: 'Überweisung' },
+  { key: 'direct-debit', label: 'SEPA Lastschrift' }
+]
+const serialIntervalItems = ['wöchentlich', '2 - wöchentlich', 'monatlich', 'vierteljährlich', 'halbjährlich', 'jährlich']
+const serialDateDirectionItems = ['Rückwirkend', 'Im Voraus']
+const taxPercentItems = [19, 7, 0]
+const selectedCustomer = computed(() => customers.value.find(i => i.id === itemInfo.value.customer) || null)
+const formatNumberLikeValue = (value) => {
+  if (value === null || typeof value === 'undefined' || value === '') return '-'
+  if (typeof value === 'string' || typeof value === 'number') return String(value)
+
+  if (typeof value === 'object') {
+    const directValue = value.value ?? value.number ?? value.currentNumber ?? value.customerNumber ?? value.id
+    if (directValue !== null && typeof directValue !== 'undefined' && directValue !== '') {
+      return String(directValue)
+    }
+
+    if (typeof value.prefix !== 'undefined' || typeof value.nextNumber !== 'undefined' || typeof value.suffix !== 'undefined') {
+      return `${value.prefix || ''}${value.nextNumber || ''}${value.suffix || ''}` || '-'
+    }
+  }
+
+  return '-'
+}
+
+const getCalendarValue = (value) => {
+  if (!value) return undefined
+
+  const formatted = dayjs(value).format('YYYY-MM-DD')
+  return formatted ? parseDate(formatted) : undefined
+}
+
+const setCalendarField = (field, value) => {
+  itemInfo.value[field] = value ? dayjs(value.toString()).toDate() : null
+}
+
+const setSerialCalendarField = (field, value) => {
+  itemInfo.value.serialConfig[field] = value ? dayjs(value.toString()).toDate() : null
+}
+
+const getDateButtonLabel = (value) => value ? dayjs(value).format('DD.MM.YYYY') : 'Datum auswählen'
+const setCalendarFieldToToday = (field) => {
+  itemInfo.value[field] = dayjs().toDate()
+}
+
+const setSerialCalendarFieldToToday = (field) => {
+  itemInfo.value.serialConfig[field] = dayjs().toDate()
+}
 
 const setupData = async () => {
   letterheads.value = (await useEntities("letterheads").select("*")).filter(i => i.documentTypes.length === 0 || i.documentTypes.includes(itemInfo.value.type))
@@ -1178,7 +1238,7 @@ const getDocumentData = async () => {
         content: itemInfo.value.documentNumber || "XXXX",
       }, {
         label: "Kundennummer",
-        content: customerData.customerNumber,
+        content: formatNumberLikeValue(customerData.customerNumber),
       }, {
         label: "Belegdatum",
         content: itemInfo.value.documentDate ? dayjs(itemInfo.value.documentDate).format("DD.MM.YYYY") : "XXXX",
@@ -1664,21 +1724,21 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
           </UAlert>
 
 
-          <InputGroup>
-            <div class="w-1/3 mr-5">
+          <InputGroup class="w-full items-start">
+            <div class="w-1/3 min-w-0 mr-5">
               <UFormField
                   label="Dokumenttyp:"
               >
                 <InputGroup>
                   <USelectMenu
-                      :options="Object.keys(dataStore.documentTypesForCreation).map(i => {return {label: dataStore.documentTypesForCreation[i].labelSingle, type: i }})"
+                      :items="documentTypeItems"
                       v-model="itemInfo.type"
-                      value-attribute="type"
-                      option-attribute="label"
-                      @change="setDocumentTypeConfig"
-                      class="flex-auto"
+                      value-key="type"
+                      label-key="label"
+                      @update:model-value="setDocumentTypeConfig"
+                      class="w-full min-w-0"
                   >
-                    <template #label>
+                    <template #default>
                       {{ dataStore.documentTypesForCreation[itemInfo.type].labelSingle }}
                     </template>
                   </USelectMenu>
@@ -1742,11 +1802,11 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   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'}*/]"
+                    :items="taxTypeItems"
                     v-model="itemInfo.taxType"
-                    value-attribute="key"
-                    option-attribute="label"
-                    @change="setTaxType"
+                    value-key="key"
+                    label-key="label"
+                    @update:model-value="setTaxType"
                     class="w-full"
                 ></USelectMenu>
               </UFormField>
@@ -1755,17 +1815,16 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   label="Briefpapier:"
               >
                 <USelectMenu
-                    :options="letterheads"
+                    :items="letterheads"
                     v-model="itemInfo.letterhead"
-                    value-attribute="id"
-                    option-attribute="name"
-                    searchable
-                    searchable-placeholder="Suche..."
-                    :search-attributes="['name']"
+                    value-key="id"
+                    label-key="name"
+                    :search-input="{ placeholder: 'Suche...' }"
+                    :filter-fields="['name']"
                     class="w-full"
                     :color="itemInfo.letterhead ? 'primary' : 'error'"
                 >
-                  <template #label>
+                  <template #default>
                     {{ itemInfo.letterhead ? letterheads.find(i => i.id === itemInfo.letterhead).name : "Kein Briefpapier gewählt" }}
                   </template>
                 </USelectMenu>
@@ -1776,30 +1835,24 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               >
                 <div class="flex flex-row">
                   <USelectMenu
-                      :options="customers"
-                      option-attribute="name"
-                      value-attribute="id"
-                      :search-attributes="['name']"
-                      searchable
-                      searchable-placeholder="Suche..."
+                      :items="customers"
+                      label-key="name"
+                      value-key="id"
+                      :filter-fields="['name']"
+                      :search-input="{ placeholder: 'Suche...' }"
                       v-model="itemInfo.customer"
-                      @change="setCustomerData"
-                      class="flex-auto"
+                      @update:model-value="setCustomerData"
+                      :color="itemInfo.customer ? 'primary' : 'error'"
+                      class="w-full min-w-0"
                   >
-                    <template #option="{option}">
+                    <template #item="{ item: option }">
                       {{ option.name }}{{ option.nameAddition }}
                     </template>
-                    <UButton
-                        :color="itemInfo.customer ? 'primary' : 'error'"
-                        variant="outline"
-                        class="w-full"
-                    >
-                      {{ customers.find(i => i.id === itemInfo.customer) ? customers.find(i => i.id === itemInfo.customer).name : "Kein Kunde ausgewählt" }}
-
-                      <UIcon name="i-heroicons-chevron-right-20-solid"
-                             class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500"
-                             :class="['transform rotate-90']"/>
-                    </UButton>
+                    <template #default>
+                      <span class="truncate">
+                        {{ selectedCustomer ? selectedCustomer.name : "Kein Kunde ausgewählt" }}
+                      </span>
+                    </template>
                   </USelectMenu>
                   <EntityModalButtons
                       type="customers"
@@ -1848,16 +1901,16 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
 
                 <UAlert
-                    v-if="customers.find(i => i.id === itemInfo.customer)"
+                    v-if="selectedCustomer"
                     class="mt-2"
-                    variant="solid"
-                    color="white"
+                    variant="soft"
+                    color="neutral"
                     title="Info"
                 >
                   <template #description>
-                    Kundennr: {{ customers.find(i => i.id === itemInfo.customer).customerNumber }}<br>
-                    Typ: {{ customers.find(i => i.id === itemInfo.customer).isCompany ? 'Firma' : 'Privat' }}<br>
-                    Notizen: <span class="truncate">{{ customers.find(i => i.id === itemInfo.customer).notes }}</span>
+                    Kundennr: {{ formatNumberLikeValue(selectedCustomer.customerNumber) }}<br>
+                    Typ: {{ selectedCustomer.isCompany ? 'Firma' : 'Privat' }}<br>
+                    Notizen: <span class="truncate">{{ selectedCustomer.notes || '-' }}</span>
                   </template>
 
                 </UAlert>
@@ -1869,31 +1922,19 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               >
                 <InputGroup>
                   <USelectMenu
-                      :options="contacts.filter(i => i.customer?.id === itemInfo.customer)"
-                      option-attribute="fullName"
-                      value-attribute="id"
-                      :search-attributes="['name']"
-                      searchable
-                      searchable-placeholder="Suche..."
+                      :items="contacts.filter(i => i.customer?.id === itemInfo.customer)"
+                      label-key="fullName"
+                      value-key="id"
+                      :filter-fields="['fullName', 'name']"
+                      :search-input="{ placeholder: 'Suche...' }"
                       v-model="itemInfo.contact"
-                      class="flex-auto"
+                      :color="itemInfo.contact ? 'primary' : 'error'"
+                      :disabled="!itemInfo.customer"
+                      class="w-full min-w-0"
                   >
-                    <UButton
-                        :color="itemInfo.contact ? 'primary' : 'none'"
-                        variant="outline"
-                        class="w-full"
-                        :disabled="!itemInfo.customer"
-                    >
+                    <template #default>
                       <span
                           class="truncate">{{ itemInfo.contact ? contacts.find(i => i.id === itemInfo.contact).fullName : "Kein Kontakt ausgewählt" }}</span>
-
-
-                      <UIcon name="i-heroicons-chevron-right-20-solid"
-                             class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500"
-                             :class="['transform rotate-90']"/>
-                    </UButton>
-                    <template #label>
-                      {{ itemInfo.contact ? contacts.find(i => i.id === itemInfo.contact).fullName : "Kein Kontakt ausgewählt" }}
                     </template>
                   </USelectMenu>
                   <!--                  <UButton
@@ -1926,15 +1967,16 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     v-model="itemInfo.address.street"
                     :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.street : 'Straße + Hausnummer'"
                     :color="itemInfo.address.street ? 'primary' : 'error'"
+                    class="w-full"
                 />
                 <UInput
                     v-model="itemInfo.address.special"
-                    class="mt-3"
+                    class="mt-3 w-full"
                     :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.special : 'Adresszusatz'"
                 />
-                <InputGroup class="mt-3">
+                <InputGroup class="mt-3 w-full">
                   <UInput
-                      class="flex-auto"
+                      class="w-full min-w-0"
                       v-model="itemInfo.address.zip"
                       type="text"
                       inputmode="numeric"
@@ -1945,7 +1987,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       :color="itemInfo.address.zip ? 'primary' : 'error'"
                   />
                   <UInput
-                      class="flex-auto"
+                      class="w-full min-w-0"
                       v-model="itemInfo.address.city"
                       :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.city : 'Ort'"
                       :color="itemInfo.address.city ? 'primary' : 'error'"
@@ -1953,27 +1995,29 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 </InputGroup>
               </UFormField>
             </div>
-            <div class="w-2/3">
-              <UFormField
-                  :label="itemInfo.documentNumberTitle + ':'"
-                  v-if="itemInfo.type !== 'serialInvoices'"
-              >
-                <UInput
-                    v-model="itemInfo.documentNumber"
-                    placeholder="XXXX"
-                    disabled
-                />
-              </UFormField>
-
-              <InputGroup class="w-full">
+            <div class="w-2/3 min-w-0">
+              <InputGroup class="w-full items-start flex-wrap md:flex-nowrap">
                 <UFormField
-                    class="w-80 mr-1"
+                    :label="itemInfo.documentNumberTitle + ':'"
+                    v-if="itemInfo.type !== 'serialInvoices'"
+                    class="min-w-0 flex-1 mr-1"
+                >
+                  <UInput
+                      v-model="itemInfo.documentNumber"
+                      placeholder="XXXX"
+                      disabled
+                      class="w-full"
+                  />
+                </UFormField>
+                <UFormField
+                    class="min-w-0 flex-1 mr-1"
                     label="Lieferdatumsart:"
                     v-if="itemInfo.type !== 'serialInvoices'"
                 >
                   <USelectMenu
-                      :options="['Lieferdatum','Lieferzeitraum','Leistungsdatum','Leistungszeitraum','Kein Lieferdatum anzeigen']"
+                      :items="deliveryDateTypeItems"
                       v-model="itemInfo.deliveryDateType"
+                      class="w-full"
                   />
 
 
@@ -1981,18 +2025,34 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 <UFormField
                     :label="`${itemInfo.deliveryDateType}${['Lieferzeitraum', 'Leistungszeitraum'].includes(itemInfo.deliveryDateType) ? ' Start' : ''}:`"
                     v-if="itemInfo.type !== 'serialInvoices' && itemInfo.deliveryDateType !== 'Kein Lieferdatum anzeigen'"
-                    class="mr-1"
+                    class="min-w-0 flex-1 mr-1"
                 >
-                  <UPopover :popper="{ placement: 'bottom-start' }">
+                  <UPopover :content="{ side: 'bottom', align: 'start' }">
                     <UButton
                         icon="i-heroicons-calendar-days-20-solid"
-                        :label="itemInfo.deliveryDate ? dayjs(itemInfo.deliveryDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+                        :label="getDateButtonLabel(itemInfo.deliveryDate)"
                         variant="outline"
-                        class="mx-auto"
+                        class="w-full justify-start"
                     />
 
-                    <template #panel="{ close }">
-                      <LazyDatePicker v-model="itemInfo.deliveryDate" @close="close"/>
+                    <template #content>
+                      <div class="p-2">
+                        <UCalendar
+                            :model-value="getCalendarValue(itemInfo.deliveryDate)"
+                            @update:model-value="(value) => setCalendarField('deliveryDate', value)"
+                            :week-starts-on="1"
+                        />
+                        <div class="flex justify-end px-2 pb-2">
+                          <UButton
+                              size="xs"
+                              color="gray"
+                              variant="soft"
+                              icon="i-heroicons-calendar-days"
+                              label="Heute"
+                              @click="setCalendarFieldToToday('deliveryDate')"
+                          />
+                        </div>
+                      </div>
                     </template>
                   </UPopover>
 
@@ -2000,77 +2060,105 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 <UFormField
                     :label="itemInfo.deliveryDateType + ' Ende:'"
                     v-if="itemInfo.type !== 'serialInvoices' && ['Lieferzeitraum','Leistungszeitraum'].includes(itemInfo.deliveryDateType)"
+                    class="min-w-0 flex-1"
                 >
                   <UPopover
-                      :popper="{ placement: 'bottom-start' }">
+                      :content="{ side: 'bottom', align: 'start' }">
                     <UButton
                         icon="i-heroicons-calendar-days-20-solid"
-                        :label="itemInfo.deliveryDateEnd ? dayjs(itemInfo.deliveryDateEnd).format('DD.MM.YYYY') : 'Datum auswählen'"
+                        :label="getDateButtonLabel(itemInfo.deliveryDateEnd)"
                         variant="outline"
-                        class="mx-auto"
+                        class="w-full justify-start"
                     />
 
-                    <template #panel="{ close }">
-                      <LazyDatePicker v-model="itemInfo.deliveryDateEnd" @close="close"/>
+                    <template #content>
+                      <div class="p-2">
+                        <UCalendar
+                            :model-value="getCalendarValue(itemInfo.deliveryDateEnd)"
+                            @update:model-value="(value) => setCalendarField('deliveryDateEnd', value)"
+                            :week-starts-on="1"
+                        />
+                        <div class="flex justify-end px-2 pb-2">
+                          <UButton
+                              size="xs"
+                              color="gray"
+                              variant="soft"
+                              icon="i-heroicons-calendar-days"
+                              label="Heute"
+                              @click="setCalendarFieldToToday('deliveryDateEnd')"
+                          />
+                        </div>
+                      </div>
                     </template>
                   </UPopover>
                 </UFormField>
               </InputGroup>
 
-              <InputGroup class="w-full">
+              <InputGroup class="w-full items-start flex-wrap md:flex-nowrap">
                 <UFormField
                     label="Belegdatum:"
-                    class="mr-1"
+                    class="min-w-0 flex-1 mr-1"
                     v-if="itemInfo.type !== 'serialInvoices'"
                 >
-                  <UPopover :popper="{ placement: 'bottom-start' }">
+                  <UPopover :content="{ side: 'bottom', align: 'start' }">
                     <UButton
                         icon="i-heroicons-calendar-days-20-solid"
-                        :label="itemInfo.documentDate ? dayjs(itemInfo.documentDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+                        :label="getDateButtonLabel(itemInfo.documentDate)"
                         variant="outline"
+                        class="w-full justify-start"
                     />
 
-                    <template #panel="{ close }">
-                      <LazyDatePicker v-model="itemInfo.documentDate" @close="close"/>
+                    <template #content>
+                      <div class="p-2">
+                        <UCalendar
+                            :model-value="getCalendarValue(itemInfo.documentDate)"
+                            @update:model-value="(value) => setCalendarField('documentDate', value)"
+                            :week-starts-on="1"
+                        />
+                        <div class="flex justify-end px-2 pb-2">
+                          <UButton
+                              size="xs"
+                              color="gray"
+                              variant="soft"
+                              icon="i-heroicons-calendar-days"
+                              label="Heute"
+                              @click="setCalendarFieldToToday('documentDate')"
+                          />
+                        </div>
+                      </div>
                     </template>
                   </UPopover>
                 </UFormField>
 
 
                 <UFormField
-                    class="w-full"
+                    class="min-w-0 flex-1"
                     label="Zahlungsziel in Tagen:"
                 >
                   <UInput
                       type="number"
                       v-model="itemInfo.paymentDays"
+                      class="w-full"
                   />
                 </UFormField>
                 <UFormField
-                    class="w-full"
+                    class="min-w-0 flex-1"
                     label="Zahlungsart:"
                 >
                   <USelectMenu
                       v-model="itemInfo.payment_type"
-                      value-attribute="key"
-                      option-attribute="label"
-                      :options="[
-                          {
-                            key: 'transfer',
-                            label: 'Überweisung'
-                          },{
-                            key: 'direct-debit',
-                            label: 'SEPA Lastschrift'
-                          }
-                      ]"
+                      value-key="key"
+                      label-key="label"
+                      :items="paymentTypeItems"
+                      class="w-full"
                   >
-                    <template #label>
+                    <template #default>
                       {{itemInfo.payment_type === 'transfer' ? "Überweisung" : "SEPA-Lastschrift"}}
                     </template>
                   </USelectMenu>
                 </UFormField>
                 <UFormField
-                    class="w-full"
+                    class="min-w-0 flex-1"
                     label="Individueller Aufschlag:"
                 >
                   <UInput
@@ -2078,6 +2166,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       step="0.01"
                       v-model="itemInfo.customSurchargePercentage"
                       @change="updateCustomSurcharge"
+                      class="w-full"
                   >
                     <template #trailing>
                       <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
@@ -2089,11 +2178,12 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   label="Mitarbeiter:"
               >
                 <USelectMenu
-                    :options="tenantUsers"
+                    :items="tenantUsers"
                     v-model="itemInfo.created_by"
-                    option-attribute="full_name"
-                    value-attribute="id"
-                    @change="setContactPersonData"
+                    label-key="full_name"
+                    value-key="id"
+                    @update:model-value="setContactPersonData"
+                    class="w-full"
                 />
               </UFormField>
               <UFormField
@@ -2101,6 +2191,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               >
                 <UInput
                     v-model="itemInfo.contactTel"
+                    class="w-full"
                 />
               </UFormField>
               <UFormField
@@ -2108,6 +2199,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               >
                 <UInput
                     v-model="itemInfo.contactEMail"
+                    class="w-full"
                 />
               </UFormField>
               <UFormField
@@ -2115,20 +2207,19 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               >
                 <InputGroup>
                   <USelectMenu
-                      :options="plants.filter(i => i.customer?.id === itemInfo.customer)"
+                      :items="plants.filter(i => i.customer?.id === itemInfo.customer)"
                       v-model="itemInfo.plant"
-                      value-attribute="id"
-                      option-attribute="name"
-                      searchable
-                      searchable-placeholder="Suche..."
-                      :search-attributes="['name']"
+                      value-key="id"
+                      label-key="name"
+                      :search-input="{ placeholder: 'Suche...' }"
+                      :filter-fields="['name']"
                       class="w-full"
                       :disabled="!itemInfo.customer"
                   >
-                    <template #label>
+                    <template #default>
                       {{ plants.find(i => i.id === itemInfo.plant) ? plants.find(i => i.id === itemInfo.plant).name : "Kein Objekt ausgewählt" }}
                     </template>
-                    <template #option="{option: plant}">
+                    <template #item="{ item: plant }">
                       {{ plant.name }}
                     </template>
                   </USelectMenu>
@@ -2153,20 +2244,19 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               >
                 <InputGroup>
                   <USelectMenu
-                      :options="projects.filter(i => i.customer?.id === itemInfo.customer && (itemInfo.plant ? itemInfo.plant === i.plant : true))"
+                      :items="projects.filter(i => i.customer?.id === itemInfo.customer && (itemInfo.plant ? itemInfo.plant === i.plant : true))"
                       v-model="itemInfo.project"
-                      value-attribute="id"
-                      option-attribute="name"
-                      searchable
-                      searchable-placeholder="Suche..."
-                      :search-attributes="['name']"
+                      value-key="id"
+                      label-key="name"
+                      :search-input="{ placeholder: 'Suche...' }"
+                      :filter-fields="['name']"
                       class="w-full"
                       :disabled="!itemInfo.customer"
                   >
-                    <template #label>
+                    <template #default>
                       {{ itemInfo.project ? projects.find(i => i.id === itemInfo.project).name : "Kein Projekt ausgewählt" }}
                     </template>
-                    <template #option="{option: project}">
+                    <template #item="{ item: project }">
                       {{ customers.find(i => i.id === project.customer) ? customers.find(i => i.id === project.customer).name : "" }}
                       - {{ project.name }}
                     </template>
@@ -2192,20 +2282,19 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               >
                 <InputGroup>
                   <USelectMenu
-                      :options="contracts.filter(i => i.customer?.id === itemInfo.customer && (itemInfo.plant ? itemInfo.plant === i.plant : true))"
+                      :items="contracts.filter(i => i.customer?.id === itemInfo.customer && (itemInfo.plant ? itemInfo.plant === i.plant : true))"
                       v-model="itemInfo.contract"
-                      value-attribute="id"
-                      option-attribute="name"
-                      searchable
-                      searchable-placeholder="Suche..."
-                      :search-attributes="['contractNumber','name']"
+                      value-key="id"
+                      label-key="name"
+                      :search-input="{ placeholder: 'Suche...' }"
+                      :filter-fields="['contractNumber','name']"
                       class="w-full"
                       :disabled="!itemInfo.customer"
                   >
-                    <template #label>
+                    <template #default>
                       {{ itemInfo.contract ? contracts.find(i => i.id === itemInfo.contract).name : "Kein Vertrag ausgewählt" }}
                     </template>
-                    <template #option="{option: contract}">
+                    <template #item="{ item: contract }">
                       {{ customers.find(i => i.id === contract.customer) ? customers.find(i => i.id === contract.customer).name : "" }}
                       - {{ contract.contractNumber }} - {{ contract.name }}
                     </template>
@@ -2235,35 +2324,69 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               Einstellungen für die Serienrechnung
             </USeparator>
 
-            <div class="flex flex-row">
-              <div class="w-1/3">
+            <div class="flex flex-row w-full items-start flex-wrap md:flex-nowrap">
+              <div class="w-1/3 min-w-0">
                 <UFormField
                     label="Datum erste Ausführung:"
                 >
-                  <UPopover :popper="{ placement: 'bottom-start' }">
+                  <UPopover :content="{ side: 'bottom', align: 'start' }">
                     <UButton
                         icon="i-heroicons-calendar-days-20-solid"
-                        :label="itemInfo.serialConfig.firstExecution ? dayjs(itemInfo.serialConfig.firstExecution).format('DD.MM.YYYY') : 'Datum auswählen'"
+                        :label="getDateButtonLabel(itemInfo.serialConfig.firstExecution)"
                         variant="outline"
+                        class="w-full justify-start"
                     />
 
-                    <template #panel="{ close }">
-                      <LazyDatePicker v-model="itemInfo.serialConfig.firstExecution" @close="close"/>
+                    <template #content>
+                      <div class="p-2">
+                        <UCalendar
+                            :model-value="getCalendarValue(itemInfo.serialConfig.firstExecution)"
+                            @update:model-value="(value) => setSerialCalendarField('firstExecution', value)"
+                            :week-starts-on="1"
+                        />
+                        <div class="flex justify-end px-2 pb-2">
+                          <UButton
+                              size="xs"
+                              color="gray"
+                              variant="soft"
+                              icon="i-heroicons-calendar-days"
+                              label="Heute"
+                              @click="setSerialCalendarFieldToToday('firstExecution')"
+                          />
+                        </div>
+                      </div>
                     </template>
                   </UPopover>
                 </UFormField>
                 <UFormField
                     label="Datum letzte Ausführung:"
                 >
-                  <UPopover :popper="{ placement: 'bottom-start' }">
+                  <UPopover :content="{ side: 'bottom', align: 'start' }">
                     <UButton
                         icon="i-heroicons-calendar-days-20-solid"
-                        :label="itemInfo.serialConfig.executionUntil ? dayjs(itemInfo.serialConfig.executionUntil).format('DD.MM.YYYY') : 'Datum auswählen'"
+                        :label="getDateButtonLabel(itemInfo.serialConfig.executionUntil)"
                         variant="outline"
+                        class="w-full justify-start"
                     />
 
-                    <template #panel="{ close }">
-                      <LazyDatePicker v-model="itemInfo.serialConfig.executionUntil" @close="close"/>
+                    <template #content>
+                      <div class="p-2">
+                        <UCalendar
+                            :model-value="getCalendarValue(itemInfo.serialConfig.executionUntil)"
+                            @update:model-value="(value) => setSerialCalendarField('executionUntil', value)"
+                            :week-starts-on="1"
+                        />
+                        <div class="flex justify-end px-2 pb-2">
+                          <UButton
+                              size="xs"
+                              color="gray"
+                              variant="soft"
+                              icon="i-heroicons-calendar-days"
+                              label="Heute"
+                              @click="setSerialCalendarFieldToToday('executionUntil')"
+                          />
+                        </div>
+                      </div>
                     </template>
                   </UPopover>
                 </UFormField>
@@ -2274,13 +2397,14 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 />
 
               </div>
-              <div class="w-2/3">
+              <div class="w-2/3 min-w-0">
                 <UFormField
                     label="Intervall:"
                 >
                   <USelectMenu
                       v-model="itemInfo.serialConfig.intervall"
-                      :options="['wöchentlich','2 - wöchentlich', 'monatlich', 'vierteljährlich','halbjährlich', 'jährlich']"
+                      :items="serialIntervalItems"
+                      class="w-full"
                   />
                 </UFormField>
                 <UFormField
@@ -2288,7 +2412,8 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 >
                   <USelectMenu
                       v-model="itemInfo.serialConfig.dateDirection"
-                      :options="['Rückwirkend','Im Voraus']"
+                      :items="serialDateDirectionItems"
+                      class="w-full"
                   />
                 </UFormField>
                 <UAlert
@@ -2310,13 +2435,13 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
           <UFormField
               label="Titel:"
           >
-            <UInput v-model="itemInfo.title" disabled/>
+            <UInput v-model="itemInfo.title" disabled class="w-full"/>
           </UFormField>
           <UFormField
               label="Beschreibung:"
               class="mt-3"
           >
-            <UInput v-model="itemInfo.description"/>
+            <UInput v-model="itemInfo.description" class="w-full"/>
           </UFormField>
 
           <USeparator
@@ -2327,15 +2452,16 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               label="Vorlage auswählen"
           >
             <USelectMenu
-                :options="getTextTemplateByType(itemInfo.type,'startText')"
+                :items="getTextTemplateByType(itemInfo.type,'startText')"
                 v-model="itemInfo.startText"
-                option-attribute="text"
-                value-attribute="text"
+                label-key="text"
+                value-key="text"
+                class="w-full"
             >
-              <template #option="{option}">
+              <template #item="{ item: option }">
                 {{ option.name }} - {{ option.text }}
               </template>
-              <template #label>
+              <template #default>
                 {{ texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert" }}
               </template>
             </USelectMenu>
@@ -2348,6 +2474,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
             <UTextarea
                 v-model="itemInfo.startText"
                 :rows="6"
+                class="w-full"
             />
           </UFormField>
 
@@ -2395,7 +2522,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   </td>
                   <td
                       v-if="row.mode === 'text'"
-                      colspan="9"
+                      colspan="7"
                   >
                     <!--                    <UInput
                                             v-model="row.text"
@@ -2405,6 +2532,9 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     <UTextarea
                         v-model="row.description"
                         placeholder="Text"
+                        class="w-full"
+                        :rows="4"
+                        autoresize
                     />
                   </td>
                   <td
@@ -2412,35 +2542,34 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                   >{{ row.pos }}
                   </td>
                   <td
-                      class="w-120"
+                      class="w-full"
                       v-if="row.mode === 'free'"
                   >
                     <UInput
                         :disabled="itemInfo.type === 'cancellationInvoices' || row.editDisabled"
                         v-model="row.text"
                         placeholder="Name"
-                        class="min-w-40"
+                        class="w-full min-w-0"
                     />
                   </td>
                   <td
-                      class="w-120"
+                      class="w-full"
                       v-else-if="row.mode === 'normal'"
                   >
                     <InputGroup class="w-full">
                       <USelectMenu
                           :disabled="itemInfo.type === 'cancellationInvoices'"
-                          class="w-60"
-                          :options="products"
+                          class="w-full min-w-0"
+                          :items="products"
                           :color="row.product ? 'primary' : 'error'"
-                          option-attribute="name"
-                          value-attribute="id"
-                          searchable
-                          searchable-placeholder="Suche ..."
-                          :search-attributes="['name']"
+                          label-key="name"
+                          value-key="id"
+                          :search-input="{ placeholder: 'Suche ...' }"
+                          :filter-fields="['name']"
                           v-model="row.product"
-                          @change="setRowData(row)"
+                          @update:model-value="() => setRowData(row)"
                       >
-                        <template #label>
+                        <template #default>
                           <span class="truncate">{{
                               products.find(i => i.id === row.product) ? products.find(i => i.id === row.product).name : "Kein Produkt ausgewählt"
                             }}</span>
@@ -2495,24 +2624,23 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
 
                   </td>
                   <td
-                      class="w-120"
+                      class="w-full"
                       v-else-if="row.mode === 'service'"
                   >
                     <InputGroup class="w-full">
                       <USelectMenu
                           :disabled="itemInfo.type === 'cancellationInvoices'"
-                          class="w-60"
-                          :options="services"
+                          class="w-full min-w-0"
+                          :items="services"
                           :color="row.service ? 'primary' : 'error'"
-                          option-attribute="name"
-                          value-attribute="id"
-                          searchable
-                          searchable-placeholder="Suche ..."
-                          :search-attributes="['name']"
+                          label-key="name"
+                          value-key="id"
+                          :search-input="{ placeholder: 'Suche ...' }"
+                          :filter-fields="['name']"
                           v-model="row.service"
-                          @change="setRowData(row)"
+                          @update:model-value="() => setRowData(row)"
                       >
-                        <template #label>
+                        <template #default>
                           <span class="truncate">{{
                               services.find(i => i.id === row.service) ? services.find(i => i.id === row.service).name : "Keine Leistung ausgewählt"
                             }}</span>
@@ -2564,7 +2692,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                     </InputGroup>
                   </td>
                   <td
-                      class="w-20"
+                      class="w-full"
                       v-if="!['pagebreak','title','text'].includes(row.mode)"
                   >
                     <UInput
@@ -2572,27 +2700,29 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                         :disabled="itemInfo.type === 'cancellationInvoices'"
                         type="number"
                         :step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : '1' "
+                        class="w-full"
 
                     />
                   </td>
                   <td
-                      class="w-40"
+                      class="w-full"
                       v-if="!['pagebreak','title','text'].includes(row.mode)"
                   >
                     <USelectMenu
                         v-model="row.unit"
                         :disabled="itemInfo.type === 'cancellationInvoices'"
-                        :options="units"
-                        option-attribute="name"
-                        value-attribute="id"
+                        :items="units"
+                        label-key="name"
+                        value-key="id"
+                        class="w-full"
                     >
-                      <template #label>
+                      <template #default>
                         {{ units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).name : "Keine Einheit gewählt" }}
                       </template>
                     </USelectMenu>
                   </td>
                   <td
-                      class="w-40"
+                      class="w-full"
                       v-if="!['pagebreak','title','text'].includes(row.mode) && itemInfo.type !== 'deliveryNotes'"
                   >
                     <UInput
@@ -2601,6 +2731,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                         type="number"
                         step="0.001"
                         @change="updateCustomSurcharge"
+                        class="w-full"
                     >
                       <template #leading>
                         <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
@@ -2687,30 +2818,32 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                                      @click="row.showEdit = false"/>
                           </div>
                         </template>
-                        <InputGroup>
+                        <InputGroup class="w-full items-start">
                           <UFormField
                               label="Anzahl:"
-                              class="flex-auto"
+                              class="w-full min-w-0"
                           >
                             <UInput
                                 v-model="row.quantity"
                                 type="number"
                                 :step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : '1' "
+                                class="w-full"
 
                             />
                           </UFormField>
                           <UFormField
                               label="Einheit:"
-                              class="flex-auto"
+                              class="w-full min-w-0"
                           >
                             <USelectMenu
                                 v-model="row.unit"
-                                :options="units"
-                                option-attribute="name"
+                                :items="units"
+                                label-key="name"
 
-                                value-attribute="id"
+                                value-key="id"
+                                class="w-full"
                             >
-                              <template #label>
+                              <template #default>
                                 {{ units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).name : "Keine Einheit gewählt" }}
                               </template>
                             </USelectMenu>
@@ -2726,6 +2859,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               type="number"
                               step="0.001"
                               @change="updateCustomSurcharge"
+                              class="w-full"
                           >
                             <template #leading>
                               <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
@@ -2753,14 +2887,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                             v-if="itemInfo.type !== 'deliveryNotes'"
                         >
                           <USelectMenu
-                              :options="[19,7,0]"
+                              :items="taxPercentItems"
                               v-model="row.taxPercent"
                               :disabled="itemInfo.taxType === '13b UStG' || itemInfo.taxType === '19 UStG'"
+                              class="w-full"
                           >
-                            <template #option="{option}">
+                            <template #item="{ item: option }">
                               {{ option }} %
                             </template>
-                            <template #label>
+                            <template #default>
                               {{ row.taxPercent }} %
                             </template>
                           </USelectMenu>
@@ -2776,6 +2911,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               type="number"
                               step="0.01"
                               placeholder="0"
+                              class="w-full"
                           >
                             <template #trailing>
                               <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
@@ -2829,6 +2965,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                           <UTextarea
                               v-model="row.description"
                               rows="5"
+                              class="w-full"
                           >
 
                           </UTextarea>
@@ -2859,6 +2996,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               @input="row.agriculture.adblueUsage = row.agriculture.dieselUsage * 0.04"
                               type="number"
                               steps="0.01"
+                              class="w-full"
                           >
                             <template #trailing>
                               L
@@ -2873,6 +3011,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               @change="row.agriculture.adblueUsage = row.agriculture.dieselUsage * 0.04"
                               type="number"
                               steps="0.01"
+                              class="w-full"
                           >
                             <template #trailing>
                               €/L
@@ -2886,6 +3025,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               v-model="row.agriculture.adblueUsage"
                               type="number"
                               steps="0.01"
+                              class="w-full"
                           >
                             <template #trailing>
                               L
@@ -2899,6 +3039,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                               v-model="row.agriculture.adbluePrice"
                               type="number"
                               steps="0.01"
+                              class="w-full"
                           >
                             <template #trailing>
                               €/L
@@ -2938,6 +3079,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                         :disabled="itemInfo.type === 'cancellationInvoices'"
                         v-model="row.text"
                         placeholder="Titel"
+                        class="w-full"
                     />
                   </td>
                   <td>
@@ -3161,15 +3303,16 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
               label="Vorlage auswählen"
           >
             <USelectMenu
-                :options="getTextTemplateByType(itemInfo.type,'endText')"
+                :items="getTextTemplateByType(itemInfo.type,'endText')"
                 v-model="itemInfo.endText"
-                option-attribute="text"
-                value-attribute="text"
+                label-key="text"
+                value-key="text"
+                class="w-full"
             >
-              <template #option="{option}">
+              <template #item="{ item: option }">
                 {{option.name}} - {{option.text}}
               </template>
-              <template #label>
+              <template #default>
                 {{texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert"}}
               </template>
             </USelectMenu>
@@ -3181,6 +3324,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
             <UTextarea
                 v-model="itemInfo.endText"
                 :rows="6"
+                class="w-full"
             />
           </UFormField>
         </div>
diff --git a/frontend/pages/createDocument/serialInvoice.vue b/frontend/pages/createDocument/serialInvoice.vue
index b6eba35..8cfd6ed 100644
--- a/frontend/pages/createDocument/serialInvoice.vue
+++ b/frontend/pages/createDocument/serialInvoice.vue
@@ -98,7 +98,7 @@
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
       :on-select="(row) => router.push(`/createDocument/edit/${row.id}`)"
-      :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+      empty="Keine Belege anzuzeigen"
   >
     <template #actions-cell="{ row }">
       <div @click.stop>
diff --git a/frontend/pages/incomingInvoices/[mode]/[id].vue b/frontend/pages/incomingInvoices/[mode]/[id].vue
index b2d25f5..20696aa 100644
--- a/frontend/pages/incomingInvoices/[mode]/[id].vue
+++ b/frontend/pages/incomingInvoices/[mode]/[id].vue
@@ -1,6 +1,7 @@
 <script setup>
 import InputGroup from "~/components/InputGroup.vue";
 import dayjs from "dayjs";
+import { parseDate } from "@internationalized/date"
 import { useDraggable } from '@vueuse/core'
 
 // --- Standard Setup & Data ---
@@ -44,6 +45,9 @@ const costcentres = ref([])
 const vendors = ref([])
 const accounts = ref([])
 const loadedFileId = ref(null)
+const invoiceFiles = ref([])
+const paymentTypeItems = ['Überweisung', 'Lastschrift', 'Kreditkarte', 'PayPal', 'Bar', 'Sonstiges']
+const files = useFiles()
 
 const setup = async () => {
   // 1. Daten laden
@@ -67,7 +71,9 @@ const setup = async () => {
 
   // Datei laden
   if (itemInfo.value.files && itemInfo.value.files.length > 0) {
-    loadedFileId.value = itemInfo.value.files[itemInfo.value.files.length-1].id
+    invoiceFiles.value = await files.selectSomeDocuments(itemInfo.value.files.map((file) => file.id))
+    const latestPdf = [...invoiceFiles.value].reverse().find((file) => file?.path?.toLowerCase().includes('.pdf'))
+    loadedFileId.value = latestPdf?.id || null
   }
 
   if(itemInfo.value.date && !itemInfo.value.dueDate) itemInfo.value.dueDate = itemInfo.value.date
@@ -98,6 +104,23 @@ const taxOptions = ref([
   { label: "Keine USt", percentage: 0, key: "null" },
 ])
 
+const getCalendarValue = (value) => {
+  if (!value) return undefined
+
+  const formatted = dayjs(value).format('YYYY-MM-DD')
+  return formatted ? parseDate(formatted) : undefined
+}
+
+const setDateField = (field, value) => {
+  itemInfo.value[field] = value ? dayjs(value.toString()).toDate() : null
+}
+
+const setDateFieldToToday = (field) => {
+  itemInfo.value[field] = dayjs().toDate()
+}
+
+const getDateButtonLabel = (value, emptyLabel = "Kein Datum") => value ? dayjs(value).format('DD.MM.YYYY') : emptyLabel
+
 const totalCalculated = computed(() => {
   let totalNet = 0
   let totalAmount19Tax = 0
@@ -335,18 +358,18 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                   <USelectMenu
                       class="w-full"
                       v-model="itemInfo.vendor"
-                      :options="vendors"
-                      option-attribute="name"
-                      value-attribute="id"
-                      searchable
+                      :items="vendors"
+                      label-key="name"
+                      value-key="id"
+                      :search-input="{ placeholder: 'Lieferant suchen...' }"
                       :disabled="mode === 'show'"
-                      :search-attributes="['name', 'vendorNumber']"
-                      placeholder="Lieferant suchen..."
+                      :filter-fields="['name', 'vendorNumber']"
+                      :color="itemInfo.vendor ? 'primary' : 'error'"
                   >
-                    <template #label>
+                    <template #default>
                       {{ vendors.find(v => v.id === itemInfo.vendor)?.name || 'Bitte wählen' }}
                     </template>
-                    <template #option="{ option }">
+                    <template #item="{ item: option }">
                       <span class="font-mono text-xs opacity-75 mr-2">{{ option.vendorNumber }}</span> {{ option.name }}
                     </template>
                   </USelectMenu>
@@ -368,33 +391,81 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
               </UFormField>
 
               <UFormField label="Rechnungsnummer">
-                <UInput v-model="itemInfo.reference" icon="i-heroicons-hashtag" :disabled="mode === 'show'" />
+                <UInput class="w-full" v-model="itemInfo.reference" icon="i-heroicons-hashtag" :disabled="mode === 'show'" :color="itemInfo.reference ? 'primary' : 'error'" />
               </UFormField>
 
               <UFormField label="Zahlart">
-                <USelectMenu v-model="itemInfo.paymentType" :options="['Überweisung', 'Lastschrift', 'Kreditkarte', 'PayPal', 'Bar', 'Sonstiges']" :disabled="mode === 'show'" />
+                <USelectMenu v-model="itemInfo.paymentType" :items="paymentTypeItems" :disabled="mode === 'show'" class="w-full" />
               </UFormField>
 
               <UFormField label="Rechnungsdatum">
-                <UPopover :popper="{ placement: 'bottom-start' }">
-                  <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
-                  <template #panel="{ close }">
-                    <LazyDatePicker v-model="itemInfo.date" @close="() => { if(!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date; close() }" />
+                <UPopover class="w-full" :content="{ side: 'bottom', align: 'start' }">
+                  <UButton
+                      block
+                      icon="i-heroicons-calendar"
+                      :label="getDateButtonLabel(itemInfo.date)"
+                      :disabled="mode === 'show'"
+                      :color="itemInfo.date ? 'neutral' : 'error'"
+                      variant="outline"
+                      class="w-full justify-start"
+                  />
+                  <template #content>
+                    <div class="p-2">
+                      <UCalendar
+                          :model-value="getCalendarValue(itemInfo.date)"
+                          @update:model-value="(value) => { setDateField('date', value); if (!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date }"
+                          :week-starts-on="1"
+                      />
+                      <div class="flex justify-end px-2 pb-2">
+                        <UButton
+                            size="xs"
+                            color="gray"
+                            variant="soft"
+                            icon="i-heroicons-calendar-days"
+                            label="Heute"
+                            @click="() => { setDateFieldToToday('date'); if (!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date }"
+                        />
+                      </div>
+                    </div>
                   </template>
                 </UPopover>
               </UFormField>
 
               <UFormField label="Fälligkeitsdatum">
-                <UPopover :popper="{ placement: 'bottom-start' }">
-                  <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
-                  <template #panel="{ close }">
-                    <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
+                <UPopover class="w-full" :content="{ side: 'bottom', align: 'start' }">
+                  <UButton
+                      block
+                      icon="i-heroicons-calendar"
+                      :label="getDateButtonLabel(itemInfo.dueDate)"
+                      :disabled="mode === 'show'"
+                      :color="itemInfo.dueDate ? 'neutral' : 'error'"
+                      variant="outline"
+                      class="w-full justify-start"
+                  />
+                  <template #content>
+                    <div class="p-2">
+                      <UCalendar
+                          :model-value="getCalendarValue(itemInfo.dueDate)"
+                          @update:model-value="(value) => setDateField('dueDate', value)"
+                          :week-starts-on="1"
+                      />
+                      <div class="flex justify-end px-2 pb-2">
+                        <UButton
+                            size="xs"
+                            color="gray"
+                            variant="soft"
+                            icon="i-heroicons-calendar-days"
+                            label="Heute"
+                            @click="setDateFieldToToday('dueDate')"
+                        />
+                      </div>
+                    </div>
                   </template>
                 </UPopover>
               </UFormField>
 
               <UFormField label="Beschreibung / Notiz" class="md:col-span-2">
-                <UTextarea v-model="itemInfo.description" :rows="2" autoresize :disabled="mode === 'show'" />
+                <UTextarea class="w-full" v-model="itemInfo.description" :rows="2" autoresize :disabled="mode === 'show'" />
               </UFormField>
             </div>
           </UCard>
@@ -430,19 +501,20 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                 <div class="col-span-12 md:col-span-6">
                   <UFormField label="Konto / Kategorie">
                     <USelectMenu
+                        class="w-full"
                         v-model="item.account"
-                        :options="accounts"
-                        searchable
-                        placeholder="Kategorie wählen"
-                        option-attribute="label"
-                        value-attribute="id"
+                        :items="accounts"
+                        :search-input="{ placeholder: 'Kategorie wählen' }"
+                        label-key="label"
+                        value-key="id"
                         :disabled="mode === 'show'"
-                        :search-attributes="['label', 'number']"
+                        :filter-fields="['label', 'number']"
+                        :color="item.account ? 'primary' : 'error'"
                     >
-                      <template #option="{ option }">
+                      <template #item="{ item: option }">
                         <span class="font-mono text-xs text-gray-500 mr-2">{{ option.number }}</span> {{ option.label }}
                       </template>
-                      <template #label>
+                      <template #default>
                         {{ accounts.find(a => a.id === item.account)?.label || 'Auswählen' }}
                       </template>
                     </USelectMenu>
@@ -452,15 +524,15 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                 <div class="col-span-12 md:col-span-6">
                   <UFormField label="Kostenstelle">
                     <USelectMenu
+                        class="w-full"
                         v-model="item.costCentre"
-                        :options="costcentres"
-                        searchable
-                        option-attribute="name"
-                        value-attribute="id"
-                        placeholder="Optional"
+                        :items="costcentres"
+                        :search-input="{ placeholder: 'Optional' }"
+                        label-key="name"
+                        value-key="id"
                         :disabled="mode === 'show'"
                     >
-                      <template #label>
+                      <template #default>
                         {{ costcentres.find(c => c.id === item.costCentre)?.name || 'Keine' }}
                       </template>
                     </USelectMenu>
@@ -470,6 +542,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                 <div class="col-span-12 md:col-span-3">
                   <UFormField label="Betrag (Netto)">
                     <UInput
+                        class="w-full"
                         type="number"
                         step="0.01"
                         :disabled="mode === 'show' || !useNetMode"
@@ -484,6 +557,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                 <div class="col-span-12 md:col-span-3">
                   <UFormField label="Betrag (Brutto)">
                     <UInput
+                        class="w-full"
                         type="number"
                         step="0.01"
                         :disabled="mode === 'show' || useNetMode"
@@ -498,19 +572,21 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                 <div class="col-span-6 md:col-span-3">
                   <UFormField label="Steuerschlüssel">
                     <USelectMenu
+                        class="w-full"
                         v-model="item.taxType"
-                        :options="taxOptions"
-                        value-attribute="key"
-                        option-attribute="label"
+                        :items="taxOptions"
+                        value-key="key"
+                        label-key="label"
                         :disabled="mode === 'show'"
-                        @change="recalculateItem(item, 'taxType')"
+                        @update:model-value="recalculateItem(item, 'taxType')"
+                        :color="item.taxType ? 'primary' : 'error'"
                     />
                   </UFormField>
                 </div>
 
                 <div class="col-span-6 md:col-span-3">
                   <UFormField label="Steuerbetrag" help="Automatisch berechnet">
-                    <UInput :model-value="item.amountTax" disabled color="gray" >
+                    <UInput class="w-full" :model-value="item.amountTax" disabled color="gray" >
                       <template #trailing>€</template>
                     </UInput>
                   </UFormField>
@@ -538,7 +614,7 @@ const hasBlockingIncomingInvoiceErrors = computed(() => blockingIncomingInvoiceE
                 </div>
 
                 <div class="col-span-12">
-                  <UInput v-model="item.description" :disabled="mode === 'show'" placeholder="Positionstext (optional)" icon="i-heroicons-bars-3-bottom-left" variant="none" class="border-b border-gray-100 dark:border-gray-800" />
+                  <UInput v-model="item.description" :disabled="mode === 'show'" placeholder="Positionstext (optional)" icon="i-heroicons-bars-3-bottom-left" variant="none" class="w-full border-b border-gray-100 dark:border-gray-800" />
                 </div>
               </div>
             </UCard>
diff --git a/frontend/pages/incomingInvoices/index.vue b/frontend/pages/incomingInvoices/index.vue
index eb37234..6b25fff 100644
--- a/frontend/pages/incomingInvoices/index.vue
+++ b/frontend/pages/incomingInvoices/index.vue
@@ -148,7 +148,15 @@ const isPaid = (item) => {
   return Math.abs(amountPaid) === Math.abs(Number(getInvoiceSum(item)))
 }
 
-const selectIncomingInvoice = (invoice) => {
+const unwrapInvoiceRow = (invoiceLike) => invoiceLike?.original || invoiceLike
+
+const selectIncomingInvoice = (invoiceLike) => {
+  const invoice = unwrapInvoiceRow(invoiceLike)
+
+  if (!invoice?.id) {
+    return
+  }
+
   if (invoice.state === "Gebucht") {
     router.push(`/incomingInvoices/show/${invoice.id}`)
   } else {
@@ -254,7 +262,7 @@ const selectIncomingInvoice = (invoice) => {
             :columns="normalizeTableColumns(columns)"
             class="w-full"
             :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-            :on-select="(i) => selectIncomingInvoice(i) "
+            :on-select="selectIncomingInvoice"
             :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
         >
           <template #reference-cell="{row}">
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index 578d544..823370e 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { FormSubmitEvent } from '#ui/types'
+
 definePageMeta({
   layout: "notLoggedIn"
 })
@@ -7,16 +9,23 @@ const auth = useAuthStore()
 const toast = useToast()
 const router = useRouter()
 
-const doLogin = async (data:any) => {
+const state = reactive({
+  email: '',
+  password: ''
+})
+
+const loading = ref(false)
+
+const doLogin = async (event: FormSubmitEvent<typeof state>) => {
+  loading.value = true
   try {
-    await auth.login(data.email, data.password)
-    // Weiterleiten nach erfolgreichem Login
+    await auth.login(event.data.email, event.data.password)
     toast.add({title:"Einloggen erfolgreich"})
-
     await router.push("/")
-
   } catch (err: any) {
     toast.add({title:"Zugangsdaten falsch. Bitte überprüfen Sie Ihre Eingaben",color:"error"})
+  } finally {
+    loading.value = false
   }
 }
 </script>
@@ -29,60 +38,42 @@ const doLogin = async (data:any) => {
         dark="/Logo_Dark.png"
     />
 
-    <UAuthForm
-        title="Login"
-        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten."
-        align="bottom"
-        :fields="[{
-            name: 'email',
-            type: 'text',
-            label: 'Email',
-            placeholder: 'Deine E-Mail Adresse'
-          }, {
-            name: 'password',
-            label: 'Passwort',
-            type: 'password',
-            placeholder: 'Dein Passwort'
-          }]"
-        :loading="false"
-        @submit="doLogin"
-        :submit-button="{label: 'Weiter'}"
-        divider="oder"
-    >
-      <template #password-hint>
-        <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
-      </template>
-    </UAuthForm>
-  </UCard>
-<!--  <div v-else class="mt-20 m-2 p-2">
-    <UColorModeImage
-        light="/Logo.png"
-        dark="/Logo_Dark.png"
-    />
+    <div class="mt-6 space-y-5">
+      <div class="space-y-1">
+        <h1 class="text-xl font-semibold">Login</h1>
+        <p class="text-sm text-muted">
+          Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten.
+        </p>
+      </div>
 
-    <UAuthForm
-        title="Login"
-        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten."
-        align="bottom"
-        :fields="[{
-            name: 'email',
-            type: 'text',
-            label: 'Email',
-            placeholder: 'Deine E-Mail Adresse'
-          }, {
-            name: 'password',
-            label: 'Passwort',
-            type: 'password',
-            placeholder: 'Dein Passwort'
-          }]"
-        :loading="false"
-        @submit="doLogin"
-        :submit-button="{label: 'Weiter'}"
-        divider="oder"
-    >
-      <template #password-hint>
-        <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
-      </template>
-    </UAuthForm>
-  </div>-->
-</template>
\ No newline at end of file
+      <UForm :state="state" class="space-y-4" @submit="doLogin">
+        <UFormField label="E-Mail" name="email">
+          <UInput
+              v-model="state.email"
+              type="email"
+              class="w-full"
+              placeholder="Deine E-Mail Adresse"
+              autocomplete="email"
+          />
+        </UFormField>
+
+        <UFormField label="Passwort" name="password">
+          <template #hint>
+            <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
+          </template>
+          <UInput
+              v-model="state.password"
+              type="password"
+              class="w-full"
+              placeholder="Dein Passwort"
+              autocomplete="current-password"
+          />
+        </UFormField>
+
+        <UButton type="submit" block class="w-full" :loading="loading">
+          Weiter
+        </UButton>
+      </UForm>
+    </div>
+  </UCard>
+</template>
diff --git a/frontend/pages/password-change.vue b/frontend/pages/password-change.vue
index 099b2c5..e2ae4b0 100644
--- a/frontend/pages/password-change.vue
+++ b/frontend/pages/password-change.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { FormSubmitEvent } from '#ui/types'
+
 definePageMeta({
   layout: "notLoggedIn"
 })
@@ -6,25 +8,31 @@ definePageMeta({
 const auth = useAuthStore()
 const toast = useToast()
 
+const state = reactive({
+  oldPassword: '',
+  newPassword: ''
+})
 
+const loading = ref(false)
 
-
-const doChange = async (data:any) => {
+const doChange = async (event: FormSubmitEvent<typeof state>) => {
+  loading.value = true
   try {
-    const res = await useNuxtApp().$api("/api/auth/password/change", {
+    await useNuxtApp().$api("/api/auth/password/change", {
       method: "POST",
       body: {
-        old_password: data.oldPassword,
-        new_password: data.newPassword,
+        old_password: event.data.oldPassword,
+        new_password: event.data.newPassword,
       }
     })
 
-    // Weiterleiten nach erfolgreichem Login
     toast.add({title:"Ändern erfolgreich"})
     await auth.logout()
     return navigateTo("/login")
   } catch (err: any) {
     toast.add({title:"Es gab ein Problem beim ändern",color:"error"})
+  } finally {
+    loading.value = false
   }
 }
 </script>
@@ -37,26 +45,39 @@ const doChange = async (data:any) => {
         dark="/Logo_Dark.png"
     />
 
-    <UAuthForm
-        title="Passwort zurücksetzen"
-        description="Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten."
-        align="bottom"
-        :fields="[{
-            name: 'oldPassword',
-            label: 'Altes Passwort',
-            type: 'password',
-            placeholder: 'Dein altes Passwort'
-          },{
-            name: 'newPassword',
-            label: 'Neues Passwort',
-            type: 'password',
-            placeholder: 'Dein neues Passwort'
-          }]"
-        :loading="false"
-        @submit="doChange"
-        :submit-button="{label: 'Ändern'}"
-        divider="oder"
-    >
-    </UAuthForm>
+    <div class="mt-6 space-y-5">
+      <div class="space-y-1">
+        <h1 class="text-xl font-semibold">Passwort ändern</h1>
+        <p class="text-sm text-muted">
+          Geben Sie Ihr aktuelles und Ihr neues Passwort ein.
+        </p>
+      </div>
+
+      <UForm :state="state" class="space-y-4" @submit="doChange">
+        <UFormField label="Altes Passwort" name="oldPassword">
+          <UInput
+              v-model="state.oldPassword"
+              type="password"
+              class="w-full"
+              placeholder="Dein altes Passwort"
+              autocomplete="current-password"
+          />
+        </UFormField>
+
+        <UFormField label="Neues Passwort" name="newPassword">
+          <UInput
+              v-model="state.newPassword"
+              type="password"
+              class="w-full"
+              placeholder="Dein neues Passwort"
+              autocomplete="new-password"
+          />
+        </UFormField>
+
+        <UButton type="submit" block class="w-full" :loading="loading">
+          Ändern
+        </UButton>
+      </UForm>
+    </div>
   </UCard>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/pages/password-reset.vue b/frontend/pages/password-reset.vue
index 93db7f7..b1584f1 100644
--- a/frontend/pages/password-reset.vue
+++ b/frontend/pages/password-reset.vue
@@ -1,28 +1,34 @@
 <script setup lang="ts">
+import type { FormSubmitEvent } from '#ui/types'
+
 definePageMeta({
   layout: "notLoggedIn"
 })
 
-const auth = useAuthStore()
 const toast = useToast()
 
+const state = reactive({
+  email: ''
+})
 
+const loading = ref(false)
 
-
-const doReset = async (data:any) => {
+const doReset = async (event: FormSubmitEvent<typeof state>) => {
+  loading.value = true
   try {
-    const res = await useNuxtApp().$api("/auth/password/reset", {
+    await useNuxtApp().$api("/auth/password/reset", {
       method: "POST",
       body: {
-        email: data.email
+        email: event.data.email
       }
     })
 
-    // Weiterleiten nach erfolgreichem Login
     toast.add({title:"Zurücksetzen erfolgreich"})
     return navigateTo("/login")
   } catch (err: any) {
     toast.add({title:"Problem beim zurücksetzen",color:"error"})
+  } finally {
+    loading.value = false
   }
 }
 </script>
@@ -35,21 +41,29 @@ const doReset = async (data:any) => {
         dark="/Logo_Dark.png"
     />
 
-    <UAuthForm
-        title="Passwort zurücksetzen"
-        description="Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten."
-        align="bottom"
-        :fields="[{
-            name: 'email',
-            type: 'text',
-            label: 'Email',
-            placeholder: 'Deine E-Mail Adresse'
-          }]"
-        :loading="false"
-        @submit="doReset"
-        :submit-button="{label: 'Zurücksetzen'}"
-        divider="oder"
-    >
-    </UAuthForm>
+    <div class="mt-6 space-y-5">
+      <div class="space-y-1">
+        <h1 class="text-xl font-semibold">Passwort zurücksetzen</h1>
+        <p class="text-sm text-muted">
+          Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten.
+        </p>
+      </div>
+
+      <UForm :state="state" class="space-y-4" @submit="doReset">
+        <UFormField label="E-Mail" name="email">
+          <UInput
+              v-model="state.email"
+              type="email"
+              class="w-full"
+              placeholder="Deine E-Mail Adresse"
+              autocomplete="email"
+          />
+        </UFormField>
+
+        <UButton type="submit" block class="w-full" :loading="loading">
+          Zurücksetzen
+        </UButton>
+      </UForm>
+    </div>
   </UCard>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/pages/settings/tenant.vue b/frontend/pages/settings/tenant.vue
index 72e9545..850eba8 100644
--- a/frontend/pages/settings/tenant.vue
+++ b/frontend/pages/settings/tenant.vue
@@ -173,6 +173,8 @@ setupPage()
         <UAlert
             class="mt-5"
             title="DOKUBOX"
+            color="neutral"
+            variant="outline"
         >
           <template #description>
             <p>Die Dokubox ist eine E-Mail Inbox um deine Anhänge direkt als Dokumente zu importieren. Leite Deine E-Mails einfach an die folgende E-Mail Adresse weiter, diese ist für dein Unternehmen einzigartig. Die E-Mails werden dann alle 5 min abgerufen.</p>
diff --git a/frontend/pages/standardEntity/[type]/index.vue b/frontend/pages/standardEntity/[type]/index.vue
index 6b43d78..f2d46ef 100644
--- a/frontend/pages/standardEntity/[type]/index.vue
+++ b/frontend/pages/standardEntity/[type]/index.vue
@@ -313,6 +313,20 @@ const truncateValue = (value, maxLength) => {
   return `${stringValue.substring(0, maxLength)}...`
 }
 
+const getDistinctFilterItems = (columnKey) => {
+  return (itemsMeta.value?.distinctValues?.[columnKey] || []).map((value) => ({
+    label: String(value),
+    value
+  }))
+}
+
+const isDistinctFilterActive = (columnKey) => {
+  const available = itemsMeta.value?.distinctValues?.[columnKey] || []
+  const selected = columnsToFilter.value[columnKey] || []
+
+  return selected.length > 0 && selected.length !== available.length
+}
+
 
 
 </script>
@@ -371,7 +385,7 @@ const truncateValue = (value, maxLength) => {
             v-model="pageLimit"
             value-key="value"
             label-key="value"
-            @change="setupPage"
+            @update:model-value="setupPage"
         />
       </UTooltip>
       <UPagination
@@ -400,7 +414,7 @@ const truncateValue = (value, maxLength) => {
             by="key"
             :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
             :content="{ width: 'min-w-max' }"
-            @change="tempStore.modifyColumns(type,selectedColumns)"
+            @update:model-value="tempStore.modifyColumns(type, selectedColumns)"
         >
           <template #default>
             Spalten
@@ -442,32 +456,26 @@ const truncateValue = (value, maxLength) => {
               :text="!columnsToFilter[column.key]?.length > 0 ? `Keine Einträge für ${column.label} verfügbar`  : `${column.label} Spalte nach Einträgen filtern`"
           >
             <USelectMenu
-                :items="(itemsMeta?.distinctValues?.[column.key] || []).map(value => ({ label: value, value }))"
+                class="min-w-0"
+                :items="getDistinctFilterItems(column.key)"
                 v-model="columnsToFilter[column.key]"
                 multiple
-                @change="handleFilterChange('change', column.key)"
+                @update:model-value="handleFilterChange('change', column.key)"
                 :search-input="{ placeholder: 'Suche...' }"
                 value-key="value"
                 label-key="label"
                 :content="{ width: 'min-w-max' }"
+                :disabled="getDistinctFilterItems(column.key).length === 0"
             >
 
               <template #empty>
                 Keine Einträge in der Spalte {{column.label}}
               </template>
               <template #default="slotProps">
-                <UButton
-                    :disabled="!columnsToFilter[column.key]?.length > 0"
-                    :variant="columnsToFilter[column.key]?.length !== itemsMeta.distinctValues?.[column.key]?.length ? 'outline' : 'solid'"
-                    :color="columnsToFilter[column.key]?.length !== itemsMeta.distinctValues?.[column.key]?.length ? 'primary' : 'white'"
-                >
+                <span class="inline-flex min-w-0 items-center">
                   <span class="truncate">{{ column.label }}</span>
-
-                  <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="[slotProps?.open && 'transform rotate-90']" />
-                </UButton>
+                </span>
               </template>
-
-
             </USelectMenu>
           </UTooltip>
           <UButton
@@ -700,12 +708,15 @@ const truncateValue = (value, maxLength) => {
 
             <USelectMenu
                 v-model="columnsToFilter[column.key]"
-                :options="itemsMeta?.distinctValues?.[column.key]"
+                :items="getDistinctFilterItems(column.key)"
                 multiple
-                searchable
-                :search-attributes="[column.key]"
+                value-key="value"
+                label-key="label"
+                :search-input="{ placeholder: `${column.label} filtern...` }"
+                :filter-fields="['label']"
                 placeholder="Auswählen…"
-                :ui-menu="{ width: '100%' }"
+                :content="{ width: 'w-full' }"
+                class="w-full"
             />
           </div>