492 lines
19 KiB
Vue
492 lines
19 KiB
Vue
<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 incomingInvoices = ref([])
|
|
const bookings = ref([])
|
|
const debitSearch = ref("")
|
|
const creditSearch = ref("")
|
|
const expandedDebitGroups = ref([])
|
|
const expandedCreditGroups = 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 form = reactive({
|
|
manualBookingDate: dayjs().format("YYYY-MM-DD"),
|
|
amount: null,
|
|
debit: "",
|
|
credit: "",
|
|
datevTaxKey: "__none__",
|
|
description: ""
|
|
})
|
|
|
|
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 || 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 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 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 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 isGroupExpanded = (side, groupKey) => {
|
|
const source = side === "debit" ? expandedDebitGroups.value : expandedCreditGroups.value
|
|
return source.includes(groupKey)
|
|
}
|
|
|
|
const toggleGroupExpanded = (side, groupKey) => {
|
|
const source = side === "debit" ? expandedDebitGroups.value : expandedCreditGroups.value
|
|
if (source.includes(groupKey)) {
|
|
if (side === "debit") expandedDebitGroups.value = source.filter((item) => item !== groupKey)
|
|
else expandedCreditGroups.value = source.filter((item) => item !== groupKey)
|
|
return
|
|
}
|
|
|
|
if (side === "debit") expandedDebitGroups.value = [...source, groupKey]
|
|
else expandedCreditGroups.value = [...source, groupKey]
|
|
}
|
|
|
|
const visibleEntries = (side, group) => {
|
|
if (group.entries.length <= 5 || isGroupExpanded(side, group.key)) return group.entries
|
|
return group.entries.slice(0, 5)
|
|
}
|
|
|
|
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) => {
|
|
if (booking.incominginvoice && booking.manualInvoiceSide === side) {
|
|
return {
|
|
type: "Eingangsbeleg",
|
|
number: booking.incominginvoice?.reference || "",
|
|
name: booking.incominginvoice?.vendor?.name || booking.incominginvoice?.description || ""
|
|
}
|
|
}
|
|
|
|
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 (type === "incominginvoice") {
|
|
return {
|
|
incominginvoice: numericId,
|
|
manualInvoiceSide: target
|
|
}
|
|
}
|
|
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, incomingInvoiceRows, bookingRows] = await Promise.all([
|
|
useEntities("accounts").selectSpecial("*", "number", true),
|
|
useEntities("customers").select(),
|
|
useEntities("vendors").select(),
|
|
useEntities("ownaccounts").select(),
|
|
useEntities("incominginvoices").select("*, vendor(*), statementallocations(id,amount)"),
|
|
useNuxtApp().$api("/api/banking/manual-bookings")
|
|
])
|
|
|
|
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)
|
|
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.datevTaxKey = "__none__"
|
|
form.description = ""
|
|
debitSearch.value = ""
|
|
creditSearch.value = ""
|
|
expandedDebitGroups.value = []
|
|
expandedCreditGroups.value = []
|
|
}
|
|
|
|
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
|
|
try {
|
|
const payload = {
|
|
manualBookingDate: form.manualBookingDate,
|
|
amount: Number(form.amount),
|
|
datevTaxKey: form.datevTaxKey === "__none__" ? null : form.datevTaxKey,
|
|
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
|
|
}
|
|
}
|
|
|
|
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">
|
|
<UCard>
|
|
<template #header>
|
|
<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">
|
|
<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-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>
|
|
|
|
<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 visibleEntries('debit', group)"
|
|
: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>
|
|
<UButton
|
|
v-if="group.entries.length > 5"
|
|
size="xs"
|
|
color="neutral"
|
|
variant="ghost"
|
|
:label="isGroupExpanded('debit', group.key) ? 'Weniger anzeigen' : `${group.entries.length - 5} weitere anzeigen`"
|
|
@click="toggleGroupExpanded('debit', group.key)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<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 visibleEntries('credit', group)"
|
|
: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>
|
|
<UButton
|
|
v-if="group.entries.length > 5"
|
|
size="xs"
|
|
color="neutral"
|
|
variant="ghost"
|
|
:label="isGroupExpanded('credit', group.key) ? 'Weniger anzeigen' : `${group.entries.length - 5} weitere anzeigen`"
|
|
@click="toggleGroupExpanded('credit', group.key)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 grid gap-4">
|
|
<div class="w-full 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" class="w-full">
|
|
<UTextarea
|
|
v-model="form.description"
|
|
placeholder="z. B. Versicherungsentschädigung"
|
|
autoresize
|
|
class="w-full"
|
|
/>
|
|
</UFormField>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
|
<UBadge v-if="selectedTaxKey?.value" color="warning" variant="subtle">
|
|
Steuerschlüssel: {{ selectedTaxKey.label }}
|
|
</UBadge>
|
|
<UButton color="primary" :loading="saving" @click="saveBooking" class="sm:ml-auto">
|
|
Manuelle Buchung erstellen
|
|
</UButton>
|
|
</div>
|
|
</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">Übersicht mit getrennter Soll- und Haben-Seite inklusive DATEV-Steuerschlüssel.</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">
|
|
<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>
|
|
<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="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>
|
|
|
|
<div v-if="booking.description" class="mt-3 text-sm text-gray-600 dark:text-gray-300">
|
|
{{ booking.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</UDashboardPanelContent>
|
|
</template>
|