Manuelle Buchungen in Statementallocations integrieren
This commit is contained in:
@@ -35,11 +35,13 @@ const getStatementLike = (allocation) => allocation?.bankstatement || (typeof al
|
||||
const getAllocationDate = (allocation) => {
|
||||
const statement = getStatementLike(allocation)
|
||||
|
||||
return statement?.date || statement?.valueDate || allocation?.bs_id?.date || allocation?.bs_id?.valueDate || null
|
||||
return statement?.date || statement?.valueDate || allocation?.bs_id?.date || allocation?.bs_id?.valueDate || allocation?.manualBookingDate || null
|
||||
}
|
||||
const getAllocationPartner = (allocation) => {
|
||||
const statement = getStatementLike(allocation)
|
||||
|
||||
if (!statement && allocation?.manualBookingDate) return "Manuelle Buchung"
|
||||
|
||||
return statement?.debName || statement?.credName || statement?.partner || allocation?.bs_id?.debName || allocation?.bs_id?.credName || ""
|
||||
}
|
||||
const getAllocationDescription = (allocation) => {
|
||||
@@ -48,12 +50,20 @@ const getAllocationDescription = (allocation) => {
|
||||
return allocation?.description || statement?.purpose || statement?.text || statement?.description || allocation?.bs_id?.purpose || allocation?.bs_id?.text || ""
|
||||
}
|
||||
const hasContent = (value) => value !== null && value !== undefined && String(value).trim() !== ""
|
||||
const isContraAllocation = (allocation) =>
|
||||
sameAccount(allocation.contraAccount?.id || allocation.contraAccount)
|
||||
|| sameAccount(allocation.contraOwnaccount?.id || allocation.contraOwnaccount)
|
||||
|
||||
const touchesCurrentAccount = (allocation) =>
|
||||
sameAccount(allocation.account?.id || allocation.account)
|
||||
|| sameAccount(allocation.ownaccount?.id || allocation.ownaccount)
|
||||
|| isContraAllocation(allocation)
|
||||
|
||||
const monthItems = [
|
||||
{ label: "Ganzes Jahr", value: "all" },
|
||||
{ label: "Januar", value: "1" },
|
||||
{ label: "Februar", value: "2" },
|
||||
{ label: "Maerz", value: "3" },
|
||||
{ label: "März", value: "3" },
|
||||
{ label: "April", value: "4" },
|
||||
{ label: "Mai", value: "5" },
|
||||
{ label: "Juni", value: "6" },
|
||||
@@ -73,7 +83,7 @@ const allAllocations = computed(() => {
|
||||
date: getAllocationDate(allocation),
|
||||
partner: getAllocationPartner(allocation),
|
||||
description: getAllocationDescription(allocation),
|
||||
amount: Number(allocation.amount || 0)
|
||||
amount: Number(allocation.amount || 0) * (isContraAllocation(allocation) ? -1 : 1)
|
||||
}))
|
||||
|
||||
const incomingInvoiceRows = incomingInvoices.value.flatMap((invoice) => {
|
||||
@@ -162,7 +172,7 @@ const setup = async () => {
|
||||
loading.value = true
|
||||
|
||||
statementAllocations.value = (await useEntities("statementallocations").select("*, bankstatement(*), createddocument(*), incominginvoice(*)"))
|
||||
.filter((allocation) => sameAccount(allocation.account?.id || allocation.account) || sameAccount(allocation.ownaccount?.id || allocation.ownaccount))
|
||||
.filter((allocation) => touchesCurrentAccount(allocation))
|
||||
|
||||
incomingInvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)"))
|
||||
.filter((invoice) => (invoice.accounts || []).some((account) => sameAccount(account.account?.id || account.account)))
|
||||
@@ -248,7 +258,7 @@ const selectAllocation = (allocationLike) => {
|
||||
<template #empty>
|
||||
<div class="flex flex-col items-center justify-center py-10 text-center">
|
||||
<UIcon name="i-heroicons-circle-stack-20-solid" class="mb-2 h-10 w-10 text-gray-400" />
|
||||
<p class="font-medium">Keine Buchungen im ausgewaehlten Zeitraum</p>
|
||||
<p class="font-medium">Keine Buchungen im ausgewählten Zeitraum</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -259,7 +269,7 @@ const selectAllocation = (allocationLike) => {
|
||||
</template>
|
||||
|
||||
<template #date-cell="{ row }">
|
||||
{{ row.original.bankstatement.date && dayjs(row.original.bankstatement.date).isValid() ? dayjs(row.original.bankstatement.date).format('DD.MM.YYYY') : '-' }}
|
||||
{{ row.original.date && dayjs(row.original.date).isValid() ? dayjs(row.original.date).format('DD.MM.YYYY') : '-' }}
|
||||
</template>
|
||||
|
||||
<template #partner-cell="{ row }">
|
||||
|
||||
@@ -156,6 +156,11 @@ const links = computed(() => {
|
||||
to: "/accounting/bwa",
|
||||
icon: "i-heroicons-chart-bar-square",
|
||||
} : null,
|
||||
(featureEnabled("accounts") || featureEnabled("ownaccounts")) ? {
|
||||
label: "Manuelle Buchungen",
|
||||
to: "/accounting/manual-bookings",
|
||||
icon: "i-heroicons-arrows-right-left",
|
||||
} : null,
|
||||
featureEnabled("banking") ? {
|
||||
label: "Liquidität",
|
||||
to: "/accounting/liquidity",
|
||||
|
||||
282
frontend/pages/accounting/manual-bookings.vue
Normal file
282
frontend/pages/accounting/manual-bookings.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs"
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const accounts = ref([])
|
||||
const customers = ref([])
|
||||
const vendors = ref([])
|
||||
const ownaccounts = ref([])
|
||||
const bookings = ref([])
|
||||
|
||||
const form = reactive({
|
||||
manualBookingDate: dayjs().format("YYYY-MM-DD"),
|
||||
amount: null,
|
||||
debit: "",
|
||||
credit: "",
|
||||
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 getBookingSide = (booking, side) => {
|
||||
const map = side === "credit"
|
||||
? [
|
||||
["contraAccount", "Sachkonto"],
|
||||
["contraVendor", "Kreditor"],
|
||||
["contraCustomer", "Debitor"],
|
||||
["contraOwnaccount", "Zusätzliches Konto"]
|
||||
]
|
||||
: [
|
||||
["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 buildSidePayload = (sideKey, target) => {
|
||||
const [type, id] = String(sideKey || "").split(":")
|
||||
if (!type || !id) return
|
||||
|
||||
const numericId = type === "ownaccount" ? id : Number(id)
|
||||
if (target === "debit") {
|
||||
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 === "account") return { contraAccount: numericId }
|
||||
if (type === "customer") return { contraCustomer: numericId }
|
||||
if (type === "vendor") return { contraVendor: numericId }
|
||||
if (type === "ownaccount") return { contraOwnaccount: numericId }
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
const [accountRows, customerRows, vendorRows, ownaccountRows, bookingRows] = await Promise.all([
|
||||
useEntities("accounts").selectSpecial("*", "number", true),
|
||||
useEntities("customers").select(),
|
||||
useEntities("vendors").select(),
|
||||
useEntities("ownaccounts").select(),
|
||||
useNuxtApp().$api("/api/banking/manual-bookings")
|
||||
])
|
||||
|
||||
accounts.value = accountRows || []
|
||||
customers.value = customerRows || []
|
||||
vendors.value = vendorRows || []
|
||||
ownaccounts.value = ownaccountRows || []
|
||||
bookings.value = (bookingRows || []).sort((a, b) => String(b.manualBookingDate || "").localeCompare(String(a.manualBookingDate || "")))
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
form.amount = null
|
||||
form.debit = ""
|
||||
form.credit = ""
|
||||
form.description = ""
|
||||
}
|
||||
|
||||
const saveBooking = async () => {
|
||||
if (!form.manualBookingDate || !form.amount || !form.debit || !form.credit) {
|
||||
toast.add({ title: "Bitte Datum, Betrag, Soll und Haben ausfüllen.", color: "warning" })
|
||||
return
|
||||
}
|
||||
|
||||
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")
|
||||
}
|
||||
|
||||
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) => {
|
||||
await useNuxtApp().$api(`/api/banking/statements/${booking.id}`, { method: "DELETE" })
|
||||
toast.add({ title: "Manuelle Buchung gelöscht." })
|
||||
await loadData()
|
||||
}
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardPanelContent>
|
||||
<UDashboardNavbar title="Manuelle Buchungen" :badge="bookings.length" />
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-[420px_1fr]">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<div class="space-y-4">
|
||||
<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="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>
|
||||
|
||||
<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>
|
||||
|
||||
<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.`"
|
||||
/>
|
||||
|
||||
<UFormField label="Beschreibung">
|
||||
<UTextarea v-model="form.description" placeholder="z. B. Versicherungsentschädigung" autoresize />
|
||||
</UFormField>
|
||||
|
||||
<UButton block color="primary" :loading="saving" @click="saveBooking">
|
||||
Manuelle Buchung erstellen
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="loading" class="py-10 text-center text-gray-500">Lade Buchungen...</div>
|
||||
<div v-else-if="bookings.length === 0" class="py-10 text-center text-gray-500">
|
||||
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 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>
|
||||
</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 }}
|
||||
</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>
|
||||
</div>
|
||||
<UButton
|
||||
icon="i-heroicons-trash"
|
||||
color="error"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="deleteBooking(booking)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</UDashboardPanelContent>
|
||||
</template>
|
||||
Reference in New Issue
Block a user