From 4efe452f1c5c403b60a320d47ded3f4f2304db86 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Thu, 22 Jan 2026 19:38:09 +0100
Subject: [PATCH] Redone Layouts

---
 .../banking/statements/[mode]/[[id]].vue      | 1121 ++++++-----------
 .../pages/incomingInvoices/[mode]/[id].vue    |  903 ++++++-------
 2 files changed, 819 insertions(+), 1205 deletions(-)

diff --git a/frontend/pages/banking/statements/[mode]/[[id]].vue b/frontend/pages/banking/statements/[mode]/[[id]].vue
index 3298cef..0ca23c2 100644
--- a/frontend/pages/banking/statements/[mode]/[[id]].vue
+++ b/frontend/pages/banking/statements/[mode]/[[id]].vue
@@ -1,9 +1,6 @@
 <script setup>
-
 import dayjs from "dayjs";
-import {filter} from "vuedraggable/dist/vuedraggable.common.js";
-
-
+// import {filter} from "vuedraggable/dist/vuedraggable.common.js"; // Scheint nicht genutzt zu werden, auskommentiert
 
 defineShortcuts({
   'backspace': () => {
@@ -17,7 +14,7 @@ const route = useRoute()
 const router = useRouter()
 const mode = ref(route.params.mode || "show")
 
-const itemInfo = ref({statementallocations:[]})
+const itemInfo = ref({statementallocations: []})
 const oldItemInfo = ref({})
 
 const openDocuments = ref([])
@@ -34,72 +31,64 @@ const accounts = ref([])
 const ownaccounts = ref([])
 
 const loading = ref(true)
+
 const setup = async () => {
   loading.value = true
-  if(route.params.id) {
-    itemInfo.value =  await useEntities("bankstatements").selectSingle(route.params.id,"*, statementallocations(*, cd_id(*), ii_id(*))", undefined, undefined, true)
+  if (route.params.id) {
+    itemInfo.value = await useEntities("bankstatements").selectSingle(route.params.id, "*, statementallocations(*, cd_id(*), ii_id(*))", undefined, undefined, true)
   }
-  if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
+  if (itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
 
   manualAllocationSum.value = calculateOpenSum.value
 
   createddocuments.value = (await useEntities("createddocuments").select("*, statementallocations(*), customer(id,name)"))
-  const documents = createddocuments.value.filter(i => i.type === "invoices" ||i.type === "advanceInvoices")
+  const documents = createddocuments.value.filter(i => i.type === "invoices" || i.type === "advanceInvoices")
   incominginvoices.value = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(id,name)")).filter(i => i.state === "Gebucht")
 
-  accounts.value = (await useEntities("accounts").selectSpecial("*","number",true))
+  accounts.value = (await useEntities("accounts").selectSpecial("*", "number", true))
   ownaccounts.value = (await useEntities("ownaccounts").select())
   customers.value = (await useEntities("customers").select())
   vendors.value = (await useEntities("vendors").select())
 
-  openDocuments.value = documents.filter(i => i.statementallocations.reduce((n,{amount}) => n + amount, 0).toFixed(2) !== useSum().getCreatedDocumentSum(i,createddocuments.value).toFixed(2))
+  openDocuments.value = documents.filter(i => i.statementallocations.reduce((n, {amount}) => n + amount, 0).toFixed(2) !== useSum().getCreatedDocumentSum(i, createddocuments.value).toFixed(2))
   openDocuments.value = openDocuments.value.map(i => {
-
     return {
-        ...i,
-      docTotal: useSum().getCreatedDocumentSum(i,createddocuments.value),
-      statementTotal: Number(i.statementallocations.reduce((n,{amount}) => n + amount, 0)),
-      openSum: (useSum().getCreatedDocumentSum(i,createddocuments.value) - Number(i.statementallocations.reduce((n,{amount}) => n + amount, 0))).toFixed(2)
+      ...i,
+      docTotal: useSum().getCreatedDocumentSum(i, createddocuments.value),
+      statementTotal: Number(i.statementallocations.reduce((n, {amount}) => n + amount, 0)),
+      openSum: (useSum().getCreatedDocumentSum(i, createddocuments.value) - Number(i.statementallocations.reduce((n, {amount}) => n + amount, 0))).toFixed(2)
     }
   })
 
-  console.log(openDocuments.value)
-
   allocatedDocuments.value = documents.filter(i => i.statementallocations.find(x => x.bankstatement === itemInfo.value.id))
   allocatedIncomingInvoices.value = incominginvoices.value.filter(i => i.statementallocations.find(x => x.bankstatement === itemInfo.value.id))
-  console.log(allocatedDocuments.value)
-  console.log(allocatedIncomingInvoices.value)
-  openIncomingInvoices.value = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(*)")).filter(i => !i.archived &&  i.statementallocations.reduce((n,{amount}) => n + amount, 0).toFixed(2) !== getInvoiceSum(i,false))
-  //console.log(openIncomingInvoices.value)
-
-  //        return incominginvoices.value.filter(i => bankstatements.value.filter(x => x.assignments.find(y => y.type === 'incomingInvoice' && y.id === i.id)).length === 0)
 
+  openIncomingInvoices.value = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(*)")).filter(i => !i.archived && i.statementallocations.reduce((n, {amount}) => n + amount, 0).toFixed(2) !== getInvoiceSum(i, false))
 
   loading.value = false
-
 }
 
 const displayCurrency = (value, currency = "€") => {
-  return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
+  return `${Number(value).toFixed(2).replace(".", ",")} ${currency}`
 }
 
-const separateIBAN = (input = "")  => {
+const separateIBAN = (input = "") => {
   const separates = input.match(/.{1,4}/g)
-  return separates.join(" ")
+  return separates ? separates.join(" ") : input
 }
 
 const getInvoiceSum = (invoice, onlyOpenSum) => {
-  console.log(invoice)
   let sum = 0
-  invoice.accounts.forEach(account => {
-    sum += account.amountTax
-    sum += account.amountNet
-  })
-  console.log(sum)
+  if (invoice.accounts) {
+    invoice.accounts.forEach(account => {
+      sum += (account.amountTax || 0)
+      sum += (account.amountNet || 0)
+    })
+  }
 
-  if(onlyOpenSum) sum = sum + Number(invoice.statementallocations.reduce((n,{amount}) => n + amount, 0))
+  if (onlyOpenSum) sum = sum + Number(invoice.statementallocations.reduce((n, {amount}) => n + amount, 0))
 
-  if(invoice.expense) {
+  if (invoice.expense) {
     return (sum * -1).toFixed(2)
   } else {
     return sum.toFixed(2)
@@ -107,26 +96,14 @@ const getInvoiceSum = (invoice, onlyOpenSum) => {
 }
 
 const calculateOpenSum = computed(() => {
-    let startingAmount = 0
-
+  let startingAmount = 0
+  if (itemInfo.value.statementallocations) {
     itemInfo.value.statementallocations.forEach(item => {
       startingAmount += item.amount
     })
-
-    return (itemInfo.value.amount - startingAmount).toFixed(2)
-})
-
-
-
-const saveAllocations = async () =>  {
-  let allocationsToBeSaved = itemInfo.value.statementallocations.filter(i => !i.id)
-
-  for await (let i of allocationsToBeSaved) {
-    await dataStore.createNewItem("statementallocations", i)
   }
-
-
-}
+  return (itemInfo.value.amount - startingAmount).toFixed(2)
+})
 
 const showAccountSelection = ref(false)
 const accountToSave = ref("")
@@ -139,738 +116,476 @@ const selectAccount = (id) => {
   showAccountSelection.value = false
 }
 
-
 const manualAllocationSum = ref(itemInfo.value.amount || 0)
 const allocationDescription = ref("")
 const showMoreWithoutRecipe = ref(false)
 const showMoreText = ref(false)
 
 const saveAllocation = async (allocation) => {
-  //TODO: BACKEND CHANGE SAVE/REMOVE
-  console.log(allocation)
-
-  const res = await useNuxtApp().$api("/api/banking/statements",{
+  const res = await useNuxtApp().$api("/api/banking/statements", {
     method: "POST",
-    body: {
-      data: allocation
-    }
+    body: {data: allocation}
   })
 
-  if(res) {
+  if (res) {
     await setup()
     accountToSave.value = null
     vendorAccountToSave.value = null
     customerAccountToSave.value = null
     ownAccountToSave.value = null
-    allocationDescription.value = null
+    // allocationDescription.value = null // Optional: Beschreibung behalten für nächste Buchung?
   }
-
-
-
 }
 
 const removeAllocation = async (allocationId) => {
-  const res = await useNuxtApp().$api(`/api/banking/statements/${allocationId}`,{
+  await useNuxtApp().$api(`/api/banking/statements/${allocationId}`, {
     method: "DELETE"
   })
-
   await setup()
 }
 
-const searchString = ref(tempStore.searchStrings["bankstatementsedit"] ||'')
+const searchString = ref(tempStore.searchStrings["bankstatementsedit"] || '')
 
 const clearSearchString = () => {
   searchString.value = ''
   tempStore.clearSearchString("bankstatementsedit")
-
 }
 
 const filteredDocuments = computed(() => {
-
-
   return useSearch(searchString.value, openDocuments.value.filter(i => i.state === "Gebucht"))
-
 })
 
 const filteredIncomingInvoices = computed(() => {
-
-
   return useSearch(searchString.value, openIncomingInvoices.value.filter(i => i.state === "Gebucht"))
-
 })
 
-
-setup()
-
-
 const archiveStatement = async () => {
-
-  let temp = itemInfo.value
+  let temp = {...itemInfo.value}
   delete temp.statementallocations
-
   await useEntities("bankstatements").archive(temp.id)
 }
 
+// Helpers for the allocation list display
+const getAllocationLabel = (item) => {
+  if (item.account) return `${accounts.value.find(i => i.id === item.account)?.number} - ${accounts.value.find(i => i.id === item.account)?.label}`
+  if (item.ownaccount) return `${ownaccounts.value.find(i => i.id === item.ownaccount)?.number} - ${ownaccounts.value.find(i => i.id === item.ownaccount)?.name}`
+  if (item.customer) return `${customers.value.find(i => i.id === item.customer)?.customerNumber} - ${customers.value.find(i => i.id === item.customer)?.name}`
+  if (item.vendor) return `${vendors.value.find(i => i.id === item.vendor)?.vendorNumber} - ${vendors.value.find(i => i.id === item.vendor)?.name}`
+
+  if (item.incominginvoice) {
+    const inv = incominginvoices.value.find(i => i.id === item.incominginvoice)
+    return `Eingangsrechnung: ${inv?.reference} (${inv?.vendor?.name})`
+  }
+  if (item.createddocument) {
+    const doc = createddocuments.value.find(i => i.id === item.createddocument)
+    return `${doc?.documentNumber} (${doc?.customer?.name})`
+  }
+  return "Unbekannte Zuordnung"
+}
+
+const getAllocationIcon = (item) => {
+  if (item.account || item.ownaccount) return 'i-heroicons-book-open'
+  if (item.customer || item.createddocument) return 'i-heroicons-arrow-up-right' // Einnahme / Kunde
+  if (item.vendor || item.incominginvoice) return 'i-heroicons-arrow-down-left' // Ausgabe / Lieferant
+  return 'i-heroicons-question-mark-circle'
+}
+
+setup()
 </script>
 
 <template>
-  <UDashboardNavbar
-      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
-  >
+  <UDashboardNavbar :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}">
     <template #left>
-      <UButton
-          icon="i-heroicons-chevron-left"
-          variant="outline"
-          @click="router.back()/*router.push(`/standardEntity/${type}`)*/"
-      >
-        Zurück
-      </UButton>
-      <UButton
-          icon="i-heroicons-chevron-left"
-          variant="outline"
-          @click="router.push(`/banking`)"
-      >
-        Kontobewegungen
+      <UButton icon="i-heroicons-chevron-left" variant="outline" @click="router.back()">Zurück</UButton>
+      <UButton icon="i-heroicons-building-library" variant="ghost" @click="router.push(`/banking`)">Kontobewegungen
       </UButton>
     </template>
     <template #center>
-      <h1
-          :class="['text-xl','font-medium']"
-      >Kontobewegung bearbeiten</h1>
+      <h1 class="text-xl font-medium">Kontobewegung bearbeiten</h1>
     </template>
     <template #badge v-if="itemInfo">
-      <UBadge
-          v-if="itemInfo.incomingInvoice || itemInfo.createdDocument"
-      >
-        Gebucht
-      </UBadge>
-      <UBadge
-          v-else
-          color="red"
-      >
-        Offen
-      </UBadge>
+      <UBadge v-if="calculateOpenSum == 0" color="green" variant="subtle">Zugewiesen</UBadge>
+      <UBadge v-else color="amber" variant="subtle">Offen</UBadge>
     </template>
     <template #right>
-      <ArchiveButton
-          color="rose"
-          variant="outline"
-          type="bankstatements"
-          @confirmed="archiveStatement"
-      />
+      <ArchiveButton color="rose" variant="outline" type="bankstatements" @confirmed="archiveStatement"/>
     </template>
   </UDashboardNavbar>
 
-  <UDashboardPanelContent
-    class="flex flex-row workingContainer"
-    v-if="!loading"
-  >
-    <div
-      class="mx-auto w-2/5"
-    >
-      <div class="px-2">
-        <UCard
-            v-if="itemInfo"
-        >
-          <template #header>
-            <div class="flex flex-row justify-between">
-              <span
-                  v-if="itemInfo.amount > 0"
-                  class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
-              >
-                {{itemInfo.debName}}
-              </span>
-              <span
-                  v-else-if="itemInfo.amount < 0"
-                  class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
-              >
-                {{itemInfo.credName}}
-              </span>
+  <UDashboardPanelContent class="p-0 bg-gray-50 dark:bg-gray-900 overflow-hidden" v-if="!loading">
+    <div class="flex flex-col lg:flex-row h-[calc(100vh-4rem)]">
 
+      <div
+          class="w-full lg:w-5/12 xl:w-4/12 flex flex-col border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 h-full overflow-hidden">
 
-              <span v-if="itemInfo.amount > 0" class="text-primary-500 font-semibold text-nowrap">{{displayCurrency(itemInfo.amount)}}</span>
-              <span v-else-if="itemInfo.amount < 0" class="text-rose-600 font-semibold text-nowrap">{{displayCurrency(itemInfo.amount)}}</span>
-              <span v-else>{{displayCurrency(itemInfo.amount)}}</span>
+        <div class="p-4 border-b border-gray-100 dark:border-gray-800 shrink-0">
+          <div class="flex justify-between items-start mb-2">
+            <div>
+              <h2 class="text-lg font-bold text-gray-900 dark:text-white line-clamp-1">
+                {{ itemInfo.amount > 0 ? itemInfo.debName : itemInfo.credName || 'Unbekannter Partner' }}
+              </h2>
+              <div class="text-xs text-gray-500 flex gap-2 mt-1">
+                <span>{{ dayjs(itemInfo.date).format("DD.MM.YYYY") }}</span>
+                <span>&bull;</span>
+                <span class="font-mono">{{ separateIBAN(itemInfo.debIban || itemInfo.credIban) }}</span>
+              </div>
             </div>
-          </template>
+            <div class="text-right">
+              <div class="text-xl font-bold font-mono"
+                   :class="itemInfo.amount > 0 ? 'text-emerald-600' : 'text-rose-600'">
+                {{ displayCurrency(itemInfo.amount) }}
+              </div>
+            </div>
+          </div>
 
-          <UAlert
-              v-if="itemInfo.archived"
-              color="rose"
-              variant="outline"
-              :title="`Kontobewegung archiviert`"
-              icon="i-heroicons-archive-box"
-              class="mb-5"
-          />
+          <div
+              class="text-sm text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-800 p-2 rounded-md cursor-pointer hover:bg-gray-100 transition-colors"
+              @click="showMoreText = !showMoreText">
+            <p :class="{'line-clamp-2': !showMoreText}">{{ itemInfo.text }}</p>
+            <div class="flex justify-center mt-1" v-if="!showMoreText">
+              <UIcon name="i-heroicons-chevron-down" class="w-3 h-3 text-gray-400"/>
+            </div>
+          </div>
 
-          <table class="w-full" v-if="itemInfo.id">
-            <tbody>
-            <tr class="flex-row flex justify-between">
-              <td>
-                <span class="font-semibold">Buchungsdatum:</span>
-              </td>
-              <td>
-                {{dayjs(itemInfo.date).format("DD.MM.YYYY")}}
-              </td>
-            </tr>
-            <tr class="flex-row flex justify-between">
-              <td>
-                <span class="font-semibold">Wertstellungsdatum:</span>
-              </td>
-              <td>
-                {{dayjs(itemInfo.valueDate).format("DD.MM.YYYY")}}
-              </td>
-            </tr>
-            <tr class="flex-row flex justify-between text-right">
-              <td>
-                <span class="font-semibold">Partner:</span>
-              </td>
-              <td>
-                <span v-if="itemInfo.debName">{{itemInfo.debName}}</span>
-                <span v-else-if="itemInfo.credName">{{itemInfo.credName}}</span>
-                <span v-else>-</span>
-
-              </td>
-            </tr>
-            <tr class="flex-row flex justify-between">
-              <td>
-                <span class="font-semibold">Partner IBAN:</span>
-              </td>
-              <td>
-                <span v-if="itemInfo.debIban">{{separateIBAN(itemInfo.debIban)}}</span>
-                <span v-else-if="itemInfo.credIban">{{separateIBAN(itemInfo.credIban)}}</span>
-                <span v-else>-</span>
-              </td>
-            </tr>
-            <tr class="flex-row flex justify-between">
-              <td>
-                <span class="font-semibold">Konto:</span>
-              </td>
-              <td>
-<!--
-                {{dataStore.getBankAccountById(itemInfo.account) ? dataStore.getBankAccountById(itemInfo.account).name || separateIBAN(dataStore.getBankAccountById(itemInfo.account).iban) : ""}}
--->
-              </td>
-            </tr>
-<!--            <tr class="flex-row flex justify-between">
-              <td colspan="2">
-                <span class="font-semibold">Buchungen:</span>
-              </td>
-            </tr>
-            <tr
-                class="flex-row flex justify-between mb-3"
-                v-for="item in itemInfo.statementallocations"
-            >
-
-              <td>
-                &lt;!&ndash;            <span v-if="itemInfo.createdDocument"><nuxt-link :to="`/createDocument/show/${itemInfo.createdDocument}`">{{dataStore.createddocuments.find(i => i.id === itemInfo.createdDocument).documentNumber}}</nuxt-link></span>
-                            <span v-else-if="itemInfo.incomingInvoice"><nuxt-link :to="`/incominInvoices/show/${itemInfo.incomingInvoice}`">{{dataStore.getIncomingInvoiceById(itemInfo.incomingInvoice).reference}}</nuxt-link></span>&ndash;&gt;
-                <span v-if="item.cd_id">
-                {{dataStore.getCreatedDocumentById(item.cd_id).documentNumber}}
-              </span>
-                <span v-else-if="item.ii_id">
-&lt;!&ndash;                {{dataStore.getVendorById(dataStore.getIncomingInvoiceById(item.ii_id).vendor).name}} - {{dataStore.getIncomingInvoiceById(item.ii_id).reference}}&ndash;&gt;
-              </span>
-                <span v-else-if="item.account">
-                Buchungskonto: {{accounts.find(i => i.id === item.account).number}} {{accounts.find(i => i.id === item.account).label}}
-              </span>
-              </td>
-              <td>
-                <UButton
-                    variant="outline"
-                    icon="i-heroicons-arrow-right-end-on-rectangle"
-                    @click="router.push(`/createDocument/show/${item.cd_id}`)"
-                    v-if="item.cd_id"
-                />
-                <UButton
-                    variant="outline"
-                    icon="i-heroicons-arrow-right-end-on-rectangle"
-                    @click="router.push(`/incominginvoices/show/${item.ii_id}`)"
-                    v-else-if="item.ii_id"
-                />
-              </td>
-            </tr>-->
-            <tr class="flex-row flex justify-between">
-              <td colspan="2">
-                <span class="font-semibold">Beschreibung:</span>
-              </td>
-            </tr>
-            <tr>
-              <td colspan="2">
-                <UButton
-                    class="mt-3"
-                    @click="showMoreText = !showMoreText"
-                    variant="outline"
-                >{{ showMoreText ? "Weniger anzeigen" : "Mehr anzeigen" }}</UButton>
-
-
-
-                <p>{{showMoreText ? itemInfo.text : itemInfo.text.substring(0,200)}}</p>
-              </td>
-            </tr>
-            </tbody>
-
-          </table>
-
-        </UCard>
-
-        <UAlert
-            class="mb-3 mt-3"
-            :color="calculateOpenSum != 0 ? 'rose' : 'primary'"
-            variant="outline"
-            :title="calculateOpenSum != 0 ? `${displayCurrency(Math.abs(calculateOpenSum))} von ${displayCurrency(Math.abs(itemInfo.amount))} nicht zugewiesen` : 'Kontobewegung vollständig zugewiesen'"
-        >
-          <template #description>
+          <div class="mt-4">
+            <div class="flex justify-between text-xs mb-1 font-medium">
+                <span :class="calculateOpenSum != 0 ? 'text-amber-600' : 'text-green-600'">
+                    {{
+                    calculateOpenSum != 0 ? `${displayCurrency(calculateOpenSum)} offen` : 'Vollständig zugewiesen'
+                  }}
+                </span>
+              <span class="text-gray-400">{{
+                  ((Math.abs(itemInfo.amount) - Math.abs(calculateOpenSum)) / Math.abs(itemInfo.amount) * 100).toFixed(0)
+                }}%</span>
+            </div>
             <UProgress
                 :value="Math.abs(itemInfo.amount) - Math.abs(calculateOpenSum)"
                 :max="Math.abs(itemInfo.amount)"
-                :color="calculateOpenSum != 0 ? 'rose' : 'primary'"
+                :color="calculateOpenSum != 0 ? 'amber' : 'green'"
+                size="sm"
             />
-          </template>
-        </UAlert>
-      </div>
+          </div>
+        </div>
 
+        <div class="flex-1 overflow-y-auto min-h-0 bg-gray-50/50 dark:bg-gray-900">
+          <div v-if="itemInfo.statementallocations.length === 0" class="p-8 text-center text-gray-400">
+            <UIcon name="i-heroicons-banknotes" class="w-12 h-12 mb-2 opacity-20"/>
+            <p class="text-sm">Noch keine Buchungen zugeordnet.</p>
+          </div>
 
-      <div class="scrollList mt-3 px-2 pb-3" style="height: 35vh">
-        <UDivider>Vorhandene Buchungen<UBadge v-if="itemInfo.statementallocations.length > 0" variant="outline" class="ml-2">{{itemInfo.statementallocations.length}}</UBadge></UDivider>
-
-        <UCard
-            class="mt-5"
-            v-for="item in itemInfo.statementallocations.filter(i => i.account)"
-        >
-          <template #header>
-            <div class="flex flex-row justify-between">
-              <span>{{accounts.find(i => i.id === item.account).number}} - {{accounts.find(i => i.id === item.account).label}}</span>
-              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
-            </div>
-          </template>
-          <p class="font-bold">Beschreibung:</p>
-          <p>{{item.description}}</p>
-          <UButton
-              icon="i-heroicons-x-mark"
-              variant="outline"
-              color="rose"
-              class="mr-3 mt-3"
-              @click="removeAllocation(item.id)"
-          />
-        </UCard>
-        <UCard
-            class="mt-5"
-            v-for="item in itemInfo.statementallocations.filter(i => i.ownaccount)"
-        >
-          <template #header>
-            <div class="flex flex-row justify-between">
-              <span>{{ownaccounts.find(i => i.id === item.ownaccount).number}} - {{ownaccounts.find(i => i.id === item.ownaccount).name}}</span>
-              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
-            </div>
-          </template>
-          <p class="font-bold">Beschreibung:</p>
-          <p>{{item.description}}</p>
-          <UButton
-              icon="i-heroicons-x-mark"
-              variant="outline"
-              color="rose"
-              class="mr-3 mt-3"
-              @click="removeAllocation(item.id)"
-          />
-        </UCard>
-        <UCard
-            class="mt-5"
-            v-for="item in itemInfo.statementallocations.filter(i => i.customer)"
-        >
-          <template #header>
-            <div class="flex flex-row justify-between">
-              <span>{{customers.find(i => i.id === item.customer).customerNumber}} - {{customers.find(i => i.id === item.customer).name}}</span>
-              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
-            </div>
-          </template>
-          <p class="font-bold">Beschreibung:</p>
-          <p>{{item.description}}</p>
-          <UButton
-              icon="i-heroicons-x-mark"
-              variant="outline"
-              color="rose"
-              class="mr-3 mt-3"
-              @click="removeAllocation(item.id)"
-          />
-        </UCard>
-        <UCard
-            class="mt-5"
-            v-for="item in itemInfo.statementallocations.filter(i => i.vendor)"
-        >
-          <template #header>
-            <div class="flex flex-row justify-between">
-              <span>{{vendors.find(i => i.id === item.vendor).vendorNumber}} - {{vendors.find(i => i.id === item.vendor).name}}</span>
-              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
-            </div>
-          </template>
-          <p class="font-bold">Beschreibung:</p>
-          <p>{{item.description}}</p>
-          <UButton
-              icon="i-heroicons-x-mark"
-              variant="outline"
-              color="rose"
-              class="mr-3 mt-3"
-              @click="removeAllocation(item.id)"
-          />
-        </UCard>
-        <UCard
-            class="mt-5"
-            v-for="item in itemInfo.statementallocations.filter(i => i.incominginvoice)"
-        >
-          <template #header>
-            <div class="flex flex-row justify-between">
-             <span> {{incominginvoices.find(i => i.id === item.incominginvoice).reference}} - {{incominginvoices.find(i => i.id === item.incominginvoice).vendor?.name}}</span>
-              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
-            </div>
-          </template>
-          <p class="font-bold">Beschreibung:</p>
-          <p>{{item.description}}</p>
-          <UButton
-              icon="i-heroicons-x-mark"
-              variant="outline"
-              color="rose"
-              class="mr-3 mt-3"
-              @click="removeAllocation(item.id)"
-          />
-        </UCard>
-        <UCard
-            class="mt-5"
-            v-for="item in itemInfo.statementallocations.filter(i => i.createddocument)"
-        >
-          <template #header>
-            <div class="flex flex-row justify-between">
-              <span v-if="customers.find(i => i.id === createddocuments.find(i => i.id === item.createddocument).customer?.id)">{{createddocuments.find(i => i.id === item.createddocument).documentNumber}} - {{createddocuments.find(i => i.id === item.createddocument).customer?.name}}</span>
-              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
-            </div>
-          </template>
-          <p class="font-bold">Beschreibung:</p>
-          <p>{{item.description}}</p>
-          <UButton
-              icon="i-heroicons-x-mark"
-              variant="outline"
-              color="rose"
-              class="mr-3 mt-3"
-              @click="removeAllocation(item.id)"
-          />
-          <UButton
-              icon="i-heroicons-eye"
-              variant="outline"
-              color="primary"
-              class="mr-3 mt-3"
-              @click="navigateTo(`/createDocument/show/${item.createddocument}`)"
-          />
-        </UCard>
-
-      </div>
-    </div>
-
-    <div class="w-2/5 mx-auto">
-      <div class="px-2">
-        <UDivider class="mt-3">Buchungsdaten</UDivider>
-        <UFormGroup
-            label="Summe:"
-        >
-          <UInput
-              v-model="manualAllocationSum"
-              type="number"
-              step="0.01"
-          >
-            <template #trailing>
-              <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
-            </template>
-          </UInput>
-        </UFormGroup>
-        <UFormGroup
-            label="Beschreibung:"
-            class="mt-3"
-        >
-          <UTextarea
-              v-model="allocationDescription"
-              rows="3"
-          />
-        </UFormGroup>
-
-
-        <UDivider class="my-3">Ohne Beleg buchen</UDivider>
-
-        <UFormGroup
-          label="Buchungskonten"
-          class="mt-3"
-        >
-          <InputGroup class="mt-3 w-full">
-            <USelectMenu
-                class="w-full"
-                :options="accounts"
-                value-attribute="id"
-                option-attribute="label"
-                :ui-menu="{ width: 'min-w-max' }"
-                v-model="accountToSave"
-                searchable
-                :search-attributes="['number','label']"
+          <ul class="divide-y divide-gray-100 dark:divide-gray-800" v-else>
+            <li
+                v-for="item in itemInfo.statementallocations"
+                :key="item.id"
+                class="bg-white dark:bg-gray-900 p-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group"
             >
-              <template #label>
-                <span v-if="accountToSave">{{accounts.find(i => i.id === accountToSave).number}} - {{accounts.find(i => i.id === accountToSave).label}}</span>
-                <span v-else>Kein Konto ausgewählt</span>
-              </template>
-              <template #option="{option}">
-                {{option.number}} - {{option.label}}
-              </template>
-            </USelectMenu>
-            <UButton
-                @click="showAccountSelection = true"
-                icon="i-heroicons-magnifying-glass"
-                variant="outline"
-            />
-            <UButton
-                variant="outline"
-                icon="i-heroicons-check"
-                :disabled="!accountToSave"
-                @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, account: accountToSave, description: allocationDescription })"
-            />
-            <UButton
-                @click="accountToSave = ''"
-                icon="i-heroicons-x-mark"
-                variant="outline"
-                color="rose"
-            />
-          </InputGroup>
-          <UModal
-              v-model="showAccountSelection"
-          >
-            <UCard>
-              <template #header>
-                <div class="flex items-center justify-between">
-                  <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-                    Konto auswählen
-                  </h3>
-                  <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAccountSelection = false" />
+              <div class="flex justify-between items-start">
+                <div class="flex gap-3">
+                  <div class="mt-1">
+                    <UAvatar :icon="getAllocationIcon(item)" size="xs" :ui="{ rounded: 'rounded-md' }"
+                             class="bg-gray-100 dark:bg-gray-800 text-gray-500"/>
+                  </div>
+                  <div>
+                    <div class="text-sm font-medium text-gray-900 dark:text-white">
+                      {{ getAllocationLabel(item) }}
+                    </div>
+                    <div class="text-xs text-gray-500 mt-0.5" v-if="item.description">{{ item.description }}</div>
+                    <div class="flex gap-2 mt-1" v-if="item.createddocument || item.incominginvoice">
+                      <UButton
+                          v-if="item.createddocument"
+                          size="2xs"
+                          variant="link"
+                          :padded="false"
+                          icon="i-heroicons-eye"
+                          @click="navigateTo(`/createDocument/show/${item.createddocument}`)"
+                      >Beleg anzeigen
+                      </UButton>
+                      <UButton
+                          v-if="item.incominginvoice"
+                          size="2xs"
+                          variant="link"
+                          :padded="false"
+                          icon="i-heroicons-eye"
+                          @click="navigateTo(`/incominginvoices/show/${item.incominginvoice}`)"
+                      >Beleg anzeigen
+                      </UButton>
+                    </div>
+                  </div>
                 </div>
-              </template>
-              <UButton
-                  v-for="selectableAccount in accounts"
-                  variant="outline"
-                  class="m-3"
-                  @click="selectAccount(selectableAccount.id)"
-              >
-                {{selectableAccount.label}}
-              </UButton>
-            </UCard>
-
-          </UModal>
-        </UFormGroup>
-        <UButton
-            class="mt-3"
-            @click="showMoreWithoutRecipe = !showMoreWithoutRecipe"
-            variant="outline"
-        >{{ showMoreWithoutRecipe ? "Weniger anzeigen" : "Mehr anzeigen" }}</UButton>
-        <UFormGroup
-            v-if="showMoreWithoutRecipe"
-          label="zusätzliche Buchungskonten"
-          class="mt-3"
-        >
-          <InputGroup class="w-full">
-            <USelectMenu
-                class="w-full"
-                :options="ownaccounts"
-                value-attribute="id"
-                option-attribute="label"
-                :ui-menu="{ width: 'min-w-max' }"
-                v-model="ownAccountToSave"
-                searchable
-                :search-attributes="['number','label']"
-            >
-              <template #label>
-                <span v-if="ownAccountToSave">{{ownaccounts.find(i => i.id === ownAccountToSave).number}} - {{ownaccounts.find(i => i.id === ownAccountToSave).name}}</span>
-                <span v-else>Kein Konto ausgewählt</span>
-              </template>
-              <template #option="{option}">
-                {{option.number}} - {{option.name}}
-              </template>
-            </USelectMenu>
-            <UButton
-                variant="outline"
-                icon="i-heroicons-check"
-                :disabled="!ownAccountToSave"
-                @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, ownaccount: ownAccountToSave, description: allocationDescription })"
-            />
-            <UButton
-                @click="accountToSave = ''"
-                icon="i-heroicons-x-mark"
-                variant="outline"
-                color="rose"
-            />
-          </InputGroup>
-        </UFormGroup>
-        <UFormGroup
-            v-if="showMoreWithoutRecipe"
-          label="Kunden"
-          class="mt-3"
-        >
-          <InputGroup class="w-full">
-            <USelectMenu
-                class="w-full"
-                :options="customers"
-                value-attribute="id"
-                option-attribute="label"
-                :ui-menu="{ width: 'min-w-max' }"
-                v-model="customerAccountToSave"
-                searchable
-                :search-attributes="['number','name']"
-            >
-              <template #label>
-                <span v-if="customerAccountToSave">{{customers.find(i => i.id === customerAccountToSave).customerNumber}} - {{customers.find(i => i.id === customerAccountToSave).name}}</span>
-                <span v-else>Kein Konto ausgewählt</span>
-              </template>
-              <template #option="{option}">
-                {{option.customerNumber}} - {{option.name}}
-              </template>
-            </USelectMenu>
-            <UButton
-                variant="outline"
-                icon="i-heroicons-check"
-                :disabled="!customerAccountToSave"
-                @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, customer: customerAccountToSave, description: allocationDescription })"
-            />
-            <UButton
-                @click="customerAccountToSave = ''"
-                icon="i-heroicons-x-mark"
-                variant="outline"
-                color="rose"
-            />
-          </InputGroup>
-        </UFormGroup>
-        <UFormGroup
-            v-if="showMoreWithoutRecipe"
-          label="Lieferanten"
-          class="mt-3"
-        >
-          <InputGroup class="w-full">
-            <USelectMenu
-                class="w-full"
-                :options="vendors"
-                value-attribute="id"
-                option-attribute="label"
-                :ui-menu="{ width: 'min-w-max' }"
-                v-model="vendorAccountToSave"
-                searchable
-                :search-attributes="['number','name']"
-            >
-              <template #label>
-                <span v-if="vendorAccountToSave">{{vendors.find(i => i.id === vendorAccountToSave).vendorNumber}} - {{vendors.find(i => i.id === vendorAccountToSave).name}}</span>
-                <span v-else>Kein Konto ausgewählt</span>
-              </template>
-              <template #option="{option}">
-                {{option.vendorNumber}} - {{option.name}}
-              </template>
-            </USelectMenu>
-            <UButton
-                variant="outline"
-                icon="i-heroicons-check"
-                :disabled="!vendorAccountToSave"
-                @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, vendor: vendorAccountToSave, description: allocationDescription })"
-            />
-            <UButton
-                @click="vendorAccountToSave = ''"
-                icon="i-heroicons-x-mark"
-                variant="outline"
-                color="rose"
-            />
-          </InputGroup>
-        </UFormGroup>
-
-        <UDivider
-            class="my-3"
-        >
-          Auf Beleg buchen
-        </UDivider>
-        <InputGroup
-            class="mt-3 w-full"
-        >
-          <UInput
-              id="searchinput"
-              v-model="searchString"
-              icon="i-heroicons-funnel"
-              autocomplete="off"
-              placeholder="Suche..."
-              class="hidden lg:block w-full mr-1"
-              @keydown.esc="$event.target.blur()"
-              @change="tempStore.modifySearchString('bankstatementsedit',searchString)"
-          >
-            <template #trailing>
-              <UKbd value="/" />
-            </template>
-          </UInput>
-          <UButton
-              variant="outline"
-              icon="i-heroicons-x-mark"
-              color="rose"
-              @click="clearSearchString"
-          />
-        </InputGroup>
+                <div class="text-right">
+                  <div class="font-mono text-sm font-semibold">{{ displayCurrency(item.amount) }}</div>
+                  <UButton
+                      icon="i-heroicons-trash"
+                      color="rose"
+                      variant="ghost"
+                      size="xs"
+                      class="opacity-0 group-hover:opacity-100 transition-opacity"
+                      @click="removeAllocation(item.id)"
+                  />
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
       </div>
 
-      <div class="scrollList mt-3 px-2" style="height: 40vh;">
+      <div class="w-full lg:w-7/12 xl:w-8/12 flex flex-col h-full overflow-hidden bg-gray-50 dark:bg-gray-950">
 
-        <UCard
-            class="mt-5"
-            v-for="document in filteredDocuments"
-        >
-          <template #header>
-            <div class="flex flex-row justify-between">
-              <span>{{document.customer ? document.customer.name : ""}} - {{document.documentNumber}}</span>
-              <span class="font-semibold text-primary-500 text-nowrap">{{displayCurrency(document.openSum)}}</span>
+        <div
+            class="p-4 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm shrink-0 z-10">
+          <div class="grid grid-cols-12 gap-4 items-end">
+            <div class="col-span-12 md:col-span-3">
+              <UFormGroup label="Betrag" size="sm">
+                <UInput v-model="manualAllocationSum" type="number" step="0.01">
+                  <template #trailing><span class="text-gray-500 text-xs">EUR</span></template>
+                </UInput>
+              </UFormGroup>
             </div>
-          </template>
-          <UButton
-              icon="i-heroicons-check"
-              variant="outline"
-              class="mr-3"
-              v-if="!itemInfo.statementallocations.find(i => i.createddocument === document.id)"
-              @click="saveAllocation({createddocument: document.id, bankstatement: itemInfo.id, amount: Number(Number(document.openSum) < manualAllocationSum ? document.openSum : manualAllocationSum), description: allocationDescription})"
-          />
-
-          <UButton
-              variant="outline"
-              icon="i-heroicons-arrow-right-end-on-rectangle"
-              @click="router.push(`/createDocument/show/${document.id}`)"
-          />
-        </UCard>
-
-        <UCard
-            class="mt-5"
-            v-for="item in filteredIncomingInvoices"
-        >
-          <template #header>
-            <div class="flex flex-row justify-between">
-              <span>{{item.vendor ? item.vendor.name : ''}} - {{item.reference}}</span>
-              <span class="font-semibold text-rose-600 text-nowrap">{{displayCurrency(getInvoiceSum(item,true))}}</span>
+            <div class="col-span-12 md:col-span-5">
+              <UFormGroup label="Konto / Manuelle Buchung" size="sm">
+                <div class="flex gap-1">
+                  <USelectMenu
+                      class="w-full"
+                      :options="accounts"
+                      value-attribute="id"
+                      option-attribute="label"
+                      v-model="accountToSave"
+                      searchable
+                      :search-attributes="['number','label']"
+                      placeholder="Konto suchen..."
+                  >
+                    <template #label>
+                      <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}">
+                      <span class="font-mono text-xs text-gray-500 mr-2">{{ option.number }}</span> {{ option.label }}
+                    </template>
+                  </USelectMenu>
+                  <UTooltip text="Manuell Buchen">
+                    <UButton
+                        icon="i-heroicons-plus"
+                        :disabled="!accountToSave"
+                        @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, account: accountToSave, description: allocationDescription })"
+                    />
+                  </UTooltip>
+                </div>
+              </UFormGroup>
             </div>
-          </template>
-          <UButton
-              icon="i-heroicons-check"
-              variant="outline"
-              class="mr-3"
-              v-if="!itemInfo.statementallocations.find(i => i.incominginvoice === item.id)"
-              @click="saveAllocation({incominginvoice: item.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(item,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(item,true)), description: allocationDescription})"
-          />
-          <UButton
-              variant="outline"
-              icon="i-heroicons-arrow-right-end-on-rectangle"
-              @click="router.push(`/incominginvoices/show/${item.id}`)"
-          />
+            <div class="col-span-12 md:col-span-4 flex justify-end gap-2 pb-0.5">
+              <UButton variant="soft" color="gray" icon="i-heroicons-adjustments-horizontal"
+                       @click="showMoreWithoutRecipe = !showMoreWithoutRecipe" label="Erweitert"/>
+              <UButton variant="soft" color="gray" icon="i-heroicons-pencil-square"
+                       @click="allocationDescription = allocationDescription ? '' : 'Manuelle Buchung'"
+                       :color="allocationDescription ? 'primary' : 'gray'"/>
+            </div>
+          </div>
+
+          <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"
+                         searchable placeholder="Eigenes Konto">
+              <template #label>
+                {{ ownAccountToSave ? ownaccounts.find(i => i.id === ownAccountToSave).name : 'Eigenes Konto' }}
+              </template>
+            </USelectMenu>
+            <USelectMenu :options="customers" value-attribute="id" option-attribute="name"
+                         v-model="customerAccountToSave" searchable placeholder="Kunde (Guthaben)">
+              <template #label>
+                {{ customerAccountToSave ? customers.find(i => i.id === customerAccountToSave).name : 'Kunde' }}
+              </template>
+            </USelectMenu>
+            <USelectMenu :options="vendors" value-attribute="id" option-attribute="name" v-model="vendorAccountToSave"
+                         searchable placeholder="Lieferant (Guthaben)">
+              <template #label>
+                {{ vendorAccountToSave ? vendors.find(i => i.id === vendorAccountToSave).name : 'Lieferant' }}
+              </template>
+            </USelectMenu>
+            <div class="md:col-span-3 flex justify-end">
+              <UButton size="xs" label="Zuweisen"
+                       @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, ownaccount: ownAccountToSave, customer: customerAccountToSave, vendor: vendorAccountToSave, description: allocationDescription })"/>
+            </div>
+          </div>
+
+          <div v-if="allocationDescription" class="mt-2">
+            <UInput v-model="allocationDescription" placeholder="Beschreibung für Buchung..." icon="i-heroicons-pencil"
+                    size="sm"/>
+          </div>
+        </div>
+
+        <div class="flex-1 flex flex-col min-h-0">
+          <div class="p-2 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900">
+            <UInput
+                v-model="searchString"
+                icon="i-heroicons-magnifying-glass"
+                placeholder="Belege suchen (Nr, Name, Referenz)..."
+                :ui="{ icon: { trailing: { pointer: '' } } }"
+                @change="tempStore.modifySearchString('bankstatementsedit',searchString)"
+            >
+              <template #trailing>
+                <UButton v-if="searchString" color="gray" variant="link" icon="i-heroicons-x-mark" :padded="false"
+                         @click="clearSearchString"/>
+              </template>
+            </UInput>
+          </div>
+
+          <div class="flex-1 overflow-y-auto p-4 space-y-6">
+
+            <div v-if="filteredDocuments.length > 0">
+              <h3 class="text-xs font-bold text-gray-500 uppercase mb-2 pl-1 flex items-center gap-2">
+                <UIcon name="i-heroicons-document-arrow-up"/>
+                Ausgangsrechnungen
+              </h3>
+              <div
+                  class="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 shadow-sm overflow-hidden">
+                <div
+                    v-for="(document, index) in filteredDocuments"
+                    :key="document.id"
+                    class="flex items-center justify-between p-3 border-b border-gray-100 dark:border-gray-800 last:border-0 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                >
+                  <div class="flex items-center gap-3 overflow-hidden">
+                    <div class="bg-primary-50 dark:bg-primary-900/20 text-primary-600 rounded p-1.5 shrink-0">
+                      <UIcon name="i-heroicons-document-text" class="w-5 h-5"/>
+                    </div>
+                    <div class="min-w-0">
+                      <div class="font-medium text-sm text-gray-900 dark:text-white truncate">
+                        {{ document.documentNumber }} <span class="text-gray-400 mx-1">|</span>
+                        {{ document.customer ? document.customer.name : "Ohne Kunde" }}
+                      </div>
+                      <div class="text-xs text-gray-500 flex gap-3 mt-0.5">
+                                        <span class="flex items-center gap-1">
+                                            <UIcon name="i-heroicons-calendar" class="w-3 h-3"/>
+                                            {{ dayjs(document.date).format("DD.MM.YYYY") }}
+                                        </span>
+                        <span class="text-primary-600 font-medium"
+                              v-if="Number(document.openSum) < Number(document.total)">
+                                            Teilzahlung
+                                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center gap-3 pl-2">
+                    <div class="text-right">
+                      <div class="font-mono font-bold text-sm">{{ displayCurrency(document.openSum) }}</div>
+                      <div class="text-xs text-gray-400">Offen</div>
+                    </div>
+                    <UTooltip text="Zuweisen">
+                      <UButton
+                          v-if="!itemInfo.statementallocations.find(i => i.createddocument === document.id)"
+                          icon="i-heroicons-check"
+                          size="sm"
+                          color="primary"
+                          variant="soft"
+                          @click="saveAllocation({createddocument: document.id, bankstatement: itemInfo.id, amount: Number(Number(document.openSum) < manualAllocationSum ? document.openSum : manualAllocationSum), description: allocationDescription})"
+                      />
+                    </UTooltip>
+                    <UButton
+                        icon="i-heroicons-eye"
+                        color="gray"
+                        variant="ghost"
+                        size="sm"
+                        @click="router.push(`/createDocument/show/${document.id}`)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="filteredIncomingInvoices.length > 0">
+              <h3 class="text-xs font-bold text-gray-500 uppercase mb-2 pl-1 flex items-center gap-2">
+                <UIcon name="i-heroicons-document-arrow-down"/>
+                Eingangsbelege
+              </h3>
+              <div
+                  class="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 shadow-sm overflow-hidden">
+                <div
+                    v-for="(item, index) in filteredIncomingInvoices"
+                    :key="item.id"
+                    class="flex items-center justify-between p-3 border-b border-gray-100 dark:border-gray-800 last:border-0 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                >
+                  <div class="flex items-center gap-3 overflow-hidden">
+                    <div class="bg-rose-50 dark:bg-rose-900/20 text-rose-600 rounded p-1.5 shrink-0">
+                      <UIcon name="i-heroicons-receipt-refund" class="w-5 h-5"/>
+                    </div>
+                    <div class="min-w-0">
+                      <div class="font-medium text-sm text-gray-900 dark:text-white truncate">
+                        {{ item.vendor ? item.vendor.name : 'Ohne Lieferant' }}
+                      </div>
+                      <div class="text-xs text-gray-500 flex gap-3 mt-0.5">
+                                        <span class="flex items-center gap-1">
+                                            <UIcon name="i-heroicons-calendar" class="w-3 h-3"/>
+                                            {{ dayjs(item.date).format("DD.MM.YYYY") }}
+                                        </span>
+                        <span class="truncate max-w-[150px]" :title="item.reference">Ref: {{ item.reference }}</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center gap-3 pl-2">
+                    <div class="text-right">
+                      <div class="font-mono font-bold text-sm text-rose-600">
+                        {{ displayCurrency(getInvoiceSum(item, true)) }}
+                      </div>
+                      <div class="text-xs text-gray-400">Offen</div>
+                    </div>
+                    <UTooltip text="Zuweisen">
+                      <UButton
+                          v-if="!itemInfo.statementallocations.find(i => i.incominginvoice === item.id)"
+                          icon="i-heroicons-check"
+                          size="sm"
+                          color="rose"
+                          variant="soft"
+                          @click="saveAllocation({incominginvoice: item.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(item,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(item,true)), description: allocationDescription})"
+                      />
+                    </UTooltip>
+                    <UButton
+                        icon="i-heroicons-eye"
+                        color="gray"
+                        variant="ghost"
+                        size="sm"
+                        @click="router.push(`/incominginvoices/show/${item.id}`)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="filteredDocuments.length === 0 && filteredIncomingInvoices.length === 0"
+                 class="text-center py-10 text-gray-400">
+              <UIcon name="i-heroicons-magnifying-glass" class="w-8 h-8 mx-auto mb-2 opacity-50"/>
+              <p>Keine passenden offenen Belege gefunden.</p>
+            </div>
+          </div>
+        </div>
 
