feat(banking): add cost centres and VAT to account allocations

frontend/pages/banking/statements/[mode]/[[id]].vue

@@ -1,5 +1,6 @@
 <script setup>
 import dayjs from "dayjs";
+import { BANK_ALLOCATION_TAX_ITEMS, getBankAllocationAmounts } from "~/utils/bankAllocationTax"
 import {
   DEPRECIATION_METHOD_ITEMS,
   EXPENSE_BOOKING_MODE_ITEMS,
@@ -36,6 +37,7 @@ const createddocuments = ref([])
 const incominginvoices = ref([])
 const accounts = ref([])
 const ownaccounts = ref([])
+const costcentres = ref([])
 
 const loading = ref(true)
 const loadingDocuments = ref(true)
@@ -76,15 +78,17 @@ const setup = async () => {
     useEntities("vendors").select()
   ])
 
-  const [statement, accountItems] = await Promise.all([
+  const [statement, accountItems, costCentreItems] = await Promise.all([
     route.params.id
         ? useEntities("bankstatements").selectSingle(route.params.id, "*, statementallocations(*, cd_id(*), ii_id(*))")
         : Promise.resolve(itemInfo.value),
-    useEntities("accounts").selectSpecial("*", "number", true)
+    useEntities("accounts").selectSpecial("*", "number", true),
+    useEntities("costcentres").select()
   ])
 
   itemInfo.value = statement
   accounts.value = accountItems
+  costcentres.value = costCentreItems
   if (itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
 
   manualAllocationSum.value = calculateOpenSum.value
@@ -164,6 +168,21 @@ const selectAccount = (id) => {
 
 const manualAllocationSum = ref(itemInfo.value.amount || 0)
 const allocationDescription = ref("")
+const allocationCostcentre = ref(null)
+const allocationTaxKey = ref(null)
+const allocationAmounts = computed(() => getBankAllocationAmounts({
+  bankstatement: itemInfo.value.id,
+  account: accountToSave.value,
+  ownaccount: ownAccountToSave.value,
+  amount: manualAllocationSum.value,
+  datevTaxKey: allocationTaxKey.value,
+}))
+const getCostCentreLabel = (id) => {
+  const centre = costcentres.value.find(item => item.id === id)
+  return centre ? `${centre.number} - ${centre.name}` : id
+}
+const getAllocationTaxLabel = (item) => BANK_ALLOCATION_TAX_ITEMS.find(tax => tax.value === item.datevTaxKey)?.label
+  || (item.datevTaxKey ? `Steuerschlüssel ${item.datevTaxKey}` : "")
 const allocationBookingMode = ref("expense")
 const allocationDepreciationMonths = ref(36)
 const allocationDepreciationStartDate = ref(dayjs().format("YYYY-MM-DD"))
@@ -179,6 +198,10 @@ const isDepreciationAllocation = computed(() => isDepreciationBookingMode(alloca
 const buildAllocationPayload = (payload) => {
   const base = {
     ...payload,
+    ...((payload.account || payload.ownaccount) ? {
+      costcentre: allocationCostcentre.value || null,
+      datevTaxKey: allocationTaxKey.value || null,
+    } : {}),
     bookingMode: normalizeExpenseBookingMode(allocationBookingMode.value)
   }
 
@@ -232,6 +255,8 @@ const saveAllocation = async (allocation) => {
     vendorAccountToSave.value = null
     customerAccountToSave.value = null
     ownAccountToSave.value = null
+    allocationCostcentre.value = null
+    allocationTaxKey.value = null
     allocationBookingMode.value = "expense"
     allocationDepreciationMonths.value = 36
     allocationDepreciationStartDate.value = dayjs(itemInfo.value?.date || new Date()).format("YYYY-MM-DD")
@@ -696,6 +721,11 @@ setup()
                       {{ getAllocationLabel(item) }}
                     </div>
                     <div class="text-xs text-gray-500 mt-0.5" v-if="item.description">{{ item.description }}</div>
+                    <div v-if="item.costcentre" class="text-xs text-gray-500 mt-1">Kostenstelle: {{ getCostCentreLabel(item.costcentre) }}</div>
+                    <div v-if="item.datevTaxKey" class="text-xs text-gray-500 mt-1">
+                      {{ getAllocationTaxLabel(item) }} · Netto {{ displayCurrency(getBankAllocationAmounts(item).amountNet) }}
+                      · Steuer {{ displayCurrency(getBankAllocationAmounts(item).amountTax) }}
+                    </div>
                     <div class="mt-1 flex flex-wrap gap-1" v-if="item.bookingMode && item.bookingMode !== 'expense'">
                       <UBadge size="xs" color="warning" variant="soft">{{ getAllocationBookingModeLabel(item) }}</UBadge>
                       <UBadge size="xs" color="neutral" variant="soft" v-if="item.depreciationGroup">{{ item.depreciationGroup }}</UBadge>
@@ -747,7 +777,7 @@ setup()
             class="p-4 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm shrink-0 z-10">
           <div class="grid grid-cols-12 gap-4 items-end">
             <div class="col-span-12 md:col-span-3">
-              <UFormField label="Betrag" size="sm">
+              <UFormField label="Bruttobetrag" size="sm">
                 <UInput v-model="manualAllocationSum" type="number" step="0.01">
                   <template #trailing><span class="text-gray-500 text-xs">EUR</span></template>
                 </UInput>
@@ -778,7 +808,7 @@ setup()
                   <UButton
                       icon="i-heroicons-check"
                       label="Buchen"
-                      :disabled="!accountToSave"
+                      :disabled="!accountToSave || !allocationTaxKey"
                       @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, account: accountToSave, description: allocationDescription })"
                   />
                 </div>
@@ -793,6 +823,28 @@ setup()
             </div>
           </div>
 
+          <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
+            <UFormField label="Umsatzsteuer / Vorsteuer" size="sm">
+              <USelectMenu v-model="allocationTaxKey" :items="BANK_ALLOCATION_TAX_ITEMS" value-key="value" label-key="label"
+                           placeholder="Steuer auswählen …" class="w-full" />
+            </UFormField>
+            <UFormField label="Kostenstelle (optional)" size="sm">
+              <div class="flex gap-1">
+                <USelectMenu v-model="allocationCostcentre" :items="costcentres" value-key="id" label-key="name"
+                             :filter-fields="['number', 'name']" placeholder="Keine Kostenstelle" class="w-full">
+                  <template #default>{{ allocationCostcentre ? getCostCentreLabel(allocationCostcentre) : 'Keine Kostenstelle' }}</template>
+                  <template #item-label="{ item }">{{ item.number }} - {{ item.name }}</template>
+                </USelectMenu>
+                <UButton v-if="allocationCostcentre" icon="i-heroicons-x-mark" variant="ghost" aria-label="Kostenstelle entfernen"
+                         @click="allocationCostcentre = null" />
+              </div>
+            </UFormField>
+            <p v-if="allocationTaxKey && (accountToSave || ownAccountToSave)" class="md:col-span-2 text-xs text-gray-500">
+              Netto {{ displayCurrency(allocationAmounts.amountNet) }} · Steuer {{ displayCurrency(allocationAmounts.amountTax) }}
+              · Brutto {{ displayCurrency(allocationAmounts.amountGross) }}
+            </p>
+          </div>
+
           <div v-if="showMoreWithoutRecipe"
                class="mt-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
@@ -866,6 +918,7 @@ setup()
             </USelectMenu>
               <div class="md:col-span-3 flex justify-end">
                 <UButton size="xs" label="Zuweisen"
+                         :disabled="!!ownAccountToSave && !allocationTaxKey"
                          @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, ownaccount: ownAccountToSave ? ownAccountToSave : null, customer: customerAccountToSave ? customerAccountToSave : null, vendor: vendorAccountToSave ? vendorAccountToSave : null, description: allocationDescription })"/>
               </div>
             </div>