283 lines
9.5 KiB
Vue
283 lines
9.5 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 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>
|