-        </UCard>
       </div>
     </div>
-
   </UDashboardPanelContent>
 </template>
 
 <style scoped>
-.workingContainer {
-  height: 90vh;
-  overflow-y: hidden;
+/* Custom scrollbar styling just in case, though usually handled by Tailwind/System */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
 }
 
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: #475569;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/pages/incomingInvoices/[mode]/[id].vue b/frontend/pages/incomingInvoices/[mode]/[id].vue
index 3e9b59b..75d74e7 100644
--- a/frontend/pages/incomingInvoices/[mode]/[id].vue
+++ b/frontend/pages/incomingInvoices/[mode]/[id].vue
@@ -1,15 +1,25 @@
 <script setup>
 import InputGroup from "~/components/InputGroup.vue";
 import dayjs from "dayjs";
-import HistoryDisplay from "~/components/HistoryDisplay.vue";
-
-
+import { useDraggable } from '@vueuse/core'
 
+// --- Standard Setup & Data ---
 const dataStore = useDataStore()
 const route = useRoute()
+const mode = ref(route.params.mode)
+
+// --- Page Leave Logic ---
+const isModified = ref(false) // Speichert, ob Änderungen vorgenommen wurden
+
+// State für das PDF Fenster
+const isPdfDetached = ref(false)
+const pdfEl = ref(null)
+const { style: pdfStyle } = useDraggable(pdfEl, {
+  initialValue: { x: 50, y: 100 },
+})
 
 const itemInfo = ref({
-  vendor: 0,
+  vendor: null,
   expense: true,
   reference: "",
   date:  null,
@@ -23,7 +33,8 @@ const itemInfo = ref({
       amountNet: null,
       amountTax: null,
       taxType: "19",
-      costCentre: null
+      costCentre: null,
+      amountGross: null
     }
   ]
 })
