Implementiert Kassenbuch für Barkassen

Barkassen können als manuelle Bankkonten angelegt werden. Kassenbuchungen erzeugen Bankbewegungen mit Gegenkonto und sind über eine neue Buchhaltungsseite erreichbar.

backend/src/routes/banking.ts

@@ -10,6 +10,7 @@ import { DE_BANK_CODE_TO_BIC } from "../utils/deBankBics"
 
 import {
     bankrequisitions,
+    bankaccounts,
     bankstatements,
     accounts,
     createddocuments,
@@ -26,10 +27,12 @@ import {
     and,
     isNull,
     aliasedTable,
+    desc,
 } from "drizzle-orm"
 
 
 export default async function bankingRoutes(server: FastifyInstance) {
+    const CASHBOOK_BANK_ID = "fedeo-cashbook"
     const ContraAccounts = aliasedTable(accounts, "contra_accounts")
     const ContraCustomers = aliasedTable(customers, "contra_customers")
     const ContraVendors = aliasedTable(vendors, "contra_vendors")
@@ -40,6 +43,24 @@ export default async function bankingRoutes(server: FastifyInstance) {
     const normalizeManualSide = (payload: any, keys: string[]) =>
         keys.filter((key) => payload[key] !== null && payload[key] !== undefined && payload[key] !== "")
 
+    const cashbookAccountFilter = (tenantId: number) => and(
+        eq(bankaccounts.tenant, tenantId),
+        eq(bankaccounts.bankId, CASHBOOK_BANK_ID),
+        eq(bankaccounts.archived, false)
+    )
+
+    const buildCashbookCounterPayload = (type: string, id: any) => {
+        const numericId = type === "ownaccount" ? id : Number(id)
+        if (!id || (type !== "ownaccount" && !Number.isFinite(numericId))) return null
+
+        if (type === "account") return { account: numericId }
+        if (type === "customer") return { customer: numericId }
+        if (type === "vendor") return { vendor: numericId }
+        if (type === "ownaccount") return { ownaccount: numericId }
+        if (type === "incominginvoice") return { incominginvoice: numericId }
+        return null
+    }
+
     const prepareStatementAllocationPayload = (payload: any) => {
         const next = { ...payload }
         const isManualBooking = !next.bankstatement
@@ -89,6 +110,270 @@ export default async function bankingRoutes(server: FastifyInstance) {
         return { data: next }
     }
 
+    server.get("/banking/cashbooks", async (req, reply) => {
+        try {
+            if (!req.user) return reply.code(401).send({ error: "Unauthorized" })
+
+            const rows = await server.db
+                .select()
+                .from(bankaccounts)
+                .where(cashbookAccountFilter(req.user.tenant_id))
+                .orderBy(bankaccounts.name)
+
+            return reply.send(rows)
+        } catch (err) {
+            server.log.error(err)
+            return reply.code(500).send({ error: "Failed to load cashbooks" })
+        }
+    })
+
+    server.post("/banking/cashbooks", async (req, reply) => {
+        try {
+            if (!req.user) return reply.code(401).send({ error: "Unauthorized" })
+
+            const body = req.body as {
+                name?: string
+                datevNumber?: string
+                openingBalance?: number
+            }
+
+            const name = String(body.name || "").trim()
+            const datevNumber = String(body.datevNumber || "").trim()
+            const openingBalance = Number(body.openingBalance || 0)
+
+            if (!name) return reply.code(400).send({ error: "Bitte eine Bezeichnung für die Kasse angeben." })
+            if (!datevNumber) return reply.code(400).send({ error: "Bitte eine Kontennummer für die Kasse angeben." })
+            if (!Number.isFinite(openingBalance)) return reply.code(400).send({ error: "Der Anfangsbestand ist ungültig." })
+
+            const uniquePart = `${req.user.tenant_id}-${Date.now()}`
+            const inserted = await server.db.insert(bankaccounts).values({
+                name,
+                iban: `CASH-${uniquePart}`,
+                tenant: req.user.tenant_id,
+                bankId: CASHBOOK_BANK_ID,
+                ownerName: name,
+                accountId: `cashbook-${uniquePart}`,
+                balance: openingBalance,
+                datevNumber,
+                updatedBy: req.user.user_id,
+            }).returning()
+
+            const createdRecord = inserted[0]
+            return reply.send(createdRecord)
+        } catch (err) {
+            server.log.error(err)
+            return reply.code(500).send({ error: "Failed to create cashbook" })
+        }
+    })
+
+    server.patch("/banking/cashbooks/:id/archive", async (req, reply) => {
+        try {
+            if (!req.user) return reply.code(401).send({ error: "Unauthorized" })
+
+            const { id } = req.params as { id: string }
+            const updated = await server.db.update(bankaccounts)
+                .set({
+                    archived: true,
+                    updatedAt: new Date(),
+                    updatedBy: req.user.user_id,
+                })
+                .where(and(
+                    eq(bankaccounts.id, Number(id)),
+                    eq(bankaccounts.tenant, req.user.tenant_id),
+                    eq(bankaccounts.bankId, CASHBOOK_BANK_ID)
+                ))
+                .returning()
+
+            if (!updated[0]) return reply.code(404).send({ error: "Cashbook not found" })
+            return reply.send(updated[0])
+        } catch (err) {
+            server.log.error(err)
+            return reply.code(500).send({ error: "Failed to archive cashbook" })
+        }
+    })
+
+    server.get("/banking/cashbooks/:id/bookings", async (req, reply) => {
+        try {
+            if (!req.user) return reply.code(401).send({ error: "Unauthorized" })
+
+            const { id } = req.params as { id: string }
+            const cashbookId = Number(id)
+            if (!Number.isFinite(cashbookId)) return reply.code(400).send({ error: "Ungültige Kasse." })
+
+            const rows = await server.db.select({
+                statement: bankstatements,
+                allocation: statementallocations,
+                account: accounts,
+                customer: customers,
+                vendor: vendors,
+                ownaccount: ownaccounts,
+                incominginvoice: ManualInvoices,
+                incominginvoiceVendor: ManualInvoiceVendors,
+            })
+                .from(bankstatements)
+                .leftJoin(statementallocations, eq(statementallocations.bankstatement, bankstatements.id))
+                .leftJoin(accounts, eq(statementallocations.account, accounts.id))
+                .leftJoin(customers, eq(statementallocations.customer, customers.id))
+                .leftJoin(vendors, eq(statementallocations.vendor, vendors.id))
+                .leftJoin(ownaccounts, eq(statementallocations.ownaccount, ownaccounts.id))
+                .leftJoin(ManualInvoices, eq(statementallocations.incominginvoice, ManualInvoices.id))
+                .leftJoin(ManualInvoiceVendors, eq(ManualInvoices.vendor, ManualInvoiceVendors.id))
+                .where(and(
+                    eq(bankstatements.tenant, req.user.tenant_id),
+                    eq(bankstatements.account, cashbookId),
+                    eq(bankstatements.archived, false)
+                ))
+                .orderBy(desc(bankstatements.date), desc(bankstatements.createdAt))
+
+            return reply.send(rows.map((row) => ({
+                ...row.statement,
+                allocation: row.allocation,
+                account: row.account,
+                customer: row.customer,
+                vendor: row.vendor,
+                ownaccount: row.ownaccount,
+                incominginvoice: row.incominginvoice ? {
+                    ...row.incominginvoice,
+                    vendor: row.incominginvoiceVendor,
+                } : null,
+            })))
+        } catch (err) {
+            server.log.error(err)
+            return reply.code(500).send({ error: "Failed to load cashbook bookings" })
+        }
+    })
+
+    server.post("/banking/cashbooks/:id/bookings", async (req, reply) => {
+        try {
+            if (!req.user) return reply.code(401).send({ error: "Unauthorized" })
+
+            const { id } = req.params as { id: string }
+            const cashbookId = Number(id)
+            const body = req.body as {
+                date?: string
+                amount?: number
+                direction?: "income" | "expense"
+                counterType?: string
+                counterId?: string | number
+                description?: string
+                datevTaxKey?: string | null
+            }
+
+            if (!Number.isFinite(cashbookId)) return reply.code(400).send({ error: "Ungültige Kasse." })
+            if (!body.date || !dayjs(body.date).isValid()) return reply.code(400).send({ error: "Bitte ein gültiges Buchungsdatum angeben." })
+            if (!Number.isFinite(Number(body.amount)) || Number(body.amount) <= 0) return reply.code(400).send({ error: "Der Betrag muss größer als 0 sein." })
+            if (body.direction !== "income" && body.direction !== "expense") return reply.code(400).send({ error: "Bitte Einnahme oder Ausgabe auswählen." })
+
+            const cashbook = await server.db.select().from(bankaccounts).where(and(
+                eq(bankaccounts.id, cashbookId),
+                eq(bankaccounts.tenant, req.user.tenant_id),
+                eq(bankaccounts.bankId, CASHBOOK_BANK_ID),
+                eq(bankaccounts.archived, false)
+            )).limit(1)
+
+            if (!cashbook[0]) return reply.code(404).send({ error: "Kasse nicht gefunden." })
+
+            const counterPayload = buildCashbookCounterPayload(String(body.counterType || ""), body.counterId)
+            if (!counterPayload) return reply.code(400).send({ error: "Bitte ein Gegenkonto auswählen." })
+
+            const signedAmount = body.direction === "income"
+                ? Math.abs(Number(body.amount))
+                : -Math.abs(Number(body.amount))
+            const description = String(body.description || "").trim() || (body.direction === "income" ? "Bareinnahme" : "Barausgabe")
+
+            const created = await server.db.transaction(async (tx) => {
+                const insertedStatements = await tx.insert(bankstatements).values({
+                    account: cashbookId,
+                    date: dayjs(body.date).format("YYYY-MM-DD"),
+                    amount: signedAmount,
+                    tenant: req.user.tenant_id,
+                    text: description,
+                    currency: "EUR",
+                    credName: body.direction === "income" ? cashbook[0].name : description,
+                    debName: body.direction === "expense" ? cashbook[0].name : description,
+                    updatedBy: req.user.user_id,
+                }).returning()
+
+                const statement = insertedStatements[0]
+                const insertedAllocations = await tx.insert(statementallocations).values({
+                    bankstatement: statement.id,
+                    amount: signedAmount,
+                    tenant: req.user.tenant_id,
+                    description,
+                    datevTaxKey: body.datevTaxKey ? String(body.datevTaxKey).trim() : null,
+                    ...counterPayload,
+                }).returning()
+
+                return {
+                    statement,
+                    allocation: insertedAllocations[0],
+                }
+            })
+
+            await insertHistoryItem(server, {
+                entity: "bankstatements",
+                entityId: Number(created.statement.id),
+                action: "created",
+                created_by: req.user.user_id,
+                tenant_id: req.user.tenant_id,
+                oldVal: null,
+                newVal: created,
+                text: "Kassenbuchung erstellt",
+            })
+
+            return reply.send(created)
+        } catch (err) {
+            server.log.error(err)
+            return reply.code(500).send({ error: "Failed to create cashbook booking" })
+        }
+    })
+
+    server.delete("/banking/cashbook-bookings/:id", async (req, reply) => {
+        try {
+            if (!req.user) return reply.code(401).send({ error: "Unauthorized" })
+
+            const { id } = req.params as { id: string }
+            const statementId = Number(id)
+            if (!Number.isFinite(statementId)) return reply.code(400).send({ error: "Ungültige Buchung." })
+
+            const records = await server.db.select({
+                statement: bankstatements,
+                cashbook: bankaccounts,
+            })
+                .from(bankstatements)
+                .innerJoin(bankaccounts, eq(bankstatements.account, bankaccounts.id))
+                .where(and(
+                    eq(bankstatements.id, statementId),
+                    eq(bankstatements.tenant, req.user.tenant_id),
+                    eq(bankaccounts.bankId, CASHBOOK_BANK_ID)
+                ))
+                .limit(1)
+
+            if (!records[0]) return reply.code(404).send({ error: "Kassenbuchung nicht gefunden." })
+
+            await server.db.transaction(async (tx) => {
+                await tx.delete(statementallocations).where(eq(statementallocations.bankstatement, statementId))
+                await tx.delete(bankstatements).where(eq(bankstatements.id, statementId))
+            })
+
+            await insertHistoryItem(server, {
+                entity: "bankstatements",
+                entityId: statementId,
+                action: "deleted",
+                created_by: req.user.user_id,
+                tenant_id: req.user.tenant_id,
+                oldVal: records[0].statement,
+                newVal: null,
+                text: "Kassenbuchung gelöscht",
+            })
+
+            return reply.send({ success: true })
+        } catch (err) {
+            server.log.error(err)
+            return reply.code(500).send({ error: "Failed to delete cashbook booking" })
+        }
+    })
+
     const normalizeIban = (value?: string | null) =>
         String(value || "").replace(/\s+/g, "").toUpperCase()
 

frontend/components/MainNav.vue

@@ -193,6 +193,11 @@ const links = computed(() => {
       to: "/banking",
       icon: "i-heroicons-document-text",
     } : null,
+    featureEnabled("banking") ? {
+      label: "Kassenbuch",
+      to: "/accounting/cashbooks",
+      icon: "i-heroicons-banknotes",
+    } : null,
     (featureEnabled("accounts") || featureEnabled("ownaccounts")) ? {
       label: "Manuelle Buchungen",
       to: "/accounting/manual-bookings",

frontend/pages/accounting/cashbooks.vue

@@ -0,0 +1,512 @@
+<script setup>
+import dayjs from "dayjs"
+
+const toast = useToast()
+
+const loading = ref(true)
+const savingCashbook = ref(false)
+const savingBooking = ref(false)
+const cashbooks = ref([])
+const bookings = ref([])
+const accounts = ref([])
+const customers = ref([])
+const vendors = ref([])
+const ownaccounts = ref([])
+const incomingInvoices = ref([])
+const selectedCashbookId = ref(null)
+const counterSearch = ref("")
+const expandedGroups = ref([])
+
+const DATEV_TAX_KEY_ITEMS = [
+  { value: "__none__", label: "Ohne Steuerschlüssel" },
+  { value: "9", label: "9 - Vorsteuer 19 %" },
+  { value: "8", label: "8 - Vorsteuer 7 %" },
+  { value: "19", label: "19 - EU Vorsteuer 19 %" },
+  { value: "18", label: "18 - EU Vorsteuer 7 %" }
+]
+
+const newCashbook = reactive({
+  name: "",
+  datevNumber: "1000",
+  openingBalance: 0
+})
+
+const form = reactive({
+  date: dayjs().format("YYYY-MM-DD"),
+  direction: "expense",
+  amount: null,
+  counter: "",
+  datevTaxKey: "__none__",
+  description: ""
+})
+
+const displayCurrency = (value) => `${Number(value || 0).toFixed(2).replace(".", ",")} €`
+const normalizeSearch = (value) => String(value || "").toLowerCase().trim()
+
+const selectedCashbook = computed(() => cashbooks.value.find((item) => item.id === selectedCashbookId.value) || null)
+const currentBalance = computed(() => {
+  const openingBalance = Number(selectedCashbook.value?.balance || 0)
+  const movementSum = bookings.value.reduce((sum, booking) => sum + Number(booking.amount || 0), 0)
+  return openingBalance + movementSum
+})
+
+const getIncomingInvoiceGross = (invoice) => {
+  return Number((invoice.accounts || []).reduce((sum, account) => {
+    return sum + Number(account.amountNet || 0) + Number(account.amountTax || 0)
+  }, 0))
+}
+
+const getIncomingInvoiceOpenAmount = (invoice) => {
+  const gross = getIncomingInvoiceGross(invoice)
+  const allocated = Number((invoice.statementallocations || []).reduce((sum, allocation) => sum + Number(allocation.amount || 0), 0))
+  return Math.abs(gross) - Math.abs(allocated)
+}
+
+const buildEntries = (rows, type, labelBuilder) =>
+    (rows || []).map((item) => ({
+      key: `${type}:${item.id}`,
+      id: item.id,
+      type,
+      number: item.number || item.vendorNumber || item.customerNumber || item.reference || "",
+      name: item.label || item.name || item.vendor?.name || "",
+      label: labelBuilder(item),
+      typeLabel:
+          type === "account"
+              ? "Sachkonten"
+              : type === "vendor"
+                  ? "Kreditoren"
+                  : type === "customer"
+                      ? "Debitoren"
+                      : type === "incominginvoice"
+                          ? "Eingangsbelege"
+                          : "Zusätzliche Konten"
+    }))
+
+const entryGroups = computed(() => ([
+  {
+    key: "account",
+    label: "Sachkonten",
+    entries: buildEntries(accounts.value, "account", (item) => `${item.number} - ${item.label}`)
+  },
+  {
+    key: "vendor",
+    label: "Kreditoren",
+    entries: buildEntries(vendors.value, "vendor", (item) => `${item.vendorNumber || "ohne Nr."} - ${item.name}`)
+  },
+  {
+    key: "customer",
+    label: "Debitoren",
+    entries: buildEntries(customers.value, "customer", (item) => `${item.customerNumber || "ohne Nr."} - ${item.name}`)
+  },
+  {
+    key: "ownaccount",
+    label: "Zusätzliche Konten",
+    entries: buildEntries(ownaccounts.value, "ownaccount", (item) => `${item.number} - ${item.name}`)
+  },
+  {
+    key: "incominginvoice",
+    label: "Eingangsbelege",
+    entries: buildEntries(incomingInvoices.value, "incominginvoice", (item) => `${item.reference || "Ohne Referenz"} - ${item.vendor?.name || "Ohne Lieferant"} - Offen ${displayCurrency(getIncomingInvoiceOpenAmount(item))}`)
+  }
+]))
+
+const groupedCounterEntries = computed(() =>
+    entryGroups.value.map((group) => ({
+      ...group,
+      entries: group.entries.filter((entry) => {
+        const search = normalizeSearch(counterSearch.value)
+        if (!search) return true
+        return [entry.number, entry.name, entry.label, entry.typeLabel]
+            .some((value) => normalizeSearch(value).includes(search))
+      })
+    })).filter((group) => group.entries.length > 0)
+)
+
+const selectedCounter = computed(() => entryGroups.value.flatMap((group) => group.entries).find((entry) => entry.key === form.counter))
+
+const isGroupExpanded = (groupKey) => expandedGroups.value.includes(groupKey)
+const toggleGroupExpanded = (groupKey) => {
+  if (expandedGroups.value.includes(groupKey)) {
+    expandedGroups.value = expandedGroups.value.filter((item) => item !== groupKey)
+    return
+  }
+  expandedGroups.value = [...expandedGroups.value, groupKey]
+}
+
+const visibleEntries = (group) => {
+  if (group.entries.length <= 5 || isGroupExpanded(group.key)) return group.entries
+  return group.entries.slice(0, 5)
+}
+
+const getBookingCounter = (booking) => {
+  if (booking.incominginvoice) {
+    return {
+      type: "Eingangsbeleg",
+      number: booking.incominginvoice.reference || "",
+      name: booking.incominginvoice.vendor?.name || booking.incominginvoice.description || ""
+    }
+  }
+
+  const map = [
+    ["account", "Sachkonto"],
+    ["vendor", "Kreditor"],
+    ["customer", "Debitor"],
+    ["ownaccount", "Zusätzliches Konto"]
+  ]
+
+  for (const [key, type] of map) {
+    const item = booking[key]
+    if (!item) continue
+    return {
+      type,
+      number: item.number || item.vendorNumber || item.customerNumber || "",
+      name: item.label || item.name || ""
+    }
+  }
+
+  return { type: "", number: "", name: "" }
+}
+
+const loadBookings = async () => {
+  if (!selectedCashbookId.value) {
+    bookings.value = []
+    return
+  }
+
+  bookings.value = await useNuxtApp().$api(`/api/banking/cashbooks/${selectedCashbookId.value}/bookings`)
+}
+
+const loadData = async () => {
+  loading.value = true
+  const [cashbookRows, accountRows, customerRows, vendorRows, ownaccountRows, incomingInvoiceRows] = await Promise.all([
+    useNuxtApp().$api("/api/banking/cashbooks"),
+    useEntities("accounts").selectSpecial("*", "number", true),
+    useEntities("customers").select(),
+    useEntities("vendors").select(),
+    useEntities("ownaccounts").select(),
+    useEntities("incominginvoices").select("*, vendor(*), statementallocations(id,amount)")
+  ])
+
+  cashbooks.value = cashbookRows || []
+  accounts.value = accountRows || []
+  customers.value = customerRows || []
+  vendors.value = vendorRows || []
+  ownaccounts.value = ownaccountRows || []
+  incomingInvoices.value = (incomingInvoiceRows || [])
+      .filter((invoice) => invoice.state === "Gebucht" && !invoice.archived)
+      .filter((invoice) => getIncomingInvoiceOpenAmount(invoice) > 0.004)
+
+  if (!selectedCashbookId.value && cashbooks.value.length > 0) {
+    selectedCashbookId.value = cashbooks.value[0].id
+  }
+
+  await loadBookings()
+  loading.value = false
+}
+
+const createCashbook = async () => {
+  if (!newCashbook.name || !newCashbook.datevNumber) {
+    toast.add({ title: "Bitte Bezeichnung und Kontennummer ausfüllen.", color: "warning" })
+    return
+  }
+
+  savingCashbook.value = true
+  try {
+    const created = await useNuxtApp().$api("/api/banking/cashbooks", {
+      method: "POST",
+      body: {
+        name: newCashbook.name,
+        datevNumber: newCashbook.datevNumber,
+        openingBalance: Number(newCashbook.openingBalance || 0)
+      }
+    })
+    toast.add({ title: "Barkasse erstellt." })
+    newCashbook.name = ""
+    newCashbook.datevNumber = "1000"
+    newCashbook.openingBalance = 0
+    await loadData()
+    selectedCashbookId.value = created.id
+  } finally {
+    savingCashbook.value = false
+  }
+}
+
+const saveBooking = async () => {
+  if (!selectedCashbookId.value || !form.date || !form.amount || !form.counter) {
+    toast.add({ title: "Bitte Kasse, Datum, Betrag und Gegenkonto auswählen.", color: "warning" })
+    return
+  }
+
+  const [counterType, counterId] = String(form.counter).split(":")
+  savingBooking.value = true
+  try {
+    await useNuxtApp().$api(`/api/banking/cashbooks/${selectedCashbookId.value}/bookings`, {
+      method: "POST",
+      body: {
+        date: form.date,
+        direction: form.direction,
+        amount: Number(form.amount),
+        counterType,
+        counterId,
+        datevTaxKey: form.datevTaxKey === "__none__" ? null : form.datevTaxKey,
+        description: form.description
+      }
+    })
+    toast.add({ title: "Kassenbuchung erstellt." })
+    form.amount = null
+    form.counter = ""
+    form.datevTaxKey = "__none__"
+    form.description = ""
+    counterSearch.value = ""
+    expandedGroups.value = []
+    await loadBookings()
+  } finally {
+    savingBooking.value = false
+  }
+}
+
+const deleteBooking = async (booking) => {
+  await useNuxtApp().$api(`/api/banking/cashbook-bookings/${booking.id}`, { method: "DELETE" })
+  toast.add({ title: "Kassenbuchung gelöscht." })
+  await loadBookings()
+}
+
+watch(selectedCashbookId, loadBookings)
+
+onMounted(loadData)
+</script>
+
+<template>
+  <UDashboardPanelContent>
+    <UDashboardNavbar title="Kassenbuch" :badge="cashbooks.length" />
+
+    <div class="grid gap-6 xl:grid-cols-[320px_minmax(0,1fr)]">
+      <div class="space-y-6">
+        <UCard>
+          <template #header>
+            <div>
+              <h2 class="font-semibold text-gray-900 dark:text-white">Barkassen</h2>
+              <p class="text-sm text-gray-500">Kassen werden als manuelle Bankkonten geführt.</p>
+            </div>
+          </template>
+
+          <div v-if="loading" class="py-6 text-center text-gray-500">Lade Kassen...</div>
+          <div v-else-if="cashbooks.length === 0" class="py-6 text-center text-gray-500">Noch keine Barkasse angelegt.</div>
+          <div v-else class="space-y-2">
+            <button
+                v-for="cashbook in cashbooks"
+                :key="cashbook.id"
+                type="button"
+                class="w-full rounded-lg border px-3 py-2 text-left transition"
+                :class="selectedCashbookId === cashbook.id
+                  ? 'border-primary-500 bg-primary-50 dark:bg-primary-950/30'
+                  : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-800 dark:bg-gray-900'"
+                @click="selectedCashbookId = cashbook.id"
+            >
+              <div class="flex items-center justify-between gap-3">
+                <span class="font-medium">{{ cashbook.name }}</span>
+                <span class="font-mono text-sm text-gray-500">{{ cashbook.datevNumber }}</span>
+              </div>
+            </button>
+          </div>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <h2 class="font-semibold text-gray-900 dark:text-white">Neue Barkasse</h2>
+          </template>
+
+          <div class="space-y-4">
+            <UFormField label="Bezeichnung">
+              <UInput v-model="newCashbook.name" placeholder="z. B. Hauptkasse" />
+            </UFormField>
+            <UFormField label="Kontennummer">
+              <UInput v-model="newCashbook.datevNumber" placeholder="1000" />
+            </UFormField>
+            <UFormField label="Anfangsbestand">
+              <UInput v-model="newCashbook.openingBalance" type="number" step="0.01" />
+            </UFormField>
+            <UButton block icon="i-heroicons-plus" :loading="savingCashbook" @click="createCashbook">
+              Barkasse anlegen
+            </UButton>
+          </div>
+        </UCard>
+      </div>
+
+      <div v-if="selectedCashbook" class="space-y-6">
+        <div class="grid gap-4 md:grid-cols-3">
+          <UCard>
+            <div class="text-sm text-gray-500">Aktuelle Kasse</div>
+            <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ selectedCashbook.name }}</div>
+          </UCard>
+          <UCard>
+            <div class="text-sm text-gray-500">Kontennummer</div>
+            <div class="mt-1 font-mono text-lg font-semibold text-gray-900 dark:text-white">{{ selectedCashbook.datevNumber }}</div>
+          </UCard>
+          <UCard>
+            <div class="text-sm text-gray-500">Kassenbestand</div>
+            <div class="mt-1 text-lg font-semibold" :class="currentBalance < 0 ? 'text-red-600' : 'text-emerald-600'">
+              {{ displayCurrency(currentBalance) }}
+            </div>
+          </UCard>
+        </div>
+
+        <UCard>
+          <template #header>
+            <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+              <div>
+                <h2 class="font-semibold text-gray-900 dark:text-white">Neue Kassenbuchung</h2>
+                <p class="text-sm text-gray-500">Einnahmen erhöhen den Kassenbestand, Ausgaben verringern ihn.</p>
+              </div>
+              <div class="grid gap-3 sm:grid-cols-3">
+                <UFormField label="Buchungsdatum">
+                  <UInput v-model="form.date" type="date" />
+                </UFormField>
+                <UFormField label="Betrag">
+                  <UInput v-model="form.amount" type="number" min="0" step="0.01" placeholder="0,00" />
+                </UFormField>
+                <UFormField label="DATEV-Steuerschlüssel">
+                  <USelect
+                      v-model="form.datevTaxKey"
+                      :items="DATEV_TAX_KEY_ITEMS"
+                      value-key="value"
+                      label-key="label"
+                      class="w-full"
+                  />
+                </UFormField>
+              </div>
+            </div>
+          </template>
+
+          <div class="grid gap-6 xl:grid-cols-[240px_minmax(0,1fr)]">
+            <div class="space-y-3">
+              <button
+                  type="button"
+                  class="w-full rounded-lg border px-4 py-3 text-left transition"
+                  :class="form.direction === 'income'
+                    ? 'border-emerald-500 bg-emerald-50 dark:bg-emerald-950/30'
+                    : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-800 dark:bg-gray-900'"
+                  @click="form.direction = 'income'"
+              >
+                <div class="font-semibold text-emerald-700 dark:text-emerald-300">Einnahme</div>
+                <div class="text-sm text-gray-500">Bargeld kommt in die Kasse.</div>
+              </button>
+              <button
+                  type="button"
+                  class="w-full rounded-lg border px-4 py-3 text-left transition"
+                  :class="form.direction === 'expense'
+                    ? 'border-red-500 bg-red-50 dark:bg-red-950/30'
+                    : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-800 dark:bg-gray-900'"
+                  @click="form.direction = 'expense'"
+              >
+                <div class="font-semibold text-red-700 dark:text-red-300">Ausgabe</div>
+                <div class="text-sm text-gray-500">Bargeld wird aus der Kasse entnommen.</div>
+              </button>
+            </div>
+
+            <div class="space-y-4">
+              <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <h3 class="font-semibold text-gray-900 dark:text-white">Gegenkonto</h3>
+                  <p class="text-sm text-gray-500">Sachkonto, Kreditor, Debitor, Eingangsbeleg oder zusätzliches Konto.</p>
+                </div>
+                <UInput v-model="counterSearch" icon="i-heroicons-magnifying-glass" placeholder="Gegenkonto durchsuchen..." class="max-w-sm" />
+              </div>
+
+              <div class="space-y-4">
+                <div v-for="group in groupedCounterEntries" :key="group.key" class="space-y-2">
+                  <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">{{ group.label }}</div>
+                  <div class="grid gap-2 md:grid-cols-2">
+                    <button
+                        v-for="entry in visibleEntries(group)"
+                        :key="entry.key"
+                        type="button"
+                        class="rounded-lg border px-3 py-2 text-left transition"
+                        :class="form.counter === entry.key
+                          ? 'border-primary-500 bg-primary-50 dark:bg-primary-950/30'
+                          : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-800 dark:bg-gray-900'"
+                        @click="form.counter = entry.key"
+                    >
+                      <div class="flex items-center gap-2">
+                        <span class="font-mono text-sm">{{ entry.number }}</span>
+                        <span class="text-sm">{{ entry.name }}</span>
+                      </div>
+                    </button>
+                  </div>
+                  <UButton
+                      v-if="group.entries.length > 5"
+                      size="xs"
+                      color="neutral"
+                      variant="ghost"
+                      :label="isGroupExpanded(group.key) ? 'Weniger anzeigen' : `${group.entries.length - 5} weitere anzeigen`"
+                      @click="toggleGroupExpanded(group.key)"
+                  />
+                </div>
+              </div>
+
+              <UAlert
+                  v-if="selectedCounter"
+                  color="primary"
+                  variant="soft"
+                  icon="i-heroicons-arrows-right-left"
+                  :title="form.direction === 'income' ? `${selectedCashbook.datevNumber} an ${selectedCounter.number}` : `${selectedCounter.number} an ${selectedCashbook.datevNumber}`"
+                  :description="`${selectedCounter.typeLabel.slice(0, -1)} ${selectedCounter.name} wird als Gegenkonto verwendet.`"
+              />
+
+              <UFormField label="Beschreibung">
+                <UTextarea v-model="form.description" placeholder="z. B. Bareinkauf Büromaterial" autoresize class="w-full" />
+              </UFormField>
+
+              <div class="flex justify-end">
+                <UButton color="primary" icon="i-heroicons-check" :loading="savingBooking" @click="saveBooking">
+                  Kassenbuchung erstellen
+                </UButton>
+              </div>
+            </div>
+          </div>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <div>
+              <h2 class="font-semibold text-gray-900 dark:text-white">Kassenbewegungen</h2>
+              <p class="text-sm text-gray-500">Alle Buchungen dieser Barkasse mit Gegenkonto.</p>
+            </div>
+          </template>
+
+          <div v-if="bookings.length === 0" class="py-10 text-center text-gray-500">Noch keine Kassenbuchungen erfasst.</div>
+          <div v-else class="divide-y divide-gray-100 dark:divide-gray-800">
+            <div v-for="booking in bookings" :key="booking.id" class="py-4">
+              <div class="flex flex-wrap items-center justify-between gap-3">
+                <div class="flex flex-wrap items-center gap-2 text-sm">
+                  <span class="font-medium">{{ dayjs(booking.date).format("DD.MM.YYYY") }}</span>
+                  <UBadge :color="Number(booking.amount) >= 0 ? 'success' : 'error'" variant="subtle">
+                    {{ Number(booking.amount) >= 0 ? "Einnahme" : "Ausgabe" }}
+                  </UBadge>
+                  <span class="font-mono font-semibold">{{ displayCurrency(Math.abs(Number(booking.amount || 0))) }}</span>
+                  <span class="text-gray-500">{{ getBookingCounter(booking).type }}</span>
+                  <span class="font-mono">{{ getBookingCounter(booking).number }}</span>
+                  <span>{{ getBookingCounter(booking).name }}</span>
+                </div>
+                <UButton
+                    icon="i-heroicons-trash"
+                    color="error"
+                    variant="ghost"
+                    size="sm"
+                    @click="deleteBooking(booking)"
+                />
+              </div>
+              <div v-if="booking.text" class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                {{ booking.text }}
+              </div>
+            </div>
+          </div>
+        </UCard>
+      </div>
+
+      <UCard v-else>
+        <div class="py-16 text-center text-gray-500">Lege eine Barkasse an, um das Kassenbuch zu führen.</div>
+      </UCard>
+    </div>
+  </UDashboardPanelContent>
+</template>