4. Zwischenstand

frontend/components/MainNav.vue

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

frontend/components/displayBWASummary.vue

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

frontend/pages/accounting/bwa.vue

@@ -34,21 +34,21 @@ const monthItems = [
 ]
 
 const accountColumns = [
-  { accessorKey: "number", header: "Nummer" },
-  { accessorKey: "label", header: "Konto" },
-  { accessorKey: "bookings", header: "Buchungen" },
+  { accessorKey: "gross", header: "Brutto" },
   { accessorKey: "net", header: "Netto" },
   { accessorKey: "tax", header: "Steuer" },
-  { accessorKey: "gross", header: "Brutto" }
+  { accessorKey: "number", header: "Nummer" },
+  { accessorKey: "label", header: "Konto" },
+  { accessorKey: "bookings", header: "Buchungen" }
 ]
 
 const ownAccountColumns = [
+  { accessorKey: "balance", header: "Saldo" },
+  { accessorKey: "expenses", header: "Ausgaben" },
+  { accessorKey: "income", header: "Einnahmen" },
   { accessorKey: "number", header: "Nummer" },
   { accessorKey: "label", header: "Konto" },
-  { accessorKey: "bookings", header: "Buchungen" },
-  { accessorKey: "income", header: "Einnahmen" },
-  { accessorKey: "expenses", header: "Ausgaben" },
-  { accessorKey: "balance", header: "Saldo" }
+  { accessorKey: "bookings", header: "Buchungen" }
 ]
 
 const isRelevantOutputDocument = (doc: any) => {
@@ -148,18 +148,36 @@ const filteredStatementAllocations = computed(() => {
   return statementAllocations.value.filter((allocation) => matchesSelectedPeriod(getStatementDate(allocation)))
 })
 
+const filteredAccountStatementAllocations = computed(() => {
+  return filteredStatementAllocations.value.filter((allocation) => allocation.account !== null && allocation.account !== undefined)
+})
+
 const incomeTotal = computed(() => {
   return Number(filteredDocuments.value.reduce((sum, doc) => sum + computeDocumentNet(doc), 0).toFixed(2))
 })
 
 const expenseNetTotal = computed(() => {
-  return Number(filteredIncomingInvoices.value.reduce((sum, invoice) => {
+  const invoiceExpenses = filteredIncomingInvoices.value.reduce((sum, invoice) => {
     return sum + (invoice.accounts || []).reduce((accountSum: number, account: any) => accountSum + Number(account.amountNet || 0), 0)
-  }, 0).toFixed(2))
+  }, 0)
+
+  const directAccountExpenses = filteredAccountStatementAllocations.value.reduce((sum, allocation) => {
+    const amount = Number(allocation.amount || 0)
+    return amount < 0 ? sum + Math.abs(amount) : sum
+  }, 0)
+
+  return Number((invoiceExpenses + directAccountExpenses).toFixed(2))
 })
 
 const expenseGrossTotal = computed(() => {
-  return Number(filteredIncomingInvoices.value.reduce((sum, invoice) => sum + computeIncomingInvoiceGross(invoice), 0).toFixed(2))
+  const invoiceExpenses = filteredIncomingInvoices.value.reduce((sum, invoice) => sum + computeIncomingInvoiceGross(invoice), 0)
+
+  const directAccountExpenses = filteredAccountStatementAllocations.value.reduce((sum, allocation) => {
+    const amount = Number(allocation.amount || 0)
+    return amount < 0 ? sum + Math.abs(amount) : sum
+  }, 0)
+
+  return Number((invoiceExpenses + directAccountExpenses).toFixed(2))
 })
 
 const taxSummary = computed(() => {
@@ -201,14 +219,42 @@ const operatingResult = computed(() => {
   return Number((incomeTotal.value - expenseNetTotal.value).toFixed(2))
 })
 
+const incomeDocumentCount = computed(() => filteredDocuments.value.length)
+const expenseDocumentCount = computed(() => {
+  return filteredIncomingInvoices.value.length + filteredAccountStatementAllocations.value.length
+})
+
 const accountRows = computed(() => {
   return accounts.value
     .map((account) => {
-      const bookings = filteredIncomingInvoices.value.flatMap((invoice) => {
+      const invoiceBookings = filteredIncomingInvoices.value.flatMap((invoice) => {
         return (invoice.accounts || [])
           .filter((invoiceAccount: any) => sameId(invoiceAccount.account?.id || invoiceAccount.account, account.id))
+          .map((invoiceAccount: any) => ({
+            type: "incominginvoice",
+            amountNet: Number(invoiceAccount.amountNet || 0),
+            amountTax: Number(invoiceAccount.amountTax || 0),
+            amountGross: Number.isFinite(Number(invoiceAccount.amountGross))
+              ? Number(invoiceAccount.amountGross)
+              : Number(invoiceAccount.amountNet || 0) + Number(invoiceAccount.amountTax || 0)
+          }))
       })
 
+      const directBookings = filteredAccountStatementAllocations.value
+        .filter((allocation) => sameId(allocation.account?.id || allocation.account, account.id))
+        .map((allocation) => {
+          const amount = Number(allocation.amount || 0)
+
+          return {
+            type: "statementallocation",
+            amountNet: amount,
+            amountTax: 0,
+            amountGross: amount
+          }
+        })
+
+      const bookings = [...invoiceBookings, ...directBookings]
+
       if (bookings.length === 0) {
         return null
       }
@@ -231,7 +277,7 @@ const accountRows = computed(() => {
       }
     })
     .filter(Boolean)
-    .sort((left: any, right: any) => Number(right.gross) - Number(left.gross))
+    .sort((left: any, right: any) => Math.abs(Number(right.gross)) - Math.abs(Number(left.gross)))
 })
 
 const ownAccountRows = computed(() => {
@@ -315,16 +361,7 @@ onMounted(setupPage)
 
 <template>
   <UDashboardNavbar title="BWA">
-    <template #right>
-      <UButton
-          icon="i-heroicons-arrow-path"
-          variant="outline"
-          :loading="loading"
-          @click="setupPage"
-      >
-        Aktualisieren
-      </UButton>
-    </template>
+
   </UDashboardNavbar>
 
   <UDashboardPanelContent class="min-w-0 space-y-6 overflow-x-hidden overflow-y-auto p-4 md:p-6">
@@ -350,103 +387,121 @@ onMounted(setupPage)
       </UFormField>
     </div>
 
-    <div class="grid min-w-0 gap-4 md:grid-cols-2 xl:grid-cols-4">
-      <UCard class="min-w-0">
-        <div class="text-sm text-gray-500 dark:text-gray-400">Einnahmen netto</div>
-        <div class="mt-2 text-2xl font-semibold">{{ useCurrency(incomeTotal) }}</div>
-        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
-          {{ filteredDocuments.length }} gebuchte Ausgangsbelege
-        </div>
-      </UCard>
+      <div class="grid min-w-0 gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <UCard class="min-w-0">
+          <div class="text-sm text-gray-500 dark:text-gray-400">Einnahmen netto</div>
+          <div class="mt-2 text-2xl font-semibold">{{ useCurrency(incomeTotal) }}</div>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            {{ incomeDocumentCount }} gebuchte Ausgangsbelege
+          </div>
+        </UCard>
 
-      <UCard class="min-w-0">
-        <div class="text-sm text-gray-500 dark:text-gray-400">Ausgaben netto</div>
+        <UCard class="min-w-0">
+          <div class="text-sm text-gray-500 dark:text-gray-400">Ausgaben netto</div>
         <div class="mt-2 text-2xl font-semibold">{{ useCurrency(expenseNetTotal) }}</div>
-        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
-          Brutto: {{ useCurrency(expenseGrossTotal) }}
-        </div>
-      </UCard>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            Brutto: {{ useCurrency(expenseGrossTotal) }}
+          </div>
+        </UCard>
 
-      <UCard class="min-w-0">
-        <div class="text-sm text-gray-500 dark:text-gray-400">Betriebsergebnis</div>
-        <div class="mt-2 text-2xl font-semibold" :class="operatingResult >= 0 ? 'text-primary-500' : 'text-error'">
-          {{ useCurrency(operatingResult) }}
-        </div>
-        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
-          Einnahmen minus Ausgaben netto
-        </div>
-      </UCard>
+        <UCard class="min-w-0">
+          <div class="text-sm text-gray-500 dark:text-gray-400">Einnahmen Belege</div>
+          <div class="mt-2 text-2xl font-semibold">{{ incomeDocumentCount }}</div>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            Ausgangsbelege im Zeitraum
+          </div>
+        </UCard>
 
-      <UCard class="min-w-0">
-        <div class="text-sm text-gray-500 dark:text-gray-400">USt-Saldo</div>
-        <div class="mt-2 text-2xl font-semibold" :class="taxSummary.balance >= 0 ? 'text-amber-600 dark:text-amber-400' : 'text-primary-500'">
-          {{ useCurrency(taxSummary.balance) }}
-        </div>
-        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
-          USt {{ useCurrency(taxSummary.outputTax) }} | Vorsteuer {{ useCurrency(taxSummary.inputTax) }}
-        </div>
-      </UCard>
-    </div>
+        <UCard class="min-w-0">
+          <div class="text-sm text-gray-500 dark:text-gray-400">Ausgaben Belege</div>
+          <div class="mt-2 text-2xl font-semibold">{{ expenseDocumentCount }}</div>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            Eingangsbelege plus direkte Buchungen
+          </div>
+        </UCard>
+      </div>
 
-    <div class="grid min-w-0 gap-4 xl:grid-cols-2">
-      <UCard class="min-w-0">
-        <template #header>
-          <div class="font-semibold">USt-Details</div>
-        </template>
+      <div class="grid min-w-0 gap-4 md:grid-cols-2">
+        <UCard class="min-w-0">
+          <div class="text-sm text-gray-500 dark:text-gray-400">Betriebsergebnis</div>
+          <div class="mt-2 text-2xl font-semibold" :class="operatingResult >= 0 ? 'text-primary-500' : 'text-error'">
+            {{ useCurrency(operatingResult) }}
+          </div>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            Einnahmen minus Ausgaben netto
+          </div>
+        </UCard>
 
-        <div class="space-y-3 text-sm">
-          <div class="flex items-center justify-between">
-            <span>Netto 19% Ausgangsbelege</span>
-            <span>{{ useCurrency(taxSummary.output.net19) }}</span>
+        <UCard class="min-w-0">
+          <div class="text-sm text-gray-500 dark:text-gray-400">USt-Saldo</div>
+          <div class="mt-2 text-2xl font-semibold" :class="taxSummary.balance >= 0 ? 'text-amber-600 dark:text-amber-400' : 'text-primary-500'">
+            {{ useCurrency(taxSummary.balance) }}
           </div>
-          <div class="flex items-center justify-between">
-            <span>USt 19%</span>
-            <span>{{ useCurrency(taxSummary.output.tax19) }}</span>
+          <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            USt {{ useCurrency(taxSummary.outputTax) }} | Vorsteuer {{ useCurrency(taxSummary.inputTax) }}
           </div>
-          <div class="flex items-center justify-between">
-            <span>Netto 7% Ausgangsbelege</span>
-            <span>{{ useCurrency(taxSummary.output.net7) }}</span>
-          </div>
-          <div class="flex items-center justify-between">
-            <span>USt 7%</span>
-            <span>{{ useCurrency(taxSummary.output.tax7) }}</span>
-          </div>
-          <div class="flex items-center justify-between">
-            <span>Steuerfrei</span>
-            <span>{{ useCurrency(taxSummary.output.net0 + taxSummary.input.net0) }}</span>
-          </div>
-        </div>
-      </UCard>
+        </UCard>
+      </div>
 
-      <UCard class="min-w-0">
-        <template #header>
-          <div class="font-semibold">Vorsteuer-Details</div>
-        </template>
+      <div class="grid min-w-0 gap-4 xl:grid-cols-2">
+        <UCard class="min-w-0">
+          <template #header>
+            <div class="font-semibold">USt-Details</div>
+          </template>
+          
+          <div class="space-y-3 text-sm">
+            <div class="flex items-center justify-between">
+              <span>Netto 19% Ausgangsbelege</span>
+              <span>{{ useCurrency(taxSummary.output.net19) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>USt 19%</span>
+              <span>{{ useCurrency(taxSummary.output.tax19) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Netto 7% Ausgangsbelege</span>
+              <span>{{ useCurrency(taxSummary.output.net7) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>USt 7%</span>
+              <span>{{ useCurrency(taxSummary.output.tax7) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Steuerfrei</span>
+              <span>{{ useCurrency(taxSummary.output.net0 + taxSummary.input.net0) }}</span>
+            </div>
+          </div>
+        </UCard>
 
-        <div class="space-y-3 text-sm">
-          <div class="flex items-center justify-between">
-            <span>Netto 19% Eingangsbelege</span>
-            <span>{{ useCurrency(taxSummary.input.net19) }}</span>
+        <UCard class="min-w-0">
+          <template #header>
+            <div class="font-semibold">Vorsteuer-Details</div>
+          </template>
+
+          <div class="space-y-3 text-sm">
+            <div class="flex items-center justify-between">
+              <span>Netto 19% Eingangsbelege</span>
+              <span>{{ useCurrency(taxSummary.input.net19) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Vorsteuer 19%</span>
+              <span>{{ useCurrency(taxSummary.input.tax19) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Netto 7% Eingangsbelege</span>
+              <span>{{ useCurrency(taxSummary.input.net7) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Vorsteuer 7%</span>
+              <span>{{ useCurrency(taxSummary.input.tax7) }}</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span>Steuerfrei</span>
+              <span>{{ useCurrency(taxSummary.input.net0) }}</span>
+            </div>
           </div>
-          <div class="flex items-center justify-between">
-            <span>Vorsteuer 19%</span>
-            <span>{{ useCurrency(taxSummary.input.tax19) }}</span>
-          </div>
-          <div class="flex items-center justify-between">
-            <span>Netto 7% Eingangsbelege</span>
-            <span>{{ useCurrency(taxSummary.input.net7) }}</span>
-          </div>
-          <div class="flex items-center justify-between">
-            <span>Vorsteuer 7%</span>
-            <span>{{ useCurrency(taxSummary.input.tax7) }}</span>
-          </div>
-          <div class="flex items-center justify-between">
-            <span>Steuerfrei</span>
-            <span>{{ useCurrency(taxSummary.input.net0) }}</span>
-          </div>
-        </div>
-      </UCard>
-    </div>
+        </UCard>
+      </div>
 
     <div class="grid min-w-0 gap-4 xl:grid-cols-2">
       <UCard class="min-w-0">

frontend/pages/accounting/tax.vue

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

frontend/pages/createDocument/edit/[[id]].vue

@@ -86,7 +86,8 @@ const documentTypeItems = computed(() => Object.keys(dataStore.documentTypesForC
 const taxTypeItems = [
   { key: 'Standard', label: 'Standard' },
   { key: '13b UStG', label: '13b UStG' },
-  { key: '19 UStG', label: '19 UStG Kleinunternehmer' }
+  { key: '19 UStG', label: '19 UStG Kleinunternehmer' },
+  { key: '12.3 UStG', label: '12.3 UStG' }
 ]
 const deliveryDateTypeItems = ['Lieferdatum', 'Lieferzeitraum', 'Leistungsdatum', 'Leistungszeitraum', 'Kein Lieferdatum anzeigen']
 const paymentTypeItems = [
@@ -115,6 +116,11 @@ const formatNumberLikeValue = (value) => {
   return '-'
 }
 
+const normalizeTaxTypeValue = (value) => {
+  const normalized = typeof value === "string" ? value.trim() : value
+  return taxTypeItems.find((item) => item.key === normalized)?.key || "Standard"
+}
+
 const getCalendarValue = (value) => {
   if (!value) return undefined
 
@@ -174,6 +180,7 @@ const setupPage = async () => {
     if (route.params.id) {
       console.log(route.params)
       itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id,'',false)
+      itemInfo.value.taxType = normalizeTaxTypeValue(itemInfo.value.taxType)
       await setContactPersonData()
       checkCompatibilityWithInputPrice()
     }
@@ -357,7 +364,7 @@ const setupPage = async () => {
         console.log(optionsToImport)
         console.log(linkedDocument)
 
-        if (optionsToImport.taxType) itemInfo.value.taxType = linkedDocument.taxType
+        if (optionsToImport.taxType) itemInfo.value.taxType = normalizeTaxTypeValue(linkedDocument.taxType)
         if (optionsToImport.customer) itemInfo.value.customer = linkedDocument.customer
         if (optionsToImport.letterhead) itemInfo.value.letterhead = linkedDocument.letterhead
         if (optionsToImport.contact) itemInfo.value.contact = linkedDocument.contact
@@ -382,7 +389,7 @@ const setupPage = async () => {
 
         if (process.dev) console.log(linkedDocument)
 
-        itemInfo.value.taxType = linkedDocument.taxType
+        itemInfo.value.taxType = normalizeTaxTypeValue(linkedDocument.taxType)
         itemInfo.value.customer = linkedDocument.customer
         await setCustomerData(null, true)
         itemInfo.value.letterhead = linkedDocument.letterhead
@@ -545,7 +552,7 @@ const setCustomerData = async (customerId, loadOnlyAdress = false) => {
     if (!loadOnlyAdress && customer.customPaymentDays) itemInfo.value.paymentDays = customer.customPaymentDays
     if (!loadOnlyAdress && customer.custom_payment_type) itemInfo.value.payment_type = customer.custom_payment_type
     if (!loadOnlyAdress) {
-      itemInfo.value.taxType = customer.customTaxType || "Standard"
+      itemInfo.value.taxType = normalizeTaxTypeValue(customer.customTaxType)
       setTaxType()
     }
 
@@ -1459,7 +1466,7 @@ const saveDocument = async (state, resetup = false) => {
 
   let createData = {
     type: itemInfo.value.type,
-    taxType: ['invoices', 'cancellationInvoices', 'advanceInvoices', 'qoutes', 'confirmationOrders'].includes(itemInfo.value.type) ? itemInfo.value.taxType : null,
+    taxType: ['invoices', 'cancellationInvoices', 'advanceInvoices', 'quotes', 'confirmationOrders'].includes(itemInfo.value.type) ? normalizeTaxTypeValue(itemInfo.value.taxType) : null,
     state: itemInfo.value.state || "Entwurf",
     customer: itemInfo.value.customer,
     contact: itemInfo.value.contact,

frontend/pages/createDocument/index.vue

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

frontend/pages/index.client.vue

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