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

frontend/pages/accounting/manual-bookings.vue

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