3. Zwischenstand

2026-03-22 13:53:29 +01:00
parent 03bcc1a939
commit 9f665fc3b8
26 changed files with 2037 additions and 583 deletions
--- 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/>
--- 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, {
--- 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>
--- 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>
--- 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'"
--- 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"
  >
--- 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",
--- a/frontend/components/UCalendar.vue
+++ 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>
--- a/frontend/components/UDashboardNavbar.vue
+++ 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>
--- 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>
--- 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>
--- 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>

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

--- 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/>
--- a/frontend/pages/accounting/bwa.vue
+++ 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>
--- 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}">
--- 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>
--- a/frontend/pages/createDocument/edit/[[id]].vue
+++ b/frontend/pages/createDocument/edit/[[id]].vue
--- 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>
--- 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>
--- 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}">
--- 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>-->
+      <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>
--- 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>
--- 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>
--- 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>
--- 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>