|
|
|
|
@@ -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>
|
|
|
|
|
|