Files
FEDEO/pages/incomingInvoices/create.vue

676 lines
21 KiB
Vue

<script setup>
import InputGroup from "~/components/InputGroup.vue";
import dayjs from "dayjs";
import HistoryDisplay from "~/components/HistoryDisplay.vue";
import {useSupabaseSelect} from "~/composables/useSupabase.js";
definePageMeta({
middleware: "auth"
})
const dataStore = useDataStore()
const profileStore = useProfileStore()
const supabase = useSupabaseClient()
const route = useRoute()
const router = useRouter()
const toast = useToast()
const itemInfo = ref({
vendor: 0,
expense: true,
reference: "",
date: null,
dueDate: null,
paymentType: "Überweisung",
description: "",
state: "Entwurf",
accounts: [
{
account: null,
amountNet: null,
amountTax: null,
taxType: "19",
costCentre: null
}
]
})
const availableDocuments = ref([])
const costcentres = ref([])
const accounts = ref([])
const vendors = ref([])
const setup = async () => {
let filetype = (await supabase.from("filetags").select().eq("tenant",profileStore.currentTenant).eq("incomingDocumentType","invoices").single()).data.id
console.log(filetype)
let ids = (await supabase.from("files").select("id").eq("tenant",profileStore.currentTenant).eq("type", filetype).is("incominginvoice",null)).data.map(i => i.id)
availableDocuments.value = await useFiles().selectSomeDocuments(ids)
accounts.value = (await supabase.from("accounts").select().order("number",{ascending:true})).data
vendors.value = await useSupabaseSelect("vendors")
}
setup()
const loadCostCentres = async () => {
costcentres.value = await useSupabaseSelect("costcentres")
}
loadCostCentres()
const useNetMode = ref(false)
const loadedFile = ref(null)
const loadFile = async (id) => {
console.log(id)
loadedFile.value = await useFiles().selectDocument(id)
console.log(loadedFile.value)
}
const changeNetMode = (mode) => {
useNetMode.value = mode
itemInfo.value.accounts = [{account: null,amountNet: null,amountTax: null,taxType: '19'}]
}
const taxOptions = ref([
{
label: "19% USt",
percentage: 19,
key: "19"
},{
label: "7% USt",
percentage: 7,
key: "7"
},{
label: "Innergemeintschaftlicher Erwerb 19%",
percentage: 0,
key: "19I"
},{
label: "Innergemeintschaftlicher Erwerb 7%",
percentage: 0,
key: "7I"
},{
label: "§13b UStG",
percentage: 0,
key: "13B"
},{
label: "Keine USt",
percentage: 0,
key: "null"
},
])
const totalCalculated = computed(() => {
let totalNet = 0
let totalAmount19Tax = 0
let totalAmount7Tax = 0
let totalAmount0Tax = 0
let totalGross = 0
itemInfo.value.accounts.forEach(account => {
if(account.amountNet) totalNet += account.amountNet
if(account.taxType === "19" && account.amountTax) {
totalAmount19Tax += account.amountTax
}
})
totalGross = Number(totalNet + totalAmount19Tax)
return {
totalNet,
totalAmount19Tax,
totalGross
}
})
const createIncomingInvoice = async () => {
const data = await dataStore.createNewItem('incominginvoices',itemInfo.value)
console.log(data)
const {error} = await supabase.from("files").update({incominginvoice: data.id}).eq("id",loadedFile.value.id)
}
const setCostCentre = async (item,data) => {
await loadCostCentres()
item.costCentre = data.id
}
const gptLoading = ref(false)
const getInvoiceData = async () => {
gptLoading.value = true
console.log(loadedFile.value)
//loadedFile.value.url
/*let data = {
"invoice_number": "3423478673",
"invoice_date": "2025-05-30",
"invoice_type": "incoming",
"delivery_type": "null",
"delivery_note_number": "null",
"reference": "null",
"issuer": {
"name": "Boels Rental Germany GmbH",
"address": "Emeranstraße 49-51, 85622 Feldkirchen, Deutschland",
"phone": "+49-(0)1801663225",
"email": "fakturierung@boels.de",
"bank": "ABN AMRO Bank N.V.",
"bic": "ABNANL2A",
"iban": "NL09 ABNA 0520 5585 61"
},
"recipient": {
"name": "Federspiel Technology UG",
"address": "Am Schwarzen Brack 14, 26452 Sande, Deutschland",
"phone": "null",
"email": "null"
},
"invoice_items": [
{
"description": "Bautrockner 50 ltr.",
"unit": "piece",
"quantity": 1,
"total": 395.22
},
{
"description": "Servicepauschale Kat. A",
"unit": "piece",
"quantity": 1,
"total": 32.1
},
{
"description": "Haftungsbegrenzung A: (Schäden, exkl. Feuer/Diebstahl/Einbruch)",
"unit": "piece",
"quantity": 1,
"total": 3.2
},
{
"description": "Haftungsbegrenzung B: (Feuer/Diebstahl/Einbruch)",
"unit": "piece",
"quantity": 1,
"total": 16.93
}
],
"subtotal": 89.1,
"tax_rate": 19,
"tax": 16.93,
"total": 106.03,
"terms": "Dieser Betrag wird automatisch mittels Lastschrift von ihrem Konto eingezogen"
}
console.log(data)
console.log(data.subtotal)*/
let data = await useFunctions().useGetInvoiceData(loadedFile.value)
if(data.invoice_number) itemInfo.value.reference = data.invoice_number
if(data.invoice_date) itemInfo.value.date = dayjs(data.invoice_date)
if(data.issuer.id) itemInfo.value.vendor = data.issuer.id
if(data.invoice_duedate) itemInfo.value.dueDate = dayjs(data.invoice_duedate)
if(data.terms) itemInfo.value.paymentType = data.terms
if(data.subtotal) {
itemInfo.value.accounts = [
{
account: null,
amountNet: data.subtotal,
amountTax: data.tax,
taxType: String(data.tax_rate),
costCentre: null,
amountGross: Number(data.subtotal) + Number(data.tax)
}
]
}
if(data.terms === "Direct Debit") {
itemInfo.value.paymentType = "Einzug"
} else if(data.terms === "Transfer") {
itemInfo.value.paymentType = "Überweisung"
} else if(data.terms === "Credit Card") {
itemInfo.value.paymentType = "Kreditkarte"
} else if(data.terms === "Other") {
itemInfo.value.paymentType = "Sonstiges"
}
let description = ""
if(data.delivery_note_number) description += `Lieferschein: ${data.delivery_note_number} \n`
if(data.reference) description += `Referenz: ${data.reference} \n`
if(data.invoice_items) {
data.invoice_items.forEach(item => {
description += `${item.description} - ${item.quantity} ${item.unit} - ${item.total}\n`
})
}
itemInfo.value.description = description
gptLoading.value = false
}
</script>
<template>
<UDashboardNavbar :title="'Eingangsbeleg erstellen'">
<template #right>
<UButton
@click="createIncomingInvoice"
>
Speichern
</UButton>
</template>
</UDashboardNavbar>
<UDashboardPanelContent>
<div v-if="!loadedFile">
<DocumentList
v-if="availableDocuments.length > 0"
:documents="availableDocuments"
:return-document-id="true"
@selectDocument="(documentId) => loadFile(documentId)"
/>
<div v-else class="w-full text-center">
<span class="text-xl font-medium mt-10">Keine Dateien zum zuweisen verfügbar</span>
</div>
</div>
<div
v-else
class="flex justify-between mt-5 workingContainer"
>
<object
v-if="loadedFile"
:data="loadedFile.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
type="application/pdf"
class="mx-5 documentPreview"
/>
<div class="w-3/5 mx-5">
<div v-if="mode === 'show'">
<div class="truncate mb-5">
<p>Status: {{itemInfo.state}}</p>
<p>Datum: {{dayjs(itemInfo.date).format('DD.MM.YYYY')}}</p>
<p>Fälligkeitsdatum: {{dayjs(itemInfo.dueDate).format('DD.MM.YYYY')}}</p>
<p>Lieferant: <nuxt-link :to="`/vendors/show/${itemInfo.vendor}`">{{dataStore.getVendorById(itemInfo.vendor).name}}</nuxt-link></p>
<p>Bezahlt: {{itemInfo.paid}}</p>
<p>Beschreibung: {{itemInfo.description}}</p>
<!-- TODO: Buchungszeilen darstellen -->
</div>
<HistoryDisplay
type="incomingInvoice"
v-if="itemInfo"
:element-id="itemInfo.id"
:render-headline="true"
/>
</div>
<div v-else class=" scrollContainer">
<UButton
icon="i-heroicons-sparkles"
class="my-3"
variant="outline"
@click="getInvoiceData"
:disabled="gptLoading"
>
KI - Vorschlag
<UProgress v-if="gptLoading" animation="carousel"/>
</UButton>
<InputGroup class="mb-3">
<UButton
:variant="itemInfo.expense ? 'solid' : 'outline'"
@click="itemInfo.expense = true"
>
Ausgabe
</UButton>
<UButton
:variant="!itemInfo.expense ? 'solid' : 'outline'"
@click="itemInfo.expense = false"
>
Einnahme
</UButton>
</InputGroup>
<UFormGroup label="Lieferant:" >
<InputGroup>
<USelectMenu
v-model="itemInfo.vendor"
:options="dataStore.vendors"
option-attribute="name"
value-attribute="id"
searchable
:search-attributes="['name','vendorNumber']"
class="flex-auto"
searchable-placeholder="Suche..."
:color="!itemInfo.vendor ? 'rose' : 'primary'"
@change="vendors.find(i => i.id === itemInfo.vendor).defaultPaymentMethod ? itemInfo.paymentType = vendors.find(i => i.id === itemInfo.vendor).defaultPaymentMethod : null"
>
<template #option="{option}">
{{option.vendorNumber}} - {{option.name}}
</template>
<template #label>
{{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : 'Lieferant auswählen'}}
</template>
</USelectMenu>
<EntityModalButtons
type="vendors"
:id="itemInfo.vendor"
@return-data="(data) => itemInfo.vendor = data.id"
/>
</InputGroup>
</UFormGroup>
<UFormGroup
class="mt-3"
label="Rechnungsreferenz:"
>
<UInput
v-model="itemInfo.reference"
/>
</UFormGroup>
<InputGroup class="mt-3" gap="2">
<UFormGroup label="Rechnungsdatum:">
<UPopover :popper="{ placement: 'bottom-start' }">
<UButton
icon="i-heroicons-calendar-days-20-solid"
:label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : 'Datum auswählen'"
variant="outline"
:color="!itemInfo.date ? 'rose' : 'primary'"
/>
<template #panel="{ close }">
<LazyDatePicker v-model="itemInfo.date" @close="itemInfo.dueDate = itemInfo.date" />
</template>
</UPopover>
</UFormGroup>
<UFormGroup label="Fälligkeitsdatum:">
<UPopover :popper="{ placement: 'bottom-start' }">
<UButton
icon="i-heroicons-calendar-days-20-solid"
:label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : 'Datum auswählen'"
variant="outline"
/>
<template #panel="{ close }">
<LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
</template>
</UPopover>
</UFormGroup>
</InputGroup>
<UFormGroup label="Zahlart:" >
<USelectMenu
:options="['Einzug','Kreditkarte','Überweisung','Sonstiges']"
v-model="itemInfo.paymentType"
/>
</UFormGroup>
<UFormGroup label="Beschreibung:" >
<UTextarea
v-model="itemInfo.description"
/>
</UFormGroup>
<InputGroup class="my-3">
<UButton
:variant="!useNetMode ? 'solid' : 'outline'"
@click="changeNetMode(false)"
>
Brutto
</UButton>
<UButton
:variant="useNetMode ? 'solid' : 'outline'"
@click="changeNetMode(true)"
>
Netto
</UButton>
<!-- Brutto
<UToggle
v-model="useNetMode"
@update:model-value="itemInfo.accounts = [{account: null,amountNet: null,amountTax: null,taxType: '19'}]"
/>
Netto-->
</InputGroup>
<table v-if="itemInfo.accounts.length > 1" class="w-full">
<tr>
<td>Gesamt exkl. Steuer: </td>
<td class="text-right">{{totalCalculated.totalNet.toFixed(2).replace(".",",")}} €</td>
</tr>
<tr>
<td>19% Steuer: </td>
<td class="text-right">{{totalCalculated.totalAmount19Tax.toFixed(2).replace(".",",")}} €</td>
</tr>
<tr>
<td>Gesamt inkl. Steuer: </td>
<td class="text-right">{{totalCalculated.totalGross.toFixed(2).replace(".",",")}} €</td>
</tr>
</table>
<div
class="my-3"
v-for="(item,index) in itemInfo.accounts"
>
<UFormGroup
label="Kategorie"
class="mb-3"
>
<USelectMenu
:options="accounts"
option-attribute="label"
value-attribute="id"
searchable
:search-attributes="['label']"
searchable-placeholder="Suche..."
v-model="item.account"
:color="!item.account ? 'rose' : 'primary'"
>
<template #label>
{{accounts.find(account => account.id === item.account) ? accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
</template>
<template #option="{option}">
{{option.number}} - {{option.label}}
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="Kostenstelle"
class=" mb-3"
>
<InputGroup class="w-full">
<USelectMenu
:options="costcentres"
option-attribute="name"
value-attribute="id"
searchable
:search-attributes="['label']"
searchable-placeholder="Suche..."
v-model="item.costCentre"
class="flex-auto"
>
<template #label>
{{costcentres.find(i => i.id === item.costCentre) ? costcentres.find(i => i.id === item.costCentre).name : "Keine Kostenstelle ausgewählt" }}
</template>
<template #option="{option}">
<span v-if="option.vehicle">{{option.number}} - Fahrzeug - {{option.name}}</span>
<span v-else-if="option.project">{{option.number}} - Projekt - {{option.name}}</span>
<span v-else-if="option.inventoryitem">{{option.number}} - Inventarartikel - {{option.name}}</span>
<span v-else>{{option.number}} - {{option.name}}</span>
</template>
</USelectMenu>
<UButton
variant="outline"
color="rose"
v-if="item.costCentre"
icon="i-heroicons-x-mark"
@click="item.costCentre = null"
/>
<EntityModalButtons
type="costcentres"
:id="item.costCentre"
@return-data="(data) => setCostCentre(item,data)"
/>
</InputGroup>
</UFormGroup>
<InputGroup>
<UFormGroup
v-if="useNetMode"
label="Gesamtbetrag exkl. Steuer in EUR"
class="flex-auto truncate"
:help="item.taxType !== null ? `Betrag inkl. Steuern: ${String(Number(item.amountNet + item.amountTax).toFixed(2)).replace('.',',')}` : 'Zuerst Steuertyp festlegen' "
>
<UInput
type="number"
step="0.01"
v-model="item.amountNet"
:color="!item.amountNet ? 'rose' : 'primary'"
:disabled="item.taxType === null"
@keyup="item.amountTax = Number((item.amountNet * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
item.amountGross = Number(item.amountNet) + Number(item.amountTax)"
>
<template #trailing>
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
</template>
</UInput>
</UFormGroup>
<UFormGroup
v-else
label="Gesamtbetrag inkl. Steuer in EUR"
class="flex-auto"
:help="item.taxType !== null ? `Betrag exkl. Steuern: ${item.amountNet ? String(item.amountNet.toFixed(2)).replace('.',',') : '0,00'}` : 'Zuerst Steuertyp festlegen' "
>
<UInput
type="number"
step="0.01"
:disabled="item.taxType === null"
v-model="item.amountGross"
:color="!item.amountGross ? 'rose' : 'primary'"
:ui-menu="{ width: 'min-w-max' }"
@keyup="item.amountNet = Number((item.amountGross / (1 + Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
item.amountTax = Number((item.amountGross - item.amountNet).toFixed(2))"
>
<template #trailing>
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
</template>
</UInput>
</UFormGroup>
<UFormGroup
label="Umsatzsteuer"
class="w-32"
:help="`Betrag: ${item.amountTax ? String(item.amountTax).replace('.',',') : '0,00'}`"
>
<USelectMenu
:options="taxOptions"
v-model="item.taxType"
value-attribute="key"
:ui-menu="{ width: 'min-w-max' }"
option-attribute="label"
@change="item.amountNet = Number((item.amountGross / (1 + Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2)),
item.amountTax = Number(((item.amountNet ? item.amountNet : 0) * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
>
<template #label>
<span class="truncate">{{taxOptions.find(i => i.key === item.taxType) ? taxOptions.find(i => i.key === item.taxType).label : ""}}</span>
</template>
</USelectMenu>
</UFormGroup>
</InputGroup>
<UButton
class="mt-3"
@click="itemInfo.accounts = [...itemInfo.accounts.slice(0,index+1),{account:null, amountNet: null, amountTax:null, taxType: '19'} , ...itemInfo.accounts.slice(index+1)]"
>
Betrag aufteilen
</UButton>
<UButton
v-if="index !== 0"
class="mt-3"
variant="ghost"
color="rose"
@click="itemInfo.accounts = itemInfo.accounts.filter((account,itemIndex) => itemIndex !== index)"
>
Position entfernen
</UButton>
</div>
</div>
</div>
</div>
</UDashboardPanelContent>
</template>
<style scoped>
.documentPreview {
aspect-ratio: 1 / 1.414;
height: 80vh;
}
.scrollContainer {
overflow-y: scroll;
padding-left: 1em;
padding-right: 1em;
height: 75vh;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.scrollContainer::-webkit-scrollbar {
display: none;
}
.lineItemRow {
display: flex;
flex-direction: row;
}
.workingContainer {
height: 80vh;
}
</style>