Redone Layouts

backend/src/modules/cron/dokuboximport.service.ts

@@ -19,23 +19,13 @@ import {
     and,
 } from "drizzle-orm"
 
-let badMessageDetected = false
-let badMessageMessageSent = false
-
-let client: ImapFlow | null = null
-
-// -------------------------------------------------------------
-// IMAP CLIENT INITIALIZEN
-// -------------------------------------------------------------
-
-
-
-
-// -------------------------------------------------------------
-// MAIN SYNC FUNCTION (DRIZZLE VERSION)
-// -------------------------------------------------------------
 
 export function syncDokuboxService (server: FastifyInstance)  {
+    let badMessageDetected = false
+    let badMessageMessageSent = false
+
+    let client: ImapFlow | null = null
+
     async function initDokuboxClient() {
         client = new ImapFlow({
             host: secrets.DOKUBOX_IMAP_HOST,
@@ -264,12 +254,3 @@ export function syncDokuboxService (server: FastifyInstance)  {
         }
     }
 }
-
-
-
-
-
-// -------------------------------------------------------------
-// TENANT ERKENNEN + FOLDER/FILETYPES (DRIZZLE VERSION)
-// -------------------------------------------------------------
-

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,156 +42,126 @@ 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>
@@ -195,437 +176,355 @@ const findIncomingInvoiceErrors = computed(() => {
       </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>
+
+  <UDashboardPanelContent class="p-0 overflow-hidden relative">
+    <div class="flex h-[calc(100vh-4rem)]">
+
       <div
-        class="flex justify-between mt-5 workingContainer"
-        v-if="loadedFile"
+          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"
       >
-      <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="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
+                icon="i-heroicons-arrows-pointing-out"
+                variant="ghost"
+                size="xs"
+                @click="isPdfDetached = true"
+            >
+              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 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'"
+        </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 ml-5">
-              <li v-for="error in findIncomingInvoiceErrors" :class="[...error.type === 'breaking' ? ['text-rose-600'] : ['dark:text-white','text-black']]">
-                {{error.message}}
-              </li>
+              <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>
 
-        <div class="scrollContainer">
-          <InputGroup class="mb-3">
-            <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>
+          <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>
 
-          <UFormGroup label="Lieferant:" >
-            <InputGroup>
+            <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
-                  :disabled="mode === 'show'"
+                      class="w-full"
                       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'"
+                      :disabled="mode === 'show'"
+                      :search-attributes="['name', 'vendorNumber']"
+                      placeholder="Lieferant suchen..."
                   >
-                <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'}}
+                      {{ 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"
-                  :button-edit="mode !== 'show'"
-                  :button-create="mode !== 'show'"
                   />
+                </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
-                  icon="i-heroicons-x-mark"
-                  variant="outline"
+                  v-if="itemInfo.accounts.length > 1 && mode !== 'show'"
+                  icon="i-heroicons-trash"
                   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'"
+                  variant="ghost"
+                  size="xs"
+                  class="absolute top-2 right-2"
+                  @click="itemInfo.accounts.splice(index, 1)"
               />
 
-                <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"
-            >
+              <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"
-                  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'"
+                        :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(account => account.id === item.account) ? accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
+                        {{ accounts.find(a => a.id === item.account)?.label || 'Auswählen' }}
                       </template>
-                <template #option="{ option}">
-                  {{option.number}} - {{option.label}}
-                </template>
-
                     </USelectMenu>
                   </UFormGroup>
-            <UFormGroup
-                label="Kostenstelle"
-                class="w-full mb-3"
-            >
-              <InputGroup class="w-full">
+                </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"
-                    searchable
+                        placeholder="Optional"
                         :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" }}
+                        {{ costcentres.find(c => c.id === item.costCentre)?.name || 'Keine' }}
                       </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">
+                </div>
+
+                <div class="col-span-12 md:col-span-4">
+                  <UFormGroup :label="useNetMode ? 'Betrag (Netto)' : 'Betrag (Brutto)'">
                     <UInput
-                    v-model="item.description"
-                    class="flex-auto"
+                        type="number"
+                        step="0.01"
                         :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' "
-
+                        :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') }
+                                    }"
                     >
-                <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>
+                      <template #trailing>€</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' "
+                </div>
 
-              >
-                <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'} €`"
-              >
+                <div class="col-span-6 md:col-span-4">
+                  <UFormGroup label="Steuerschlüssel">
                     <USelectMenu
-                    :options="taxOptions"
-                    :disabled="mode === 'show'"
-                    :color="item.taxType === null || item.taxType === '0' ? 'rose' : 'primary'"
                         v-model="item.taxType"
+                        :options="taxOptions"
                         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>
+                        :disabled="mode === 'show'"
+                        @change="recalculateItem(item, 'taxType')"
+                    />
                   </UFormGroup>
-            </InputGroup>
+                </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
-                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)]"
+                icon="i-heroicons-plus"
+                variant="soft"
+                block
+                @click="itemInfo.accounts.push({account:null, amountNet: null, amountTax:0, amountGross: null, taxType: '19'})"
             >
-              Betrag aufteilen
-            </UButton>
-            <UButton
-                v-if="index !== 0 && mode !== 'show'"
-                class="mt-3"
-                variant="ghost"
-                color="rose"
-                @click="itemInfo.accounts = itemInfo.accounts.filter((account,itemIndex) => itemIndex !== index)"
-            >
-              Position entfernen
+              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>