FEDEO/frontend/pages/accounting/cashbooks/[id].vue

<script setup>
import dayjs from "dayjs"

const toast = useToast()
const route = useRoute()
const router = useRouter()

const loading = ref(true)
const savingBooking = ref(false)
const cashbooks = ref([])
const bookings = ref([])
const accounts = ref([])
const customers = ref([])
const vendors = ref([])
const ownaccounts = ref([])
const incomingInvoices = ref([])
const selectedCashbookId = computed(() => Number(route.params.id))
const counterSearch = ref("")
const expandedGroups = ref([])

const DATEV_TAX_KEY_ITEMS = [
  { value: "__none__", 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({
  date: dayjs().format("YYYY-MM-DD"),
  direction: "expense",
  amount: null,
  counter: "",
  datevTaxKey: "__none__",
  description: ""
})

const displayCurrency = (value) => `${Number(value || 0).toFixed(2).replace(".", ",")} €`
const normalizeSearch = (value) => String(value || "").toLowerCase().trim()

const selectedCashbook = computed(() => cashbooks.value.find((item) => item.id === selectedCashbookId.value) || null)
const currentBalance = computed(() => {
  const openingBalance = Number(selectedCashbook.value?.balance || 0)
  const movementSum = bookings.value.reduce((sum, booking) => sum + Number(booking.amount || 0), 0)
  return openingBalance + movementSum
})

const getIncomingInvoiceGross = (invoice) => {
  return Number((invoice.accounts || []).reduce((sum, account) => {
    return sum + Number(account.amountNet || 0) + Number(account.amountTax || 0)
  }, 0))
}

const getIncomingInvoiceOpenAmount = (invoice) => {
  const gross = getIncomingInvoiceGross(invoice)
  const allocated = Number((invoice.statementallocations || []).reduce((sum, allocation) => sum + Number(allocation.amount || 0), 0))
  return Math.abs(gross) - Math.abs(allocated)
}

const buildEntries = (rows, type, labelBuilder) =>
    (rows || []).map((item) => ({
      key: `${type}:${item.id}`,
      id: item.id,
      type,
      number: item.number || item.vendorNumber || item.customerNumber || item.reference || "",
      name: item.label || item.name || item.vendor?.name || "",
      label: labelBuilder(item),
      typeLabel:
          type === "account"
              ? "Sachkonten"
              : type === "vendor"
                  ? "Kreditoren"
                  : type === "customer"
                      ? "Debitoren"
                      : type === "incominginvoice"
                          ? "Eingangsbelege"
                          : "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}`)
  },
  {
    key: "incominginvoice",
    label: "Eingangsbelege",
    entries: buildEntries(incomingInvoices.value, "incominginvoice", (item) => `${item.reference || "Ohne Referenz"} - ${item.vendor?.name || "Ohne Lieferant"} - Offen ${displayCurrency(getIncomingInvoiceOpenAmount(item))}`)
  }
]))

const groupedCounterEntries = computed(() =>
    entryGroups.value.map((group) => ({
      ...group,
      entries: group.entries.filter((entry) => {
        const search = normalizeSearch(counterSearch.value)
        if (!search) return true
        return [entry.number, entry.name, entry.label, entry.typeLabel]
            .some((value) => normalizeSearch(value).includes(search))
      })
    })).filter((group) => group.entries.length > 0)
)

const selectedCounter = computed(() => entryGroups.value.flatMap((group) => group.entries).find((entry) => entry.key === form.counter))

const isGroupExpanded = (groupKey) => expandedGroups.value.includes(groupKey)
const toggleGroupExpanded = (groupKey) => {
  if (expandedGroups.value.includes(groupKey)) {
    expandedGroups.value = expandedGroups.value.filter((item) => item !== groupKey)
    return
  }
  expandedGroups.value = [...expandedGroups.value, groupKey]
}

const visibleEntries = (group) => {
  if (group.entries.length <= 5 || isGroupExpanded(group.key)) return group.entries
  return group.entries.slice(0, 5)
}

const getBookingCounter = (booking) => {
  if (booking.incominginvoice) {
    return {
      type: "Eingangsbeleg",
      number: booking.incominginvoice.reference || "",
      name: booking.incominginvoice.vendor?.name || booking.incominginvoice.description || ""
    }
  }

  const map = [
    ["account", "Sachkonto"],
    ["vendor", "Kreditor"],
    ["customer", "Debitor"],
    ["ownaccount", "Zusätzliches Konto"]
  ]

  for (const [key, type] of map) {
    const item = booking[key]
    if (!item) continue
    return {
      type,
      number: item.number || item.vendorNumber || item.customerNumber || "",
      name: item.label || item.name || ""
    }
  }

  return { type: "", number: "", name: "" }
}

const loadBookings = async () => {
  if (!selectedCashbookId.value || !Number.isFinite(selectedCashbookId.value)) {
    bookings.value = []
    return
  }

  bookings.value = await useNuxtApp().$api(`/api/banking/cashbooks/${selectedCashbookId.value}/bookings`)
}

const loadData = async () => {
  loading.value = true
  const [cashbookRows, accountRows, customerRows, vendorRows, ownaccountRows, incomingInvoiceRows] = await Promise.all([
    useNuxtApp().$api("/api/banking/cashbooks"),
    useEntities("accounts").selectSpecial("*", "number", true),
    useEntities("customers").select(),
    useEntities("vendors").select(),
    useEntities("ownaccounts").select(),
    useEntities("incominginvoices").select("*, vendor(*), statementallocations(id,amount)")
  ])

  cashbooks.value = cashbookRows || []
  accounts.value = accountRows || []
  customers.value = customerRows || []
  vendors.value = vendorRows || []
  ownaccounts.value = ownaccountRows || []
  incomingInvoices.value = (incomingInvoiceRows || [])
      .filter((invoice) => invoice.state === "Gebucht" && !invoice.archived)
      .filter((invoice) => getIncomingInvoiceOpenAmount(invoice) > 0.004)

  await loadBookings()
  loading.value = false
}

const saveBooking = async () => {
  if (!selectedCashbookId.value || !form.date || !form.amount || !form.counter) {
    toast.add({ title: "Bitte Kasse, Datum, Betrag und Gegenkonto auswählen.", color: "warning" })
    return
  }

  const [counterType, counterId] = String(form.counter).split(":")
  savingBooking.value = true
  try {
    await useNuxtApp().$api(`/api/banking/cashbooks/${selectedCashbookId.value}/bookings`, {
      method: "POST",
      body: {
        date: form.date,
        direction: form.direction,
        amount: Number(form.amount),
        counterType,
        counterId,
        datevTaxKey: form.datevTaxKey === "__none__" ? null : form.datevTaxKey,
        description: form.description
      }
    })
    toast.add({ title: "Kassenbuchung erstellt." })
    form.amount = null
    form.counter = ""
    form.datevTaxKey = "__none__"
    form.description = ""
    counterSearch.value = ""
    expandedGroups.value = []
    await loadBookings()
  } finally {
    savingBooking.value = false
  }
}

const deleteBooking = async (booking) => {
  await useNuxtApp().$api(`/api/banking/cashbook-bookings/${booking.id}`, { method: "DELETE" })
  toast.add({ title: "Kassenbuchung gelöscht." })
  await loadBookings()
}

onMounted(loadData)
</script>

<template>
  <UDashboardPanelContent>
    <UDashboardNavbar :title="selectedCashbook ? selectedCashbook.name : 'Kassenbuch'">
      <template #left>
        <UButton icon="i-heroicons-arrow-left" variant="ghost" color="neutral" @click="router.push('/accounting/cashbooks')">
          Kassenbücher
        </UButton>
      </template>
      <template #right>
        <div v-if="selectedCashbook" class="flex flex-wrap items-center justify-end gap-2">
          <UBadge color="neutral" variant="subtle">
            {{ selectedCashbook.name }}
          </UBadge>
          <UBadge color="neutral" variant="subtle">
            Konto {{ selectedCashbook.datevNumber }}
          </UBadge>
          <UBadge :color="currentBalance < 0 ? 'error' : 'success'" variant="subtle">
            Bestand {{ displayCurrency(currentBalance) }}
          </UBadge>
        </div>
      </template>
    </UDashboardNavbar>

    <div v-if="loading" class="py-10 text-center text-gray-500">Lade Kassenbuch...</div>
    <div v-else-if="selectedCashbook" class="space-y-6">
        <UCard>
          <template #header>
            <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
              <div>
                <h2 class="font-semibold text-gray-900 dark:text-white">Neue Kassenbuchung</h2>
                <p class="text-sm text-gray-500">Einnahmen erhöhen den Kassenbestand, Ausgaben verringern ihn.</p>
              </div>
              <div class="grid gap-3 sm:grid-cols-3">
                <UFormField label="Buchungsdatum">
                  <UInput v-model="form.date" 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">
                  <USelect
                      v-model="form.datevTaxKey"
                      :items="DATEV_TAX_KEY_ITEMS"
                      value-key="value"
                      label-key="label"
                      class="w-full"
                  />
                </UFormField>
              </div>
            </div>
          </template>

          <div class="grid gap-6 xl:grid-cols-[240px_minmax(0,1fr)]">
            <div class="space-y-3">
              <button
                  type="button"
                  class="w-full rounded-lg border px-4 py-3 text-left transition"
                  :class="form.direction === 'income'
                    ? 'border-emerald-500 bg-emerald-50 dark:bg-emerald-950/30'
                    : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-800 dark:bg-gray-900'"
                  @click="form.direction = 'income'"
              >
                <div class="font-semibold text-emerald-700 dark:text-emerald-300">Einnahme</div>
                <div class="text-sm text-gray-500">Bargeld kommt in die Kasse.</div>
              </button>
              <button
                  type="button"
                  class="w-full rounded-lg border px-4 py-3 text-left transition"
                  :class="form.direction === 'expense'
                    ? 'border-red-500 bg-red-50 dark:bg-red-950/30'
                    : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-800 dark:bg-gray-900'"
                  @click="form.direction = 'expense'"
              >
                <div class="font-semibold text-red-700 dark:text-red-300">Ausgabe</div>
                <div class="text-sm text-gray-500">Bargeld wird aus der Kasse entnommen.</div>
              </button>
            </div>

            <div class="space-y-4">
              <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div>
                  <h3 class="font-semibold text-gray-900 dark:text-white">Gegenkonto</h3>
                  <p class="text-sm text-gray-500">Sachkonto, Kreditor, Debitor, Eingangsbeleg oder zusätzliches Konto.</p>
                </div>
                <UInput v-model="counterSearch" icon="i-heroicons-magnifying-glass" placeholder="Gegenkonto durchsuchen..." class="max-w-sm" />
              </div>

              <div class="space-y-4">
                <div v-for="group in groupedCounterEntries" :key="group.key" class="space-y-2">
                  <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">{{ group.label }}</div>
                  <div class="grid gap-2 md:grid-cols-2">
                    <button
                        v-for="entry in visibleEntries(group)"
                        :key="entry.key"
                        type="button"
                        class="rounded-lg border px-3 py-2 text-left transition"
                        :class="form.counter === entry.key
                          ? 'border-primary-500 bg-primary-50 dark:bg-primary-950/30'
                          : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-800 dark:bg-gray-900'"
                        @click="form.counter = 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>
                  <UButton
                      v-if="group.entries.length > 5"
                      size="xs"
                      color="neutral"
                      variant="ghost"
                      :label="isGroupExpanded(group.key) ? 'Weniger anzeigen' : `${group.entries.length - 5} weitere anzeigen`"
                      @click="toggleGroupExpanded(group.key)"
                  />
                </div>
              </div>

              <UAlert
                  v-if="selectedCounter"
                  color="primary"
                  variant="soft"
                  icon="i-heroicons-arrows-right-left"
                  :title="form.direction === 'income' ? `${selectedCashbook.datevNumber} an ${selectedCounter.number}` : `${selectedCounter.number} an ${selectedCashbook.datevNumber}`"
                  :description="`${selectedCounter.typeLabel.slice(0, -1)} ${selectedCounter.name} wird als Gegenkonto verwendet.`"
              />

              <UFormField label="Beschreibung">
                <UTextarea v-model="form.description" placeholder="z. B. Bareinkauf Büromaterial" autoresize class="w-full" />
              </UFormField>

              <div class="flex justify-end">
                <UButton color="primary" icon="i-heroicons-check" :loading="savingBooking" @click="saveBooking">
                  Kassenbuchung erstellen
                </UButton>
              </div>
            </div>
          </div>
        </UCard>

        <UCard>
          <template #header>
            <div>
              <h2 class="font-semibold text-gray-900 dark:text-white">Kassenbewegungen</h2>
              <p class="text-sm text-gray-500">Alle Buchungen dieser Barkasse mit Gegenkonto.</p>
            </div>
          </template>

          <div v-if="bookings.length === 0" class="py-10 text-center text-gray-500">Noch keine Kassenbuchungen 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">
              <div class="flex flex-wrap items-center justify-between gap-3">
                <div class="flex flex-wrap items-center gap-2 text-sm">
                  <span class="font-medium">{{ dayjs(booking.date).format("DD.MM.YYYY") }}</span>
                  <UBadge :color="Number(booking.amount) >= 0 ? 'success' : 'error'" variant="subtle">
                    {{ Number(booking.amount) >= 0 ? "Einnahme" : "Ausgabe" }}
                  </UBadge>
                  <span class="font-mono font-semibold">{{ displayCurrency(Math.abs(Number(booking.amount || 0))) }}</span>
                  <span class="text-gray-500">{{ getBookingCounter(booking).type }}</span>
                  <span class="font-mono">{{ getBookingCounter(booking).number }}</span>
                  <span>{{ getBookingCounter(booking).name }}</span>
                </div>
                <UButton
                    icon="i-heroicons-trash"
                    color="error"
                    variant="ghost"
                    size="sm"
                    @click="deleteBooking(booking)"
                />
              </div>
              <div v-if="booking.text" class="mt-2 text-sm text-gray-600 dark:text-gray-300">
                {{ booking.text }}
              </div>
            </div>
          </div>
        </UCard>

    </div>

    <UCard v-else>
      <div class="py-16 text-center text-gray-500">Dieses Kassenbuch wurde nicht gefunden.</div>
    </UCard>
  </UDashboardPanelContent>
</template>