Liquiditätsprognose besser nachvollziehbar machen

Ergänzt Herleitung, Einflussfaktoren, größte Treiber und eine Tagesaufschlüsselung, damit die Prognosewerte Schritt für Schritt nachvollzogen werden können.

frontend/pages/accounting/liquidity.vue

@@ -240,6 +240,53 @@ const upcomingEvents = computed(() => {
     .slice(0, 18)
 })
 
+const groupedEventSummary = computed(() => {
+  const summary = {
+    open_createddocument: { label: sourceLabels.open_createddocument, amount: 0, count: 0 },
+    open_incominginvoice: { label: sourceLabels.open_incominginvoice, amount: 0, count: 0 },
+    recurring_bankstatement: { label: sourceLabels.recurring_bankstatement, amount: 0, count: 0 }
+  }
+
+  ;(forecast.value?.events || []).forEach((event) => {
+    if (!summary[event.source]) return
+    summary[event.source].amount = roundMoney(summary[event.source].amount + Number(event.amount || 0))
+    summary[event.source].count += 1
+  })
+
+  return Object.values(summary)
+})
+
+const topIncomeDrivers = computed(() => {
+  return [...(forecast.value?.events || [])]
+    .filter((event) => Number(event.amount || 0) > 0)
+    .sort((a, b) => Number(b.amount || 0) - Number(a.amount || 0))
+    .slice(0, 12)
+})
+
+const topExpenseDrivers = computed(() => {
+  return [...(forecast.value?.events || [])]
+    .filter((event) => Number(event.amount || 0) < 0)
+    .sort((a, b) => Math.abs(Number(b.amount || 0)) - Math.abs(Number(a.amount || 0)))
+    .slice(0, 12)
+})
+
+const detailedDays = computed(() => {
+  let previousBalance = Number(forecast.value?.startingBalance || 0)
+
+  return (forecast.value?.points || [])
+    .filter((point) => (point.events || []).length > 0)
+    .map((point) => {
+      const startBalance = previousBalance
+      previousBalance = Number(point.balance || 0)
+
+      return {
+        ...point,
+        startBalance: roundMoney(startBalance)
+      }
+    })
+    .slice(0, 24)
+})
+
 const riskTone = computed(() => {
   if (!forecast.value) return "neutral"
   if (forecast.value.lowestBalance < 0) return "danger"
@@ -359,6 +406,67 @@ onMounted(() => {
         :description="`Die gespeicherte Prognose kombiniert aktuelle Kontostände, offene Belege und erkannte regelmäßige Bankbewegungen bis ${formatDate(dayjs().add(forecast.horizonDays, 'day'))}. Neu berechnet wird sie nur über den Refresh-Button.`"
       />
 
+      <div class="grid gap-4 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
+        <UCard>
+          <template #header>
+            <div>
+              <h2 class="font-semibold">Herleitung</h2>
+              <p class="text-sm text-gray-500">So entsteht der prognostizierte Endstand</p>
+            </div>
+          </template>
+
+          <div class="space-y-3">
+            <div class="flex items-center justify-between gap-3">
+              <span class="text-sm text-gray-500">Startbestand</span>
+              <span class="font-semibold">{{ useCurrency(forecast.startingBalance) }}</span>
+            </div>
+            <div class="flex items-center justify-between gap-3">
+              <span class="text-sm text-gray-500">Geplante Einzahlungen</span>
+              <span class="font-semibold text-primary-600">+ {{ useCurrency(forecast.totalIncome) }}</span>
+            </div>
+            <div class="flex items-center justify-between gap-3">
+              <span class="text-sm text-gray-500">Geplante Auszahlungen</span>
+              <span class="font-semibold text-rose-600">{{ useCurrency(forecast.totalExpense) }}</span>
+            </div>
+            <div class="border-t border-dashed border-gray-200 pt-3 dark:border-gray-800">
+              <div class="flex items-center justify-between gap-3">
+                <span class="font-medium">Erwarteter Endstand</span>
+                <span class="text-lg font-semibold">{{ useCurrency(forecast.endingBalance) }}</span>
+              </div>
+            </div>
+          </div>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <div>
+              <h2 class="font-semibold">Einflussfaktoren</h2>
+              <p class="text-sm text-gray-500">Welche Quellen in die Prognose einfließen</p>
+            </div>
+          </template>
+
+          <div class="divide-y divide-gray-200 dark:divide-gray-800">
+            <div
+              v-for="row in groupedEventSummary"
+              :key="row.label"
+              class="grid gap-3 py-3 sm:grid-cols-[minmax(0,1fr)_110px_140px]"
+            >
+              <div>
+                <p class="font-medium">{{ row.label }}</p>
+                <p class="text-xs text-gray-500">{{ row.count }} Positionen</p>
+              </div>
+              <span class="text-sm text-gray-500">{{ row.count }}x</span>
+              <span
+                class="text-right font-semibold"
+                :class="row.amount < 0 ? 'text-rose-600' : row.amount > 0 ? 'text-primary-600' : 'text-gray-500'"
+              >
+                {{ useCurrency(row.amount) }}
+              </span>
+            </div>
+          </div>
+        </UCard>
+      </div>
+
       <UCard>
         <template #header>
           <div class="flex flex-wrap items-center justify-between gap-2">
@@ -378,6 +486,103 @@ onMounted(() => {
         </div>
       </UCard>
 
+      <div class="grid gap-4 xl:grid-cols-2">
+        <UCard>
+          <template #header>
+            <div>
+              <h2 class="font-semibold">Größte Einflüsse</h2>
+              <p class="text-sm text-gray-500">Die wichtigsten Treiber der Prognose</p>
+            </div>
+          </template>
+
+          <div class="space-y-4">
+            <div>
+              <p class="mb-2 text-sm font-medium text-primary-700">Größte Einzahlungen</p>
+              <div v-if="topIncomeDrivers.length" class="space-y-2">
+                <div
+                  v-for="event in topIncomeDrivers"
+                  :key="`income-${event.source}-${event.sourceId || event.label}-${event.date}`"
+                  class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-800"
+                >
+                  <div class="min-w-0">
+                    <p class="truncate font-medium">{{ event.label }}</p>
+                    <p class="text-xs text-gray-500">{{ formatDate(event.date) }} · {{ sourceLabels[event.source] || event.source }}</p>
+                  </div>
+                  <span class="font-semibold text-primary-600">{{ useCurrency(event.amount) }}</span>
+                </div>
+              </div>
+              <p v-else class="text-sm text-gray-500">Keine Einzahlungen im Prognosezeitraum.</p>
+            </div>
+
+            <div>
+              <p class="mb-2 text-sm font-medium text-rose-700">Größte Auszahlungen</p>
+              <div v-if="topExpenseDrivers.length" class="space-y-2">
+                <div
+                  v-for="event in topExpenseDrivers"
+                  :key="`expense-${event.source}-${event.sourceId || event.label}-${event.date}`"
+                  class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-800"
+                >
+                  <div class="min-w-0">
+                    <p class="truncate font-medium">{{ event.label }}</p>
+                    <p class="text-xs text-gray-500">{{ formatDate(event.date) }} · {{ sourceLabels[event.source] || event.source }}</p>
+                  </div>
+                  <span class="font-semibold text-rose-600">{{ useCurrency(event.amount) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <div>
+              <h2 class="font-semibold">Tagesaufschlüsselung</h2>
+              <p class="text-sm text-gray-500">Stand vor dem Tag, Bewegungen und neuer Stand</p>
+            </div>
+          </template>
+
+          <div v-if="detailedDays.length" class="space-y-3">
+            <div
+              v-for="day in detailedDays"
+              :key="day.date"
+              class="rounded-xl border border-gray-200 p-4 dark:border-gray-800"
+            >
+              <div class="flex flex-wrap items-center justify-between gap-3">
+                <div>
+                  <p class="font-medium">{{ formatDate(day.date) }}</p>
+                  <p class="text-xs text-gray-500">Start {{ useCurrency(day.startBalance) }} · Ende {{ useCurrency(day.balance) }}</p>
+                </div>
+                <div class="flex gap-3 text-sm">
+                  <span class="text-primary-600">+ {{ useCurrency(day.income) }}</span>
+                  <span class="text-rose-600">{{ useCurrency(day.expense) }}</span>
+                </div>
+              </div>
+
+              <div class="mt-3 space-y-2">
+                <div
+                  v-for="event in day.events"
+                  :key="`${day.date}-${event.source}-${event.sourceId || event.label}-${event.amount}`"
+                  class="grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto]"
+                >
+                  <div class="min-w-0">
+                    <p class="truncate text-sm font-medium">{{ event.label }}</p>
+                    <p class="text-xs text-gray-500">{{ sourceLabels[event.source] || event.source }}</p>
+                  </div>
+                  <span
+                    class="text-right text-sm font-semibold"
+                    :class="event.amount < 0 ? 'text-rose-600' : 'text-primary-600'"
+                  >
+                    {{ useCurrency(event.amount) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <p v-else class="py-8 text-center text-sm text-gray-500">Keine einzelnen Tagesbewegungen im Prognosezeitraum vorhanden.</p>
+        </UCard>
+      </div>
+
       <div class="grid gap-4 xl:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
         <UCard>
           <template #header>