Belegansichten um Bankbuchungsdatum erweitern #110

Zeigt Bankbuchungsdaten in Ausgangsbelegen direkt an und ergänzt Bankdetails im Modal. Überarbeitet die Eingangsbeleg-Showansicht zu einer echten Lesedarstellung mit Bankbuchungsdaten und Positionsübersicht.

frontend/pages/createDocument/show/[id].vue

@@ -1,5 +1,6 @@
 <script setup>
 import CopyCreatedDocumentModal from "~/components/copyCreatedDocumentModal.vue";
+import dayjs from "dayjs";
 
 
 
@@ -20,11 +21,12 @@ const itemInfo = ref({})
 const linkedDocument =ref({})
 const links = ref([])
 const portalReleaseLoading = ref(false)
+const bankBookingModalOpen = ref(false)
 const portalEligibleTypes = ["invoices", "advanceInvoices", "cancellationInvoices"]
 
 const setupPage = async () => {
   if(route.params) {
-    if(route.params.id) itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id,"*,files(*),linkedDocument(*), statementallocations(bs_id)")
+    if(route.params.id) itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id,"*,files(*),linkedDocument(*), statementallocations(*, bs_id(*))")
 
     if(itemInfo.value.type === "invoices"){
       const createddocuments = await useEntities("createddocuments").select()
@@ -39,6 +41,27 @@ const setupPage = async () => {
 
 setupPage()
 
+const getStatementLike = (allocation) => allocation?.bankstatement || (typeof allocation?.bs_id === "object" ? allocation.bs_id : null)
+const getStatementId = (allocation) => allocation?.bankstatement?.id || allocation?.bs_id?.id || allocation?.bankstatement || allocation?.bs_id || null
+const getBankBookingDate = (allocation) => {
+  const statement = getStatementLike(allocation)
+
+  return statement?.date || statement?.valueDate || allocation?.manualBookingDate || null
+}
+const formatDate = (value) => value ? dayjs(value).format("DD.MM.YYYY") : "-"
+const formatCurrency = (value) => `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`
+const bankBookingDates = computed(() => [...new Set(
+    (itemInfo.value.statementallocations || [])
+        .map(getBankBookingDate)
+        .filter(Boolean)
+)].sort())
+const bankBookingDateLabel = computed(() => {
+  if (bankBookingDates.value.length === 0) return "Kein Bankbuchungsdatum"
+  if (bankBookingDates.value.length === 1) return formatDate(bankBookingDates.value[0])
+
+  return bankBookingDates.value.map(formatDate).join(", ")
+})
+
 const openEmail = () => {
   if(["invoices","advanceInvoices"].includes(itemInfo.value.type)){
     router.push(`/email/new?loadDocuments=["${linkedDocument.value.id}"]&bcc=${encodeURIComponent(auth.activeTenantData.standardEmailForInvoices || "")}`)
@@ -48,10 +71,14 @@ const openEmail = () => {
 }
 
 const openBankstatements = () => {
-  if(itemInfo.value.statementallocations.length > 1) {
-    navigateTo(`/banking/?filter=${JSON.stringify(itemInfo.value.statementallocations.map(i => i.bankstatement))}`)
+  const statementIds = (itemInfo.value.statementallocations || []).map(getStatementId).filter(Boolean)
+
+  if(statementIds.length === 0) return
+
+  if(statementIds.length > 1) {
+    navigateTo(`/banking/?filter=${JSON.stringify(statementIds)}`)
   } else {
-    navigateTo(`/banking/statements/edit/${itemInfo.value.statementallocations[0].bankstatement}`)
+    navigateTo(`/banking/statements/edit/${statementIds[0]}`)
   }
 }
 
@@ -202,9 +229,63 @@ const togglePortalRelease = async () => {
       >
         Bankbuchungen
       </UButton>
+      <UBadge
+          v-if="itemInfo.statementallocations?.length > 0"
+          color="primary"
+          variant="soft"
+          class="self-center"
+      >
+        Bankbuchungsdatum: {{ bankBookingDateLabel }}
+      </UBadge>
+      <UButton
+          v-if="itemInfo.statementallocations?.length > 0"
+          icon="i-heroicons-calendar-days"
+          variant="outline"
+          @click="bankBookingModalOpen = true"
+      >
+        Bankdetails
+      </UButton>
 
     </template>
   </UDashboardToolbar>
+  <UModal v-model:open="bankBookingModalOpen" :ui="{ content: 'sm:max-w-2xl' }">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="font-semibold">Bankbuchungen</h3>
+            <UButton
+                icon="i-heroicons-x-mark"
+                color="gray"
+                variant="ghost"
+                @click="bankBookingModalOpen = false"
+            />
+          </div>
+        </template>
+
+        <div class="space-y-3">
+          <div
+              v-for="allocation in itemInfo.statementallocations"
+              :key="allocation.id"
+              class="grid grid-cols-1 gap-2 rounded-md border border-gray-200 p-3 text-sm dark:border-gray-800 md:grid-cols-3"
+          >
+            <div>
+              <p class="text-xs text-gray-500">Bankbuchungsdatum</p>
+              <p class="font-medium">{{ formatDate(getBankBookingDate(allocation)) }}</p>
+            </div>
+            <div>
+              <p class="text-xs text-gray-500">Betrag</p>
+              <p class="font-medium">{{ formatCurrency(allocation.amount) }}</p>
+            </div>
+            <div>
+              <p class="text-xs text-gray-500">Text</p>
+              <p class="font-medium">{{ getStatementLike(allocation)?.text || allocation.description || "-" }}</p>
+            </div>
+          </div>
+        </div>
+      </UCard>
+    </template>
+  </UModal>
   <UDashboardPanelContent>
     <div
         v-if="portalEligibleTypes.includes(itemInfo.type) && itemInfo.state !== 'Entwurf'"