876 lines
35 KiB
Vue
876 lines
35 KiB
Vue
<script setup lang="ts">
|
|
import dayjs from "dayjs"
|
|
|
|
definePageMeta({
|
|
layout: "notLoggedIn"
|
|
})
|
|
|
|
const auth = useAuthStore()
|
|
const toast = useToast()
|
|
|
|
const customer = ref<any | null>(null)
|
|
const contracts = ref<any[]>([])
|
|
const contracttypes = ref<any[]>([])
|
|
const invoices = ref<any[]>([])
|
|
const loading = ref(true)
|
|
const saving = ref(false)
|
|
const expandedInvoiceId = ref<number | null>(null)
|
|
const downloadingInvoiceId = ref<number | null>(null)
|
|
const activeTab = ref("0")
|
|
const contractChangeModalOpen = ref(false)
|
|
const cancellationModalOpen = ref(false)
|
|
const submittingContractRequest = ref(false)
|
|
const selectedContract = ref<any | null>(null)
|
|
|
|
const contractChangeForm = reactive({
|
|
contracttype: null as number | null,
|
|
message: ""
|
|
})
|
|
|
|
const cancellationForm = reactive({
|
|
requestedEndDate: "",
|
|
message: ""
|
|
})
|
|
|
|
const customerForm = reactive({
|
|
name: "",
|
|
firstname: "",
|
|
lastname: "",
|
|
salutation: "",
|
|
title: "",
|
|
nameAddition: "",
|
|
email: "",
|
|
invoiceEmail: "",
|
|
phone: "",
|
|
mobile: "",
|
|
website: "",
|
|
street: "",
|
|
special: "",
|
|
zip: "",
|
|
city: "",
|
|
country: ""
|
|
})
|
|
|
|
const portalCustomerId = computed(() => auth.profile?.customer_for_portal || null)
|
|
|
|
const summaryCards = computed(() => [
|
|
{
|
|
label: "Offene Rechnungen",
|
|
value: invoices.value.filter((invoice) => getOpenAmount(invoice) > 0).length,
|
|
icon: "i-heroicons-document-text"
|
|
},
|
|
{
|
|
label: "Aktive Vertrage",
|
|
value: contracts.value.filter((contract) => contract.active).length,
|
|
icon: "i-heroicons-clipboard-document-check"
|
|
},
|
|
{
|
|
label: "Dokumente im Portal",
|
|
value: invoices.value.length,
|
|
icon: "i-heroicons-folder-open"
|
|
}
|
|
])
|
|
|
|
const portalTabs = computed(() => [
|
|
{
|
|
label: "Kundendaten",
|
|
slot: "customer",
|
|
value: "0"
|
|
},
|
|
{
|
|
label: `Rechnungen (${invoices.value.length})`,
|
|
slot: "invoices",
|
|
value: "1"
|
|
},
|
|
{
|
|
label: `Verträge (${contracts.value.length})`,
|
|
slot: "contracts",
|
|
value: "2"
|
|
}
|
|
])
|
|
|
|
function fillFormFromCustomer(record: any) {
|
|
const infoData = record?.infoData || {}
|
|
|
|
customerForm.name = record?.name || ""
|
|
customerForm.firstname = record?.firstname || ""
|
|
customerForm.lastname = record?.lastname || ""
|
|
customerForm.salutation = record?.salutation || ""
|
|
customerForm.title = record?.title || ""
|
|
customerForm.nameAddition = record?.nameAddition || ""
|
|
customerForm.email = infoData.email || ""
|
|
customerForm.invoiceEmail = infoData.invoiceEmail || ""
|
|
customerForm.phone = infoData.tel || ""
|
|
customerForm.mobile = infoData.mobileTel || ""
|
|
customerForm.website = infoData.web || ""
|
|
customerForm.street = infoData.street || ""
|
|
customerForm.special = infoData.special || ""
|
|
customerForm.zip = infoData.zip || ""
|
|
customerForm.city = infoData.city || ""
|
|
customerForm.country = infoData.country || ""
|
|
}
|
|
|
|
function getDocumentTypeLabel(type: string) {
|
|
if (type === "advanceInvoices") return "Abschlagsrechnung"
|
|
if (type === "cancellationInvoices") return "Stornorechnung"
|
|
return "Rechnung"
|
|
}
|
|
|
|
function formatDate(value?: string | null) {
|
|
if (!value) return "-"
|
|
|
|
const date = dayjs(value)
|
|
return date.isValid() ? date.format("DD.MM.YYYY") : value
|
|
}
|
|
|
|
function formatCurrency(value: number) {
|
|
return useCurrency(value)
|
|
}
|
|
|
|
function formatBoolean(value: boolean | null | undefined) {
|
|
if (typeof value !== "boolean") return "-"
|
|
return value ? "Ja" : "Nein"
|
|
}
|
|
|
|
function formatValue(value: any) {
|
|
if (value === null || typeof value === "undefined" || value === "") return "-"
|
|
|
|
if (typeof value === "boolean") return formatBoolean(value)
|
|
|
|
if (typeof value === "object") {
|
|
if (Object.keys(value).length === 0) return "-"
|
|
return JSON.stringify(value)
|
|
}
|
|
|
|
return String(value)
|
|
}
|
|
|
|
function maskIban(value?: string | null) {
|
|
if (!value) return "-"
|
|
|
|
const clean = value.replace(/\s+/g, "")
|
|
if (clean.length <= 4) return clean
|
|
|
|
const country = clean.slice(0, 2)
|
|
const lastTwo = clean.slice(-2)
|
|
const maskedLength = Math.max(clean.length - 4, 0)
|
|
const masked = "*".repeat(maskedLength).replace(/(.{4})/g, "$1 ").trim()
|
|
|
|
return `${country} ${masked} ${lastTwo}`.replace(/\s+/g, " ").trim()
|
|
}
|
|
|
|
function getContactLabel(contact: any) {
|
|
if (!contact) return "-"
|
|
if (typeof contact !== "object") return String(contact)
|
|
return contact.fullName || [contact.firstName, contact.lastName].filter(Boolean).join(" ") || contact.email || contact.id || "-"
|
|
}
|
|
|
|
function getAllowedContracttypeIds(contract: any) {
|
|
if (!Array.isArray(contract?.allowedContracttypes)) return []
|
|
return contract.allowedContracttypes.map((id: any) => Number(id)).filter((id: number) => Number.isInteger(id))
|
|
}
|
|
|
|
function getAllowedContracttypes(contract: any) {
|
|
const allowedIds = getAllowedContracttypeIds(contract)
|
|
return contracttypes.value.filter((item: any) => allowedIds.includes(Number(item.id)))
|
|
}
|
|
|
|
const selectedContractAllowedContracttypes = computed(() => {
|
|
if (!selectedContract.value) return []
|
|
return getAllowedContracttypes(selectedContract.value)
|
|
})
|
|
|
|
function openContractChangeRequest(contract: any) {
|
|
const allowedTypes = getAllowedContracttypes(contract)
|
|
selectedContract.value = contract
|
|
contractChangeForm.contracttype = allowedTypes.some((item: any) => item.id === contract.contracttype?.id)
|
|
? contract.contracttype.id
|
|
: allowedTypes[0]?.id || null
|
|
contractChangeForm.message = ""
|
|
contractChangeModalOpen.value = true
|
|
}
|
|
|
|
function openCancellationRequest(contract: any) {
|
|
selectedContract.value = contract
|
|
cancellationForm.requestedEndDate = contract.endDate ? dayjs(contract.endDate).format("YYYY-MM-DD") : ""
|
|
cancellationForm.message = ""
|
|
cancellationModalOpen.value = true
|
|
}
|
|
|
|
function getInvoiceAmount(invoice: any) {
|
|
return useSum().getCreatedDocumentSum(invoice, invoices.value)
|
|
}
|
|
|
|
function getOpenAmount(invoice: any) {
|
|
return useSum().getCreatedDocumentOpenAmount(invoice, invoices.value)
|
|
}
|
|
|
|
function toggleInvoice(invoiceId: number) {
|
|
expandedInvoiceId.value = expandedInvoiceId.value === invoiceId ? null : invoiceId
|
|
}
|
|
|
|
async function logout() {
|
|
await auth.logout()
|
|
}
|
|
|
|
async function downloadInvoice(invoice: any) {
|
|
const fileId = invoice?.files?.[0]?.id
|
|
if (!fileId) return
|
|
|
|
downloadingInvoiceId.value = invoice.id
|
|
|
|
try {
|
|
await useFiles().downloadFile(fileId)
|
|
} finally {
|
|
downloadingInvoiceId.value = null
|
|
}
|
|
}
|
|
|
|
async function submitContractChangeRequest() {
|
|
if (!selectedContract.value?.id || !contractChangeForm.contracttype) return
|
|
|
|
submittingContractRequest.value = true
|
|
|
|
try {
|
|
await useNuxtApp().$api(`/api/portal/contracts/${selectedContract.value.id}/change-request`, {
|
|
method: "POST",
|
|
body: {
|
|
contracttype: contractChangeForm.contracttype,
|
|
message: contractChangeForm.message
|
|
}
|
|
})
|
|
|
|
contractChangeModalOpen.value = false
|
|
toast.add({ title: "Ihre Anfrage wurde übermittelt." })
|
|
} finally {
|
|
submittingContractRequest.value = false
|
|
}
|
|
}
|
|
|
|
async function submitCancellationRequest() {
|
|
if (!selectedContract.value?.id || !cancellationForm.requestedEndDate) return
|
|
|
|
submittingContractRequest.value = true
|
|
|
|
try {
|
|
await useNuxtApp().$api(`/api/portal/contracts/${selectedContract.value.id}/cancellation-request`, {
|
|
method: "POST",
|
|
body: {
|
|
requestedEndDate: cancellationForm.requestedEndDate,
|
|
message: cancellationForm.message
|
|
}
|
|
})
|
|
|
|
cancellationModalOpen.value = false
|
|
toast.add({ title: "Ihre Anfrage wurde übermittelt." })
|
|
} finally {
|
|
submittingContractRequest.value = false
|
|
}
|
|
}
|
|
|
|
async function loadPortalData() {
|
|
if (!portalCustomerId.value) {
|
|
loading.value = false
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
|
|
try {
|
|
const [customerRecord, contractRows, invoiceRows, contracttypeRows] = await Promise.all([
|
|
useEntities("customers").selectSingle(portalCustomerId.value),
|
|
useEntities("contracts").select("*, contracttype(id,name)", "startDate", true),
|
|
useEntities("createddocuments").select("*, files(*), statementallocations(*), contract(id,name,contractNumber)", "documentDate", true),
|
|
useEntities("contracttypes").select("*", "name", true)
|
|
])
|
|
|
|
customer.value = customerRecord
|
|
contracts.value = (contractRows || []).filter((item: any) => !item.archived)
|
|
invoices.value = (invoiceRows || []).filter((item: any) => !item.archived)
|
|
contracttypes.value = (contracttypeRows || []).filter((item: any) => !item.archived)
|
|
fillFormFromCustomer(customerRecord)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function saveCustomerData() {
|
|
if (!customer.value?.id) return
|
|
|
|
saving.value = true
|
|
|
|
try {
|
|
const payload = {
|
|
name: customerForm.name,
|
|
firstname: customerForm.firstname,
|
|
lastname: customerForm.lastname,
|
|
salutation: customerForm.salutation,
|
|
title: customerForm.title,
|
|
nameAddition: customerForm.nameAddition,
|
|
infoData: {
|
|
...(customer.value.infoData || {}),
|
|
email: customerForm.email,
|
|
invoiceEmail: customerForm.invoiceEmail,
|
|
tel: customerForm.phone,
|
|
mobileTel: customerForm.mobile,
|
|
web: customerForm.website,
|
|
street: customerForm.street,
|
|
special: customerForm.special,
|
|
zip: customerForm.zip,
|
|
city: customerForm.city,
|
|
country: customerForm.country
|
|
}
|
|
}
|
|
|
|
const updated = await useEntities("customers").update(customer.value.id, payload, true)
|
|
customer.value = updated
|
|
fillFormFromCustomer(updated)
|
|
toast.add({ title: "Kundendaten gespeichert" })
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await loadPortalData()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-gradient-to-b from-neutral-50 via-white to-neutral-100">
|
|
<UContainer class="py-8 lg:py-12">
|
|
<div class="flex flex-col gap-6">
|
|
<div class="rounded-3xl border border-neutral-200 bg-white/90 p-6 shadow-sm lg:p-8">
|
|
<div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
|
|
<div class="space-y-3">
|
|
<p class="text-sm font-medium uppercase tracking-[0.2em] text-primary-600">Kundenportal</p>
|
|
<div>
|
|
<h1 class="text-3xl font-semibold text-neutral-900">
|
|
{{ customer?.name || "Ihr Zugang" }}
|
|
</h1>
|
|
<p class="mt-2 max-w-2xl text-sm text-neutral-600">
|
|
Hier konnen Sie Ihre Kundendaten pflegen, Rechnungen einsehen und aktive Vertrage im Blick behalten.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3">
|
|
<UButton color="neutral" variant="soft" icon="i-heroicons-arrow-path" :loading="loading" @click="loadPortalData">
|
|
Aktualisieren
|
|
</UButton>
|
|
<UButton color="neutral" variant="outline" icon="i-heroicons-arrow-right-on-rectangle" @click="logout">
|
|
Abmelden
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 grid gap-4 md:grid-cols-3">
|
|
<div
|
|
v-for="card in summaryCards"
|
|
:key="card.label"
|
|
class="rounded-2xl border border-neutral-200 bg-neutral-50 p-4"
|
|
>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="text-sm text-neutral-500">{{ card.label }}</p>
|
|
<p class="mt-2 text-2xl font-semibold text-neutral-900">{{ card.value }}</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-2 text-primary-600 shadow-sm">
|
|
<UIcon :name="card.icon" class="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="loading" class="rounded-3xl border border-neutral-200 bg-white p-8 text-center text-neutral-500">
|
|
Portal wird geladen...
|
|
</div>
|
|
|
|
<div v-else-if="!portalCustomerId" class="rounded-3xl border border-amber-200 bg-amber-50 p-8 text-amber-900">
|
|
Fuer diesen Zugang ist noch kein Portal-Kunde hinterlegt.
|
|
</div>
|
|
|
|
<UCard v-else :ui="{ body: 'p-4 sm:p-6' }">
|
|
<UTabs v-model="activeTab" :items="portalTabs" class="portal-tabs">
|
|
<template #customer>
|
|
<div class="pt-4">
|
|
<div class="mb-4 flex items-center justify-between gap-4">
|
|
<div>
|
|
<h2 class="text-xl font-semibold text-neutral-900">Kundendaten</h2>
|
|
<p class="mt-1 text-sm text-neutral-500">Aenderungen werden direkt in Ihrem Kundenstamm gespeichert.</p>
|
|
</div>
|
|
<UBadge color="primary" variant="subtle">Bearbeitbar</UBadge>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<UFormField label="Name / Firma">
|
|
<UInput v-model="customerForm.name" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Firmenzusatz">
|
|
<UInput v-model="customerForm.nameAddition" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Anrede">
|
|
<UInput v-model="customerForm.salutation" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Titel">
|
|
<UInput v-model="customerForm.title" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Vorname">
|
|
<UInput v-model="customerForm.firstname" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Nachname">
|
|
<UInput v-model="customerForm.lastname" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="E-Mail">
|
|
<UInput v-model="customerForm.email" type="email" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Rechnungs-E-Mail">
|
|
<UInput v-model="customerForm.invoiceEmail" type="email" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Telefon">
|
|
<UInput v-model="customerForm.phone" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Mobil">
|
|
<UInput v-model="customerForm.mobile" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Webseite">
|
|
<UInput v-model="customerForm.website" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Land">
|
|
<UInput v-model="customerForm.country" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Strasse" class="md:col-span-2">
|
|
<UInput v-model="customerForm.street" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Adresszusatz" class="md:col-span-2">
|
|
<UInput v-model="customerForm.special" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="PLZ">
|
|
<UInput v-model="customerForm.zip" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Ort">
|
|
<UInput v-model="customerForm.city" class="w-full" />
|
|
</UFormField>
|
|
</div>
|
|
|
|
<div class="mt-6 flex justify-end">
|
|
<UButton icon="i-heroicons-check" :loading="saving" @click="saveCustomerData">
|
|
Kundendaten speichern
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #invoices>
|
|
<div class="pt-4">
|
|
<div class="mb-4 flex items-center justify-between gap-4">
|
|
<div>
|
|
<h2 class="text-xl font-semibold text-neutral-900">Rechnungen</h2>
|
|
<p class="mt-1 text-sm text-neutral-500">Alle fuer das Portal freigegebenen Rechnungen Ihres Kundenkontos.</p>
|
|
</div>
|
|
<UBadge color="neutral" variant="subtle">{{ invoices.length }}</UBadge>
|
|
</div>
|
|
|
|
<div v-if="!invoices.length" class="rounded-2xl border border-dashed border-neutral-200 p-6 text-sm text-neutral-500">
|
|
Aktuell sind keine Rechnungen im Portal verfuegbar.
|
|
</div>
|
|
|
|
<div v-else class="space-y-3">
|
|
<div
|
|
v-for="invoice in invoices"
|
|
:key="invoice.id"
|
|
class="rounded-2xl border border-neutral-200 bg-neutral-50 p-4"
|
|
>
|
|
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="font-semibold text-neutral-900">{{ invoice.documentNumber || `Dokument #${invoice.id}` }}</p>
|
|
<UBadge color="primary" variant="soft">{{ getDocumentTypeLabel(invoice.type) }}</UBadge>
|
|
<UBadge color="neutral" variant="soft">{{ invoice.state }}</UBadge>
|
|
</div>
|
|
<p class="mt-2 text-sm text-neutral-500">
|
|
Datum: {{ formatDate(invoice.documentDate) }}
|
|
<span v-if="invoice.contract?.name"> | Vertrag: {{ invoice.contract.contractNumber || "-" }} {{ invoice.contract.name }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-start gap-3 text-sm lg:items-end">
|
|
<div class="text-neutral-600">
|
|
Gesamt: <span class="font-semibold text-neutral-900">{{ formatCurrency(getInvoiceAmount(invoice)) }}</span>
|
|
</div>
|
|
<div class="text-neutral-600">
|
|
Offen: <span class="font-semibold text-neutral-900">{{ formatCurrency(getOpenAmount(invoice)) }}</span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<UButton
|
|
v-if="invoice.files?.length"
|
|
color="primary"
|
|
variant="soft"
|
|
size="sm"
|
|
icon="i-heroicons-arrow-down-tray"
|
|
:loading="downloadingInvoiceId === invoice.id"
|
|
@click="downloadInvoice(invoice)"
|
|
>
|
|
PDF herunterladen
|
|
</UButton>
|
|
<UButton color="neutral" variant="soft" size="sm" @click="toggleInvoice(invoice.id)">
|
|
{{ expandedInvoiceId === invoice.id ? "Details ausblenden" : "Details ansehen" }}
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="expandedInvoiceId === invoice.id" class="mt-4 border-t border-neutral-200 pt-4">
|
|
<div v-if="invoice.rows?.length" class="space-y-3">
|
|
<div
|
|
v-for="(row, index) in invoice.rows.filter((entry: any) => !['pagebreak'].includes(entry.mode))"
|
|
:key="`${invoice.id}-${index}`"
|
|
class="flex flex-col gap-1 rounded-xl bg-white p-3 sm:flex-row sm:items-start sm:justify-between"
|
|
>
|
|
<div class="pr-4">
|
|
<p class="font-medium text-neutral-900">{{ row.text || row.title || row.description || "Position" }}</p>
|
|
<p class="text-xs text-neutral-500">
|
|
Menge: {{ row.quantity || "-" }} | Einzelpreis: {{ formatCurrency(Number(row.price || 0)) }}
|
|
</p>
|
|
</div>
|
|
<div class="text-sm font-medium text-neutral-900">
|
|
{{ formatCurrency((Number(row.quantity || 0) * Number(row.price || 0)) * (1 - Number(row.discountPercent || 0) / 100)) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="text-sm text-neutral-500">
|
|
Fuer dieses Dokument liegen keine Positionsdaten vor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #contracts>
|
|
<div class="pt-4">
|
|
<div class="mb-4 flex items-center justify-between gap-4">
|
|
<div>
|
|
<h2 class="text-xl font-semibold text-neutral-900">Vertraege</h2>
|
|
<p class="mt-1 text-sm text-neutral-500">Ihre aktuell zugeordneten Vertrage auf einen Blick.</p>
|
|
</div>
|
|
<UBadge color="neutral" variant="subtle">{{ contracts.length }}</UBadge>
|
|
</div>
|
|
|
|
<div v-if="!contracts.length" class="rounded-2xl border border-dashed border-neutral-200 p-6 text-sm text-neutral-500">
|
|
Es sind aktuell keine Vertraege hinterlegt.
|
|
</div>
|
|
|
|
<div v-else class="space-y-3">
|
|
<div
|
|
v-for="contract in contracts"
|
|
:key="contract.id"
|
|
class="rounded-2xl border border-neutral-200 bg-neutral-50 p-4"
|
|
>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="font-semibold text-neutral-900">{{ contract.name }}</p>
|
|
<UBadge :color="contract.active ? 'green' : 'neutral'" variant="soft">
|
|
{{ contract.active ? "Aktiv" : "Inaktiv" }}
|
|
</UBadge>
|
|
</div>
|
|
<p class="mt-2 text-sm text-neutral-500">
|
|
Vertragsnummer: {{ contract.contractNumber || "-" }}
|
|
</p>
|
|
</div>
|
|
<div class="text-right text-sm text-neutral-500">
|
|
<p>{{ contract.contracttype?.name || "Ohne Vertragstyp" }}</p>
|
|
<p>{{ contract.billingInterval || "Kein Intervall hinterlegt" }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 flex flex-col gap-2 sm:flex-row">
|
|
<UButton
|
|
color="primary"
|
|
variant="soft"
|
|
icon="i-heroicons-pencil-square"
|
|
class="justify-center"
|
|
:disabled="getAllowedContracttypes(contract).length === 0"
|
|
@click="openContractChangeRequest(contract)"
|
|
>
|
|
Änderung anfragen
|
|
</UButton>
|
|
<UButton
|
|
color="red"
|
|
variant="soft"
|
|
icon="i-heroicons-document-minus"
|
|
class="justify-center"
|
|
@click="openCancellationRequest(contract)"
|
|
>
|
|
Kündigung anfragen
|
|
</UButton>
|
|
</div>
|
|
|
|
<div class="mt-4 grid gap-3 sm:grid-cols-2">
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Vertragstyp</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ contract.contracttype?.name || "Nicht hinterlegt" }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Änderung möglich zu</p>
|
|
<div v-if="getAllowedContracttypes(contract).length" class="mt-2 flex flex-wrap gap-2">
|
|
<UBadge
|
|
v-for="type in getAllowedContracttypes(contract)"
|
|
:key="type.id"
|
|
color="primary"
|
|
variant="soft"
|
|
>
|
|
{{ type.name }}
|
|
</UBadge>
|
|
</div>
|
|
<p v-else class="mt-1 text-sm font-medium text-neutral-900">
|
|
Keine Änderungstypen freigegeben
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Ansprechpartner</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ getContactLabel(contract.contact) }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Aktiv</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ formatBoolean(contract.active) }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Wiederkehrend</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ formatBoolean(contract.recurring) }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Startdatum</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ formatDate(contract.startDate) }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Enddatum</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ formatDate(contract.endDate) }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Unterschrieben am</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ formatDate(contract.signDate) }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Laufzeit</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ contract.duration || "-" }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Zahlungsart</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ contract.paymentType || "Nicht hinterlegt" }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Abrechnungsintervall</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ contract.billingInterval || "-" }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Rechnungsversand</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ contract.invoiceDispatch || "-" }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Kontoinhaber</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ contract.bankingOwner || "-" }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Bank</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ contract.bankingName || "-" }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">IBAN</p>
|
|
<p class="mt-1 break-all text-sm font-medium text-neutral-900">
|
|
{{ maskIban(contract.bankingIban) }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">BIC</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ contract.bankingBIC || "-" }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">SEPA-Referenz</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ contract.sepaRef || "-" }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">SEPA-Datum</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ formatDate(contract.sepaDate) }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Erstellt am</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ formatDate(contract.createdAt) }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white p-3">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Aktualisiert am</p>
|
|
<p class="mt-1 text-sm font-medium text-neutral-900">
|
|
{{ formatDate(contract.updatedAt) }}
|
|
</p>
|
|
</div>
|
|
<div v-if="contract.notes" class="rounded-xl bg-white p-3 sm:col-span-2">
|
|
<p class="text-xs uppercase tracking-wide text-neutral-400">Notizen</p>
|
|
<p class="mt-1 whitespace-pre-wrap break-words text-sm font-medium text-neutral-900">
|
|
{{ contract.notes }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UTabs>
|
|
</UCard>
|
|
</div>
|
|
</UContainer>
|
|
|
|
<UModal v-model:open="contractChangeModalOpen">
|
|
<template #content>
|
|
<div class="space-y-5 p-6">
|
|
<div>
|
|
<p class="text-sm font-medium uppercase tracking-[0.2em] text-primary-600">Vertrag ändern</p>
|
|
<h3 class="mt-2 text-xl font-semibold text-neutral-900">Änderung anfragen</h3>
|
|
<p class="mt-1 text-sm text-neutral-500">
|
|
Ihre Anfrage wird an unser Team übermittelt. Der Vertrag wird dadurch noch nicht geändert.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-neutral-700">Gewünschter Vertragstyp</label>
|
|
<USelectMenu
|
|
v-model="contractChangeForm.contracttype"
|
|
:items="selectedContractAllowedContracttypes"
|
|
value-key="id"
|
|
label-key="name"
|
|
class="w-full"
|
|
placeholder="Vertragstyp auswählen"
|
|
/>
|
|
<p v-if="!selectedContractAllowedContracttypes.length" class="mt-2 text-sm text-neutral-500">
|
|
Für diesen Vertrag sind aktuell keine Änderungstypen freigegeben.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-neutral-700">Nachricht optional</label>
|
|
<UTextarea
|
|
v-model="contractChangeForm.message"
|
|
class="w-full"
|
|
:rows="4"
|
|
placeholder="Ergänzende Hinweise zur gewünschten Änderung"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-2">
|
|
<UButton color="neutral" variant="ghost" @click="contractChangeModalOpen = false">
|
|
Abbrechen
|
|
</UButton>
|
|
<UButton
|
|
color="primary"
|
|
:loading="submittingContractRequest"
|
|
:disabled="!contractChangeForm.contracttype"
|
|
@click="submitContractChangeRequest"
|
|
>
|
|
Anfrage senden
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UModal>
|
|
|
|
<UModal v-model:open="cancellationModalOpen">
|
|
<template #content>
|
|
<div class="space-y-5 p-6">
|
|
<div>
|
|
<p class="text-sm font-medium uppercase tracking-[0.2em] text-red-600">Kündigung</p>
|
|
<h3 class="mt-2 text-xl font-semibold text-neutral-900">Kündigung anfragen</h3>
|
|
<p class="mt-1 text-sm text-neutral-500">
|
|
Ihre Kündigungsanfrage wird dokumentiert und intern geprüft.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-neutral-700">Gewünschtes Kündigungsdatum</label>
|
|
<UInput
|
|
v-model="cancellationForm.requestedEndDate"
|
|
type="date"
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-neutral-700">Nachricht optional</label>
|
|
<UTextarea
|
|
v-model="cancellationForm.message"
|
|
class="w-full"
|
|
:rows="4"
|
|
placeholder="Optionaler Grund oder weitere Hinweise"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-2">
|
|
<UButton color="neutral" variant="ghost" @click="cancellationModalOpen = false">
|
|
Abbrechen
|
|
</UButton>
|
|
<UButton
|
|
color="red"
|
|
:loading="submittingContractRequest"
|
|
:disabled="!cancellationForm.requestedEndDate"
|
|
@click="submitCancellationRequest"
|
|
>
|
|
Anfrage senden
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UModal>
|
|
</div>
|
|
</template>
|