@@ -31,601 +42,489 @@ const itemInfo = ref({
 const costcentres = ref([])
 const vendors = ref([])
 const accounts = ref([])
-
-const mode = ref(route.params.mode)
+const loadedFileId = ref(null)
 
 const setup = async () => {
-  let filetype = (await useEntities("filetags").select()).find(i=> i.incomingDocumentType === "invoices").id
-  console.log(filetype)
-
+  // 1. Daten laden
   costcentres.value = await useEntities("costcentres").select()
   vendors.value = await useEntities("vendors").select()
   accounts.value = await useEntities("accounts").selectSpecial()
 
-  itemInfo.value = await useEntities("incominginvoices").selectSingle(route.params.id, "*, files(*)")
+  const invoiceData = await useEntities("incominginvoices").selectSingle(route.params.id, "*, files(*)")
 
-  //TODO: Dirty Fix
-  itemInfo.value.vendor = itemInfo.value.vendor?.id
+  // 2. Mapping
+  itemInfo.value = {
+    ...invoiceData,
+    vendor: invoiceData.vendor?.id || invoiceData.vendor,
+    accounts: invoiceData.accounts || []
+  }
 
-  await loadFile(itemInfo.value.files[itemInfo.value.files.length-1].id)
+  // Fallback Accounts
+  if(itemInfo.value.accounts.length === 0) {
+    itemInfo.value.accounts.push({ account: null, amountNet: null, amountTax: null, taxType: "19", costCentre: null })
+  }
+
+  // Datei laden
+  if (itemInfo.value.files && itemInfo.value.files.length > 0) {
+    loadedFileId.value = itemInfo.value.files[itemInfo.value.files.length-1].id
+  }
 
   if(itemInfo.value.date && !itemInfo.value.dueDate) itemInfo.value.dueDate = itemInfo.value.date
 
+  // 3. Watcher initialisieren (erst NACH dem Laden der Daten)
+  // Wir warten einen Tick, damit die Initialisierung nicht als Änderung zählt
+  await nextTick()
+  isModified.value = false // Sicherstellen, dass Status sauber ist
+
+  watch(itemInfo, () => {
+    if (mode.value !== 'show') {
+      isModified.value = true
+    }
+  }, { deep: true })
 }
 
 setup()
 
+// --- Berechnungslogik ---
 const useNetMode = ref(false)
 
-const loadedFile = ref(null)
-const loadFile = async (id) => {
-  console.log(id)
-  loadedFile.value = await useFiles().selectDocument(id)
-  console.log(loadedFile.value)
-}
-
-
-
-
-const changeNetMode = (mode) => {
-  useNetMode.value = mode
-
-  //itemInfo.value.accounts = [{account: null,amountNet: null,amountTax: null,taxType: '19'}]
-}
-
-
-
-
 const taxOptions = ref([
-  {
-    label: "19% USt",
-    percentage: 19,
-    key: "19"
-  },{
-    label: "7% USt",
-    percentage: 7,
-    key: "7"
-  },{
-    label: "Innergemeintschaftlicher Erwerb 19%",
-    percentage: 0,
-    key: "19I"
-  },{
-    label: "Innergemeintschaftlicher Erwerb 7%",
-    percentage: 0,
-    key: "7I"
-  },{
-    label: "§13b UStG",
-    percentage: 0,
-    key: "13B"
-  },{
-    label: "Keine USt",
-    percentage: 0,
-    key: "null"
-  },
+  { label: "19% USt", percentage: 19, key: "19" },
+  { label: "7% USt", percentage: 7, key: "7" },
+  { label: "IG Erwerb 19%", percentage: 0, key: "19I" },
+  { label: "IG Erwerb 7%", percentage: 0, key: "7I" },
+  { label: "§13b UStG", percentage: 0, key: "13B" },
+  { label: "Keine USt", percentage: 0, key: "null" },
 ])
 
-
 const totalCalculated = computed(() => {
   let totalNet = 0
   let totalAmount19Tax = 0
   let totalAmount7Tax = 0
-  let totalAmount0Tax = 0
   let totalGross = 0
 
   itemInfo.value.accounts.forEach(account => {
-    if(account.amountNet) totalNet += account.amountNet
+    if(account.amountNet) totalNet += Number(account.amountNet)
 
     if(account.taxType === "19" && account.amountTax) {
-      totalAmount19Tax += account.amountTax
+      totalAmount19Tax += Number(account.amountTax)
     } else if(account.taxType === "7" && account.amountTax) {
-      totalAmount7Tax += account.amountTax
+      totalAmount7Tax += Number(account.amountTax)
     }
   })
 
   totalGross = Number(totalNet + totalAmount19Tax + totalAmount7Tax)
 
-  return {
-    totalNet,
-    totalAmount19Tax,
-    totalAmount7Tax,
-    totalGross
-  }
-
+  return { totalNet, totalAmount19Tax, totalAmount7Tax, totalGross }
 })
 
+const recalculateItem = (item, source) => {
+  const taxRate = Number(taxOptions.value.find(i => i.key === item.taxType)?.percentage || 0);
+
+  if (source === 'net') {
+    item.amountTax = Number((item.amountNet * (taxRate/100)).toFixed(2))
+    item.amountGross = Number((Number(item.amountNet) + item.amountTax).toFixed(2))
+  } else if (source === 'gross') {
+    item.amountNet = Number((item.amountGross / (1 + taxRate/100)).toFixed(2))
+    item.amountTax = Number((item.amountGross - item.amountNet).toFixed(2))
+  } else if (source === 'taxType') {
+    if(item.amountNet) {
+      item.amountTax = Number((item.amountNet * (taxRate/100)).toFixed(2))
+      item.amountGross = Number((Number(item.amountNet) + item.amountTax).toFixed(2))
+    }
+  }
+}
+
+// --- Saving ---
 const updateIncomingInvoice = async (setBooked = false) => {
-
-  let item = itemInfo.value
+  let item = { ...itemInfo.value }
   delete item.files
+  item.state = setBooked ? "Gebucht" : "Entwurf"
 
-  if(item.state === "Vorbereitet" && !setBooked) {
-    item.state = "Entwurf"
-  } else if(item.state === "Vorbereitet" && setBooked) {
-    item.state = "Gebucht"
-  } else if(item.state === "Entwurf" && setBooked) {
-    item.state = "Gebucht"
-  } else {
-    item.state = "Entwurf"
-  }
-  if(setBooked) {
-    const data = await useEntities('incominginvoices').update(itemInfo.value.id,item,false)
-  } else {
-    const data = await useEntities('incominginvoices').update(itemInfo.value.id,item,true)
-  }
+  await useEntities('incominginvoices').update(itemInfo.value.id, item, !setBooked)
 
+  // WICHTIG: Nach dem Speichern ist das Formular "sauber"
+  isModified.value = false
 }
 
 const findIncomingInvoiceErrors = computed(() => {
   let errors = []
+  const i = itemInfo.value
 
-  if(itemInfo.value.vendor === null) errors.push({message: "Es ist kein Lieferant ausgewählt", type: "breaking"})
-  if(itemInfo.value.reference === null || itemInfo.value.reference.length === 0) errors.push({message: "Es ist keine Referenz angegeben", type: "breaking"})
-  if(itemInfo.value.date === null) errors.push({message: "Es ist kein Datum ausgewählt", type: "breaking"})
-  if(itemInfo.value.dueDate === null) errors.push({message: "Es ist kein Fälligkeitsdatum ausgewählt", type: "breaking"})
-  if(itemInfo.value.paymentType === null) errors.push({message: "Es ist keine Zahlart ausgewählt", type: "breaking"})
-  if(itemInfo.value.description === null) errors.push({message: "Es ist keine Beschreibung angegeben", type: "info"})
-
-
-  itemInfo.value.accounts.forEach(account => {
-    if(account.account === null) errors.push({message: "Es ist keine Kategorie ausgewählt", type: "breaking"})
-    if(!accounts.value.find(i => i.id === account.account)) errors.push({message: "Es ist keine Kategorie ausgewählt", type: "breaking"})
-    if(account.amountNet === null) errors.push({message: "Es ist kein Nettobetrag angegeben", type: "breaking"})
-    if(account.taxType === null) errors.push({message: "Es ist kein Steuertyp ausgewählt", type: "breaking"})
-    if(account.costCentre === null) errors.push({message: "Es ist keine Kostenstelle ausgewählt", type: "info"})
-    if(account.taxType === null || account.taxType === "0") errors.push({message: "Es ist keine Steuerart ausgewählt", type: "breaking"})
+  if(!i.vendor) errors.push({message: "Es ist kein Lieferant ausgewählt", type: "breaking"})
+  if(!i.reference) errors.push({message: "Es ist keine Referenz angegeben", type: "breaking"})
+  if(!i.date) errors.push({message: "Es ist kein Datum ausgewählt", type: "breaking"})
 
+  i.accounts.forEach((account, idx) => {
+    if(!account.account) errors.push({message: `Pos ${idx+1}: Keine Kategorie`, type: "breaking"})
+    if(account.amountNet === null) errors.push({message: `Pos ${idx+1}: Kein Betrag`, type: "breaking"})
   })
 
-
   return errors.sort((a,b) => (a.type === "breaking") ? -1 : 1)
 })
-
-
 </script>
 
 <template>
   <UDashboardNavbar>
     <template #left>
       <UButton
-        icon="i-heroicons-chevron-left"
-        @click="navigateTo(`/incomingInvoices`)"
-        variant="outline"
+          icon="i-heroicons-chevron-left"
+          @click="navigateTo(`/incomingInvoices`)"
+          variant="outline"
       >
         Eingangsbelege
       </UButton>
     </template>
     <template #center>
-      <h1
-          class="text-xl font-medium"
-      >{{`Eingangsbeleg ${mode === 'show' ? 'anzeigen' : 'bearbeiten'}`}}</h1>
+      <h1 class="text-xl font-medium">
+        {{`Eingangsbeleg ${mode === 'show' ? 'anzeigen' : 'bearbeiten'}`}}
+      </h1>
     </template>
     <template #right>
       <ArchiveButton
+          v-if="mode !== 'show'"
           color="rose"
           variant="outline"
           type="incominginvoices"
           @confirmed="useEntities('incominginvoices').archive(route.params.id)"
-          v-if="mode !== 'show'"
       />
-      <UButton
-          @click="updateIncomingInvoice(false)"
-          v-if="mode !== 'show'"
-      >
+      <UButton v-if="mode !== 'show'" @click="updateIncomingInvoice(false)">
         Speichern
       </UButton>
       <UButton
-          @click="updateIncomingInvoice(true)"
           v-if="mode !== 'show'"
+          @click="updateIncomingInvoice(true)"
           :disabled="findIncomingInvoiceErrors.filter(i => i.type === 'breaking').length > 0"
       >
         Speichern & Buchen
       </UButton>
     </template>
   </UDashboardNavbar>
-  <UDashboardPanelContent>
-    <div
-        class="flex justify-between mt-5 workingContainer"
-        v-if="loadedFile"
-    >
-      <object
-          v-if="loadedFile"
-          :data="loadedFile.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
-          type="application/pdf"
-          class="mx-5 documentPreview"
-      />
-      <div class="w-3/5 mx-5">
-        <UAlert
-            class="mb-5"
-            title="Vorhandene Probleme und Informationen:"
-            :color="findIncomingInvoiceErrors.filter(i => i.type === 'breaking').length > 0 ? 'rose' : 'white'"
-            variant="outline"
-            v-if="findIncomingInvoiceErrors.length > 0"
-        >
-          <template #description>
-            <ul class="list-disc ml-5">
-              <li v-for="error in findIncomingInvoiceErrors" :class="[...error.type === 'breaking' ? ['text-rose-600'] : ['dark:text-white','text-black']]">
-                {{error.message}}
-              </li>
-            </ul>
-          </template>
 
-        </UAlert>
+  <UDashboardPanelContent class="p-0 overflow-hidden relative">
+    <div class="flex h-[calc(100vh-4rem)]">
 
-        <div class="scrollContainer">
-          <InputGroup class="mb-3">
+      <div
+          v-if="!isPdfDetached && loadedFileId"
+          class="w-1/2 h-full bg-gray-100 border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700 flex flex-col"
+      >
+        <div class="p-2 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 flex justify-between items-center">
+          <span class="text-xs text-gray-500 font-mono pl-2">Vorschau</span>
+          <UTooltip text="Dokument lösen (Draggable Window)">
             <UButton
-                :variant="itemInfo.expense ? 'solid' : 'outline'"
-                @click="itemInfo.expense = true"
-                :disabled="mode === 'show'"
-            >
-              Ausgabe
-            </UButton>
-            <UButton
-                :variant="!itemInfo.expense ? 'solid' : 'outline'"
-                @click="itemInfo.expense = false"
-                :disabled="mode === 'show'"
-            >
-              Einnahme
-            </UButton>
-          </InputGroup>
-
-          <UFormGroup label="Lieferant:" >
-            <InputGroup>
-              <USelectMenu
-                  :disabled="mode === 'show'"
-                  v-model="itemInfo.vendor"
-                  :options="vendors"
-                  option-attribute="name"
-                  value-attribute="id"
-                  searchable
-                  :search-attributes="['name','vendorNumber']"
-                  class="flex-auto"
-                  searchable-placeholder="Suche..."
-                  :color="!itemInfo.vendor ? 'rose' : 'primary'"
-              >
-                <template #option="{option}">
-                  {{option.vendorNumber}} - {{option.name}}
-                </template>
-                <template #label>
-                  {{vendors.find(vendor => vendor.id === itemInfo.vendor) ? vendors.find(vendor => vendor.id === itemInfo.vendor).name : 'Lieferant auswählen'}}
-                </template>
-              </USelectMenu>
-              <EntityModalButtons
-                  type="vendors"
-                  :id="itemInfo.vendor"
-                  @return-data="(data) => itemInfo.vendor = data.id"
-                  :button-edit="mode !== 'show'"
-                  :button-create="mode !== 'show'"
-              />
-              <UButton
-                  icon="i-heroicons-x-mark"
-                  variant="outline"
-                  color="rose"
-                  @click="itemInfo.vendor = null"
-                  v-if="itemInfo.vendor && mode !== 'show'"
-              />
-            </InputGroup>
-
-
-          </UFormGroup>
-
-          <UFormGroup
-              class="mt-3"
-              label="Rechnungsreferenz:"
-          >
-            <UInput
-                v-model="itemInfo.reference"
-                :disabled="mode === 'show'"
-            />
-          </UFormGroup>
-
-          <InputGroup class="mt-3" gap="2">
-            <UFormGroup label="Rechnungsdatum:">
-              <UPopover :popper="{ placement: 'bottom-start' }">
-                <UButton
-                    icon="i-heroicons-calendar-days-20-solid"
-                    :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : 'Datum auswählen'"
-                    variant="outline"
-                    :color="!itemInfo.date ? 'rose' : 'primary'"
-                    :disabled="mode === 'show'"
-                />
-
-                <template #panel="{ close }">
-                  <LazyDatePicker v-model="itemInfo.date" @close="itemInfo.dueDate = itemInfo.date" />
-                </template>
-              </UPopover>
-            </UFormGroup>
-
-            <UFormGroup label="Fälligkeitsdatum:">
-              <UPopover :popper="{ placement: 'bottom-start' }">
-                <UButton
-                    icon="i-heroicons-calendar-days-20-solid"
-                    :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : 'Datum auswählen'"
-                    variant="outline"
-                    :disabled="mode === 'show'"
-                />
-
-                <template #panel="{ close }">
-                  <LazyDatePicker v-model="itemInfo.dueDate" @close="close"/>
-                </template>
-              </UPopover>
-            </UFormGroup>
-          </InputGroup>
-
-
-
-          <UFormGroup label="Zahlart:" >
-            <USelectMenu
-                :options="['Einzug','Kreditkarte','Überweisung','Sonstiges']"
-                v-model="itemInfo.paymentType"
-                :disabled="mode === 'show'"
-            />
-          </UFormGroup>
-
-          <UFormGroup label="Beschreibung:" >
-            <UTextarea
-                v-model="itemInfo.description"
-                :disabled="mode === 'show'"
-            />
-          </UFormGroup>
-
-          <InputGroup class="my-3">
-            <UButton
-                :variant="!useNetMode ? 'solid' : 'outline'"
-                @click="changeNetMode(false)"
-                :disabled="mode === 'show'"
-            >
-              Brutto
-            </UButton>
-            <UButton
-                :variant="useNetMode ? 'solid' : 'outline'"
-                @click="changeNetMode(true)"
-                :disabled="mode === 'show'"
-            >
-              Netto
-            </UButton>
-
-
-
-            <!--            Brutto
-                        <UToggle
-                            v-model="useNetMode"
-                            @update:model-value="itemInfo.accounts = [{account: null,amountNet: null,amountTax: null,taxType: '19'}]"
-                        />
-                        Netto-->
-          </InputGroup>
-
-          <table v-if="itemInfo.accounts.length > 1" class="w-full">
-            <tr>
-              <td>Gesamt exkl. Steuer: </td>
-              <td class="text-right">{{totalCalculated.totalNet.toFixed(2).replace(".",",")}} €</td>
-            </tr>
-            <tr>
-              <td>7% Steuer: </td>
-              <td class="text-right">{{totalCalculated.totalAmount7Tax.toFixed(2).replace(".",",")}} €</td>
-            </tr>
-            <tr>
-              <td>19% Steuer: </td>
-              <td class="text-right">{{totalCalculated.totalAmount19Tax.toFixed(2).replace(".",",")}} €</td>
-            </tr>
-            <tr>
-              <td>Gesamt inkl. Steuer: </td>
-              <td class="text-right">{{totalCalculated.totalGross.toFixed(2).replace(".",",")}} €</td>
-            </tr>
-          </table>
-
-          <div
-              class="my-3"
-              v-for="(item,index) in itemInfo.accounts"
-          >
-            <UFormGroup
-                label="Kategorie"
-                class="mb-3"
-            >
-              <USelectMenu
-                  :options="accounts"
-                  option-attribute="label"
-                  value-attribute="id"
-                  searchable
-                  :disabled="mode === 'show'"
-                  :search-attributes="['label','number']"
-                  searchable-placeholder="Suche..."
-                  v-model="item.account"
-                  :color="(item.account && accounts.find(i => i.id === item.account)) ? 'primary' : 'rose'"
-              >
-                <template #label>
-                  {{accounts.find(account => account.id === item.account) ? accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
-                </template>
-                <template #option="{ option}">
-                  {{option.number}} - {{option.label}}
-                </template>
-
-              </USelectMenu>
-            </UFormGroup>
-            <UFormGroup
-                label="Kostenstelle"
-                class="w-full mb-3"
-            >
-              <InputGroup class="w-full">
-                <USelectMenu
-                    :options="costcentres"
-                    option-attribute="name"
-                    value-attribute="id"
-                    searchable
-                    :disabled="mode === 'show'"
-                    :search-attributes="['label','name','description','number']"
-                    searchable-placeholder="Suche..."
-                    v-model="item.costCentre"
-                    class="flex-auto"
-                >
-                  <template #label>
-                    {{costcentres.find(i => i.id === item.costCentre) ? costcentres.find(i => i.id === item.costCentre).name : "Keine Kostenstelle ausgewählt" }}
-                  </template>
-                  <template #option="{option}">
-                    <span v-if="option.vehicle">{{option.number}} - Fahrzeug - {{option.name}}</span>
-                    <span v-else-if="option.project">{{option.number}} - Projekt - {{option.name}}</span>
-                    <span v-else-if="option.inventoryitem">{{option.number}} - Inventarartikel - {{option.name}}</span>
-                    <span v-else>{{option.number}} - {{option.name}}</span>
-                  </template>
-
-                </USelectMenu>
-                <UButton
-                    variant="outline"
-                    color="rose"
-                    v-if="item.costCentre && mode !== 'show'"
-                    icon="i-heroicons-x-mark"
-                    @click="item.costCentre = null"
-                />
-              </InputGroup>
-            </UFormGroup>
-            <UFormGroup
-                label="Beschreibung"
-                class="w-full mb-3"
-            >
-              <InputGroup class="w-full">
-                <UInput
-                    v-model="item.description"
-                    class="flex-auto"
-                    :disabled="mode === 'show'"
-                ></UInput>
-                <UButton
-                    variant="outline"
-                    color="rose"
-                    v-if="item.description && mode !== 'show'"
-                    icon="i-heroicons-x-mark"
-                    @click="item.description = null"
-                />
-              </InputGroup>
-            </UFormGroup>
-
-
-
-            <InputGroup>
-              <UFormGroup
-                  v-if="useNetMode"
-                  label="Gesamtbetrag exkl. Steuer in EUR"
-                  class="flex-auto truncate"
-                  :help="item.taxType !== null ? `Betrag inkl. Steuern: ${String(Number(item.amountNet + item.amountTax).toFixed(2)).replace('.',',')} €` : 'Zuerst Steuertyp festlegen' "
-
-              >
-                <UInput
-                    type="number"
-                    step="0.01"
-                    v-model="item.amountNet"
-                    :color="!item.amountNet ? 'rose' : 'primary'"
-                    :disabled="item.taxType === null || mode === 'show'"
-                    @keyup="item.amountTax = Number((item.amountNet * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
-                            item.amountGross = Number(item.amountNet) + NUmber(item.amountTax)"
-                >
-                  <template #trailing>
-                    <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
-                  </template>
-                </UInput>
-              </UFormGroup>
-              <UFormGroup
-                  v-else
-                  label="Gesamtbetrag inkl. Steuer in EUR"
-                  class="flex-auto"
-                  :help="item.taxType !== null ? `Betrag exkl. Steuern: ${item.amountNet ? String(item.amountNet.toFixed(2)).replace('.',',') : '0,00'} €` : 'Zuerst Steuertyp festlegen' "
-
-              >
-                <UInput
-                    type="number"
-                    step="0.01"
-                    :disabled="item.taxType === null || mode === 'show'"
-                    v-model="item.amountGross"
-                    :color="!item.amountGross ? 'rose' : 'primary'"
-                    :ui-menu="{ width: 'min-w-max' }"
-                    @keyup="item.amountNet = Number((item.amountGross / (1 + Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
-                  item.amountTax = Number((item.amountGross - item.amountNet).toFixed(2))"
-                >
-                  <template #trailing>
-                    <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
-                  </template>
-                </UInput>
-
-              </UFormGroup>
-              <UFormGroup
-                  label="Umsatzsteuer"
-                  class="w-32"
-                  :help="`Betrag: ${item.amountTax ? String(item.amountTax).replace('.',',') : '0,00'} €`"
-              >
-                <USelectMenu
-                    :options="taxOptions"
-                    :disabled="mode === 'show'"
-                    :color="item.taxType === null || item.taxType === '0' ? 'rose' : 'primary'"
-                    v-model="item.taxType"
-                    value-attribute="key"
-                    :ui-menu="{ width: 'min-w-max' }"
-                    option-attribute="label"
-                    @change="item.amountNet = Number((item.amountGross / (1 + Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
-                    item.amountTax = Number(((item.amountNet ? item.amountNet : 0) * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
-                >
-                  <template #label>
-                    <span class="truncate">{{taxOptions.find(i => i.key === item.taxType) ? taxOptions.find(i => i.key === item.taxType).label : ""}}</span>
-                  </template>
-                </USelectMenu>
-              </UFormGroup>
-            </InputGroup>
-
-
-            <UButton
-                class="mt-3"
-                v-if="mode !== 'show'"
-                @click="itemInfo.accounts = [...itemInfo.accounts.slice(0,index+1),{account:null, amountNet: null, amountTax:null, taxType: '19'} , ...itemInfo.accounts.slice(index+1)]"
-            >
-              Betrag aufteilen
-            </UButton>
-            <UButton
-                v-if="index !== 0 && mode !== 'show'"
-                class="mt-3"
+                icon="i-heroicons-arrows-pointing-out"
                 variant="ghost"
-                color="rose"
-                @click="itemInfo.accounts = itemInfo.accounts.filter((account,itemIndex) => itemIndex !== index)"
+                size="xs"
+                @click="isPdfDetached = true"
             >
-              Position entfernen
+              Lösen
             </UButton>
+          </UTooltip>
+        </div>
+        <div class="flex-grow overflow-hidden relative">
+          <PDFViewer
+              :file-id="loadedFileId"
+              location="split_view"
+              class="h-full w-full"
+          />
+        </div>
+      </div>
 
+      <div
+          class="flex flex-col bg-white dark:bg-gray-900 overflow-y-auto transition-all duration-300"
+          :class="(!isPdfDetached && loadedFileId) ? 'w-1/2' : 'w-full'"
+      >
+        <div class="p-6 max-w-4xl mx-auto w-full space-y-6 pb-20">
+
+          <UButton
+              v-if="isPdfDetached && loadedFileId"
+              icon="i-heroicons-arrows-pointing-in"
+              variant="outline"
+              class="mb-4"
+              @click="isPdfDetached = false"
+          >
+            Dokument andocken
+          </UButton>
+
+          <UAlert
+              v-if="findIncomingInvoiceErrors.length > 0"
+              title="Prüfung erforderlich"
+              :color="findIncomingInvoiceErrors.some(i => i.type === 'breaking') ? 'rose' : 'orange'"
+              variant="soft"
+              icon="i-heroicons-exclamation-triangle"
+          >
+            <template #description>
+              <ul class="list-disc list-inside text-sm mt-1">
+                <li v-for="(err, idx) in findIncomingInvoiceErrors" :key="idx">{{ err.message }}</li>
+              </ul>
+            </template>
+          </UAlert>
+
+          <UCard>
+            <template #header>
+              <div class="flex justify-between items-center">
+                <h3 class="font-semibold">Stammdaten</h3>
+                <div class="flex bg-gray-100 dark:bg-gray-800 p-1 rounded-lg">
+                  <UButton size="xs" :variant="itemInfo.expense ? 'solid' : 'ghost'" color="rose" @click="itemInfo.expense = true" :disabled="mode === 'show'">Ausgabe</UButton>
+                  <UButton size="xs" :variant="!itemInfo.expense ? 'solid' : 'ghost'" color="emerald" @click="itemInfo.expense = false" :disabled="mode === 'show'">Einnahme</UButton>
+                </div>
+              </div>
+            </template>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <UFormGroup label="Lieferant / Partner" class="md:col-span-2">
+                <div class="flex gap-2">
+                  <USelectMenu
+                      class="w-full"
+                      v-model="itemInfo.vendor"
+                      :options="vendors"
+                      option-attribute="name"
+                      value-attribute="id"
+                      searchable
+                      :disabled="mode === 'show'"
+                      :search-attributes="['name', 'vendorNumber']"
+                      placeholder="Lieferant suchen..."
+                  >
+                    <template #label>
+                      {{ vendors.find(v => v.id === itemInfo.vendor)?.name || 'Bitte wählen' }}
+                    </template>
+                    <template #option="{ option }">
+                      <span class="font-mono text-xs opacity-75 mr-2">{{ option.vendorNumber }}</span> {{ option.name }}
+                    </template>
+                  </USelectMenu>
+                  <EntityModalButtons
+                      v-if="mode !== 'show'"
+                      type="vendors"
+                      :id="itemInfo.vendor"
+                      @return-data="(data) => itemInfo.vendor = data.id"
+                  />
+                </div>
+              </UFormGroup>
+
+              <UFormGroup label="Rechnungsnummer">
+                <UInput v-model="itemInfo.reference" icon="i-heroicons-hashtag" :disabled="mode === 'show'" />
+              </UFormGroup>
+
+              <UFormGroup label="Zahlart">
+                <USelectMenu v-model="itemInfo.paymentType" :options="['Überweisung', 'Lastschrift', 'Kreditkarte', 'PayPal', 'Bar', 'Sonstiges']" :disabled="mode === 'show'" />
+              </UFormGroup>
+
+              <UFormGroup label="Rechnungsdatum">
+                <UPopover :popper="{ placement: 'bottom-start' }">
+                  <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
+                  <template #panel="{ close }">
+                    <LazyDatePicker v-model="itemInfo.date" @close="() => { if(!itemInfo.dueDate) itemInfo.dueDate = itemInfo.date; close() }" />
+                  </template>
+                </UPopover>
+              </UFormGroup>
+
+              <UFormGroup label="Fälligkeitsdatum">
+                <UPopover :popper="{ placement: 'bottom-start' }">
+                  <UButton block color="white" icon="i-heroicons-calendar" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : '-'" :disabled="mode === 'show'" />
+                  <template #panel="{ close }">
+                    <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
+                  </template>
+                </UPopover>
+              </UFormGroup>
+
+              <UFormGroup label="Beschreibung / Notiz" class="md:col-span-2">
+                <UTextarea v-model="itemInfo.description" :rows="2" autoresize :disabled="mode === 'show'" />
+              </UFormGroup>
+            </div>
+          </UCard>
+
+          <div class="space-y-4">
+            <div class="flex justify-between items-end border-b pb-2 dark:border-gray-700">
+              <h3 class="font-semibold text-lg">Positionen</h3>
+              <div class="flex items-center gap-2 text-sm">
+                <span :class="{'font-bold': !useNetMode, 'opacity-50': useNetMode}">Brutto</span>
+                <UToggle v-model="useNetMode" color="primary" :disabled="mode === 'show'" />
+                <span :class="{'font-bold': useNetMode, 'opacity-50': !useNetMode}">Netto Eingabe</span>
+              </div>
+            </div>
+
+            <UCard
+                v-for="(item, index) in itemInfo.accounts"
+                :key="index"
+                :ui="{ body: { padding: 'p-4 sm:p-4' } }"
+                class="relative border-l-4"
+                :class="item.amountNet ? 'border-l-primary-500' : 'border-l-gray-300 dark:border-l-gray-700'"
+            >
+              <UButton
+                  v-if="itemInfo.accounts.length > 1 && mode !== 'show'"
+                  icon="i-heroicons-trash"
+                  color="rose"
+                  variant="ghost"
+                  size="xs"
+                  class="absolute top-2 right-2"
+                  @click="itemInfo.accounts.splice(index, 1)"
+              />
+
+              <div class="grid grid-cols-12 gap-3">
+                <div class="col-span-12 md:col-span-6">
+                  <UFormGroup label="Konto / Kategorie">
+                    <USelectMenu
+                        v-model="item.account"
+                        :options="accounts"
+                        searchable
+                        placeholder="Kategorie wählen"
+                        option-attribute="label"
+                        value-attribute="id"
+                        :disabled="mode === 'show'"
+                        :search-attributes="['label', 'number']"
+                    >
+                      <template #option="{ option }">
+                        <span class="font-mono text-xs text-gray-500 mr-2">{{ option.number }}</span> {{ option.label }}
+                      </template>
+                      <template #label>
+                        {{ accounts.find(a => a.id === item.account)?.label || 'Auswählen' }}
+                      </template>
+                    </USelectMenu>
+                  </UFormGroup>
+                </div>
+
+                <div class="col-span-12 md:col-span-6">
+                  <UFormGroup label="Kostenstelle">
+                    <USelectMenu
+                        v-model="item.costCentre"
+                        :options="costcentres"
+                        searchable
+                        option-attribute="name"
+                        value-attribute="id"
+                        placeholder="Optional"
+                        :disabled="mode === 'show'"
+                    >
+                      <template #label>
+                        {{ costcentres.find(c => c.id === item.costCentre)?.name || 'Keine' }}
+                      </template>
+                    </USelectMenu>
+                  </UFormGroup>
+                </div>
+
+                <div class="col-span-12 md:col-span-4">
+                  <UFormGroup :label="useNetMode ? 'Betrag (Netto)' : 'Betrag (Brutto)'">
+                    <UInput
+                        type="number"
+                        step="0.01"
+                        :disabled="mode === 'show'"
+                        :model-value="useNetMode ? item.amountNet : item.amountGross"
+                        @update:model-value="(val) => {
+                                        if(useNetMode) { item.amountNet = Number(val); recalculateItem(item, 'net') }
+                                        else { item.amountGross = Number(val); recalculateItem(item, 'gross') }
+                                    }"
+                    >
+                      <template #trailing>€</template>
+                    </UInput>
+                  </UFormGroup>
+                </div>
+
+                <div class="col-span-6 md:col-span-4">
+                  <UFormGroup label="Steuerschlüssel">
+                    <USelectMenu
+                        v-model="item.taxType"
+                        :options="taxOptions"
+                        value-attribute="key"
+                        option-attribute="label"
+                        :disabled="mode === 'show'"
+                        @change="recalculateItem(item, 'taxType')"
+                    />
+                  </UFormGroup>
+                </div>
+
+                <div class="col-span-6 md:col-span-4">
+                  <UFormGroup label="Steuerbetrag" help="Automatisch berechnet">
+                    <UInput :model-value="item.amountTax" disabled color="gray" >
+                      <template #trailing>€</template>
+                    </UInput>
+                  </UFormGroup>
+                </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" />
+                </div>
+              </div>
+            </UCard>
+
+            <UButton
+                v-if="mode !== 'show'"
+                icon="i-heroicons-plus"
+                variant="soft"
+                block
+                @click="itemInfo.accounts.push({account:null, amountNet: null, amountTax:0, amountGross: null, taxType: '19'})"
+            >
+              Weitere Position hinzufügen
+            </UButton>
+          </div>
+
+          <div class="mt-8 border-t pt-4 dark:border-gray-700">
+            <div class="flex justify-end">
+              <div class="w-full md:w-1/2 space-y-2 text-sm">
+                <div class="flex justify-between text-gray-500">
+                  <span>Netto Gesamt</span>
+                  <span>{{ totalCalculated.totalNet.toFixed(2) }} €</span>
+                </div>
+                <div class="flex justify-between text-gray-500" v-if="totalCalculated.totalAmount7Tax > 0">
+                  <span>+ 7% USt</span>
+                  <span>{{ totalCalculated.totalAmount7Tax.toFixed(2) }} €</span>
+                </div>
+                <div class="flex justify-between text-gray-500" v-if="totalCalculated.totalAmount19Tax > 0">
+                  <span>+ 19% USt</span>
+                  <span>{{ totalCalculated.totalAmount19Tax.toFixed(2) }} €</span>
+                </div>
+                <div class="flex justify-between font-bold text-xl text-gray-900 dark:text-white pt-2 border-t dark:border-gray-700">
+                  <span>Rechnungsbetrag</span>
+                  <span>{{ totalCalculated.totalGross.toFixed(2) }} €</span>
+                </div>
+              </div>
+            </div>
           </div>
 
         </div>
       </div>
     </div>
-    <UProgress v-else animation="carousel"/>
   </UDashboardPanelContent>
 
-  <PageLeaveGuard :when="true"/>
-
+  <PageLeaveGuard :when="mode !== 'show' && isModified"/>
 
+  <div
+      v-if="isPdfDetached && loadedFileId"
+      ref="pdfEl"
+      :style="pdfStyle"
+      class="fixed z-[999] w-[600px] h-[750px] bg-white dark:bg-gray-900 shadow-2xl rounded-xl border border-gray-200 dark:border-gray-800 flex flex-col resize overflow-hidden"
+  >
+    <div class="flex items-center justify-between p-2 cursor-move border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50 select-none">
+      <div class="flex items-center gap-2 text-gray-500 px-2">
+        <UIcon name="i-heroicons-paper-clip" />
+        <span class="text-xs font-bold uppercase tracking-wider">Dokumentenansicht</span>
+      </div>
+      <div class="flex items-center gap-1">
+        <UTooltip text="Wieder andocken">
+          <UButton
+              color="gray"
+              variant="ghost"
+              icon="i-heroicons-arrows-pointing-in"
+              size="xs"
+              @click="isPdfDetached = false"
+          />
+        </UTooltip>
+      </div>
+    </div>
+    <div class="flex-grow relative bg-gray-200 dark:bg-gray-900 overflow-hidden">
+      <PDFViewer
+          :file-id="loadedFileId"
+          location="draggable_window"
+          class="w-full h-full"
+      />
+    </div>
+    <div class="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize opacity-50">
+      <UIcon name="i-heroicons-arrows-pointing-out" class="w-3 h-3 text-gray-400 transform rotate-90" />
+    </div>
+  </div>
 
 </template>
 
 <style scoped>
-.documentPreview {
-  aspect-ratio: 1 / 1.414;
-  height: 80vh;
-}
-
-
-
-.scrollContainer {
-  overflow-y: scroll;
-  height: 70vh;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-.scrollContainer::-webkit-scrollbar {
-  display: none;
-}
-
-
-.lineItemRow {
-  display: flex;
-  flex-direction: row;
-}
-
-.workingContainer {
-  height: 80vh;
+.resize {
+  resize: both;
 }
 </style>
\ No newline at end of file