Manuelle Buchungen um DATEV-Steuerschlüssel und getrennte Soll/Haben-Auswahl erweitern

This commit is contained in:
2026-04-23 17:24:58 +02:00
parent 743bf0660c
commit 0284ea8726
6 changed files with 261 additions and 127 deletions

View File

@@ -0,0 +1 @@
ALTER TABLE "statementallocations" ADD COLUMN "datev_tax_key" text;

View File

@@ -218,6 +218,13 @@
"when": 1776297600000,
"tag": "0030_manual_statementallocations",
"breakpoints": true
},
{
"idx": 31,
"version": "7",
"when": 1776298200000,
"tag": "0031_manual_statementallocations_tax_key",
"breakpoints": true
}
]
}

View File

@@ -56,6 +56,7 @@ export const statementallocations = pgTable("statementallocations", {
description: text("description"),
manualBookingDate: text("manual_booking_date"),
datevTaxKey: text("datev_tax_key"),
bookingMode: text("booking_mode").notNull().default("expense"),
depreciationMonths: integer("depreciation_months"),

View File

@@ -48,6 +48,7 @@ export default async function bankingRoutes(server: FastifyInstance) {
next.contraCustomer = null
next.contraVendor = null
next.contraOwnaccount = null
next.datevTaxKey = next.datevTaxKey ? String(next.datevTaxKey).trim() : null
return { data: next }
}
@@ -71,6 +72,7 @@ export default async function bankingRoutes(server: FastifyInstance) {
next.amount = Math.abs(Number(next.amount))
next.bankstatement = null
next.manualBookingDate = dayjs(next.manualBookingDate).format("YYYY-MM-DD")
next.datevTaxKey = next.datevTaxKey ? String(next.datevTaxKey).trim() : null
return { data: next }
}

View File

@@ -357,7 +357,7 @@ export async function buildExportZip(
const credit = getManualBookingSide(alloc, "credit");
const dateManual = dayjs(alloc.manualBookingDate).format("DDMM");
const dateManualFull = dayjs(alloc.manualBookingDate).format("DD.MM.YYYY");
bookingLines.push(`${displayCurrency(alloc.amount,true)};"S";;;;;${debit.number};${credit.number};"";${dateManual};"";;;"${`MB ${debit.number} an ${credit.number} ${escapeString(alloc.description)}`.substring(0,59)}";;;;;;;"Geschäftspartner";"${escapeString(debit.name || credit.name)}";"Kundennummer";"${debit.number}";"Belegnummer";"";"Leistungsdatum";"${dateManualFull}";"Belegdatum";"${dateManualFull}";;;;;;;;;;"";;;;;;;;Manuelle-Buchung;${alloc.id};;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0;;;;"";;;;;;`);
bookingLines.push(`${displayCurrency(alloc.amount,true)};"S";;;;;${debit.number};${credit.number};"${alloc.datevTaxKey || ""}";${dateManual};"";;;"${`MB ${debit.number} an ${credit.number} ${escapeString(alloc.description)}`.substring(0,59)}";;;;;;;"Geschäftspartner";"${escapeString(debit.name || credit.name)}";"Kundennummer";"${debit.number}";"Belegnummer";"";"Leistungsdatum";"${dateManualFull}";"Belegdatum";"${dateManualFull}";;;;;;;;;;"";;;;;;;;Manuelle-Buchung;${alloc.id};;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0;;;;"";;;;;;`);
return;
}

View File

@@ -10,50 +10,99 @@ const customers = ref([])
const vendors = ref([])
const ownaccounts = ref([])
const bookings = ref([])
const debitSearch = ref("")
const creditSearch = ref("")
const DATEV_TAX_KEY_ITEMS = [
{ value: "", 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 form = reactive({
manualBookingDate: dayjs().format("YYYY-MM-DD"),
amount: null,
debit: "",
credit: "",
datevTaxKey: "",
description: ""
})
const entryOptions = computed(() => [
...accounts.value.map((item) => ({
key: `account:${item.id}`,
label: `${item.number} - ${item.label}`,
number: item.number,
name: item.label,
type: "Sachkonto"
})),
...vendors.value.map((item) => ({
key: `vendor:${item.id}`,
label: `${item.vendorNumber || "ohne Nr."} - ${item.name}`,
number: item.vendorNumber,
name: item.name,
type: "Kreditor"
})),
...customers.value.map((item) => ({
key: `customer:${item.id}`,
label: `${item.customerNumber || "ohne Nr."} - ${item.name}`,
number: item.customerNumber,
name: item.name,
type: "Debitor"
})),
...ownaccounts.value.map((item) => ({
key: `ownaccount:${item.id}`,
label: `${item.number} - ${item.name}`,
number: item.number,
name: item.name,
type: "Zusätzliches Konto"
}))
])
const selectedDebit = computed(() => entryOptions.value.find((item) => item.key === form.debit))
const selectedCredit = computed(() => entryOptions.value.find((item) => item.key === form.credit))
const displayCurrency = (value) => `${Number(value || 0).toFixed(2).replace(".", ",")}`
const normalizeSearch = (value) => String(value || "").toLowerCase().trim()
const matchesSearch = (entry, query) => {
const search = normalizeSearch(query)
if (!search) return true
return [
entry.number,
entry.name,
entry.label,
entry.typeLabel
].some((value) => normalizeSearch(value).includes(search))
}
const buildEntries = (rows, type, labelBuilder) =>
(rows || []).map((item) => ({
key: `${type}:${item.id}`,
id: item.id,
type,
number: item.number || item.vendorNumber || item.customerNumber || "",
name: item.label || item.name || "",
label: labelBuilder(item),
typeLabel:
type === "account"
? "Sachkonten"
: type === "vendor"
? "Kreditoren"
: type === "customer"
? "Debitoren"
: "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}`)
}
]))
const groupedDebitEntries = computed(() =>
entryGroups.value.map((group) => ({
...group,
entries: group.entries.filter((entry) => matchesSearch(entry, debitSearch.value))
})).filter((group) => group.entries.length > 0)
)
const groupedCreditEntries = computed(() =>
entryGroups.value.map((group) => ({
...group,
entries: group.entries.filter((entry) => matchesSearch(entry, creditSearch.value))
})).filter((group) => group.entries.length > 0)
)
const allEntries = computed(() => entryGroups.value.flatMap((group) => group.entries))
const selectedDebit = computed(() => allEntries.value.find((item) => item.key === form.debit))
const selectedCredit = computed(() => allEntries.value.find((item) => item.key === form.credit))
const selectedTaxKey = computed(() => DATEV_TAX_KEY_ITEMS.find((item) => item.value === form.datevTaxKey))
const getBookingSide = (booking, side) => {
const map = side === "credit"
@@ -123,7 +172,10 @@ const resetForm = () => {
form.amount = null
form.debit = ""
form.credit = ""
form.datevTaxKey = ""
form.description = ""
debitSearch.value = ""
creditSearch.value = ""
}
const saveBooking = async () => {
@@ -133,23 +185,27 @@ const saveBooking = async () => {
}
saving.value = true
const payload = {
manualBookingDate: form.manualBookingDate,
amount: Number(form.amount),
description: form.description || "Manuelle Buchung",
...buildSidePayload(form.debit, "debit"),
...buildSidePayload(form.credit, "credit")
try {
const payload = {
manualBookingDate: form.manualBookingDate,
amount: Number(form.amount),
datevTaxKey: form.datevTaxKey || null,
description: form.description || "Manuelle Buchung",
...buildSidePayload(form.debit, "debit"),
...buildSidePayload(form.credit, "credit")
}
await useNuxtApp().$api("/api/banking/statements", {
method: "POST",
body: { data: payload }
})
toast.add({ title: "Manuelle Buchung erstellt." })
resetForm()
await loadData()
} finally {
saving.value = false
}
await useNuxtApp().$api("/api/banking/statements", {
method: "POST",
body: { data: payload }
})
toast.add({ title: "Manuelle Buchung erstellt." })
resetForm()
await loadData()
saving.value = false
}
const deleteBooking = async (booking) => {
@@ -165,74 +221,125 @@ onMounted(loadData)
<UDashboardPanelContent>
<UDashboardNavbar title="Manuelle Buchungen" :badge="bookings.length" />
<div class="grid gap-6 lg:grid-cols-[420px_1fr]">
<div class="grid gap-6">
<UCard>
<template #header>
<div>
<h2 class="font-semibold text-gray-900 dark:text-white">Neue Soll/Haben-Buchung</h2>
<p class="text-sm text-gray-500">Zum Beispiel: Kreditor 70000 an Konto 2742.</p>
<div class="flex flex-col gap-2 lg:flex-row lg:items-end lg:justify-between">
<div>
<h2 class="font-semibold text-gray-900 dark:text-white">Neue Soll/Haben-Buchung</h2>
<p class="text-sm text-gray-500">Kontenarten sind jetzt getrennt nach Sachkonten, Kreditoren, Debitoren und zusätzlichen Konten auswählbar.</p>
</div>
<div class="grid gap-3 sm:grid-cols-3">
<UFormField label="Buchungsdatum">
<UInput v-model="form.manualBookingDate" 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">
<USelectMenu
v-model="form.datevTaxKey"
:items="DATEV_TAX_KEY_ITEMS"
value-key="value"
label-key="label"
/>
</UFormField>
</div>
</div>
</template>
<div class="space-y-4">
<UFormField label="Buchungsdatum">
<UInput v-model="form.manualBookingDate" type="date" />
</UFormField>
<div class="grid gap-6 xl:grid-cols-2">
<div class="rounded-xl border border-emerald-200 bg-emerald-50/60 p-4 dark:border-emerald-900 dark:bg-emerald-950/20">
<div class="mb-4 flex items-center justify-between gap-3">
<div>
<h3 class="font-semibold text-emerald-900 dark:text-emerald-200">Soll</h3>
<p class="text-sm text-emerald-700/80 dark:text-emerald-300/80">Linke Buchungsseite</p>
</div>
<UInput v-model="debitSearch" icon="i-heroicons-magnifying-glass" placeholder="Soll durchsuchen..." class="max-w-xs" />
</div>
<UFormField label="Betrag">
<UInput v-model="form.amount" type="number" min="0" step="0.01" placeholder="0,00" />
</UFormField>
<div class="space-y-4">
<div v-for="group in groupedDebitEntries" :key="`debit-${group.key}`" class="space-y-2">
<div class="text-xs font-semibold uppercase tracking-wide text-emerald-800 dark:text-emerald-300">{{ group.label }}</div>
<div class="grid gap-2">
<button
v-for="entry in group.entries"
:key="entry.key"
type="button"
class="rounded-lg border px-3 py-2 text-left transition"
:class="form.debit === entry.key
? 'border-emerald-500 bg-white dark:bg-emerald-900/30 shadow-sm'
: 'border-emerald-200/80 bg-white/80 hover:border-emerald-300 dark:border-emerald-900 dark:bg-gray-900'"
@click="form.debit = 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>
</div>
</div>
</div>
<UFormField label="Soll">
<USelectMenu
v-model="form.debit"
:items="entryOptions"
value-key="key"
label-key="label"
:search-input="{ placeholder: 'Sachkonto, Debitor oder Kreditor suchen...' }"
placeholder="Soll-Konto auswählen"
>
<template #item-label="{ item }">
<span class="font-mono text-xs text-gray-500 mr-2">{{ item.number }}</span>
{{ item.name }}
<UBadge size="xs" variant="subtle" class="ml-2">{{ item.type }}</UBadge>
</template>
</USelectMenu>
</UFormField>
<div class="rounded-xl border border-sky-200 bg-sky-50/60 p-4 dark:border-sky-900 dark:bg-sky-950/20">
<div class="mb-4 flex items-center justify-between gap-3">
<div>
<h3 class="font-semibold text-sky-900 dark:text-sky-200">Haben</h3>
<p class="text-sm text-sky-700/80 dark:text-sky-300/80">Rechte Buchungsseite</p>
</div>
<UInput v-model="creditSearch" icon="i-heroicons-magnifying-glass" placeholder="Haben durchsuchen..." class="max-w-xs" />
</div>
<UFormField label="Haben">
<USelectMenu
v-model="form.credit"
:items="entryOptions"
value-key="key"
label-key="label"
:search-input="{ placeholder: 'Sachkonto, Debitor oder Kreditor suchen...' }"
placeholder="Haben-Konto auswählen"
>
<template #item-label="{ item }">
<span class="font-mono text-xs text-gray-500 mr-2">{{ item.number }}</span>
{{ item.name }}
<UBadge size="xs" variant="subtle" class="ml-2">{{ item.type }}</UBadge>
</template>
</USelectMenu>
</UFormField>
<div class="space-y-4">
<div v-for="group in groupedCreditEntries" :key="`credit-${group.key}`" class="space-y-2">
<div class="text-xs font-semibold uppercase tracking-wide text-sky-800 dark:text-sky-300">{{ group.label }}</div>
<div class="grid gap-2">
<button
v-for="entry in group.entries"
:key="entry.key"
type="button"
class="rounded-lg border px-3 py-2 text-left transition"
:class="form.credit === entry.key
? 'border-sky-500 bg-white dark:bg-sky-900/30 shadow-sm'
: 'border-sky-200/80 bg-white/80 hover:border-sky-300 dark:border-sky-900 dark:bg-gray-900'"
@click="form.credit = 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>
</div>
</div>
</div>
</div>
<UAlert
v-if="selectedDebit && selectedCredit"
color="primary"
variant="soft"
icon="i-heroicons-arrows-right-left"
:title="`${selectedDebit.number} an ${selectedCredit.number}`"
:description="`${selectedDebit.name} wird im Soll, ${selectedCredit.name} im Haben gebucht.`"
/>
<div class="mt-6 grid gap-4 lg:grid-cols-[1fr_auto] lg:items-end">
<div class="space-y-4">
<UAlert
v-if="selectedDebit && selectedCredit"
color="primary"
variant="soft"
icon="i-heroicons-arrows-right-left"
:title="`${selectedDebit.number} an ${selectedCredit.number}`"
:description="`${selectedDebit.typeLabel.slice(0, -1)} ${selectedDebit.name} wird im Soll, ${selectedCredit.typeLabel.slice(0, -1)} ${selectedCredit.name} im Haben gebucht.`"
/>
<UFormField label="Beschreibung">
<UTextarea v-model="form.description" placeholder="z. B. Versicherungsentschädigung" autoresize />
</UFormField>
<UFormField label="Beschreibung">
<UTextarea v-model="form.description" placeholder="z. B. Versicherungsentschädigung" autoresize />
</UFormField>
</div>
<UButton block color="primary" :loading="saving" @click="saveBooking">
Manuelle Buchung erstellen
</UButton>
<div class="flex flex-col items-stretch gap-2">
<UBadge v-if="selectedTaxKey?.value" color="warning" variant="subtle">
Steuerschlüssel: {{ selectedTaxKey.label }}
</UBadge>
<UButton color="primary" :loading="saving" @click="saveBooking">
Manuelle Buchung erstellen
</UButton>
</div>
</div>
</UCard>
@@ -240,7 +347,7 @@ onMounted(loadData)
<template #header>
<div>
<h2 class="font-semibold text-gray-900 dark:text-white">Erfasste manuelle Buchungen</h2>
<p class="text-sm text-gray-500">Diese Buchungen laufen im DATEV-Export mit.</p>
<p class="text-sm text-gray-500">Übersicht mit getrennter Soll- und Haben-Seite inklusive DATEV-Steuerschlüssel.</p>
</div>
</template>
@@ -249,31 +356,47 @@ onMounted(loadData)
Noch keine manuellen Buchungen 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 flex items-start justify-between gap-4">
<div class="min-w-0">
<div v-for="booking in bookings" :key="booking.id" class="py-4">
<div class="mb-3 flex flex-wrap items-center justify-between gap-2">
<div class="flex flex-wrap items-center gap-2 text-sm">
<span class="font-medium">{{ dayjs(booking.manualBookingDate).format("DD.MM.YYYY") }}</span>
<span class="font-mono font-semibold">{{ displayCurrency(booking.amount) }}</span>
<UBadge v-if="booking.datevTaxKey" size="xs" color="warning" variant="subtle">
St.-Schlüssel {{ booking.datevTaxKey }}
</UBadge>
</div>
<div class="mt-1 text-sm text-gray-700 dark:text-gray-200">
<span class="font-semibold">Soll:</span>
{{ getBookingSide(booking, "debit").number }} - {{ getBookingSide(booking, "debit").name }}
<UButton
icon="i-heroicons-trash"
color="error"
variant="ghost"
size="sm"
@click="deleteBooking(booking)"
/>
</div>
<div class="grid gap-3 md:grid-cols-2">
<div class="rounded-lg border border-emerald-200 bg-emerald-50/60 p-3 dark:border-emerald-900 dark:bg-emerald-950/20">
<div class="text-xs font-semibold uppercase tracking-wide text-emerald-800 dark:text-emerald-300">Soll</div>
<div class="mt-1 flex items-center gap-2">
<span class="font-mono">{{ getBookingSide(booking, 'debit').number }}</span>
<span>{{ getBookingSide(booking, "debit").name }}</span>
</div>
<div class="mt-1 text-xs text-gray-500">{{ getBookingSide(booking, "debit").type }}</div>
</div>
<div class="text-sm text-gray-700 dark:text-gray-200">
<span class="font-semibold">Haben:</span>
{{ getBookingSide(booking, "credit").number }} - {{ getBookingSide(booking, "credit").name }}
</div>
<div v-if="booking.description" class="mt-1 text-xs text-gray-500 truncate">
{{ booking.description }}
<div class="rounded-lg border border-sky-200 bg-sky-50/60 p-3 dark:border-sky-900 dark:bg-sky-950/20">
<div class="text-xs font-semibold uppercase tracking-wide text-sky-800 dark:text-sky-300">Haben</div>
<div class="mt-1 flex items-center gap-2">
<span class="font-mono">{{ getBookingSide(booking, 'credit').number }}</span>
<span>{{ getBookingSide(booking, "credit").name }}</span>
</div>
<div class="mt-1 text-xs text-gray-500">{{ getBookingSide(booking, "credit").type }}</div>
</div>
</div>
<UButton
icon="i-heroicons-trash"
color="error"
variant="ghost"
size="sm"
@click="deleteBooking(booking)"
/>
<div v-if="booking.description" class="mt-3 text-sm text-gray-600 dark:text-gray-300">
{{ booking.description }}
</div>
</div>
</div>
</UCard>