many changes

2024-01-11 18:33:56 +01:00
parent d62fc5d668
commit 12323382a5
17 changed files with 941 additions and 537 deletions
--- a/spaces/pages/documents.vue
+++ b/spaces/pages/documents.vue
@@ -24,12 +24,16 @@ const fileUploadFormData = ref({

 let tags = dataStore.getDocumentTags

-const selectedTags = ref(["Eingang"])
+const selectedTags = ref("Eingang")
+

 const filteredDocuments = computed(() => {
+  let returnList = []

-  return dataStore.documents.filter(doc => doc.tags.filter(tag => selectedTags.value.find(t => t === tag)).length > 0)
+  returnList =  dataStore.documents.filter(i => i.tags.filter(t => selectedTags.value === t).length > 0)

+  //return dataStore.documents.filter(doc => doc.tags.filter(tag => selectedTags.value.find(t => t === tag)).length > 0)
+  return returnList

 })

@@ -158,11 +162,10 @@ const downloadSelected = async () => {
      <USelectMenu
          :options="tags"
          v-model="selectedTags"
-          multiple
+          class="w-40"
      >
        <template #label>
-          <span v-if="selectedTags.length" class="truncate">{{ selectedTags.length }} ausgewählt</span>
-          <span v-else>Tags auswählen</span>
+          {{selectedTags}}
        </template>
      </USelectMenu>

@@ -216,11 +219,11 @@ const downloadSelected = async () => {
        </template>
      </UCard>
    </USlideover>
-
-      <div class="documentList">
+      <div class="documentList" >
        <DocumentDisplay
-          v-for="document in filteredDocuments"
-          :document="document"
+            :document="i"
+            :key="i.id"
+            v-for="i in filteredDocuments"
        />
      </div>
    </div>
--- a/spaces/pages/editortest.vue
+++ b/spaces/pages/editortest.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <tiptap/>
+</template>
+
+<style scoped>
+
+</style>
--- a/spaces/pages/employees/timetracking.vue
+++ b/spaces/pages/employees/timetracking.vue
@@ -48,31 +48,38 @@ const createTimeInfo = ref({
 const columns = [
  {
    key: "user",
-    label: "Benutzer"
+    label: "Benutzer",
+    sortable:true
  },
  {
    key:"start",
-    label:"Start"
+    label:"Start",
+    sortable:true
  },
  {
    key:"type",
-    label:"Typ"
+    label:"Typ",
+    sortable:true
  },
  {
    key: "end",
-    label: "Ende"
+    label: "Ende",
+    sortable:true
  },
  {
    key: "duration",
-    label: "Dauer"
+    label: "Dauer",
+    sortable:true
  },
  {
    key: "projectId",
-    label: "Projekt"
+    label: "Projekt",
+    sortable:true
  },
  {
    key: "notes",
-    label: "Notizen"
+    label: "Notizen",
+    sortable:true
  }
 ]

--- a/spaces/pages/incominginvoices/[mode]/[[id]].vue
+++ b/spaces/pages/incominginvoices/[mode]/[[id]].vue
@@ -0,0 +1,418 @@
+<script setup>
+import InputGroup from "~/components/InputGroup.vue";
+import dayjs from "dayjs";
+
+const dataStore = useDataStore()
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+
+const {vendors} = storeToRefs(useDataStore())
+const {fetchVendorInvoices} = useDataStore()
+
+let currentVendorInvoice = ref(null)
+//let currentDocument  = ref(null)
+//Working
+const mode = ref(route.params.mode || "show")
+const useNetMode = ref(true)
+
+
+
+
+//Functions
+const setupPage = async () => {
+  if(mode.value === "show" || mode.value === "edit"){
+    currentVendorInvoice.value = await dataStore.getIncomingInvoiceById(Number(useRoute().params.id))
+    //currentDocument.value = await dataStore.getDocumentById(currentVendorInvoice.value.document)
+  }
+
+  if(mode.value === "edit") itemInfo.value = currentVendorInvoice.value
+}
+
+const currentDocument = computed(() => {
+  if(currentVendorInvoice.value) {
+    return dataStore.getDocumentById(currentVendorInvoice.value.document)
+
+  } else {
+    return null
+  }
+
+})
+
+
+
+const itemInfo = ref({
+  vendor: 0,
+  reference: "",
+  date:  null,
+  dueDate: null,
+  paymentType: "",
+  description: "",
+  state: "Entwurf",
+  accounts: [
+    {
+      account: null,
+      amountNet: null,
+      amountTax: null,
+      taxType: null,
+      costCentre: 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 setState = async (newState) => {
+  if(mode.value === 'show') {
+    await updateItem({...currentVendorInvoice.value, state: newState})
+  } else if(mode.value === 'edit') {
+    await updateItem({...itemInfo.value, state: newState})
+  }
+  await router.push("/incominginvoices")
+}
+
+
+const updateItem = async (item) => {
+  const {error} = await supabase
+      .from("incomingInvoices")
+      .update(item)
+      .eq('id',item.id)
+  if(error) {
+    console.log(error)
+  } else {
+    mode.value = "show"
+    toast.add({title: "Eingangsrechnung erfolgreich gespeichert"})
+    dataStore.fetchIncomingInvoices()
+    //await router.push("/incominginvoices")
+  }
+}
+
+
+
+setupPage()
+</script>
+
+<template>
+  <div id="main">
+    <object
+        v-if="currentDocument ? currentDocument.url : false"
+        :data="currentDocument.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
+        type="application/pdf"
+        class="h-100 w-full mx-5"
+    />
+    <div class="w-4/5">
+      <InputGroup class="mt-3" v-if="currentVendorInvoice">
+        <UButton
+            @click="updateItem(itemInfo)"
+            v-if="mode === 'edit'"
+        >
+          Speichern
+        </UButton>
+        <UButton
+          :disabled="currentVendorInvoice.state !== 'Entwurf'"
+          @click="router.push(`/incominginvoices/edit/${currentVendorInvoice.id}`)"
+          v-if="mode !== 'edit'"
+        >
+          Bearbeiten
+        </UButton>
+        <UButton
+            @click="setState('Entwurf')"
+            v-if="currentVendorInvoice.state !== 'Entwurf'"
+            color="cyan"
+        >
+          Status zu Entwurf
+        </UButton>
+        <UButton
+            @click="setState('Offen')"
+            v-if="currentVendorInvoice.state !== 'Offen'"
+            color="rose"
+        >
+          Status zu Offen
+        </UButton>
+      </InputGroup>
+
+      <div v-if="mode === 'show'">
+        {{currentVendorInvoice}}
+      </div>
+
+      <div v-else-if="mode === 'edit'" class=" scrollContainer">
+        <UFormGroup label="Lieferant:" required>
+          <InputGroup>
+            <USelectMenu
+                v-model="itemInfo.vendor"
+                :options="dataStore.vendors"
+                option-attribute="name"
+                value-attribute="id"
+                searchable
+                :search-attributes="['name','vendorNumber']"
+                class="flex-auto"
+            >
+              <template #label>
+                {{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : 'Lieferant auswählen'}}
+              </template>
+            </USelectMenu>
+            <UButton
+                @click="router.push('/vendors/create')"
+            >
+              + Lieferant
+            </UButton>
+          </InputGroup>
+
+
+        </UFormGroup>
+
+        <UFormGroup
+            class="mt-3"
+            label="Rechnungsreferenz:"
+            required
+        >
+          <UInput
+              v-model="itemInfo.reference"
+          />
+        </UFormGroup>
+
+        <InputGroup class="mt-3" gap="2">
+          <UFormGroup label="Rechnungsdatum:" required>
+            <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'" />
+
+              <template #panel="{ close }">
+                <LazyDatePicker v-model="itemInfo.date" @close="close" />
+              </template>
+            </UPopover>
+          </UFormGroup>
+
+          <UFormGroup label="Fälligkeitsdatum:" required>
+            <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'" />
+
+              <template #panel="{ close }">
+                <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
+              </template>
+            </UPopover>
+          </UFormGroup>
+        </InputGroup>
+
+
+
+        <UFormGroup label="Beschreibung:" required>
+          <UTextarea
+              v-model="itemInfo.description"
+          />
+        </UFormGroup>
+
+        <InputGroup class="my-3">
+          Brutto
+          <UToggle
+              v-model="useNetMode"
+              @update:model-value="itemInfo.accounts = [{account: null,amountNet: null,amountTax: null,taxType: null}]"
+          />
+          Netto
+        </InputGroup>
+
+        <table v-if="itemInfo.accounts.length > 1">
+          <tr>
+            <td>Gesamt exkl. Steuer: </td>
+            <td class="text-right">{{totalCalculated.totalNet.toFixed(2)}} €</td>
+          </tr>
+          <tr>
+            <td>19% Steuer: </td>
+            <td class="text-right">{{totalCalculated.totalAmount19Tax.toFixed(2)}} €</td>
+          </tr>
+          <tr>
+            <td>Gesamt inkl. Steuer: </td>
+            <td class="text-right">{{totalCalculated.totalGross.toFixed(2)}} €</td>
+          </tr>
+        </table>
+
+        <div
+            class="my-3"
+            v-for="(item,index) in itemInfo.accounts"
+        >
+
+          <UFormGroup
+              label="Kategorie"
+              class=" mb-3"
+          >
+            <USelectMenu
+                :options="dataStore.accounts"
+                option-attribute="label"
+                value-attribute="id"
+                searchable
+                :search-attributes="['label']"
+                searchable-placeholder="Suche..."
+                v-model="item.account"
+            >
+              <template #label>
+                {{dataStore.accounts.find(account => account.id === item.account) ? dataStore.accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
+              </template>
+
+            </USelectMenu>
+          </UFormGroup>
+          <UFormGroup
+              label="Kostenstelle"
+              class=" mb-3"
+          >
+            <USelectMenu
+                :options="dataStore.getCostCentresComposed"
+                option-attribute="label"
+                value-attribute="id"
+                searchable
+                :search-attributes="['label']"
+                searchable-placeholder="Suche..."
+                v-model="item.costCentre"
+            >
+              <template #label>
+                {{dataStore.getCostCentresComposed.find(account => account.id === item.costCentre) ? dataStore.getCostCentresComposed.find(account => account.id === item.costCentre).label : "Keine Kostenstelle ausgewählt" }}
+              </template>
+
+            </USelectMenu>
+          </UFormGroup>
+
+
+
+          <InputGroup>
+            <UFormGroup
+                label="Umsatzsteuer"
+                class="w-32"
+                :help="`Betrag: ${item.amountTax ? String(item.amountTax).replace('.',',') : '0,00'} €`"
+            >
+              <USelectMenu
+                  :options="[19,7,0]"
+                  v-model="item.taxType"
+                  @change="item.amountTax = Number(((item.amountNet ? item.amountNet : 0) * (Number(item.taxType)/100)).toFixed(2))"
+              >
+                <template #label>
+                  {{item.taxType}} %
+                </template>
+              </USelectMenu>
+            </UFormGroup>
+            <UFormGroup
+                v-if="useNetMode"
+                label="Gesamtbetrag exkl. Steuer in EUR"
+                class="flex-auto"
+                :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"
+                  :disabled="item.taxType === null"
+                  @keyup="item.amountTax = Number((item.amountNet * (Number(item.taxType)/100)).toFixed(2))"
+              >
+                <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"
+                  @keyup="item.amountNet = Number((item.amountGross / (1 + Number(item.taxType)/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>
+
+
+          </InputGroup>
+
+
+          <UButton
+              class="mt-3"
+              @click="itemInfo.accounts = [...itemInfo.accounts.slice(0,index+1),{account:null, amountNet: null, amountTax:null, taxType: null} , ...itemInfo.accounts.slice(index+1)]"
+          >
+            Position hinzufügen
+          </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>
+</template>
+
+<style scoped>
+#main {
+  display: flex;
+  flex-direction: row;
+  height: 85vh;
+}
+
+.previewDoc {
+  min-width: 50vw;
+  min-height: 80vh;
+}
+
+.previewDoc object {
+  width: 90%;
+  height: 100%;
+}
+
+
+
+.scrollContainer {
+  overflow-y: scroll;
+  height: 75vh;
+  margin-top: 1em;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.scrollContainer::-webkit-scrollbar {
+  display: none;
+}
+
+
+.lineItemRow {
+  display: flex;
+  flex-direction: row;
+}
+</style>
--- a/spaces/pages/incominginvoices/index.vue
+++ b/spaces/pages/incominginvoices/index.vue
@@ -2,7 +2,7 @@
  <div id="main">

    <div class="flex items-center gap-1">
-      <UButton @click="router.push(`/vendorinvoices/create/`)">+ Eingangsrechnung</UButton>
+      <UButton @click="router.push(`/incominginvoices/create/`)">+ Eingangsrechnung</UButton>

      <UInput
          v-model="searchString"
@@ -26,7 +26,13 @@
          {{row.state}}
        </span>
        <span
-          v-if="row.state === 'Bezahlt'"
+          v-if="row.state === 'Offen'"
+          class="text-rose-500"
+        >
+          {{row.state}}
+        </span>
+        <span
+          v-if="row.state === 'Abgeschlossen'"
          class="text-primary-500"
        >
          {{row.state}}
@@ -39,10 +45,14 @@
        <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
      </template>
      <template #dueDate-data="{row}">
-        {{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}
+        <span :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : '' ">{{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}</span>
+      </template>
+      <template #paid-data="{row}">
+        <span v-if="row.paid" class="text-primary-500">Bezahlt</span>
+        <span v-if="!row.paid" :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : ['text-cyan-500'] ">Offen</span>
      </template>
      <template #amount-data="{row}">
-        {{getRowAmount(row) === 0 ? '' : `${getRowAmount(row)} €`}}
+        <div class="text-right font-bold">{{getRowAmount(row) === 0 ? '' : `${String(getRowAmount(row).toFixed(2)).replace('.',',')} €`}}</div>
      </template>
    </UTable>

@@ -83,6 +93,11 @@ const itemColumns = [
    label: "Datum",
    sortable: true
  },
+  {
+    key: "paid",
+    label: "Bezahlt:",
+    sortable: true
+  },
  {
    key: "dueDate",
    label: "Fällig:",
@@ -98,7 +113,13 @@ const itemColumns = [

 const selectItem = (item) => {
  console.log(item)
-  router.push(`/vendorinvoices/edit/${item.id} `)
+  if(item.state === "Entwurf") {
+    console.log("ENTWURF")
+    router.push(`/incominginvoices/edit/${item.id} `)
+  } else if(item.state === "Offen") {
+    router.push(`/incominginvoices/show/${item.id}`)
+  }
+
 }

 const getRowAmount = (row) => {
@@ -117,10 +138,10 @@ const searchString = ref('')

 const filteredRows = computed(() => {
  if(!searchString.value) {
-    return dataStore.vendorInvoices
+    return dataStore.incomingInvoices
  }

-  return dataStore.vendorInvoices.filter(item => {
+  return dataStore.incomingInvoices.filter(item => {
    return Object.values(item).some((value) => {
      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
    })
--- a/spaces/pages/planningBoard.vue
+++ b/spaces/pages/planningBoard.vue
@@ -40,12 +40,13 @@ const createEvent = async () => {

  if(error) {
    console.log(error)
-  } else {
-    openNewEventModal.value = false
-    newEventData.value = {}
-    dataStore.fetchEvents()
  }

+  console.log("OK")
+  openNewEventModal.value = false
+  newEventData.value = {}
+  dataStore.fetchEvents()
+

 }
 const calendarOptionsList = reactive({
@@ -61,11 +62,12 @@ const calendarOptionsTimeline = reactive({
  schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
  locale: deLocale,
  plugins: [resourceTimelinePlugin, interactionPlugin],
-  initialView: "resourceTimelineDay",
+  initialView: "resourceTimeline3Hours",
+
  headerToolbar: {
    left: 'prev,next',
    center: 'title',
-    right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
+    right: 'resourceTimelineDay,resourceTimeline3Hours,resourceTimelineMonth'
  },
  initialEvents: events,
  selectable: true,
@@ -88,7 +90,29 @@ const calendarOptionsTimeline = reactive({
  },
  resourceGroupField: "type",
  resources: resources,
-  nowIndicator:true
+  nowIndicator:true,
+  views: {
+    resourceTimeline3Hours: {
+      type: 'resourceTimeline',
+      slotDuration: {hours: 3},
+      slotMinTime: "06:00:00",
+      slotMaxTime: "21:00:00",
+      /*duration: {days:7},*/
+      buttonText: "Woche",
+      visibleRange: function(currentDate) {
+        // Generate a new date for manipulating in the next step
+        var startDate = new Date(currentDate);
+        var endDate = new Date(currentDate);
+
+        // Adjust the start & end dates, respectively
+        startDate.setDate(startDate.getDate() - startDate.getDay() +1); // One day in the past
+        endDate.setDate(startDate.getDate() + 5); // Two days into the future
+
+        return { start: startDate, end: endDate };
+      }
+    }
+  },
+
 })

 </script>
@@ -124,6 +148,24 @@ const calendarOptionsTimeline = reactive({
            v-model="newEventData.title"
          />
        </UFormGroup>
+        <UFormGroup
+          label="Projekt:"
+        >
+          <USelectMenu
+            v-model="newEventData.project"
+            :options="dataStore.projects"
+            option-attribute="name"
+            value-attribute="id"
+            searchable
+            searchable-placeholder="Suche..."
+            :search-attributes="['name']"
+          >
+            <template #label>
+              {{dataStore.getProjectById(newEventData.project) ? dataStore.getProjectById(newEventData.project).name : "Kein Projekt ausgewählt"}}
+            </template>
+
+          </USelectMenu>
+        </UFormGroup>
        <UFormGroup
          label="Typ:"
        >
--- a/spaces/pages/plants/index.vue
+++ b/spaces/pages/plants/index.vue
@@ -1,10 +1,17 @@
 <template>
  <div id="main">
+    <InputGroup>
+      <UButton @click="router.push(`/plants/create/`)">+ Anlage</UButton>
+
+      <UInput
+          v-model="searchString"
+          placeholder="Suche..."
+      />
+    </InputGroup>

-    <UButton @click="router.push(`/plants/create/`)">+ Anlage</UButton>

    <UTable
-        :rows="dataStore.plants"
+        :rows="filteredRows"
        :columns="columns"
        @select="selectItem"
        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
@@ -39,7 +46,22 @@ const columns = [
  }
 ]

+const searchString = ref('')

+const filteredRows = computed(() => {
+  if(!searchString.value) {
+    return dataStore.plants
+  }
+
+  return dataStore.plants.filter(item => {
+
+    item.customerName = dataStore.customers.find(i => i.id === item.customer).name
+
+    return Object.values(item).some((value) => {
+      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
+    })
+  })
+})
 const selectItem = (item) => {
  router.push(`/plants/show/${item.id} `)
 }
--- a/spaces/pages/projects/[mode]/[[id]].vue
+++ b/spaces/pages/projects/[mode]/[[id]].vue
@@ -473,6 +473,21 @@ setupPage()
      </USelectMenu>
    </UFormGroup>

+    <UFormGroup
+        label="Gewerk:"
+    >
+      <USelectMenu
+          v-model="itemInfo.measure"
+          :options="dataStore.getMeasures"
+          option-attribute="name"
+          value-attribute="short"
+          searchable
+          :search-attributes="['name']"
+      >
+
+      </USelectMenu>
+    </UFormGroup>
+
    <UFormGroup
        label="Anlage:"
    >
--- a/spaces/pages/vehicles/[mode]/[[id]].vue
+++ b/spaces/pages/vehicles/[mode]/[[id]].vue
@@ -1,4 +1,6 @@
 <script setup>
+import dayjs from "dayjs";
+
 definePageMeta({
  middleware: "auth"
 })
@@ -10,7 +12,7 @@ const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )

-let currentItem = null
+let currentItem = ref(null)



@@ -24,13 +26,43 @@ const itemInfo = ref({
  driver: ""
 })

+const tabItems = [{
+  label: 'Informationen',
+}, {
+  label: 'Eingangsrechnungen',
+}]
+
+const incomingInvoicesColumns = [
+  {
+    key: "state",
+    label: "Status",
+    sortable: true
+  },{
+    key: "vendor",
+    label: "Lieferant",
+    sortable: true
+  },{
+    key: "date",
+    label: "Datum",
+    sortable: true
+  },{
+    key: "description",
+    label: "Beschreibung",
+    sortable: true
+  },{
+    key: "accounts",
+    label: "Betrag",
+    sortable: true
+  },
+]
+
 //Functions
 const setupPage = () => {
  if(mode.value === "show" || mode.value === "edit"){
-    currentItem = dataStore.getVehicleById(Number(useRoute().params.id))
+    currentItem.value = dataStore.getVehicleById(Number(useRoute().params.id))
  }

-  if(mode.value === "edit") itemInfo.value = currentItem
+  if(mode.value === "edit") itemInfo.value = currentItem.value



@@ -58,7 +90,7 @@ const createItem = async () => {
 }

 const editCustomer = async () => {
-  router.push(`/vehicles/edit/${currentItem.id}`)
+  router.push(`/vehicles/edit/${currentItem.value.id}`)
  setupPage()
 }

@@ -81,12 +113,23 @@ const updateItem = async () => {
    console.log(error)
  } else {

-    router.push(`/vehicles/show/${currentItem.id}`)
+    router.push(`/vehicles/show/${currentItem.value.id}`)
    toast.add({title: "Fahrzeug erfolgreich gespeichert"})
    dataStore.fetchVehicles()
  }
 }

+const getRowAmount = (row) => {
+  let amount = 0
+
+  row.accounts.forEach(account => {
+    amount += account.amountNet
+    amount += account.amountTax
+  })
+
+  return amount
+}
+
 setupPage()
 </script>

@@ -108,8 +151,34 @@ setupPage()
        {{currentItem.licensePlate}}
      </template>

-      Typ: {{currentItem.type}} <br>
-      Fahrer: {{dataStore.profiles.find(profile => profile.id === currentItem.driver) ? dataStore.profiles.find(profile => profile.id === currentItem.driver).fullName : 'Kein Fahrer gewählt'}} <br>
+      <UTabs :items="tabItems">
+          <template #item="{item}">
+            <div v-if="item.label === 'Informationen'">
+              Typ: {{currentItem.type}} <br>
+              Fahrer: {{dataStore.profiles.find(profile => profile.id === currentItem.driver) ? dataStore.profiles.find(profile => profile.id === currentItem.driver).fullName : 'Kein Fahrer gewählt'}} <br>
+            </div>
+            <div v-else-if="item.label === 'Eingangsrechnungen'">
+              <UTable
+                :rows="dataStore.getIncomingInvoicesByVehicleId(currentItem.id)"
+                :columns="incomingInvoicesColumns"
+                @select="(row) => router.push('/incominginvoices/show/' + row.id)"
+              >
+                  <template #vendor-data="{row}">
+                    {{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ""}}
+                  </template>
+                  <template #date-data="{row}">
+                    {{dayjs(row.date).format("DD.MM.YYYY")}}
+                  </template>
+                  <template #accounts-data="{row}">
+                    {{getRowAmount(row) ? String(getRowAmount(row).toFixed(2)).replace('.',',') + " €" : ""}}
+                  </template>
+              </UTable>
+
+            </div>
+          </template>
+      </UTabs>
+
+



--- a/spaces/pages/vendorinvoices/[mode]/[[id]].vue
+++ b/spaces/pages/vendorinvoices/[mode]/[[id]].vue
@@ -1,342 +0,0 @@
-<template>
-  <div id="main">
-
-    <div
-      class="previewDoc"
-    >
-      <embed
-          v-if="currentDocument"
-          :src="currentDocument.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
-
-      >
-
-    </div>
-    <div
-      class="inputData"
-    >
-      <UFormGroup label="Lieferant:" required>
-        <USelectMenu
-          v-model="itemInfo.vendor"
-          :options="dataStore.vendors"
-          option-attribute="name"
-          value-attribute="id"
-          searchable
-          :search-attributes="['name','vendorNumber']"
-        >
-          <template #label>
-            {{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : 'Lieferant auswählen'}}
-          </template>
-        </USelectMenu>
-      </UFormGroup>
-
-      <UFormGroup
-          class="mt-3"
-          label="Rechnungsreferenz:"
-          required
-      >
-        <UInput
-          v-model="itemInfo.reference"
-        />
-      </UFormGroup>
-
-      <InputGroup class="mt-3" gap="2">
-        <UFormGroup label="Rechnungsdatum:" required>
-          <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'" />
-
-            <template #panel="{ close }">
-              <LazyDatePicker v-model="itemInfo.date" @close="close" />
-            </template>
-          </UPopover>
-        </UFormGroup>
-
-        <UFormGroup label="Fälligkeitsdatum:" required>
-          <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'" />
-
-            <template #panel="{ close }">
-              <LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
-            </template>
-          </UPopover>
-        </UFormGroup>
-      </InputGroup>
-
-
-
-      <UFormGroup label="Beschreibung:" required>
-        <UTextarea
-          v-model="itemInfo.description"
-        />
-      </UFormGroup>
-
-      <div
-        class="my-3"
-        v-for="(item,index) in itemInfo.accounts"
-      >
-
-        <UFormGroup
-          label="Kategorie"
-          class=" mb-3"
-        >
-          <USelectMenu
-            :options="dataStore.accounts"
-            option-attribute="label"
-            value-attribute="id"
-            searchable
-            :search-attributes="['label']"
-            searchable-placeholder="Suche..."
-            v-model="item.account"
-          >
-            <template #label>
-              {{dataStore.accounts.find(account => account.id === item.account) ? dataStore.accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
-            </template>
-
-          </USelectMenu>
-        </UFormGroup>
-
-        <InputGroup>
-          <UFormGroup
-            label="Steuer"
-            class="w-32"
-            :help="`Betrag: ${String(item.amountTax).replace('.',',')} €`"
-          >
-            <USelectMenu
-              :options="[19,7,0]"
-              v-model="item.taxType"
-            >
-              <template #label>
-                {{item.taxType}} %
-              </template>
-            </USelectMenu>
-          </UFormGroup>
-          <UFormGroup
-            label="Gesamtbetrag exkl. Steuer in EUR"
-            class="flex-auto"
-            :help="`Betrag inkl. Steuern: ${String(Number(calculateWithTax(item)) + Number(item.amountNet)).replace('.',',')} €` "
-
-          >
-            <UInput
-              type="number"
-              step="0.01"
-              v-model="item.amountNet"
-            >
-              <template #trailing>
-                <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
-              </template>
-            </UInput>
-          </UFormGroup>
-
-
-        </InputGroup>
-
-        <UButton
-          class="mt-3"
-          @click="itemInfo.accounts = [...itemInfo.accounts.slice(0,index+1),{account:null, amountNet: null, amountTax:null, taxType: null} , ...itemInfo.accounts.slice(index+1)]"
-        >
-          Position hinzufügen
-        </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>
-
-
-<!--
-      <UFormGroup label="Kategorie:" required>
-        <USelectMenu
-          :options="dataStore.accounts"
-          option-attribute="label"
-          value-attribute="number"
-          searchable
-          :search-attributes="['label']"
-          v-model="itemInfo.account"
-        >
-
-        </USelectMenu>
-      </UFormGroup>
-      <UFormGroup label="Betrag:" required>
-        <UInput
-          type="number"
-          step="0.01"
-          v-model="itemInfo.amount"
-        >
-          <template #trailing>
-            <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
-          </template>
-        </UInput>
-      </UFormGroup>-->
-
-      <InputGroup class="mt-3">
-        <UButton
-            @click="updateItem"
-        >
-          Speichern
-        </UButton>
-      </InputGroup>
-
-      <DevOnly>
-        {{itemInfo}}<br>
-        {{currentVendorInvoice}}<br>
-        {{currentDocument}}
-      </DevOnly>
-
-
-    </div>
-  </div>
-</template>
-
-<script setup>
-import InputGroup from "~/components/InputGroup.vue";
-import dayjs from "dayjs";
-
-const dataStore = useDataStore()
-const supabase = useSupabaseClient()
-const route = useRoute()
-const toast = useToast()
-
-const {vendors} = storeToRefs(useDataStore())
-const {fetchVendorInvoices} = useDataStore()
-
-let currentVendorInvoice = null
-let currentDocument  = ref(null)
-//Working
-const mode = ref(route.params.mode || "show")
-
-const types = [
-  {
-    number: "3200",
-    label: "Wareneinkauf",
-    description: "Der Einkauf von Produkten umfasst auch die Kosten für die Bearbeitung/Verarbeitung und den Handel"
-  },{
-    number: "3000",
-    label: "Materialeinkauf",
-    description: "Hierzu gehören sämtliche Kosten, die im Rahmen der Produktion für Roh, Hilfs- und Betriebsstoffe anfallen."
-  },{
-    number: "3800",
-    label: "Bezugsnebenkosten",
-    description: "Dazu zählen alle Beschaffungskosten für Material und Waren bzw. Produkte"
-  },{
-    number: "4930",
-    label: "Bürobedarf",
-    description: ""
-  },{
-    number: "4964",
-    label: "Lizenzen und Konzessionen",
-    description: ""
-  },{
-    number: "4925",
-    label: "Internet",
-    description: ""
-  },{
-    number: "4920",
-    label: "Telekommunikation",
-    description: ""
-  },{
-    number: "4530",
-    label: "Kraftstoff/Ladestrom",
-    description: ""
-  },{
-    number: "4969",
-    label: "Müllgebühren",
-    description: ""
-  }
-]
-
-
-
-
-//Functions
-const setupPage = async () => {
-  if(mode.value === "show" || mode.value === "edit"){
-    currentVendorInvoice = await dataStore.getVendorInvoiceById(Number(useRoute().params.id))
-    currentDocument.value = await dataStore.getDocumentById(currentVendorInvoice.document)
-  }
-
-  if(mode.value === "edit") itemInfo.value = currentVendorInvoice
-}
-
-
-
-
-
-const itemInfo = ref({
-  vendor: 0,
-  reference: "",
-  date:  null,
-  dueDate: null,
-  paymentType: "",
-  description: "",
-  state: "Entwurf",
-  accounts: [
-    {
-      account: null,
-      amountNet: null,
-      amountTax: null,
-      taxType: null
-    }
-  ]
-})
-
-const calculateWithTax = (item) => {
-  item.amountTax = Number((item.amountNet / 100 *  Number(item.taxType)).toFixed(2))
-
-  return item.amountTax
-}
-
-
-const updateItem = async () => {
-  const {error} = await supabase
-      .from("vendorInvoices")
-      .update(itemInfo.value)
-      .eq('id',itemInfo.value.id)
-  if(error) {
-    console.log(error)
-  } else {
-    mode.value = "show"
-    /*itemInfo.value = {
-      id: 0,
-    }*/
-    toast.add({title: "Eingangsrechnung erfolgreich gespeichert"})
-    dataStore.fetchVendorInvoices()
-  }
-}
-
-
-
-setupPage()
-</script>
-
-<style scoped>
-#main {
-  display: flex;
-  flex-direction: row;
-}
-
-.previewDoc {
-  min-width: 50vw;
-  min-height: 80vh;
-}
-
-.previewDoc embed {
-  width: 90%;
-  height: 100%;
-}
-
-.inputData {
-  max-width: 40vw;
-}
-
-
-
-
-.lineItemRow {
-  display: flex;
-  flex-direction: row;
-}
-</style>