Restructured IncomingInvoices

Added Aspect Ration to DocumentDisplay.vue
2024-04-16 18:00:35 +02:00
parent 1269d3b838
commit eddaae2d87
11 changed files with 331 additions and 161 deletions
--- a/components/DocumentDisplay.vue
+++ b/components/DocumentDisplay.vue
@@ -12,11 +12,14 @@ const props = defineProps({
  openShowModal: {
    type: Boolean,
    required: false,
+  },
+  returnEmit: {
+    type: Boolean
  }

 })

-let {documentData, openShowModal:openShowModalProp } = props;
+let {documentData, openShowModal:openShowModalProp, returnEmit } = props;
 const tags = dataStore.getDocumentTags
 const openShowModal = ref(false)

@@ -128,7 +131,7 @@ const updateDocumentAssignment = async () => {
 </script>

 <template>
-  <div class="documentListItem" @click="openDocument">
+  <div class="documentListItem" @click="returnEmit ? $emit('clicked', documentData.id) : openDocument">
    <object
        :data="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
        class="previewEmbed"
@@ -155,7 +158,6 @@ const updateDocumentAssignment = async () => {
        v-model="documentData.selected"
        class="ml-2"
    />-->
-    <br>
 <!--    <UBadge
      v-if="documentData.vendorInvoice"
    >{{dataStore.incominginvoices.find(item => item.id === documentData.vendorInvoice) ? dataStore.incominginvoices.find(item => item.id === documentData.vendorInvoice).reference : ''}}</UBadge>
@@ -183,8 +185,8 @@ const updateDocumentAssignment = async () => {

      <UContainer class="h-full" :ui="{padding: 'px-1 sm:px-1 lg:px-1'}">
        <object
-            class="h-full w-full"
-            :data="documentData.url"
+            class="bigPreview"
+            :data="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
            type="application/pdf"
            v-if="!documentData.tags.includes('Bild')"
        />
@@ -323,7 +325,7 @@ const updateDocumentAssignment = async () => {
 .documentListItem {
  display:block;
  width: 15vw;
-  height: 33vh;
+  aspect-ratio: 1 / 1.414;
  padding:1em;
  margin: 0.7em;
  border: 1px solid lightgrey;
@@ -337,7 +339,7 @@ const updateDocumentAssignment = async () => {

 .previewEmbed {
  width: 100%;
-  height: 100%;
+  aspect-ratio: 1 / 1.414;
  overflow: hidden !important;
  pointer-events: none !important;
  -ms-overflow-style: none;  /* IE and Edge */
@@ -348,4 +350,9 @@ const updateDocumentAssignment = async () => {
  display: none;
 }

+.bigPreview {
+  width: 100%;
+  aspect-ratio: 1/ 1.414;
+}
+
 </style>
--- a/components/DocumentList.vue
+++ b/components/DocumentList.vue
@@ -3,12 +3,14 @@ const props = defineProps({
  documents: {
    type: Array,
    required:true
+  },
+  returnDocumentId: {
+    type: Boolean,
  }
 })
 const dataStore = useDataStore()


-
 </script>

 <template>
@@ -17,6 +19,8 @@ const dataStore = useDataStore()
        v-for="item in documents"
        :document-data="item"
        :key="item.id"
+        @clicked="(info) => $emit('selectDocument', info)"
+        :return-emit="returnDocumentId"
    />
  </div>
 </template>
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -270,8 +270,12 @@ let links = computed(() => {
      icon: "i-heroicons-chart-bar-square",
      children: [
        {
-          label: "Belege",
-          to: "/receipts",
+          label: "Ausgangsbelege",
+          to: "/createDocument",
+          icon: "i-heroicons-document-text"
+        },{
+          label: "Eingangsbelege",
+          to: "/incomingInvoices",
          icon: "i-heroicons-document-text"
        },
        {
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
        "base64-arraybuffer": "^1.0.2",
        "buffer": "^6.0.3",
        "client-oauth2": "^4.3.3",
+        "date-fns": "^3.6.0",
        "dayjs": "^1.11.10",
        "handlebars": "^4.7.8",
        "jsprintmanager": "^6.0.3",
@@ -6034,6 +6035,21 @@
        "vue": ">=3.2.0"
      }
    },
+    "node_modules/@vuepic/vue-datepicker/node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
    "node_modules/@vueuse/components": {
      "version": "10.9.0",
      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.9.0.tgz",
@@ -8039,18 +8055,12 @@
      }
    },
    "node_modules/date-fns": {
-      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-      "dependencies": {
-        "@babel/runtime": "^7.21.0"
-      },
-      "engines": {
-        "node": ">=0.11"
-      },
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/date-fns"
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
      }
    },
    "node_modules/date-fns-tz": {
@@ -17900,6 +17910,21 @@
        "vue": "^3.2.0"
      }
    },
+    "node_modules/v-calendar/node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
    "node_modules/v-calendar/node_modules/date-fns-tz": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
    "base64-arraybuffer": "^1.0.2",
    "buffer": "^6.0.3",
    "client-oauth2": "^4.3.3",
+    "date-fns": "^3.6.0",
    "dayjs": "^1.11.10",
    "handlebars": "^4.7.8",
    "jsprintmanager": "^6.0.3",
--- a/pages/createDocument/index.vue
+++ b/pages/createDocument/index.vue
@@ -15,14 +15,9 @@
        </template>
      </UInput>
      <UButton
-          @click="router.push(`/createDocument/edit?type=quotes`)"
+          @click="router.push(`/createDocument/edit`)"
      >
-        + Angebot
-      </UButton>
-      <UButton
-          @click="router.push(`/createDocument/edit?type=invoices`)"
-      >
-        + Rechnung
+        + Dokument
      </UButton>
    </template>
  </UDashboardNavbar>
@@ -72,8 +67,7 @@
      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
  >
    <template #type-data="{row}">
-      <span v-if="row.type === 'incomingInvoice'">Eingangsrechnung</span>
-      <span v-else>{{dataStore.documentTypesForCreation[row.type].labelSingle}}</span>
+      {{dataStore.documentTypesForCreation[row.type].labelSingle}}
    </template>
    <template #state-data="{row}">
        <span
@@ -142,6 +136,9 @@ defineShortcuts({
    //console.log(searchinput)
    //searchinput.value.focus()
    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push('/createDocument/edit')
  }
 })

@@ -210,24 +207,17 @@ const types = computed(() => templateTypes.filter((type) => selectedTypes.value.
 const selectItem = (item) => {
  console.log(item)

-  if(item.type === "incomingInvoice"){
-    if(item.state === "Entwurf") {
-      router.push(`/receipts/incominginvoices/edit/${item.id} `)
-    } else if(item.state === "Gebucht") {
-      router.push(`/receipts/incominginvoices/show/${item.id}`)
-    }
-  } else {
-    if(item.state === "Entwurf"){
-      router.push(`/createDocument/edit/${item.id}`)
-    } else if(item.state !== "Entwurf") {
-      router.push(`/createDocument/show/${item.id}`)
-    }
+  if(item.state === "Entwurf"){
+    router.push(`/createDocument/edit/${item.id}`)
+  } else if(item.state !== "Entwurf") {
+    router.push(`/createDocument/show/${item.id}`)
  }





+
 }

 const getRowAmount = (row) => {
@@ -245,7 +235,7 @@ const getRowAmount = (row) => {
 const searchString = ref('')
 const showDrafts = ref(false)
 const filteredRows = computed(() => {
-  let items = [...dataStore.incominginvoices.map(i => {return {...i, type: "incomingInvoice"}}),...dataStore.createddocuments]
+  let items = dataStore.createddocuments

  items = items.filter(i => types.value.find(x => x.key === i.type))

--- a/pages/receipts/incomingInvoices/[mode]/[[id]].vue
+++ b/pages/receipts/incomingInvoices/[mode]/[[id]].vue
@@ -16,37 +16,16 @@ const toast = useToast()
 const {vendors} = storeToRefs(useDataStore())
 const {fetchVendorInvoices} = useDataStore()

-let currentVendorInvoice = ref(null)
+const availableDocuments = computed(() => {
+  return dataStore.documents.filter(i => i.tags.includes('Eingangsrechnung' && dataStore.incominginvoices.filter(x => x.document === i).length === 0))
+})
+
+
 //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,
  expense: true,
@@ -61,12 +40,38 @@ const itemInfo = ref({
      account: null,
      amountNet: null,
      amountTax: null,
-      taxType: null,
+      taxType: "19",
      costCentre: null
    }
  ]
 })

+
+
+
+//Functions
+const setupPage = async () => {
+  if((mode.value === "show" || mode.value === "edit" ) && route.params.id){
+    itemInfo.value = await dataStore.getIncomingInvoiceById(Number(route.params.id))
+    //currentDocument.value = await dataStore.getDocumentById(currentVendorInvoice.value.document)
+  }
+  console.log(itemInfo.value)
+
+}
+
+const currentDocument = computed(() => {
+  if(itemInfo.value) {
+    return dataStore.getDocumentById(itemInfo.value.document)
+
+  } else {
+    return null
+  }
+
+})
+
+
+
+
 const taxOptions = ref([
  {
    label: "19% USt",
@@ -123,7 +128,7 @@ const totalCalculated = computed(() => {

 const setState = async (newState) => {
  if(mode.value === 'show') {
-    await dataStore.updateItem('incominginvoices',{...currentVendorInvoice.value, state: newState})
+    await dataStore.updateItem('incominginvoices',{...itemInfo.value, state: newState})
  } else if(mode.value === 'edit') {
    await dataStore.updateItem('incominginvoices',{...itemInfo.value, state: newState})
  }
@@ -136,59 +141,96 @@ setupPage()
 </script>

 <template>
-  <div id="main">
+  <UDashboardNavbar :title="itemInfo ? 'Eingangsbeleg bearbeiten' : 'Eingangsbeleg erstellen'">
+    <template #right>
+      <UButton
+          @click="dataStore.createNewItem('incominginvoices',itemInfo)"
+          v-if="mode === 'edit' && !itemInfo.id"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          @click="dataStore.updateItem('incominginvoices',itemInfo)"
+          v-if="mode === 'edit' && itemInfo.id"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          :disabled="itemInfo.state !== 'Entwurf'"
+          @click="router.push(`/incominginvoices/edit/${itemInfo.id}`)"
+          v-if="mode !== 'edit'"
+      >
+        Bearbeiten
+      </UButton>
+      <UButton
+          @click="setState('Entwurf')"
+          v-if="itemInfo.state !== 'Entwurf'"
+          color="cyan"
+      >
+        Status zu Entwurf
+      </UButton>
+      <UButton
+          @click="setState('Gebucht')"
+          v-if="itemInfo.state !== 'Gebucht'"
+          color="rose"
+      >
+        Status auf Gebucht
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <div v-if="!itemInfo.document">
+    <div v-if="availableDocuments.length === 0" class="w-1/2 mx-auto text-center">
+      <p class="text-2xl mt-5">Keine Dokumente zur Auswahl vefügbar</p>
+      <UButton
+        @click="router.push(`/documents`)"
+        class="mt-5"
+        variant="outline"
+      >
+        Zu den Dokumenten
+      </UButton>
+    </div>
+
+
+    <DocumentList
+        v-else
+        :documents="availableDocuments"
+        :return-document-id="true"
+        @selectDocument="(documentId) => itemInfo.document = documentId"
+    />
+  </div>
+  <div
+      v-else
+      class="flex justify-between mt-5"
+  >
    <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"
+        class="mx-5 documentPreview"
    />
-    <div class="w-4/5">
-      <InputGroup class="mt-3" v-if="currentVendorInvoice">
-        <UButton
-            @click="dataStore.updateItem('incominginvoices',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('Gebucht')"
-            v-if="currentVendorInvoice.state !== 'Gebucht'"
-            color="rose"
-        >
-          Status auf Gebucht
-        </UButton>
-      </InputGroup>
+    <div class="w-2/5 mx-5">

      <div v-if="mode === 'show'">
-        {{currentVendorInvoice}}
+        {{itemInfo}}
+
+        <HistoryDisplay
+            type="incomingInvoice"
+            v-if="itemInfo"
+            :element-id="itemInfo.id"
+        />
      </div>

-      <div v-else-if="mode === 'edit'" class=" scrollContainer">
-        <InputGroup class="my-3">
+      <div v-else class=" scrollContainer">
+        <InputGroup class="mb-3">
          <UButton
              :variant="itemInfo.expense ? 'solid' : 'outline'"
-            @click="itemInfo.expense = true"
+              @click="itemInfo.expense = true"
          >
            Ausgabe
          </UButton>
          <UButton
-            :variant="!itemInfo.expense ? 'solid' : 'outline'"
-            @click="itemInfo.expense = false"
+              :variant="!itemInfo.expense ? 'solid' : 'outline'"
+              @click="itemInfo.expense = false"
          >
            Einnahme
          </UButton>
@@ -263,7 +305,7 @@ setupPage()
          Brutto
          <UToggle
              v-model="useNetMode"
-              @update:model-value="itemInfo.accounts = [{account: null,amountNet: null,amountTax: null,taxType: null}]"
+              @update:model-value="itemInfo.accounts = [{account: null,amountNet: null,amountTax: null,taxType: '19'}]"
          />
          Netto
        </InputGroup>
@@ -409,41 +451,28 @@ setupPage()
          </UButton>

        </div>
-        <HistoryDisplay
-            type="incomingInvoice"
-            v-if="currentVendorInvoice"
-            :element-id="currentVendorInvoice.id"
-        />
+
      </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%;
+.documentPreview {
+  width: 30vw;
+  aspect-ratio: 1 / 1.414;
 }



 .scrollContainer {
  overflow-y: scroll;
+  padding-left: 1em;
+  padding-right: 1em;
  height: 75vh;
-  margin-top: 1em;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
 }
--- a/pages/incomingInvoices/index.vue
+++ b/pages/incomingInvoices/index.vue
@@ -0,0 +1,119 @@
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/incomingInvoices/edit")
+  }
+})
+
+const dataStore = useDataStore()
+const router = useRouter()
+
+
+const templateColumns = [
+  {
+    key: 'title',
+    label: "Titel:",
+    sortable: true
+  },
+  {
+    key: "start",
+    label: "Start",
+    sortable: true
+  },
+  {
+    key: "end",
+    label: "Ende"
+  },
+  {
+    key: "resources",
+    label: "Resourcen"
+  },
+  {
+    key: "project",
+    label: "Projekt"
+  }
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+
+const searchString = ref('')
+const filteredRows = computed(() => {
+  if(!searchString.value) {
+    return dataStore.incominginvoices
+  }
+
+  return dataStore.incominginvoices.filter(item => {
+    return Object.values(item).some((value) => {
+      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
+    })
+  })
+})
+
+
+
+</script>
+
+<template>
+  <UDashboardNavbar title="Eingangsbelege">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
+
+      <UButton @click="router.push(`/incomingInvoices/edit`)">+ Beleg</UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+
+  <UDashboardPanelContent>
+    <UTable
+        :rows="filteredRows"
+        class="w-full"
+        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+        @select="(i) => router.push(`/incomingInvoices/show/${i.id}`) "
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+    >
+
+    </UTable>
+  </UDashboardPanelContent>
+
+</template>
+
+<style scoped>
+
+</style>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -10,23 +10,9 @@
              </UChip>
            </UButton>
          </UTooltip>
-
-<!--          <UDropdown :items="items">
-            <UButton icon="i-heroicons-plus" size="md" class="ml-1.5 rounded-full" />
-          </UDropdown>-->
        </template>
      </UDashboardNavbar>

-<!--      <UDashboardToolbar>
-        <template #left>
-          &lt;!&ndash; ~/components/home/HomeDateRangePicker.vue &ndash;&gt;
-&lt;!&ndash;          <HomeDateRangePicker v-model="range" class="-ml-2.5" />&ndash;&gt;
-
-          &lt;!&ndash; ~/components/home/HomePeriodSelect.vue &ndash;&gt;
-&lt;!&ndash;          <HomePeriodSelect v-model="period" :range="range" />&ndash;&gt;
-        </template>
-      </UDashboardToolbar>-->
-
      <UDashboardPanelContent>
        <UDashboardCard
            title="Anwesenheiten"
@@ -34,6 +20,24 @@
        >
          <p v-for="time in dataStore.getStartedWorkingTimes()"><UIcon name="i-heroicons-check"/>{{dataStore.getProfileById(time.profile).fullName}}</p>
        </UDashboardCard>
+<!--        <UDashboardCard
+          title="Offene Aufgaben"
+          v-if="dataStore.getOpenTasksCount > 0"
+          class="w-1/2 h-1/2"
+        >
+          <UTable
+            :rows="dataStore.tasks.filter(i => i.categorie !== 'Erledigt' && (i.profile === dataStore.activeProfile.id ||!i.profile))"
+            :columns="[
+                {
+                  key: 'categorie',
+                  label: 'Kategorie'
+                },{
+                  key: 'name',
+                  label: 'Name'
+                },
+            ]"
+          ></UTable>
+        </UDashboardCard>-->

      </UDashboardPanelContent>
    </UDashboardPanel>
@@ -59,9 +63,6 @@ const items = [[{
 }]]


-const {getOpenTasksCount} = useDataStore()
-const openTasks = getOpenTasksCount
-
 const supabase = useSupabaseClient()

 const user = useSupabaseUser()
@@ -69,16 +70,5 @@ const user = useSupabaseUser()
 </script>

 <style scoped>
-/*.cardHolder {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-}

-.card{
-  width: 22vw;
-  height: 40vh;
-  border: 1px solid white
-}*/
 </style>
--- a/pages/vendors/[mode]/[[id]].vue
+++ b/pages/vendors/[mode]/[[id]].vue
@@ -28,7 +28,7 @@ const setupPage = () => {
  }

  if (mode.value === "edit") itemInfo.value = currentItem.value
-  if(currentItem.value.id) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
+  if(currentItem.value) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))

 }

--- a/stores/data.js
+++ b/stores/data.js
@@ -93,7 +93,8 @@ export const useDataStore = defineStore('data', () => {
        },
        incominginvoices: {
            label: "Eingangsrechnungen",
-            labelSingle: "Eingangsrechnung"
+            labelSingle: "Eingangsrechnung",
+            redirect:true
        },
        inventoryitems: {
            label: "Inventarartikel",