Fix Phases

fix #142

backend/src/routes/functions.ts

@@ -3,7 +3,7 @@ import {createInvoicePDF, createTimeSheetPDF} from "../utils/pdf";
 import {encodeBase64ToNiimbot, generateLabel, useNextNumberRangeNumber} from "../utils/functions";
 import { GetObjectCommand } from "@aws-sdk/client-s3";
 import { execFile } from "node:child_process";
-import { existsSync } from "node:fs";
+import { existsSync, readFileSync } from "node:fs";
 import path from "node:path";
 import { promisify } from "node:util";
 import dayjs from "dayjs";
@@ -57,6 +57,42 @@ function resolveGitRoot() {
     return null
 }
 
+function getDeploymentChangelogFallback() {
+    const backendPackagePath = path.resolve(process.cwd(), "package.json")
+    let version = "unbekannt"
+
+    if (existsSync(backendPackagePath)) {
+        try {
+            const packageJson = JSON.parse(readFileSync(backendPackagePath, "utf-8"))
+            version = packageJson?.version || version
+        } catch (err) {
+            console.error("Could not read backend package.json for changelog fallback", err)
+        }
+    }
+
+    const commitHash =
+        process.env.RAILWAY_GIT_COMMIT_SHA ||
+        process.env.VERCEL_GIT_COMMIT_SHA ||
+        process.env.GITHUB_SHA ||
+        process.env.COMMIT_SHA ||
+        process.env.SOURCE_COMMIT ||
+        null
+
+    const committedAt =
+        process.env.BUILD_DATE ||
+        process.env.RENDER_GIT_COMMIT_DATE ||
+        process.env.VERCEL_GIT_COMMIT_DATE ||
+        new Date().toISOString()
+
+    return [{
+        hash: commitHash || `version-${version}`,
+        shortHash: commitHash ? commitHash.slice(0, 7) : `v${version}`,
+        subject: `Bereitgestellte Version ${version}`,
+        authorName: "Deployment",
+        committedAt
+    }]
+}
+
 export default async function functionRoutes(server: FastifyInstance) {
     const streamToBuffer = async (stream: any): Promise<Buffer> =>
         new Promise((resolve, reject) => {
@@ -201,7 +237,11 @@ export default async function functionRoutes(server: FastifyInstance) {
         const gitRoot = resolveGitRoot()
 
         if (!gitRoot) {
-            return reply.code(500).send({ error: 'Git repository not found' })
+            return reply.send({
+                repositoryRoot: null,
+                source: 'deployment',
+                entries: getDeploymentChangelogFallback().slice(0, safeLimit)
+            })
         }
 
         try {
@@ -232,11 +272,16 @@ export default async function functionRoutes(server: FastifyInstance) {
 
             return reply.send({
                 repositoryRoot: gitRoot,
+                source: 'git',
                 entries
             })
         } catch (err) {
             req.log.error(err)
-            return reply.code(500).send({ error: 'Failed to load changelog' })
+            return reply.send({
+                repositoryRoot: gitRoot,
+                source: 'deployment',
+                entries: getDeploymentChangelogFallback().slice(0, safeLimit)
+            })
         }
     })
 

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

frontend/components/DocumentUploadModal.vue

@@ -1,23 +1,22 @@
 <script setup>
-// Falls useDropZone nicht auto-importiert wird:
-// import { useDropZone } from '@vueuse/core'
-
 const props = defineProps({
   fileData: {
     type: Object,
-    default: {
+    default: () => ({
       type: null
-    }
+    })
   }
 })
 
 const emit = defineEmits(["uploadFinished"])
 
 const modal = useModal()
-// const profileStore = useProfileStore() // Wird im Snippet nicht genutzt, aber ich lasse es drin
 
 const uploadInProgress = ref(false)
 const availableFiletypes = ref([])
+const localFileData = reactive({
+  ...props.fileData
+})
 
 // 1. State für die Dateien und die Dropzone Referenz
 const selectedFiles = ref([])
@@ -58,10 +57,8 @@ const uploadFiles = async () => {
 
   uploadInProgress.value = true;
 
-  let fileData = props.fileData
+  const { typeEnabled, ...fileData } = localFileData
-  delete fileData.typeEnabled
 
-  // 4. Hier nutzen wir nun selectedFiles.value statt document.getElementById
   await useFiles().uploadFiles(fileData, selectedFiles.value, [], true)
 
   uploadInProgress.value = false;
@@ -80,12 +77,11 @@ const fileNames = computed(() => {
   <UModal>
     <template #content>
       <div ref="dropZoneRef" class="relative h-full flex flex-col">
-
         <div
             v-if="isOverDropZone"
-            class="absolute inset-0 z-50 flex items-center justify-center bg-primary-500/10 border-2 border-primary-500 border-dashed rounded-lg backdrop-blur-sm transition-all"
+            class="absolute inset-0 z-50 flex items-center justify-center rounded-lg border-2 border-dashed border-primary-500 bg-primary-500/10 backdrop-blur-sm transition-all"
         >
-          <span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
+          <span class="rounded bg-white/80 px-4 py-2 text-xl font-bold text-primary-600 shadow-sm">
             Dateien hier ablegen
           </span>
         </div>
@@ -130,16 +126,17 @@ const fileNames = computed(() => {
               class="mt-3"
           >
             <USelectMenu
-                option-attribute="name"
+                :items="availableFiletypes"
-                value-attribute="id"
+                v-model="localFileData.type"
-                searchable
+                value-key="id"
-                searchable-placeholder="Suchen..."
+                label-key="name"
-                :options="availableFiletypes"
+                :search-input="{ placeholder: 'Suchen...' }"
-                v-model="props.fileData.type"
+                :filter-fields="['name']"
-                :disabled="!props.fileData.typeEnabled"
+                :disabled="!localFileData.typeEnabled"
+                class="w-full"
             >
-              <template #label>
+              <template #default>
-                <span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
+                <span v-if="availableFiletypes.find(x => x.id === localFileData.type)">{{ availableFiletypes.find(x => x.id === localFileData.type).name }}</span>
                 <span v-else>Kein Typ ausgewählt</span>
               </template>
             </USelectMenu>
@@ -159,5 +156,4 @@ const fileNames = computed(() => {
 </template>
 
 <style scoped>
-/* Optional: Animationen für das Overlay */
 </style>

frontend/components/EntityEdit.vue

@@ -174,6 +174,49 @@ const setupQuery = () => {
 setupQuery()
 
 const loadedOptions = ref({})
+
+const normalizeSelectFieldValue = (value, isMultiple = false) => {
+  if (isMultiple) {
+    if (!Array.isArray(value)) return []
+
+    return value.map((entry) => {
+      if (entry && typeof entry === "object" && "id" in entry) {
+        return entry.id
+      }
+
+      return entry
+    })
+  }
+
+  if (value && typeof value === "object" && "id" in value) {
+    return value.id
+  }
+
+  return value
+}
+
+const normalizeLoadedSelectValues = () => {
+  dataType.templateColumns.forEach((datapoint) => {
+    if (datapoint.inputType !== "select") return
+
+    if (datapoint.key.includes(".")) {
+      const [parentKey, childKey] = datapoint.key.split(".")
+      if (!item.value[parentKey]) return
+
+      item.value[parentKey][childKey] = normalizeSelectFieldValue(
+        item.value[parentKey][childKey],
+        datapoint.selectMultiple
+      )
+      return
+    }
+
+    item.value[datapoint.key] = normalizeSelectFieldValue(
+      item.value[datapoint.key],
+      datapoint.selectMultiple
+    )
+  })
+}
+
 const loadOptions = async () => {
   let optionsToLoad = dataType.templateColumns.filter(i => i.selectDataType).map(i => {
     return {
@@ -184,9 +227,9 @@ const loadOptions = async () => {
 
   for await(const option of optionsToLoad) {
     if (option.option === "countrys") {
-      loadedOptions.value[option.option] = useEntities("countrys").selectSpecial()
+      loadedOptions.value[option.option] = await useEntities("countrys").selectSpecial()
     } else if (option.option === "units") {
-      loadedOptions.value[option.option] = useEntities("units").selectSpecial()
+      loadedOptions.value[option.option] = await useEntities("units").selectSpecial()
     } else {
       loadedOptions.value[option.option] = (await useEntities(option.option).select())
 
@@ -198,6 +241,7 @@ const loadOptions = async () => {
 }
 
 loadOptions()
+normalizeLoadedSelectValues()
 
 const contentChanged = (content, datapoint) => {
   if (datapoint.key.includes(".")) {
@@ -227,6 +271,12 @@ const getSelectSearchInput = (datapoint) => {
   return datapoint.selectSearchAttributes ? { placeholder: 'Suche...' } : false
 }
 
+const triggerInputChange = (datapoint) => {
+  if (datapoint.inputChangeFunction) {
+    datapoint.inputChangeFunction(item.value, loadedOptions.value)
+  }
+}
+
 
 const createItem = async () => {
   let ret = null
@@ -393,7 +443,7 @@ const updateItem = async () => {
                 <USelectMenu
                     :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
                     class="flex-auto"
-                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                    @update:model-value="triggerInputChange(datapoint)"
                     v-else-if="datapoint.inputType === 'select'"
                     v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
@@ -498,7 +548,7 @@ const updateItem = async () => {
                 <USelectMenu
                     :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
                     class="flex-auto"
-                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                    @update:model-value="triggerInputChange(datapoint)"
                     v-else-if="datapoint.inputType === 'select'"
                     v-model="item[datapoint.key]"
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
@@ -626,7 +676,7 @@ const updateItem = async () => {
           <USelectMenu
               :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'error') : 'white'"
               class="flex-auto"
-              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+              @update:model-value="triggerInputChange(datapoint)"
               v-else-if="datapoint.inputType === 'select'"
               v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
@@ -731,7 +781,7 @@ const updateItem = async () => {
           <USelectMenu
               :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'error') : 'white'"
               class="flex-auto"
-              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+              @update:model-value="triggerInputChange(datapoint)"
               v-else-if="datapoint.inputType === 'select'"
               v-model="item[datapoint.key]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"

frontend/components/EntityModalButtons.vue

@@ -39,7 +39,9 @@ const modal = useModal()
 <template>
   <UButton
       variant="outline"
-      class="w-25 ml-2"
+      size="sm"
+      square
+      class="ml-2 shrink-0"
       v-if="props.id && props.buttonShow"
       icon="i-heroicons-eye"
       @click="modal.open(StandardEntityModal, {
@@ -50,7 +52,9 @@ const modal = useModal()
   />
   <UButton
       variant="outline"
-      class="w-25 ml-2"
+      size="sm"
+      square
+      class="ml-2 shrink-0"
       v-if="props.id && props.buttonEdit"
       icon="i-heroicons-pencil-solid"
       @click="modal.open(StandardEntityModal, {
@@ -64,7 +68,9 @@ const modal = useModal()
   />
   <UButton
       variant="outline"
-      class="w-25 ml-2"
+      size="sm"
+      square
+      class="ml-2 shrink-0"
       v-if="!props.id && props.buttonCreate"
       icon="i-heroicons-plus"
       @click="modal.open(StandardEntityModal, {
@@ -80,4 +86,4 @@ const modal = useModal()
 
 <style scoped>
 
-</style>
+</style>

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>

frontend/components/EntityShowSubOwnAccountsStatements.vue

@@ -1,7 +1,7 @@
 <script setup>
-import dayjs from "dayjs";
+import dayjs from "dayjs"
-const router = useRouter()
 
+const router = useRouter()
 
 const props = defineProps({
   queryStringData: {
@@ -21,83 +21,260 @@ const props = defineProps({
   }
 })
 
-const statementallocations = ref([])
+const loading = ref(true)
-const incominginvoices = ref([])
+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) => {
+const unwrapAllocationRow = (allocationLike) => allocationLike?.original || allocationLike
-  if(allocation.type === "statementallocation") {
+
-    router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
+const selectAllocation = (allocationLike) => {
-  } else if(allocation.type === "incominginvoice") {
+  const allocation = unwrapAllocationRow(allocationLike)
-    router.push(`/incominginvoices/show/${allocation.incominginvoiceid}`)
+
+  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
+    <div class="space-y-4">
-        v-if="props.item.statementallocations"
+      <div class="flex flex-col gap-3 md:flex-row md:items-end">
-        :data="renderedAllocations"
+        <UFormField label="Jahr" class="w-full md:w-48">
-        :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
+          <USelectMenu
-        :on-select="(i) => selectAllocation(i)"
+              v-model="selectedYear"
-        :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+              :items="yearItems"
-    >
+              value-key="value"
-      <template #amount-cell="{row}">
+              label-key="label"
-        <span class="text-right text-rose-600" v-if="row.original.amount < 0 || row.original.color === 'red'">{{useCurrency(row.original.amount)}}</span>
+              class="w-full"
-        <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>
+        </UFormField>
-      </template>
+
-      <template #date-cell="{row}">
+        <UFormField label="Monat" class="w-full md:w-56">
-        {{row.original.date ? dayjs(row.original.date).format('DD.MM.YYYY') : ''}}
+          <USelectMenu
-      </template>
+              v-model="selectedMonth"
-      <template #description-cell="{row}">
+              :items="monthItems"
-        {{row.original.description ? row.original.description : ''}}
+              value-key="value"
-      </template>
+              label-key="label"
-    </UTable>
+              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>

frontend/components/EntityShowSubPhases.vue

@@ -25,30 +25,42 @@ const emit = defineEmits(["updateNeeded"]);
 const router = useRouter()
 const profileStore = useProfileStore()
 const auth = useAuthStore()
+const openPhaseKey = ref(null)
+
+const isPhaseAvailable = (phase, index, phases) => {
+  if (phase.label === "Abgeschlossen" || phase.active) {
+    return true
+  }
+
+  const activeIndex = phases.findIndex((item) => item.active)
+
+  if (activeIndex > index) {
+    return true
+  }
+
+  if (activeIndex === -1) {
+    return index === 0
+  }
+
+  if (index === activeIndex + 1) {
+    return true
+  }
+
+  if (index <= activeIndex) {
+    return true
+  }
+
+  return phases.slice(activeIndex + 1, index).every((item) => item.optional)
+}
 
 const renderedPhases = computed(() => {
   if(props.topLevelType === "projects" && props.item.phases) {
     return props.item.phases.map((phase,index,array) => {
 
-      let isAvailable = false
-
-      if(phase.active) {
-        isAvailable = true
-      } else if(index > 0 && array[index-1].active ){
-        isAvailable = true
-      } else if(index > 1 && array[index-1].optional && array[index-2].active){
-        isAvailable = true
-      } else if(array.findIndex(i => i.active) > index) {
-        isAvailable = true
-      } else if(phase.label === "Abgeschlossen") {
-        isAvailable = true
-      }
-
-
       return {
         ...phase,
         label: phase.optional ? `${phase.label}(optional)`: phase.label,
-        disabled: !isAvailable,
+        disabled: !isPhaseAvailable(phase, index, array),
         defaultOpen: phase.active ? true : false
       }
     })
@@ -57,6 +69,33 @@ const renderedPhases = computed(() => {
   }
 })
 
+watch(renderedPhases, (phases) => {
+  if (!phases.length) {
+    openPhaseKey.value = null
+    return
+  }
+
+  const activePhase = phases.find((phase) => phase.active)
+  const currentPhaseStillExists = phases.some((phase) => phase.key === openPhaseKey.value)
+
+  if (activePhase) {
+    openPhaseKey.value = activePhase.key
+    return
+  }
+
+  if (!currentPhaseStillExists) {
+    openPhaseKey.value = phases[0].key
+  }
+}, { immediate: true })
+
+const togglePhasePanel = (phase) => {
+  if (phase.disabled) {
+    return
+  }
+
+  openPhaseKey.value = openPhaseKey.value === phase.key ? null : phase.key
+}
+
 const changeActivePhase = async (key) => {
   console.log(props.item)
   let item = await useEntities("projects").selectSingle(props.item.id,'*')
@@ -92,41 +131,41 @@ const changeActivePhase = async (key) => {
     <template #header v-if="props.platform === 'mobile'">
       <span>Phasen</span>
     </template>
-    <UAccordion
+    <div class="space-y-2">
-        :items="renderedPhases"
+      <div
-    >
+          v-for="(item, index) in renderedPhases"
-      <template #default="slotProps">
+          :key="item.key"
+          class="space-y-2"
+      >
         <UButton
             variant="ghost"
-            :color="slotProps.item.active ? 'primary' : 'white'"
+            :color="item.active ? 'primary' : 'neutral'"
-            class="mb-1"
+            class="w-full justify-start"
-            :disabled="true"
+            :disabled="item.disabled"
+            @click="togglePhasePanel(item)"
         >
           <template #leading>
-            <div class="w-6 h-6  flex items-center justify-center -my-1">
+            <div class="w-6 h-6 flex items-center justify-center -my-1">
-              <UIcon :name="slotProps.item.icon" class="w-4 h-4 " />
+              <UIcon :name="item.icon" class="w-4 h-4" />
             </div>
           </template>
 
-          <span class="truncate"> {{ slotProps.item.label }}</span>
+          <span class="truncate">{{ item.label }}</span>
 
           <template #trailing>
             <UIcon
                 name="i-heroicons-chevron-right-20-solid"
                 class="w-5 h-5 ms-auto transform transition-transform duration-200"
-                :class="[slotProps?.open && 'rotate-90']"
+                :class="[openPhaseKey === item.key && 'rotate-90']"
             />
           </template>
-
         </UButton>
-      </template>
+
-      <template #item="{item, index}">
+        <UCard v-if="openPhaseKey === item.key" class="mx-5">
-        <UCard class="mx-5">
           <template #header>
-            <span class="dark:text-white text-black">{{item.label}}</span>
+            <span class="dark:text-white text-black">{{ item.label }}</span>
           </template>
           <InputGroup>
-            <!-- TODO: Reactive Change Phase                  -->
             <UButton
                 v-if="!item.activated_at && index !== 0 "
                 @click="changeActivePhase(item.key)"
@@ -148,10 +187,8 @@ const changeActivePhase = async (key) => {
             <p v-if="item.description" class="dark:text-white text-black">Beschreibung: {{item.description}}</p>
           </div>
         </UCard>
-
+      </div>
-
+    </div>
-      </template>
-    </UAccordion>
   </UCard>
 
 </template>

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

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

frontend/components/MainNav.vue

@@ -136,25 +136,37 @@ const links = computed(() => {
       to: "/incomingInvoices",
       icon: "i-heroicons-document-text",
     } : null,
-    (featureEnabled("createDocument") || featureEnabled("incomingInvoices")) ? {
+    ((featureEnabled("createDocument") || featureEnabled("incomingInvoices")) || featureEnabled("accounts") || featureEnabled("ownaccounts") || featureEnabled("costcentres")) ? {
-      label: "USt-Auswertung",
+      label: "Auswertungen",
-      to: "/accounting/tax",
+      icon: "i-heroicons-chart-pie",
-      icon: "i-heroicons-calculator",
+      defaultOpen: false,
-    } : null,
+      children: visibleItems([
-    featureEnabled("costcentres") ? {
+        (featureEnabled("createDocument") || featureEnabled("incomingInvoices")) ? {
-      label: "Kostenstellen",
+          label: "USt",
-      to: "/standardEntity/costcentres",
+          to: "/accounting/tax",
-      icon: "i-heroicons-document-currency-euro"
+          icon: "i-heroicons-calculator",
-    } : null,
+        } : null,
-    featureEnabled("accounts") ? {
+        (featureEnabled("createDocument") || featureEnabled("incomingInvoices") || featureEnabled("accounts") || featureEnabled("ownaccounts")) ? {
-      label: "Buchungskonten",
+          label: "BWA",
-      to: "/accounts",
+          to: "/accounting/bwa",
-      icon: "i-heroicons-document-text",
+          icon: "i-heroicons-chart-bar-square",
-    } : null,
+        } : null,
-    featureEnabled("ownaccounts") ? {
+        featureEnabled("costcentres") ? {
-      label: "zusätzliche Buchungskonten",
+          label: "Kostenstellen",
-      to: "/standardEntity/ownaccounts",
+          to: "/standardEntity/costcentres",
-      icon: "i-heroicons-document-text"
+          icon: "i-heroicons-document-currency-euro"
+        } : null,
+        featureEnabled("accounts") ? {
+          label: "Buchungskonten",
+          to: "/accounts",
+          icon: "i-heroicons-document-text",
+        } : null,
+        featureEnabled("ownaccounts") ? {
+          label: "Zusätzliche Buchungskonten",
+          to: "/standardEntity/ownaccounts",
+          icon: "i-heroicons-document-text"
+        } : null,
+      ])
     } : null,
     featureEnabled("banking") ? {
       label: "Bank",
@@ -396,31 +408,31 @@ const links = computed(() => {
   ])
 })
 
+const mapNavItem = (item, valuePrefix = "item") => {
+  const children = Array.isArray(item.children)
+    ? item.children
+      .filter(Boolean)
+      .map((child, index) => mapNavItem(child, `${valuePrefix}-${index}`))
+    : undefined
+
+  const active = item.active || isRouteActive(item.to) || Boolean(children?.some(child => child.active))
+
+  return {
+    ...item,
+    children,
+    value: item.id || item.label || valuePrefix,
+    defaultOpen: item.defaultOpen || active,
+    active,
+    tooltip: true,
+    popover: true,
+    trailingIcon: children?.length ? undefined : ''
+  }
+}
+
 const navItems = computed(() =>
   links.value
     .filter(Boolean)
-    .map((item, index) => {
+    .map((item, index) => mapNavItem(item, String(index)))
-      const children = Array.isArray(item.children)
-        ? item.children.map((child, childIndex) => ({
-          ...child,
-          value: child.id || child.label || `${index}-${childIndex}`,
-          active: isRouteActive(child.to)
-        }))
-        : undefined
-
-      const active = item.active || isRouteActive(item.to) || Boolean(children?.some(child => child.active))
-
-      return {
-        ...item,
-        children,
-        value: item.id || item.label || String(index),
-        defaultOpen: item.defaultOpen || active,
-        active,
-        tooltip: true,
-        popover: true,
-        trailingIcon: children?.length ? undefined : ''
-      }
-    })
 )
 </script>
 

frontend/components/StandardEntityModal.vue

@@ -75,7 +75,7 @@ setupPage()
           :type="props.type"
           :item="item"
           :inModal="true"
-          @return-data="(data) => emit('return-data',data)"
+          @return-data="(data) => emit('returnData', data)"
           :createQuery="props.createQuery"
           :mode="props.mode"
       />

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>

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>

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>

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}}
+  <div class="space-y-4">
-  {{incomingInvoices}}
+    <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>

frontend/components/displayBWASummary.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import dayjs from "dayjs"
+import {
+  getCreatedDocumentTaxBreakdown,
+  getIncomingInvoiceTaxBreakdown
+} from "~/composables/useTaxEvaluation"
+
+const loading = ref(true)
+const summary = ref({
+  label: "",
+  income: 0,
+  expenses: 0,
+  result: 0,
+  taxBalance: 0,
+  incomeCount: 0,
+  expenseCount: 0
+})
+
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat("de-DE", {
+    style: "currency",
+    currency: "EUR"
+  }).format(Number(value || 0))
+}
+
+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 loadSummary = async () => {
+  loading.value = true
+
+  try {
+    const bounds = {
+      start: dayjs().startOf("month"),
+      end: dayjs().endOf("month")
+    }
+
+    const [docs, incoming, allocations] = await Promise.all([
+      useEntities("createddocuments").select(),
+      useEntities("incominginvoices").select(),
+      useEntities("statementallocations").select("*, bankstatement(*)")
+    ])
+
+    const outputDocs = (docs || []).filter((doc: any) => {
+      if (!isRelevantOutputDocument(doc)) {
+        return false
+      }
+
+      const date = dayjs(doc.documentDate)
+      return date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
+    })
+
+    const inputDocs = (incoming || []).filter((invoice: any) => {
+      if (!isRelevantInputInvoice(invoice)) {
+        return false
+      }
+
+      const date = dayjs(invoice.date)
+      return date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
+    })
+
+    const directExpenses = (allocations || []).filter((allocation: any) => {
+      if (allocation?.account === null || typeof allocation?.account === "undefined") {
+        return false
+      }
+
+      const statementDate = allocation?.bankstatement?.date || allocation?.bankstatement?.valueDate || allocation?.date || allocation?.created_at
+      const date = dayjs(statementDate)
+      const amount = Number(allocation?.amount || 0)
+
+      return amount < 0 && date.isValid() && !date.isBefore(bounds.start, "day") && !date.isAfter(bounds.end, "day")
+    })
+
+    const income = outputDocs.reduce((sum: number, doc: any) => {
+      return sum + (doc.rows || []).reduce((rowSum: number, row: any) => {
+        if (!row || ["pagebreak", "title", "text"].includes(row.mode)) {
+          return rowSum
+        }
+
+        const quantity = Number(row.quantity || 0)
+        const price = Number(row.price || 0)
+        const discountPercent = Number(row.discountPercent || 0)
+
+        return rowSum + (quantity * price * (1 - discountPercent / 100))
+      }, 0)
+    }, 0)
+
+    const invoiceExpenses = inputDocs.reduce((sum: number, invoice: any) => {
+      return sum + (invoice.accounts || []).reduce((accountSum: number, account: any) => accountSum + Number(account.amountNet || 0), 0)
+    }, 0)
+
+    const directAccountExpenses = directExpenses.reduce((sum: number, allocation: any) => {
+      return sum + Math.abs(Number(allocation.amount || 0))
+    }, 0)
+
+    const outputTax = outputDocs.reduce((sum: number, doc: any) => {
+      const breakdown = getCreatedDocumentTaxBreakdown(doc)
+      return sum + breakdown.tax19 + breakdown.tax7
+    }, 0)
+
+    const inputTax = inputDocs.reduce((sum: number, invoice: any) => {
+      const breakdown = getIncomingInvoiceTaxBreakdown(invoice)
+      return sum + breakdown.tax19 + breakdown.tax7
+    }, 0)
+
+    const expenses = invoiceExpenses + directAccountExpenses
+
+    summary.value = {
+      label: dayjs().format("MMMM YYYY"),
+      income: Number(income.toFixed(2)),
+      expenses: Number(expenses.toFixed(2)),
+      result: Number((income - expenses).toFixed(2)),
+      taxBalance: Number((outputTax - inputTax).toFixed(2)),
+      incomeCount: outputDocs.length,
+      expenseCount: inputDocs.length + directExpenses.length
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadSummary)
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="bwa-summary-top">
+      <div>
+        <p class="bwa-summary-period">{{ summary.label }}</p>
+        <p class="bwa-summary-range">Aktueller Monat</p>
+      </div>
+      <UButton
+        size="xs"
+        variant="soft"
+        color="gray"
+        icon="i-heroicons-arrow-top-right-on-square"
+        @click="navigateTo('/accounting/bwa')"
+      >
+        Details
+      </UButton>
+    </div>
+
+    <div class="bwa-summary-row">
+      <span class="bwa-summary-label">Einnahmen</span>
+      <span class="bwa-summary-value text-primary-500">
+        {{ loading ? "..." : formatCurrency(summary.income) }}
+      </span>
+    </div>
+
+    <div class="bwa-summary-row">
+      <span class="bwa-summary-label">Ausgaben</span>
+      <span class="bwa-summary-value text-error">
+        {{ loading ? "..." : formatCurrency(summary.expenses) }}
+      </span>
+    </div>
+
+    <div class="bwa-summary-row">
+      <span class="bwa-summary-label">Ergebnis</span>
+      <span class="bwa-summary-value" :class="summary.result >= 0 ? 'text-primary-500' : 'text-error'">
+        {{ loading ? "..." : formatCurrency(summary.result) }}
+      </span>
+    </div>
+
+    <div class="bwa-summary-meta">
+      {{ summary.incomeCount }} Einnahmenbelege | {{ summary.expenseCount }} Ausgabenbelege | USt-Saldo {{ formatCurrency(summary.taxBalance) }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bwa-summary-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.bwa-summary-period {
+  margin: 0;
+  font-weight: 700;
+  color: rgb(17 24 39);
+}
+
+.bwa-summary-range,
+.bwa-summary-meta {
+  margin: 0;
+  font-size: 0.875rem;
+  color: rgb(107 114 128);
+}
+
+.bwa-summary-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.bwa-summary-label {
+  color: rgb(55 65 81);
+}
+
+.bwa-summary-value {
+  font-weight: 700;
+  text-align: right;
+}
+
+:deep(.dark) .bwa-summary-period {
+  color: rgb(243 244 246);
+}
+
+:deep(.dark) .bwa-summary-range,
+:deep(.dark) .bwa-summary-meta,
+:deep(.dark) .bwa-summary-label {
+  color: rgb(156 163 175);
+}
+</style>

frontend/components/materialComposing.vue

@@ -72,18 +72,26 @@ const setRowData = (row) => {
       + Artikel
     </UButton>
 
-    <table class="w-full mt-3">
+    <div class="mt-3 overflow-x-auto">
-      <tr>
+      <table class="w-full min-w-[44rem] table-fixed">
-        <th>Artikel</th>
+        <thead>
-        <th>Menge</th>
+          <tr class="border-b border-gray-200 dark:border-gray-800">
-        <th>Einheit</th>
+            <th class="px-2 py-2 text-left font-medium">Artikel</th>
-        <th>Verkaufspreis</th>
+            <th class="px-2 py-2 text-left font-medium">Menge</th>
-      </tr>
+            <th class="px-2 py-2 text-left font-medium">Einheit</th>
-      <tr
+            <th class="px-2 py-2 text-left font-medium">Verkaufspreis</th>
-          v-for="product in props.item.materialComposition"
+            <th class="w-12 px-2 py-2"></th>
-      >
+          </tr>
-        <td>
+        </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>
+          </tr>
-    </table>
+        </tbody>
+      </table>
+    </div>
   </UCard>
 </template>
 

frontend/components/personalComposing.vue

@@ -73,19 +73,27 @@ const setRowData = (row) => {
       + Stundensatz
     </UButton>
 
-    <table class="w-full mt-3">
+    <div class="mt-3 overflow-x-auto">
-      <tr>
+      <table class="w-full min-w-[52rem] table-fixed">
-        <th>Name</th>
+        <thead>
-        <th>Menge</th>
+          <tr class="border-b border-gray-200 dark:border-gray-800">
-        <th>Einheit</th>
+            <th class="px-2 py-2 text-left font-medium">Name</th>
-        <th>Einkaufpreis</th>
+            <th class="px-2 py-2 text-left font-medium">Menge</th>
-        <th>Verkaufspreis</th>
+            <th class="px-2 py-2 text-left font-medium">Einheit</th>
-      </tr>
+            <th class="px-2 py-2 text-left font-medium">Einkaufspreis</th>
-      <tr
+            <th class="px-2 py-2 text-left font-medium">Verkaufspreis</th>
-          v-for="row in props.item.personalComposition"
+            <th class="w-12 px-2 py-2"></th>
-      >
+          </tr>
-        <td>
+        </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>
+            <template #default>
-              {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
+              {{ hourrates.find(i => i.id === row.hourrate)?.name || 'Kein Stundensatz ausgewählt' }}
-            </template>-->
+            </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>
+          </tr>
-    </table>
+        </tbody>
+      </table>
+    </div>
   </UCard>
 </template>
 

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

frontend/pages/accounting/bwa.vue

@@ -0,0 +1,600 @@
+<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: "gross", header: "Brutto" },
+  { accessorKey: "net", header: "Netto" },
+  { accessorKey: "tax", header: "Steuer" },
+  { accessorKey: "number", header: "Nummer" },
+  { accessorKey: "label", header: "Konto" },
+  { accessorKey: "bookings", header: "Buchungen" }
+]
+
+const ownAccountColumns = [
+  { accessorKey: "balance", header: "Saldo" },
+  { accessorKey: "expenses", header: "Ausgaben" },
+  { accessorKey: "income", header: "Einnahmen" },
+  { accessorKey: "number", header: "Nummer" },
+  { accessorKey: "label", header: "Konto" },
+  { accessorKey: "bookings", header: "Buchungen" }
+]
+
+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 filteredAccountStatementAllocations = computed(() => {
+  return filteredStatementAllocations.value.filter((allocation) => allocation.account !== null && allocation.account !== undefined)
+})
+
+const incomeTotal = computed(() => {
+  return Number(filteredDocuments.value.reduce((sum, doc) => sum + computeDocumentNet(doc), 0).toFixed(2))
+})
+
+const expenseNetTotal = computed(() => {
+  const invoiceExpenses = filteredIncomingInvoices.value.reduce((sum, invoice) => {
+    return sum + (invoice.accounts || []).reduce((accountSum: number, account: any) => accountSum + Number(account.amountNet || 0), 0)
+  }, 0)
+
+  const directAccountExpenses = filteredAccountStatementAllocations.value.reduce((sum, allocation) => {
+    const amount = Number(allocation.amount || 0)
+    return amount < 0 ? sum + Math.abs(amount) : sum
+  }, 0)
+
+  return Number((invoiceExpenses + directAccountExpenses).toFixed(2))
+})
+
+const expenseGrossTotal = computed(() => {
+  const invoiceExpenses = filteredIncomingInvoices.value.reduce((sum, invoice) => sum + computeIncomingInvoiceGross(invoice), 0)
+
+  const directAccountExpenses = filteredAccountStatementAllocations.value.reduce((sum, allocation) => {
+    const amount = Number(allocation.amount || 0)
+    return amount < 0 ? sum + Math.abs(amount) : sum
+  }, 0)
+
+  return Number((invoiceExpenses + directAccountExpenses).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 incomeDocumentCount = computed(() => filteredDocuments.value.length)
+const expenseDocumentCount = computed(() => {
+  return filteredIncomingInvoices.value.length + filteredAccountStatementAllocations.value.length
+})
+
+const accountRows = computed(() => {
+  return accounts.value
+    .map((account) => {
+      const invoiceBookings = filteredIncomingInvoices.value.flatMap((invoice) => {
+        return (invoice.accounts || [])
+          .filter((invoiceAccount: any) => sameId(invoiceAccount.account?.id || invoiceAccount.account, account.id))
+          .map((invoiceAccount: any) => ({
+            type: "incominginvoice",
+            amountNet: Number(invoiceAccount.amountNet || 0),
+            amountTax: Number(invoiceAccount.amountTax || 0),
+            amountGross: Number.isFinite(Number(invoiceAccount.amountGross))
+              ? Number(invoiceAccount.amountGross)
+              : Number(invoiceAccount.amountNet || 0) + Number(invoiceAccount.amountTax || 0)
+          }))
+      })
+
+      const directBookings = filteredAccountStatementAllocations.value
+        .filter((allocation) => sameId(allocation.account?.id || allocation.account, account.id))
+        .map((allocation) => {
+          const amount = Number(allocation.amount || 0)
+
+          return {
+            type: "statementallocation",
+            amountNet: amount,
+            amountTax: 0,
+            amountGross: amount
+          }
+        })
+
+      const bookings = [...invoiceBookings, ...directBookings]
+
+      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) => Math.abs(Number(right.gross)) - Math.abs(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">
+
+  </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">
+            {{ incomeDocumentCount }} 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">Einnahmen Belege</div>
+          <div class="mt-2 text-2xl font-semibold">{{ incomeDocumentCount }}</div>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            Ausgangsbelege im Zeitraum
+          </div>
+        </UCard>
+
+        <UCard class="min-w-0">
+          <div class="text-sm text-gray-500 dark:text-gray-400">Ausgaben Belege</div>
+          <div class="mt-2 text-2xl font-semibold">{{ expenseDocumentCount }}</div>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            Eingangsbelege plus direkte Buchungen
+          </div>
+        </UCard>
+      </div>
+
+      <div class="grid min-w-0 gap-4 md:grid-cols-2">
+        <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>

frontend/pages/accounting/tax.vue

@@ -126,164 +126,162 @@ onMounted(loadData)
 </script>
 
 <template>
-  <div>
+  <UDashboardNavbar title="USt-Auswertung">
-    <UDashboardNavbar title="USt-Auswertung">
+    <template #right>
-      <template #right>
+      <UButton
-        <UButton
+          icon="i-heroicons-arrow-path"
-            icon="i-heroicons-arrow-path"
+          variant="outline"
-            variant="outline"
+          @click="loadData"
-            @click="loadData"
+          :loading="loading"
-            :loading="loading"
+      >
+        Aktualisieren
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardPanelContent class="p-4 md:p-6">
+    <div class="mb-6 flex flex-col gap-2">
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+        Aktueller Zeitraum: {{ currentPeriod?.label }}
+      </h2>
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        Intervall: {{ periodType === "monthly" ? "monatlich" : periodType === "quarterly" ? "quartalsweise" : "jährlich" }}.
+        Berücksichtigt werden gebuchte Ausgangsrechnungen, Abschlags- und Stornorechnungen sowie gebuchte Eingangsbelege mit Datum.
+      </p>
+      <p v-if="currentPeriod" class="text-sm text-gray-500 dark:text-gray-400">
+        {{ currentPeriod.range }}
+      </p>
+    </div>
+
+    <div v-if="currentPeriod" class="grid gap-4 md:grid-cols-3">
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Berechnete USt</div>
+        <div class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">
+          {{ formatCurrency(currentPeriod.outputTax) }}
+        </div>
+        <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
+          19%: {{ formatCurrency(currentPeriod.output.tax19) }} | 7%: {{ formatCurrency(currentPeriod.output.tax7) }}
+        </div>
+      </UCard>
+
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Vorsteuer</div>
+        <div class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">
+          {{ formatCurrency(currentPeriod.inputTax) }}
+        </div>
+        <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
+          19%: {{ formatCurrency(currentPeriod.input.tax19) }} | 7%: {{ formatCurrency(currentPeriod.input.tax7) }}
+        </div>
+      </UCard>
+
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Verrechnetes Ergebnis</div>
+        <div
+            class="mt-2 text-2xl font-semibold"
+            :class="currentPeriod.balance >= 0 ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'"
         >
-          Aktualisieren
+          {{ formatCurrency(currentPeriod.balance) }}
-        </UButton>
+        </div>
-      </template>
+        <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
-    </UDashboardNavbar>
+          {{ currentPeriod.outputCount }} Ausgangsbelege | {{ currentPeriod.inputCount }} Eingangsbelege
+        </div>
+      </UCard>
+    </div>
 
-    <UDashboardPanelContent class="p-4 md:p-6">
+    <div v-if="currentPeriod" class="mt-6 grid gap-4 xl:grid-cols-2">
-      <div class="mb-6 flex flex-col gap-2">
+      <UCard>
-        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
-          Aktueller Zeitraum: {{ currentPeriod?.label }}
-        </h2>
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          Intervall: {{ periodType === "monthly" ? "monatlich" : periodType === "quarterly" ? "quartalsweise" : "jährlich" }}.
-          Berücksichtigt werden gebuchte Ausgangsrechnungen, Abschlags- und Stornorechnungen sowie gebuchte Eingangsbelege mit Datum.
-        </p>
-        <p v-if="currentPeriod" class="text-sm text-gray-500 dark:text-gray-400">
-          {{ currentPeriod.range }}
-        </p>
-      </div>
-
-      <div v-if="currentPeriod" class="grid gap-4 md:grid-cols-3">
-        <UCard>
-          <div class="text-sm text-gray-500 dark:text-gray-400">Berechnete USt</div>
-          <div class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">
-            {{ formatCurrency(currentPeriod.outputTax) }}
-          </div>
-          <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
-            19%: {{ formatCurrency(currentPeriod.output.tax19) }} | 7%: {{ formatCurrency(currentPeriod.output.tax7) }}
-          </div>
-        </UCard>
-
-        <UCard>
-          <div class="text-sm text-gray-500 dark:text-gray-400">Vorsteuer</div>
-          <div class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">
-            {{ formatCurrency(currentPeriod.inputTax) }}
-          </div>
-          <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
-            19%: {{ formatCurrency(currentPeriod.input.tax19) }} | 7%: {{ formatCurrency(currentPeriod.input.tax7) }}
-          </div>
-        </UCard>
-
-        <UCard>
-          <div class="text-sm text-gray-500 dark:text-gray-400">Verrechnetes Ergebnis</div>
-          <div
-              class="mt-2 text-2xl font-semibold"
-              :class="currentPeriod.balance >= 0 ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'"
-          >
-            {{ formatCurrency(currentPeriod.balance) }}
-          </div>
-          <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
-            {{ currentPeriod.outputCount }} Ausgangsbelege | {{ currentPeriod.inputCount }} Eingangsbelege
-          </div>
-        </UCard>
-      </div>
-
-      <div v-if="currentPeriod" class="mt-6 grid gap-4 xl:grid-cols-2">
-        <UCard>
-          <template #header>
-            <div class="font-semibold">Ausgangsrechnungen</div>
-          </template>
-          <div class="space-y-3 text-sm">
-            <div class="flex items-center justify-between">
-              <span>Netto 19%</span>
-              <span>{{ formatCurrency(currentPeriod.output.net19) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>USt 19%</span>
-              <span>{{ formatCurrency(currentPeriod.output.tax19) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>Netto 7%</span>
-              <span>{{ formatCurrency(currentPeriod.output.net7) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>USt 7%</span>
-              <span>{{ formatCurrency(currentPeriod.output.tax7) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>Netto 0%</span>
-              <span>{{ formatCurrency(currentPeriod.output.net0) }}</span>
-            </div>
-          </div>
-        </UCard>
-
-        <UCard>
-          <template #header>
-            <div class="font-semibold">Eingangsbelege</div>
-          </template>
-          <div class="space-y-3 text-sm">
-            <div class="flex items-center justify-between">
-              <span>Netto 19%</span>
-              <span>{{ formatCurrency(currentPeriod.input.net19) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>Vorsteuer 19%</span>
-              <span>{{ formatCurrency(currentPeriod.input.tax19) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>Netto 7%</span>
-              <span>{{ formatCurrency(currentPeriod.input.net7) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>Vorsteuer 7%</span>
-              <span>{{ formatCurrency(currentPeriod.input.tax7) }}</span>
-            </div>
-            <div class="flex items-center justify-between">
-              <span>Netto 0%</span>
-              <span>{{ formatCurrency(currentPeriod.input.net0) }}</span>
-            </div>
-          </div>
-        </UCard>
-      </div>
-
-      <UCard class="mt-6">
         <template #header>
-          <div class="font-semibold">Aktueller und vorherige Zeiträume</div>
+          <div class="font-semibold">Ausgangsrechnungen</div>
+        </template>
+        <div class="space-y-3 text-sm">
+          <div class="flex items-center justify-between">
+            <span>Netto 19%</span>
+            <span>{{ formatCurrency(currentPeriod.output.net19) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>USt 19%</span>
+            <span>{{ formatCurrency(currentPeriod.output.tax19) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Netto 7%</span>
+            <span>{{ formatCurrency(currentPeriod.output.net7) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>USt 7%</span>
+            <span>{{ formatCurrency(currentPeriod.output.tax7) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Netto 0%</span>
+            <span>{{ formatCurrency(currentPeriod.output.net0) }}</span>
+          </div>
+        </div>
+      </UCard>
+
+      <UCard>
+        <template #header>
+          <div class="font-semibold">Eingangsbelege</div>
+        </template>
+        <div class="space-y-3 text-sm">
+          <div class="flex items-center justify-between">
+            <span>Netto 19%</span>
+            <span>{{ formatCurrency(currentPeriod.input.net19) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Vorsteuer 19%</span>
+            <span>{{ formatCurrency(currentPeriod.input.tax19) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Netto 7%</span>
+            <span>{{ formatCurrency(currentPeriod.input.net7) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Vorsteuer 7%</span>
+            <span>{{ formatCurrency(currentPeriod.input.tax7) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>Netto 0%</span>
+            <span>{{ formatCurrency(currentPeriod.input.net0) }}</span>
+          </div>
+        </div>
+      </UCard>
+    </div>
+
+    <UCard class="mt-6">
+      <template #header>
+        <div class="font-semibold">Aktueller und vorherige Zeiträume</div>
+      </template>
+
+      <UTable
+          :columns="normalizeTableColumns(columns)"
+          :data="periods"
+          :loading="loading"
+          :empty="{ icon: 'i-heroicons-calculator', label: 'Keine Daten für die USt-Auswertung vorhanden' }"
+      >
+        <template #label-cell="{ row }">
+          <div class="flex items-center gap-2">
+            <span>{{ row.original.label }}</span>
+            <UBadge v-if="row.original.isCurrent" color="primary" variant="soft">Aktuell</UBadge>
+          </div>
         </template>
 
-        <UTable
+        <template #outputTax-cell="{ row }">
-            :columns="normalizeTableColumns(columns)"
+          {{ formatCurrency(row.original.outputTax) }}
-            :data="periods"
+        </template>
-            :loading="loading"
-            :empty="{ icon: 'i-heroicons-calculator', label: 'Keine Daten für die USt-Auswertung vorhanden' }"
-        >
-          <template #label-cell="{ row }">
-            <div class="flex items-center gap-2">
-              <span>{{ row.original.label }}</span>
-              <UBadge v-if="row.original.isCurrent" color="primary" variant="soft">Aktuell</UBadge>
-            </div>
-          </template>
 
-          <template #outputTax-cell="{ row }">
+        <template #inputTax-cell="{ row }">
-            {{ formatCurrency(row.original.outputTax) }}
+          {{ formatCurrency(row.original.inputTax) }}
-          </template>
+        </template>
 
-          <template #inputTax-cell="{ row }">
+        <template #balance-cell="{ row }">
-            {{ formatCurrency(row.original.inputTax) }}
-          </template>
-
-          <template #balance-cell="{ row }">
             <span :class="row.original.balance >= 0 ? 'text-amber-600 dark:text-amber-400 font-medium' : 'text-emerald-600 dark:text-emerald-400 font-medium'">
               {{ formatCurrency(row.original.balance) }}
             </span>
-          </template>
+        </template>
 
-          <template #documents-cell="{ row }">
+        <template #documents-cell="{ row }">
-            {{ row.original.outputCount }} / {{ row.original.inputCount }}
+          {{ row.original.outputCount }} / {{ row.original.inputCount }}
-          </template>
+        </template>
-        </UTable>
+      </UTable>
-      </UCard>
+    </UCard>
-    </UDashboardPanelContent>
+  </UDashboardPanelContent>
-  </div>
 </template>

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

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))
+  statementallocations.value = (await useEntities("statementallocations").select("*, bankstatement(*)"))
-  incominginvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)")).filter(i => i.accounts.find(x => x.account === Number(route.params.id)))
+      .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 => {
+  const incomingInvoiceRows = incominginvoices.value.flatMap((invoice) => {
-    return {
+    return (invoice.accounts || [])
-      ...i,
+        .filter((account) => sameAccount(account.account?.id || account.account))
-      type: "statementallocation",
+        .map((account, index) => ({
-      date: i.bs_id.date,
+          id: `${invoice.id}-${index}`,
-      partner: i.bs_id ? (i.bs_id.debName ? i.bs_id.debName : (i.bs_id.credName ? i.bs_id.credName : '')) : ''
+          incominginvoiceid: invoice.id,
-    }
+          type: "incominginvoice",
+          amount: Number(account.amountGross || account.amountNet || 0),
+          expense: invoice.expense
+        }))
   })
 
-
+  return [...statementRows, ...incomingInvoiceRows]
-  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]
 })
 
 const saldo = computed(() => {
@@ -135,25 +117,12 @@ const saldo = computed(() => {
           </div>
         </UCard>
         <UCard class="mt-5" v-if="item.label === 'Buchungen'">
-          <UTable
+          <EntityShowSubOwnAccountsStatements
-              v-if="statementallocations"
+              v-if="itemInfo"
-            :data="renderedAllocations"
+              :item="itemInfo"
-              :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
+              top-level-type="accounts"
-              :on-select="(i) => selectAllocation(i)"
+              platform="desktop"
-              :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>
         </UCard>
       </template>
     </UTabs>

frontend/pages/banking/index.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { parseDate } from "@internationalized/date"
+
 const {$api, $dayjs} = useNuxtApp()
 const toast = useToast()
 
@@ -34,6 +36,12 @@ const periodOptions = [
   {label: 'Benutzerdefiniert', key: 'custom'}
 ]
 
+const bankingFilterItems = [
+  { label: 'Nur offene anzeigen', value: 'Nur offene anzeigen' },
+  { label: 'Nur positive anzeigen', value: 'Nur positive anzeigen' },
+  { label: 'Nur negative anzeigen', value: 'Nur negative anzeigen' }
+]
+
 // Initialisierungswerte
 const selectedPeriod = ref(periodOptions[0])
 const dateRange = ref({
@@ -41,6 +49,19 @@ const dateRange = ref({
   end: $dayjs().endOf('month').format('YYYY-MM-DD')
 })
 
+const getCalendarValue = (value) => {
+  if (!value) return undefined
+
+  const formatted = $dayjs(value).format('YYYY-MM-DD')
+  return formatted ? parseDate(formatted) : undefined
+}
+
+const setDateRangeFromCalendar = (field, value) => {
+  dateRange.value[field] = value ? value.toString() : ""
+}
+
+const getDateButtonLabel = (value) => value ? $dayjs(value).format('DD.MM.YYYY') : 'Kein Datum'
+
 const setDateRangeFieldToToday = (field) => {
   dateRange.value[field] = $dayjs().format('YYYY-MM-DD')
 }
@@ -496,30 +517,77 @@ onMounted(() => {
     <template #left>
       <div class="flex items-center gap-3">
         <USelectMenu
-            :options="bankaccounts"
+            :items="bankaccounts"
             v-model="filterAccount"
-            option-attribute="iban"
+            value-key="id"
+            label-key="iban"
             multiple
             by="id"
             placeholder="Konten"
             class="w-48"
-        />
+        >
+          <template #default>
+            {{ filterAccount.length > 0 ? `${filterAccount.length} Kont${filterAccount.length > 1 ? 'en' : 'o'}` : 'Konten' }}
+          </template>
+        </USelectMenu>
         <USeparator orientation="vertical" class="h-6"/>
         <div class="flex items-center gap-2">
           <USelectMenu
               v-model="selectedPeriod"
-              :options="periodOptions"
+              :items="periodOptions"
+              value-key="key"
+              label-key="label"
               class="w-44"
               icon="i-heroicons-calendar-days"
-          />
+          >
-          <div v-if="selectedPeriod.key === 'custom'" class="flex items-center gap-1">
+            <template #default>
+              {{ selectedPeriod?.label || 'Zeitraum' }}
+            </template>
+          </USelectMenu>
+          <div v-if="selectedPeriod === 'custom'" class="flex items-center gap-1">
             <div class="flex items-center gap-1">
-              <UInput type="date" v-model="dateRange.start" size="xs" class="w-32"/>
+              <UPopover class="w-full" :content="{ side: 'bottom', align: 'start' }">
-              <UButton size="2xs" color="gray" variant="soft" label="Heute" @click="setDateRangeFieldToToday('start')" />
+                <UButton
+                    block
+                    color="neutral"
+                    variant="outline"
+                    class="w-36 justify-start"
+                    icon="i-heroicons-calendar"
+                    :label="getDateButtonLabel(dateRange.start)"
+                />
+
+                <template #content>
+                  <div class="p-2">
+                    <UCalendar
+                      :model-value="getCalendarValue(dateRange.start)"
+                      @update:model-value="setDateRangeFromCalendar('start', $event)"
+                      :week-starts-on="1"
+                    />
+                  </div>
+                </template>
+              </UPopover>
             </div>
             <div class="flex items-center gap-1">
-              <UInput type="date" v-model="dateRange.end" size="xs" class="w-32"/>
+              <UPopover class="w-full" :content="{ side: 'bottom', align: 'start' }">
-              <UButton size="2xs" color="gray" variant="soft" label="Heute" @click="setDateRangeFieldToToday('end')" />
+                <UButton
+                    block
+                    color="neutral"
+                    variant="outline"
+                    class="w-36 justify-start"
+                    icon="i-heroicons-calendar"
+                    :label="getDateButtonLabel(dateRange.end)"
+                />
+
+                <template #content>
+                  <div class="p-2">
+                    <UCalendar
+                      :model-value="getCalendarValue(dateRange.end)"
+                      @update:model-value="setDateRangeFromCalendar('end', $event)"
+                      :week-starts-on="1"
+                    />
+                  </div>
+                </template>
+              </UPopover>
             </div>
           </div>
           <div v-else class="text-xs text-gray-400 hidden sm:block italic">
@@ -534,9 +602,15 @@ onMounted(() => {
           icon="i-heroicons-adjustments-horizontal"
           multiple
           v-model="selectedFilters"
-          :options="['Nur offene anzeigen','Nur positive anzeigen','Nur negative anzeigen']"
+          :items="bankingFilterItems"
-          @change="tempStore.modifyFilter('banking','main',selectedFilters)"
+          value-key="value"
-      />
+          label-key="label"
+          @update:model-value="tempStore.modifyFilter('banking','main',selectedFilters)"
+      >
+        <template #default>
+          Filter
+        </template>
+      </USelectMenu>
     </template>
   </UDashboardToolbar>
 

frontend/pages/banking/statements/[mode]/[[id]].vue

@@ -582,20 +582,20 @@ setup()
                 <div class="flex gap-1">
                   <USelectMenu
                       class="w-full"
-                      :options="accounts"
+                      :items="accounts"
-                      value-attribute="id"
+                      value-key="id"
-                      option-attribute="label"
+                      label-key="label"
                       v-model="accountToSave"
-                      searchable
+                      :search-input="{ placeholder: 'Konto suchen...' }"
-                      :search-attributes="['number','label']"
+                      :filter-fields="['number','label']"
                       placeholder="Konto suchen..."
                   >
-                    <template #label>
+                    <template #default>
                       <span v-if="accountToSave"
                             class="truncate">{{ accounts.find(i => i.id === accountToSave).number }} - {{ accounts.find(i => i.id === accountToSave).label }}</span>
                       <span v-else>Direkt verbuchen...</span>
                     </template>
-                    <template #option="{option}">
+                    <template #item-label="{ item: option }">
                       <span class="font-mono text-xs text-gray-500 mr-2">{{ option.number }}</span> {{ option.label }}
                     </template>
                   </USelectMenu>
@@ -620,21 +620,21 @@ setup()
 
           <div v-if="showMoreWithoutRecipe"
                class="mt-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 grid grid-cols-1 md:grid-cols-3 gap-3">
-            <USelectMenu :options="ownaccounts" value-attribute="id" option-attribute="name" v-model="ownAccountToSave"
+            <USelectMenu :items="ownaccounts" value-key="id" label-key="name" v-model="ownAccountToSave"
-                         searchable placeholder="Eigenes Konto">
+                         :search-input="{ placeholder: 'Eigenes Konto' }" :filter-fields="['number','name']" placeholder="Eigenes Konto">
-              <template #label>
+              <template #default>
                 {{ ownAccountToSave ? ownaccounts.find(i => i.id === ownAccountToSave).name : 'Eigenes Konto' }}
               </template>
             </USelectMenu>
-            <USelectMenu :options="customers" value-attribute="id" option-attribute="name"
+            <USelectMenu :items="customers" value-key="id" label-key="name"
-                         v-model="customerAccountToSave" searchable placeholder="Kunde (Guthaben)">
+                         v-model="customerAccountToSave" :search-input="{ placeholder: 'Kunde (Guthaben)' }" :filter-fields="['name','customerNumber']" placeholder="Kunde (Guthaben)">
-              <template #label>
+              <template #default>
                 {{ customerAccountToSave ? customers.find(i => i.id === customerAccountToSave).name : 'Kunde' }}
               </template>
             </USelectMenu>
-            <USelectMenu :options="vendors" value-attribute="id" option-attribute="name" v-model="vendorAccountToSave"
+            <USelectMenu :items="vendors" value-key="id" label-key="name" v-model="vendorAccountToSave"
-                         searchable placeholder="Lieferant (Guthaben)">
+                         :search-input="{ placeholder: 'Lieferant (Guthaben)' }" :filter-fields="['name','vendorNumber']" placeholder="Lieferant (Guthaben)">
-              <template #label>
+              <template #default>
                 {{ vendorAccountToSave ? vendors.find(i => i.id === vendorAccountToSave).name : 'Lieferant' }}
               </template>
             </USelectMenu>
@@ -687,9 +687,9 @@ setup()
               </div>
 
               <div v-if="!topEntitySuggestion" class="mb-3">
-                <div class="text-xs font-bold uppercase tracking-wide text-primary-700 dark:text-primary-300">Automatische Belegvorschlaege</div>
+                <div class="text-xs font-bold uppercase tracking-wide text-primary-700 dark:text-primary-300">Automatische Belegvorschläge</div>
                 <div class="mt-1 text-xs text-gray-600 dark:text-gray-300">
-                  Kein eindeutiger Kunde oder Lieferant erkannt. Vorschlaege basieren auf Betrag und Verwendungszweck.
+                  Kein eindeutiger Kunde oder Lieferant erkannt. Vorschläge basieren auf Betrag und Verwendungszweck.
                 </div>
               </div>
 

frontend/pages/createDocument/index.vue

@@ -246,7 +246,15 @@ const types = computed(() => {
   return templateTypes.filter((type) => selectedTypes.value.find(i => i.key === type.key))
 })
 
-const selectItem = (item) => {
+const unwrapSelectedRow = (itemLike) => itemLike?.original || itemLike
+
+const selectItem = (itemLike) => {
+  const item = unwrapSelectedRow(itemLike)
+
+  if (!item?.id) {
+    return
+  }
+
   if (item.state === "Entwurf") {
     router.push(`/createDocument/edit/${item.id}`)
   } else {

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>

frontend/pages/files/index.vue

@@ -76,11 +76,15 @@ const setupPage = async () => {
 
 // --- Global Drag & Drop (Auto-Open Upload Modal) ---
 let dragCounter = 0
+const uploadModalOpening = ref(false)
 
 const handleGlobalDragEnter = (e) => {
   dragCounter++
   if (draggedItem.value) return
+  if (uploadModalOpening.value) return
   if (e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.includes('Files')) {
+    uploadModalOpening.value = true
+
     modal.open(DocumentUploadModal, {
       fileData: {
         folder: currentFolder.value?.id,
@@ -91,6 +95,9 @@ const handleGlobalDragEnter = (e) => {
         setupPage()
         dragCounter = 0
       }
+    }).finally(() => {
+      dragCounter = 0
+      uploadModalOpening.value = false
     })
   }
 }

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"
+                      :items="vendors"
-                      option-attribute="name"
+                      label-key="name"
-                      value-attribute="id"
+                      value-key="id"
-                      searchable
+                      :search-input="{ placeholder: 'Lieferant suchen...' }"
                       :disabled="mode === 'show'"
-                      :search-attributes="['name', 'vendorNumber']"
+                      :filter-fields="['name', 'vendorNumber']"
-                      placeholder="Lieferant suchen..."
+                      :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' }">
+                <UPopover class="w-full" :content="{ side: 'bottom', align: 'start' }">
-                  <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
+                  <UButton
-                  <template #panel="{ close }">
+                      block
-                    <LazyDatePicker v-model="itemInfo.date" @close="() => { if(!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date; close() }" />
+                      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' }">
+                <UPopover class="w-full" :content="{ side: 'bottom', align: 'start' }">
-                  <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
+                  <UButton
-                  <template #panel="{ close }">
+                      block
-                    <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
+                      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"
+                        :items="accounts"
-                        searchable
+                        :search-input="{ placeholder: 'Kategorie wählen' }"
-                        placeholder="Kategorie wählen"
+                        label-key="label"
-                        option-attribute="label"
+                        value-key="id"
-                        value-attribute="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"
+                        :items="costcentres"
-                        searchable
+                        :search-input="{ placeholder: 'Optional' }"
-                        option-attribute="name"
+                        label-key="name"
-                        value-attribute="id"
+                        value-key="id"
-                        placeholder="Optional"
                         :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"
+                        :items="taxOptions"
-                        value-attribute="key"
+                        value-key="key"
-                        option-attribute="label"
+                        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>

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

frontend/pages/index.client.vue

@@ -8,6 +8,7 @@ import DisplayBankaccounts from "~/components/displayBankaccounts.vue"
 import DisplayProjectsInPhases from "~/components/displayProjectsInPhases.vue"
 import DisplayOpenTasks from "~/components/displayOpenTasks.vue"
 import DisplayTaxSummary from "~/components/displayTaxSummary.vue"
+import DisplayBWASummary from "~/components/displayBWASummary.vue"
 
 setPageLayout("default")
 
@@ -78,11 +79,31 @@ const DASHBOARD_WIDGETS = [
     defaultLayout: { x: 4, y: 7, w: 4, h: 3 },
     minW: 3,
     minH: 3
+  },
+  {
+    id: "bwa-summary",
+    title: "BWA aktuell",
+    description: "Einnahmen, Ausgaben und Ergebnis des aktuellen Monats",
+    component: markRaw(DisplayBWASummary),
+    defaultLayout: { x: 8, y: 7, w: 4, h: 3 },
+    minW: 3,
+    minH: 3
   }
 ]
 
 const widgetDefinitions = Object.fromEntries(DASHBOARD_WIDGETS.map((widget) => [widget.id, widget]))
 
+function getDefaultDashboardWidgets() {
+  return DASHBOARD_WIDGETS.map((definition) => ({
+    id: definition.id,
+    x: definition.defaultLayout.x,
+    y: definition.defaultLayout.y,
+    w: definition.defaultLayout.w,
+    h: definition.defaultLayout.h,
+    visible: true
+  }))
+}
+
 function normalizeNumber(value, fallback) {
   const parsed = Number(value)
   return Number.isFinite(parsed) ? parsed : fallback
@@ -293,8 +314,13 @@ function removeWidget(id) {
 }
 
 function resetDashboard() {
-  widgets.value = normalizeDashboardWidgets()
+  widgets.value = getDefaultDashboardWidgets()
   persistWidgets()
+  toast.add({
+    title: "Dashboard zurückgesetzt",
+    description: "Das Standardlayout wurde wiederhergestellt.",
+    color: "primary"
+  })
 }
 
 const visibleWidgets = computed(() =>
@@ -348,160 +374,167 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div>
+  <UDashboardNavbar title="Home">
-    <UDashboardNavbar title="Home">
+    <template #right>
-      <template #right>
+      <div class="flex items-center gap-2">
-        <div class="flex items-center gap-2">
+        <UButton
-          <UButton
             :icon="isEditMode ? 'i-heroicons-check' : 'i-heroicons-pencil-square'"
             :color="isEditMode ? 'primary' : 'gray'"
             :variant="isEditMode ? 'solid' : 'ghost'"
             @click="toggleEditMode"
-          >
+        >
-            {{ isEditMode ? "Bearbeitung beenden" : "Dashboard bearbeiten" }}
+          {{ isEditMode ? "Bearbeitung beenden" : "Dashboard bearbeiten" }}
-          </UButton>
+        </UButton>
-          <UButton
+        <UButton
             v-if="isEditMode && hiddenWidgets.length > 0"
             icon="i-heroicons-plus"
             color="white"
             variant="soft"
             @click="manageCardsOpen = true"
-          >
+        >
-            Karte hinzufügen
+          Karte hinzufügen
-          </UButton>
+        </UButton>
-          <UButton
+        <UButton
+            v-if="isEditMode"
+            icon="i-heroicons-arrow-path"
+            color="gray"
+            variant="ghost"
+            @click="resetDashboard"
+        >
+          Standardlayout
+        </UButton>
+        <UButton
             v-if="isEditMode"
             icon="i-heroicons-squares-2x2"
             color="gray"
             variant="ghost"
             @click="manageCardsOpen = true"
-          >
+        >
-            Karten verwalten
+          Karten verwalten
-          </UButton>
+        </UButton>
-        </div>
+      </div>
-      </template>
+    </template>
-    </UDashboardNavbar>
+  </UDashboardNavbar>
 
-    <div v-if="visibleWidgets.length > 0" ref="gridElement" class="grid-stack dashboard-grid overflow-y-auto">
+  <div v-if="visibleWidgets.length > 0" ref="gridElement" class="grid-stack dashboard-grid overflow-y-auto">
-      <div
+    <div
-          v-for="widget in visibleWidgets"
+        v-for="widget in visibleWidgets"
-          :key="widget.id"
+        :key="widget.id"
-          :class="['grid-stack-item', isEditMode ? 'dashboard-widget-editing' : '']"
+        :class="['grid-stack-item', isEditMode ? 'dashboard-widget-editing' : '']"
-          :data-widget-id="widget.id"
+        :data-widget-id="widget.id"
-          :gs-x="widget.x"
+        :gs-x="widget.x"
-          :gs-y="widget.y"
+        :gs-y="widget.y"
-          :gs-w="widget.w"
+        :gs-w="widget.w"
-          :gs-h="widget.h"
+        :gs-h="widget.h"
-          :gs-min-w="widget.minW"
+        :gs-min-w="widget.minW"
-          :gs-min-h="widget.minH"
+        :gs-min-h="widget.minH"
-      >
+    >
-        <div class="grid-stack-item-content dashboard-grid-item">
+      <div class="grid-stack-item-content dashboard-grid-item">
-          <div class="dashboard-widget-card border border-gray-200 dark:border-gray-800">
+        <div class="dashboard-widget-card border border-gray-200 dark:border-gray-800">
-            <div class="dashboard-widget-header border-b border-gray-200 dark:border-gray-800">
+          <div class="dashboard-widget-header border-b border-gray-200 dark:border-gray-800">
-              <div class="flex items-start justify-between gap-3">
+            <div class="flex items-start justify-between gap-3">
-                <div class="min-w-0">
+              <div class="min-w-0">
-                  <div :class="['dashboard-widget-drag-handle font-semibold', isEditMode ? 'cursor-move' : 'cursor-default']">
+                <div :class="['dashboard-widget-drag-handle font-semibold', isEditMode ? 'cursor-move' : 'cursor-default']">
-                    {{ widget.title }}
+                  {{ widget.title }}
-                  </div>
-                  <p class="mt-1 text-sm">
-                    {{ widget.description }}
-                  </p>
-                </div>
-                <div class="dashboard-widget-header-actions">
-                  <div :id="`dashboard-widget-header-actions-${widget.id}`" class="dashboard-widget-header-target" />
-                  <UButtonGroup v-if="isEditMode" size="xs">
-                    <UButton
-                        color="gray"
-                        variant="soft"
-                        icon="i-heroicons-arrows-pointing-out"
-                        class="dashboard-widget-drag-handle"
-                    />
-                    <UButton
-                        color="gray"
-                        variant="soft"
-                        icon="i-heroicons-x-mark"
-                        :disabled="visibleWidgets.length <= 1"
-                        @click="removeWidget(widget.id)"
-                    />
-                  </UButtonGroup>
                 </div>
+                <p class="mt-1 text-sm">
+                  {{ widget.description }}
+                </p>
+              </div>
+              <div class="dashboard-widget-header-actions">
+                <div :id="`dashboard-widget-header-actions-${widget.id}`" class="dashboard-widget-header-target" />
+                <UButtonGroup v-if="isEditMode" size="xs">
+                  <UButton
+                      color="gray"
+                      variant="soft"
+                      icon="i-heroicons-arrows-pointing-out"
+                      class="dashboard-widget-drag-handle"
+                  />
+                  <UButton
+                      color="gray"
+                      variant="soft"
+                      icon="i-heroicons-x-mark"
+                      :disabled="visibleWidgets.length <= 1"
+                      @click="removeWidget(widget.id)"
+                  />
+                </UButtonGroup>
               </div>
             </div>
-            <div class="dashboard-widget-body">
+          </div>
-              <component
+          <div class="dashboard-widget-body">
-                  :is="widget.component"
+            <component
-                  v-bind="widget.id === 'income-expense'
+                :is="widget.component"
+                v-bind="widget.id === 'income-expense'
                       ? { headerTarget: `#dashboard-widget-header-actions-${widget.id}` }
                       : {}"
-              />
+            />
-            </div>
           </div>
         </div>
       </div>
     </div>
+  </div>
 
-    <div v-else class="rounded-xl border border-dashed border-gray-300 dark:border-gray-700 p-10 text-center">
+  <div v-else class="rounded-xl border border-dashed border-gray-300 dark:border-gray-700 p-10 text-center">
-      <p class="text-sm">
+    <p class="text-sm">
-        Es sind aktuell keine Dashboard-Karten sichtbar.
+      Es sind aktuell keine Dashboard-Karten sichtbar.
-      </p>
+    </p>
-      <UButton v-if="isEditMode" class="mt-4" icon="i-heroicons-plus" @click="manageCardsOpen = true">
+    <UButton v-if="isEditMode" class="mt-4" icon="i-heroicons-plus" @click="manageCardsOpen = true">
-        Karte hinzufügen
+      Karte hinzufügen
-      </UButton>
+    </UButton>
-    </div>
+  </div>
 
-    <UModal v-model:open="manageCardsOpen">
+  <UModal v-model:open="manageCardsOpen">
-      <template #content>
+    <template #content>
-        <UCard>
+      <UCard>
-          <template #header>
+        <template #header>
-            <div class="flex items-center justify-between gap-3">
+          <div class="flex items-center justify-between gap-3">
-              <div>
+            <div>
-                <h2 class="font-semibold">Dashboard-Karten</h2>
+              <h2 class="font-semibold">Dashboard-Karten</h2>
-                <p class="text-sm">
+              <p class="text-sm">
-                  Karten ein- oder ausblenden und bei Bedarf auf das Standardlayout zurücksetzen.
+                Karten ein- oder ausblenden und bei Bedarf auf das Standardlayout zurücksetzen.
-                </p>
+              </p>
-              </div>
-              <UButton color="gray" variant="ghost" icon="i-heroicons-arrow-path" @click="resetDashboard">
-                Zurücksetzen
-              </UButton>
             </div>
-          </template>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-arrow-path" @click="resetDashboard">
+              Zurücksetzen
+            </UButton>
+          </div>
+        </template>
 
-          <div class="space-y-3">
+        <div class="space-y-3">
-            <div
+          <div
               v-for="definition in DASHBOARD_WIDGETS"
               :key="definition.id"
               class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 dark:border-gray-800 px-4 py-3"
-            >
+          >
-              <div>
+            <div>
-                <p class="font-medium">{{ definition.title }}</p>
+              <p class="font-medium">{{ definition.title }}</p>
-                <p class="text-sm">{{ definition.description }}</p>
+              <p class="text-sm">{{ definition.description }}</p>
-              </div>
+            </div>
 
-              <UButton
+            <UButton
                 v-if="getWidgetLayout(definition.id)?.visible"
                 color="gray"
                 variant="soft"
                 icon="i-heroicons-minus"
                 :disabled="visibleWidgets.length <= 1"
                 @click="removeWidget(definition.id)"
-              >
+            >
-                Entfernen
+              Entfernen
-              </UButton>
+            </UButton>
-              <UButton
+            <UButton
                 v-else
                 color="primary"
                 variant="soft"
                 icon="i-heroicons-plus"
                 @click="addWidget(definition.id)"
-              >
+            >
-                Hinzufügen
+              Hinzufügen
-              </UButton>
+            </UButton>
-            </div>
           </div>
-        </UCard>
+        </div>
-      </template>
+      </UCard>
-    </UModal>
+    </template>
-  </div>
+  </UModal>
 </template>
 
 <style scoped>

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)
+    await auth.login(event.data.email, event.data.password)
-    // Weiterleiten nach erfolgreichem Login
     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
+    <div class="mt-6 space-y-5">
-        title="Login"
+      <div class="space-y-1">
-        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten."
+        <h1 class="text-xl font-semibold">Login</h1>
-        align="bottom"
+        <p class="text-sm text-muted">
-        :fields="[{
+          Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten.
-            name: 'email',
+        </p>
-            type: 'text',
+      </div>
-            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"
-    />
 
-    <UAuthForm
+      <UForm :state="state" class="space-y-4" @submit="doLogin">
-        title="Login"
+        <UFormField label="E-Mail" name="email">
-        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten."
+          <UInput
-        align="bottom"
+              v-model="state.email"
-        :fields="[{
+              type="email"
-            name: 'email',
+              class="w-full"
-            type: 'text',
+              placeholder="Deine E-Mail Adresse"
-            label: 'Email',
+              autocomplete="email"
-            placeholder: 'Deine E-Mail Adresse'
+          />
-          }, {
+        </UFormField>
-            name: 'password',
+
-            label: 'Passwort',
+        <UFormField label="Passwort" name="password">
-            type: 'password',
+          <template #hint>
-            placeholder: 'Dein Passwort'
+            <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
-          }]"
+          </template>
-        :loading="false"
+          <UInput
-        @submit="doLogin"
+              v-model="state.password"
-        :submit-button="{label: 'Weiter'}"
+              type="password"
-        divider="oder"
+              class="w-full"
-    >
+              placeholder="Dein Passwort"
-      <template #password-hint>
+              autocomplete="current-password"
-        <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
+          />
-      </template>
+        </UFormField>
-    </UAuthForm>
+
-  </div>-->
+        <UButton type="submit" block class="w-full" :loading="loading">
-</template>
+          Weiter
+        </UButton>
+      </UForm>
+    </div>
+  </UCard>
+</template>

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 (event: FormSubmitEvent<typeof state>) => {
-const doChange = async (data:any) => {
+  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,
+        old_password: event.data.oldPassword,
-        new_password: data.newPassword,
+        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
+    <div class="mt-6 space-y-5">
-        title="Passwort zurücksetzen"
+      <div class="space-y-1">
-        description="Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten."
+        <h1 class="text-xl font-semibold">Passwort ändern</h1>
-        align="bottom"
+        <p class="text-sm text-muted">
-        :fields="[{
+          Geben Sie Ihr aktuelles und Ihr neues Passwort ein.
-            name: 'oldPassword',
+        </p>
-            label: 'Altes Passwort',
+      </div>
-            type: 'password',
+
-            placeholder: 'Dein altes Passwort'
+      <UForm :state="state" class="space-y-4" @submit="doChange">
-          },{
+        <UFormField label="Altes Passwort" name="oldPassword">
-            name: 'newPassword',
+          <UInput
-            label: 'Neues Passwort',
+              v-model="state.oldPassword"
-            type: 'password',
+              type="password"
-            placeholder: 'Dein neues Passwort'
+              class="w-full"
-          }]"
+              placeholder="Dein altes Passwort"
-        :loading="false"
+              autocomplete="current-password"
-        @submit="doChange"
+          />
-        :submit-button="{label: 'Ändern'}"
+        </UFormField>
-        divider="oder"
+
-    >
+        <UFormField label="Neues Passwort" name="newPassword">
-    </UAuthForm>
+          <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>
+</template>

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 (event: FormSubmitEvent<typeof state>) => {
-const doReset = async (data:any) => {
+  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
+    <div class="mt-6 space-y-5">
-        title="Passwort zurücksetzen"
+      <div class="space-y-1">
-        description="Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten."
+        <h1 class="text-xl font-semibold">Passwort zurücksetzen</h1>
-        align="bottom"
+        <p class="text-sm text-muted">
-        :fields="[{
+          Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten.
-            name: 'email',
+        </p>
-            type: 'text',
+      </div>
-            label: 'Email',
+
-            placeholder: 'Deine E-Mail Adresse'
+      <UForm :state="state" class="space-y-4" @submit="doReset">
-          }]"
+        <UFormField label="E-Mail" name="email">
-        :loading="false"
+          <UInput
-        @submit="doReset"
+              v-model="state.email"
-        :submit-button="{label: 'Zurücksetzen'}"
+              type="email"
-        divider="oder"
+              class="w-full"
-    >
+              placeholder="Deine E-Mail Adresse"
-    </UAuthForm>
+              autocomplete="email"
+          />
+        </UFormField>
+
+        <UButton type="submit" block class="w-full" :loading="loading">
+          Zurücksetzen
+        </UButton>
+      </UForm>
+    </div>
   </UCard>
-</template>
+</template>

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>

frontend/pages/staff/profiles/index.vue

@@ -1,11 +1,39 @@
 <script setup>
   const router = useRouter()
+  const toast = useToast()
 
   const items = ref([])
+  const pending = ref(true)
+
+  const mapProfileRow = (user) => {
+    const profile = user?.profile || {}
+
+    return {
+      id: profile?.id || null,
+      employee_number: profile?.employee_number || '',
+      full_name: profile?.full_name || user?.full_name || user?.email || 'Ohne Profil',
+      email: user?.email || profile?.email || ''
+    }
+  }
 
   const setupPage = async () => {
-    items.value = (await useNuxtApp().$api("/api/tenant/users")).users
+    pending.value = true
-    items.value = items.value.map(i => i.profile)
+
+    try {
+      const response = await useNuxtApp().$api("/api/tenant/users")
+      items.value = (response?.users || [])
+        .map(mapProfileRow)
+        .filter((item) => !!item.id)
+    } catch (err) {
+      console.error('[staff/profiles/index]', err)
+      items.value = []
+      toast.add({
+        title: 'Profile konnten nicht geladen werden',
+        color: 'error'
+      })
+    } finally {
+      pending.value = false
+    }
   }
 
   setupPage()
@@ -31,7 +59,7 @@
   <UDashboardNavbar title="Benutzer Einstellungen">
       <template #right>
         <UButton
-          @click="router.push(`/profiles/create`)"
+          @click="router.push(`/staff/profiles/create`)"
           disabled
         >
           + Mitarbeiter
@@ -41,9 +69,14 @@
   <UTable
     :data="items"
     :columns="normalizeTableColumns(columns)"
-    :on-select="(i) => navigateTo(`/staff/profiles/${i.id}`)"
+    :loading="pending"
+    :on-select="(row) => navigateTo(`/staff/profiles/${row.original?.id || row.id}`)"
   >
-
+    <template #empty>
+      <div class="py-10 text-center text-sm text-gray-500">
+        Keine Mitarbeiterprofile gefunden.
+      </div>
+    </template>
   </UTable>
 </template>
 

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,20 +385,19 @@ const truncateValue = (value, maxLength) => {
             v-model="pageLimit"
             value-key="value"
             label-key="value"
-            @change="setupPage"
+            @update:model-value="setupPage"
         />
       </UTooltip>
       <UPagination
           v-if="initialSetupDone && items.length > 0"
           :disabled="loading"
-          v-model="page"
+          v-model:page="page"
-          :page-count="pageLimit"
+          :items-per-page="pageLimit"
           :total="itemsMeta.total"
-          @update:modelValue="(i) => changePage(i)"
+          @update:page="changePage"
-          show-first
+          :show-edges="true"
-          show-last
+          first-icon="i-heroicons-chevron-double-left"
-          :first-button="{ icon: 'i-heroicons-chevron-double-left', color: 'gray' }"
+          last-icon="i-heroicons-chevron-double-right"
-          :last-button="{ icon: 'i-heroicons-chevron-double-right', trailing: true, color: 'gray' }"
       />
 
     </template>
@@ -400,7 +413,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 +455,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
+                <span class="inline-flex min-w-0 items-center">
-                    :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="truncate">{{ column.label }}</span>
-
+                </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>
               </template>
-
-
             </USelectMenu>
           </UTooltip>
           <UButton
@@ -645,14 +652,13 @@ const truncateValue = (value, maxLength) => {
         <UPagination
             v-if="initialSetupDone && items.length > 0"
             :disabled="loading"
-            v-model="page"
+            v-model:page="page"
-            :page-count="pageLimit"
+            :items-per-page="pageLimit"
             :total="itemsMeta.total"
-            @update:modelValue="(i) => changePage(i)"
+            @update:page="changePage"
-            show-first
+            :show-edges="true"
-            show-last
+            first-icon="i-heroicons-chevron-double-left"
-            :first-button="{ icon: 'i-heroicons-chevron-double-left', color: 'gray' }"
+            last-icon="i-heroicons-chevron-double-right"
-            :last-button="{ icon: 'i-heroicons-chevron-double-right', trailing: true, color: 'gray' }"
         />
       </div>
 
@@ -700,12 +706,15 @@ const truncateValue = (value, maxLength) => {
 
             <USelectMenu
                 v-model="columnsToFilter[column.key]"
-                :options="itemsMeta?.distinctValues?.[column.key]"
+                :items="getDistinctFilterItems(column.key)"
                 multiple
-                searchable
+                value-key="value"
-                :search-attributes="[column.key]"
+                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>