diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000..6b9c28d
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,27 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+#PWA
+sw.*
diff --git a/frontend/.gitlab-ci.yml b/frontend/.gitlab-ci.yml
new file mode 100644
index 0000000..22a6313
--- /dev/null
+++ b/frontend/.gitlab-ci.yml
@@ -0,0 +1,18 @@
+before_script:
+  - docker info
+
+stages:
+  - build
+
+build-web:
+  stage: build
+  tags:
+    - shell
+    - docker-daemon
+  variables:
+    IMAGE_TAG: $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG
+  script:
+    - echo $IMAGE_TAG
+    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
+    - docker build -t $IMAGE_TAG  .
+    - docker push $IMAGE_TAG
diff --git a/frontend/.npmrc b/frontend/.npmrc
new file mode 100644
index 0000000..094aec9
--- /dev/null
+++ b/frontend/.npmrc
@@ -0,0 +1 @@
+@bryntum:registry=https://npm.bryntum.com
\ No newline at end of file
diff --git a/frontend/.nuxtrc b/frontend/.nuxtrc
new file mode 100644
index 0000000..9563335
--- /dev/null
+++ b/frontend/.nuxtrc
@@ -0,0 +1 @@
+uiPro.license=2A7272BC-085A-40E1-982F-5E31261BB164
\ No newline at end of file
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..322cca4
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,15 @@
+FROM node:20-alpine
+
+RUN mkdir -p /usr/src/nuxt-app
+WORKDIR /usr/src/nuxt-app
+COPY . .
+
+RUN npm i
+RUN npm run build
+
+ENV NUXT_HOST=0.0.0.0
+ENV NUXT_PORT=3000
+
+EXPOSE 3000
+
+ENTRYPOINT ["node", ".output/server/index.mjs"]
diff --git a/frontend/RechteDoku.xlsx b/frontend/RechteDoku.xlsx
new file mode 100644
index 0000000..2ba402f
Binary files /dev/null and b/frontend/RechteDoku.xlsx differ
diff --git a/frontend/app.config.ts b/frontend/app.config.ts
new file mode 100644
index 0000000..76534af
--- /dev/null
+++ b/frontend/app.config.ts
@@ -0,0 +1,38 @@
+export default defineAppConfig({
+    ui: {
+        primary: 'green',
+        gray: 'slate',
+        tooltip: {
+            background: '!bg-background'
+        },
+        variables: {
+            dark: {
+                background: 'var(--color-gray-950)'
+            },
+            header: {
+                height: '5rem'
+            }
+        },
+        notifications: {
+            // Show toasts at the top right of the screen
+            position: 'bottom-0 left-0'
+        },
+        icons: {
+            /*dark: 'i-ph-moon-duotone',
+            light: 'i-ph-sun-duotone',
+            search: 'i-ph-magnifying-glass-duotone',
+            external: 'i-ph-arrow-up-right',
+            chevron: 'i-ph-caret-down',
+            hash: 'i-ph-hash-duotone'*/
+        },
+        header: {
+            wrapper: 'lg:mb-0 lg:border-0',
+            popover: {
+                links: {
+                    active: 'dark:bg-gray-950/50',
+                    inactive: 'dark:hover:bg-gray-950/50'
+                }
+            }
+        }
+    }
+})
\ No newline at end of file
diff --git a/frontend/app.vue b/frontend/app.vue
new file mode 100644
index 0000000..f2f0d80
--- /dev/null
+++ b/frontend/app.vue
@@ -0,0 +1,150 @@
+<script setup>
+import * as Sentry from "@sentry/browser"
+
+
+
+/*watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
+  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
+})*/
+
+const platform = ref('default')
+
+const setup = async () => {
+  if(await useCapacitor().getIsPhone()) {
+    platform.value = "mobile"
+  }
+
+  const dev = process.dev
+  console.log(dev)
+}
+setup()
+
+
+
+Sentry.init({
+  dsn: "https://62e62ff08e1a438591fe5eb4dd9de244@glitchtip.federspiel.software/3",
+  tracesSampleRate: 0.01,
+});
+
+
+
+useHead({
+  title:"FEDEO",
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover,maximum-scale=1.0, user-scalable=no' },
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.ico' }
+  ],
+  htmlAttrs: {
+    lang: 'de'
+  },
+  script: [
+    {
+      defer: true,
+      src: "/umami.js",
+      "data-website-id":"2a9782fa-2fdf-4434-981d-93592d39edef",
+      "data-host-url":"https://umami.federspiel.software"
+    }
+  ]
+})
+
+useSeoMeta({
+  ogSiteName: 'FEDEO',
+  twitterCard: 'summary_large_image'
+})
+
+</script>
+
+<template>
+  <div class="safearea">
+    <NuxtLayout>
+      <NuxtPage/>
+    </NuxtLayout>
+
+    <UNotifications :class="platform === 'mobile' ? ['mb-14'] : []"/>
+    <USlideovers />
+    <UModals/>
+  </div>
+
+
+
+</template>
+
+<style>
+/* width */
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgba(0,0,0,0);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(226,232,240);
+  border-radius: 5px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #69c350;
+}
+
+
+#logo img{
+  height: 15vh;
+  width: auto;
+}
+
+
+
+.documentList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  overflow-y: scroll;
+}
+
+.scrollList {
+  overflow-y: scroll;
+  height: 85vh;
+}
+
+
+  #page {
+    width: 98vw;
+    height: 95vh;
+    margin:1em;
+  }
+
+  .listItem {
+    padding: .1em;
+    border: 1px solid grey;
+    border-radius: 15px;
+    margin-top: 1em;
+  }
+  .listItem:hover {
+    border: 1px solid #69c350;
+  }
+
+
+  a:hover {
+    color: #69c350
+  }
+
+.safearea {
+  margin-top: env(safe-area-inset-top, 10px) !important;
+  margin-left: env(safe-area-inset-left, 5px) !important;
+  margin-right: env(safe-area-inset-right, 5px) !important;
+  margin-bottom: env(safe-area-inset-bottom, 37px) !important;
+  /*background-color: grey;*/
+}
+
+.scroll {
+  overflow-y: scroll;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/asssets/icon.png b/frontend/asssets/icon.png
new file mode 100644
index 0000000..a35a0d6
Binary files /dev/null and b/frontend/asssets/icon.png differ
diff --git a/frontend/asssets/icons/icon-128.webp b/frontend/asssets/icons/icon-128.webp
new file mode 100644
index 0000000..bcb6df1
Binary files /dev/null and b/frontend/asssets/icons/icon-128.webp differ
diff --git a/frontend/asssets/icons/icon-192.webp b/frontend/asssets/icons/icon-192.webp
new file mode 100644
index 0000000..db56bcf
Binary files /dev/null and b/frontend/asssets/icons/icon-192.webp differ
diff --git a/frontend/asssets/icons/icon-256.webp b/frontend/asssets/icons/icon-256.webp
new file mode 100644
index 0000000..22660a6
Binary files /dev/null and b/frontend/asssets/icons/icon-256.webp differ
diff --git a/frontend/asssets/icons/icon-48.webp b/frontend/asssets/icons/icon-48.webp
new file mode 100644
index 0000000..ebef8db
Binary files /dev/null and b/frontend/asssets/icons/icon-48.webp differ
diff --git a/frontend/asssets/icons/icon-512.webp b/frontend/asssets/icons/icon-512.webp
new file mode 100644
index 0000000..d05e428
Binary files /dev/null and b/frontend/asssets/icons/icon-512.webp differ
diff --git a/frontend/asssets/icons/icon-72.webp b/frontend/asssets/icons/icon-72.webp
new file mode 100644
index 0000000..25b6e95
Binary files /dev/null and b/frontend/asssets/icons/icon-72.webp differ
diff --git a/frontend/asssets/icons/icon-96.webp b/frontend/asssets/icons/icon-96.webp
new file mode 100644
index 0000000..651950e
Binary files /dev/null and b/frontend/asssets/icons/icon-96.webp differ
diff --git a/frontend/asssets/logo-dark.png b/frontend/asssets/logo-dark.png
new file mode 100644
index 0000000..edfc0d9
Binary files /dev/null and b/frontend/asssets/logo-dark.png differ
diff --git a/frontend/asssets/logo.png b/frontend/asssets/logo.png
new file mode 100644
index 0000000..a35a0d6
Binary files /dev/null and b/frontend/asssets/logo.png differ
diff --git a/frontend/asssets/splash.png b/frontend/asssets/splash.png
new file mode 100644
index 0000000..bca2904
Binary files /dev/null and b/frontend/asssets/splash.png differ
diff --git a/frontend/capacitor.config.ts b/frontend/capacitor.config.ts
new file mode 100644
index 0000000..4b11956
--- /dev/null
+++ b/frontend/capacitor.config.ts
@@ -0,0 +1,16 @@
+import type { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'software.federspiel.fedeo',
+  appName: 'FEDEO',
+  webDir: 'dist',
+  ios: {
+    handleApplicationNotifications: false
+  },
+  /*server: {
+    url: "http://192.168.1.226:3000",
+    cleartext: true
+  }*/
+};
+
+export default config;
diff --git a/frontend/components/ArchiveButton.vue b/frontend/components/ArchiveButton.vue
new file mode 100644
index 0000000..693ac37
--- /dev/null
+++ b/frontend/components/ArchiveButton.vue
@@ -0,0 +1,74 @@
+<script setup>
+const emit = defineEmits(['confirmed'])
+
+const props = defineProps({
+  color: {
+    type: String,
+    required:false
+  },
+  variant: {
+    type: String,
+    required:false
+  },
+  type: {
+    type: String,
+    required:false
+  }
+
+})
+
+const {color,variant, type} = props
+
+const dataStore = useDataStore()
+const dataType = dataStore.dataTypes[type]
+
+const showModal = ref(false)
+
+const emitConfirm = () => {
+  showModal.value = false
+  emit('confirmed')
+}
+</script>
+
+<template>
+  <UButton
+    :color="color"
+    :variant="variant"
+    @click="showModal = true"
+  >
+    Archivieren
+  </UButton>
+  <UModal v-model="showModal">
+    <UCard>
+      <template #header>
+        <span class="text-md font-bold">Archivieren bestätigen</span>
+      </template>
+      Möchten Sie diese/-s/-n {{dataType.labelSingle}} wirklich archivieren?
+
+      <template #footer>
+        <div class="text-right">
+          <UButtonGroup>
+            <UButton
+                variant="outline"
+                @click="showModal = false"
+            >
+              Abbrechen
+            </UButton>
+            <UButton
+                @click="emitConfirm"
+                class="ml-2"
+                color="rose"
+            >
+              Archivieren
+            </UButton>
+          </UButtonGroup>
+
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/ButtonWithConfirm.vue b/frontend/components/ButtonWithConfirm.vue
new file mode 100644
index 0000000..24da92c
--- /dev/null
+++ b/frontend/components/ButtonWithConfirm.vue
@@ -0,0 +1,66 @@
+<script setup>
+const emit = defineEmits(['confirmed'])
+
+const props = defineProps({
+  color: {
+    type: String,
+    required:false
+  },
+  variant: {
+    type: String,
+    required:false
+  }
+
+})
+
+const {color,variant} = props
+
+const showModal = ref(false)
+
+const emitConfirm = () => {
+  showModal.value = false
+  emit('confirmed')
+}
+</script>
+
+<template>
+  <UButton
+    :color="color"
+    :variant="variant"
+    @click="showModal = true"
+  >
+    <slot name="button"></slot>
+  </UButton>
+  <UModal v-model="showModal">
+    <UCard>
+      <template #header>
+        <slot name="header"></slot>
+      </template>
+      <slot/>
+      <template #footer>
+        <div class="text-right">
+          <UButtonGroup>
+            <UButton
+                variant="outline"
+                @click="showModal = false"
+            >
+              Abbrechen
+            </UButton>
+            <UButton
+                @click="emitConfirm"
+                class="ml-2"
+                color="rose"
+            >
+              Archivieren
+            </UButton>
+          </UButtonGroup>
+
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/DatePicker.vue b/frontend/components/DatePicker.vue
new file mode 100644
index 0000000..2a97b2c
--- /dev/null
+++ b/frontend/components/DatePicker.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { DatePicker as VCalendarDatePicker } from 'v-calendar'
+import 'v-calendar/dist/style.css'
+
+const props = defineProps({
+  modelValue: {
+    type: Date,
+    default: null
+  },
+  mode: {
+    type: String,
+    default: "date"
+  }
+})
+
+const emit = defineEmits(['update:model-value', 'close'])
+
+const colorMode = useColorMode()
+
+const isDark = computed(() => colorMode.value === 'dark')
+
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:model-value', value)
+    emit('close')
+  }
+})
+
+const attrs = [{
+  key: 'today',
+  highlight: {
+    fillMode: 'outline',
+  },
+  dates: new Date()
+}]
+</script>
+
+<template>
+  <VCalendarDatePicker
+      show-weeknumbers
+      v-model="date"
+      :mode="props.mode"
+      is24hr
+      transparent
+      borderless
+      color="green"
+      :attributes="attrs"
+      :is-dark="isDark"
+      title-position="left"
+      trim-weeks
+      :first-day-of-week="2"
+  />
+</template>
\ No newline at end of file
diff --git a/frontend/components/DocumentDisplay.vue b/frontend/components/DocumentDisplay.vue
new file mode 100644
index 0000000..6db5d5a
--- /dev/null
+++ b/frontend/components/DocumentDisplay.vue
@@ -0,0 +1,95 @@
+<script setup>
+
+import DocumentDisplayModal from "~/components/DocumentDisplayModal.vue";
+
+const toast = useToast()
+const dataStore = useDataStore()
+const modal = useModal()
+const profileStore = useProfileStore()
+const router = useRouter()
+const props = defineProps({
+  documentData: {
+    type: Object,
+    required: true
+  },
+  openShowModal: {
+    type: Boolean,
+    required: false,
+  },
+  returnEmit: {
+    type: Boolean
+  }
+
+})
+
+let {documentData, returnEmit } = props;
+
+
+const showFile = (file) => {
+  console.log(file)
+  modal.open(DocumentDisplayModal,{
+    documentData: file
+  })
+}
+
+
+
+</script>
+
+<template>
+  <div :id="`docDisplay-${documentData.id}`"  class="documentListItem" @click="returnEmit ? $emit('clicked', documentData.id) : showFile(documentData)">
+    <iframe
+        :src="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
+        class="previewEmbed"
+        v-if="documentData.path.toLowerCase().includes('pdf')"
+        loading="lazy"
+    />
+    <img
+      v-else
+      alt=""
+      :src="documentData.url"
+    />
+<!-- TODO: Remove Scrollbar    -->
+    <UTooltip class="w-full" :text="documentData.path.split('/')[documentData.path.split('/').length -1]">
+      <p class="truncate my-3">{{documentData.path.split("/")[documentData.path.split("/").length -1]}}</p>
+    </UTooltip>
+
+    <InputGroup class="mt-3 flex-wrap">
+      <UBadge
+        v-for="tag in documentData.filetags"
+
+      ><span class="text-nowrap">{{ tag.name }}</span></UBadge>
+    </InputGroup>
+  </div>
+</template>
+
+<style scoped>
+.documentListItem {
+  display: block;
+  width: 15vw;
+  aspect-ratio: 1 / 1.414;
+  padding: 1em;
+  margin: 0.7em;
+  border-radius: 15px;
+  transition: box-shadow 0.2s ease; /* für smooth hover */
+}
+
+.documentListItem:hover {
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* sanfter Shadow beim Hover */
+}
+
+.previewEmbed {
+  width: 100%;
+  aspect-ratio: 1 / 1.414;
+  overflow: hidden !important;
+  pointer-events: none !important;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.previewEmbed::-webkit-scrollbar {
+  display: none;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/DocumentDisplayModal.vue b/frontend/components/DocumentDisplayModal.vue
new file mode 100644
index 0000000..a501448
--- /dev/null
+++ b/frontend/components/DocumentDisplayModal.vue
@@ -0,0 +1,365 @@
+<script setup>
+
+const toast = useToast()
+const dataStore = useDataStore()
+const modal = useModal()
+const props = defineProps({
+  documentData: {
+    type: Object,
+    required: true
+  },
+  openShowModal: {
+    type: Boolean,
+    required: false,
+  },
+  returnEmit: {
+    type: Boolean
+  },
+
+})
+
+const emit = defineEmits(["updateNeeded"])
+
+const folders = ref([])
+
+const filetypes = ref([])
+const documentboxes = ref([])
+
+const setup = async () => {
+  const data = await useEntities("folders").select()
+
+  data.forEach(folder => {
+    let name = folder.name
+
+    const addParent = (item) => {
+      name = `${item.name} > ${name}`
+
+      if(item.parent){
+        addParent(data.find(i => i.id === item.parent))
+      } else {
+        folders.value.push({
+          id: folder.id,
+          name: name,
+        })
+      }
+    }
+
+    if(folder.parent) {
+      addParent(data.find(i => i.id === folder.parent))
+    } else {
+      folders.value.push({
+        id: folder.id,
+        name: folder.name,
+      })
+    }
+  })
+
+  filetypes.value = await useEntities("filetags").select()
+  documentboxes.value = await useEntities("documentboxes").select()
+}
+
+setup()
+
+const updateDocument = async () => {
+  const {url, ...objData} = props.documentData
+  delete objData.url
+  delete objData.filetags
+
+  /*console.log(objData)
+
+  if(objData.project) objData.project = objData.project.id
+  if(objData.customer) objData.customer = objData.customer.id
+  if(objData.contract) objData.contract = objData.contract.id
+  if(objData.vendor) objData.vendor = objData.vendor.id
+  if(objData.plant) objData.plant = objData.plant.id
+  if(objData.createddocument) objData.createddocument = objData.createddocument.id
+  if(objData.vehicle) objData.vehicle = objData.vehicle.id
+  if(objData.product) objData.product = objData.product.id
+  if(objData.profile) objData.profile = objData.profile.id
+  if(objData.check) objData.check = objData.check.id
+  if(objData.inventoryitem) objData.inventoryitem = objData.inventoryitem.id
+  if(objData.incominginvoice) objData.incominginvoice = objData.incominginvoice.id*/
+
+  console.log(objData)
+
+  const {data,error} = await useEntities("files").update(objData.id, objData)
+
+  if(error) {
+    console.log(error)
+
+  } else {
+    console.log(data)
+    toast.add({title: "Datei aktualisiert"})
+    modal.close()
+    emit("updateNeeded")
+    //openShowModal.value = false
+  }
+}
+
+const archiveDocument = async () => {
+  props.documentData.archived = true
+  await updateDocument()
+
+  modal.close()
+  emit("update")
+}
+
+const resourceOptions = ref([
+    {label: 'Projekt', value: 'project', optionAttr: "name"},
+  {label: 'Kunde', value: 'customer', optionAttr: "name"},
+  {label: 'Lieferant', value: 'vendor', optionAttr: "name"},
+  {label: 'Fahrzeug', value: 'vehicle', optionAttr: "licensePlate"},
+  {label: 'Objekt', value: 'plant', optionAttr: "name"},
+  {label: 'Vertrag', value: 'contract', optionAttr: "name"},
+  {label: 'Produkt', value: 'product', optionAttr: "name"}
+])
+const resourceToAssign = ref("project")
+const itemOptions = ref([])
+const idToAssign = ref(null)
+const getItemsBySelectedResource = async () => {
+  if(resourceToAssign.value === "project") {
+    itemOptions.value = await useEntities("projects").select()
+  } else if(resourceToAssign.value === "customer") {
+    itemOptions.value = await useEntities("customers").select()
+  } else if(resourceToAssign.value === "vendor") {
+    itemOptions.value = await useEntities("vendors").select()
+  } else if(resourceToAssign.value === "vehicle") {
+    itemOptions.value = await useEntities("vehicles").select()
+  } else if(resourceToAssign.value === "product") {
+    itemOptions.value = await useEntities("products").select()
+  } else if(resourceToAssign.value === "plant") {
+    itemOptions.value = await useEntities("plants").select()
+  } else if(resourceToAssign.value === "contract") {
+    itemOptions.value = await useEntities("contracts").select()
+  } else {
+    itemOptions.value =  []
+  }
+}
+getItemsBySelectedResource()
+
+const updateDocumentAssignment = async () => {
+  props.documentData[resourceToAssign.value] = idToAssign.value
+  await updateDocument()
+}
+
+const folderToMoveTo = ref(null)
+const moveFile = async () => {
+
+  const res = await useEntities("files").update(props.documentData.id, {folder: folderToMoveTo.value})
+
+  modal.close()
+}
+
+
+
+</script>
+
+<template>
+  <UModal fullscreen >
+    <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }" class="h-full">
+      <template #header>
+        <div class="flex flex-row justify-between">
+          <div class="flex items-center gap-2">
+            <UBadge
+                v-for="tag in props.documentData.filetags"
+            >
+              {{tag.name}}
+            </UBadge>
+          </div>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="modal.close()" />
+        </div>
+
+      </template>
+      <div class="flex flex-row">
+        <div :class="useCapacitor().getIsNative() ? ['w-full'] : ['w-1/3']">
+          <PDFViewer
+              v-if="props.documentData.id && props.documentData.path.toLowerCase().includes('pdf')"
+              :file-id="props.documentData.id" />
+
+          <img
+              class=" w-full"
+              :src="props.documentData.url"
+              alt=""
+              v-else
+          />
+        </div>
+        <div class="w-2/3 p-5" v-if="!useCapacitor().getIsNative()">
+          <UButtonGroup>
+            <ArchiveButton
+                color="rose"
+                variant="outline"
+                type="files"
+                @confirmed="archiveDocument"
+            />
+
+            <UButton
+                :to="props.documentData.url"
+                variant="outline"
+                icon="i-heroicons-arrow-top-right-on-square"
+                target="_blank"
+            >
+              Öffnen
+            </UButton>
+          </UButtonGroup>
+
+          <UDivider>Zuweisungen</UDivider>
+          <table class="w-full">
+            <tr v-if="props.documentData.project">
+              <td>Projekt</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/projects/show/${props.documentData.project.id}`">{{props.documentData.project.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.customer">
+              <td>Kunde</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/customers/show/${props.documentData.customer.id}`">{{props.documentData.customer.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.vendor">
+              <td>Lieferant</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/vendors/show/${props.documentData.vendor.id}`">{{props.documentData.vendor.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.createddocument">
+              <td>Ausgangsbeleg</td>
+              <td>
+                <nuxt-link :to="`/createDocument/show/${props.documentData.createddocument.id}`">{{props.documentData.createddocument.documentNumber}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.plant">
+              <td>Objekt</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/plants/show/${props.documentData.plant.id}`">{{props.documentData.plant.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.contract">
+              <td>Vertrag</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/contracts/show/${props.documentData.contract.id}`">{{props.documentData.contract.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.vehicle">
+              <td>Fahrzeug</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/vehicles/show/${props.documentData.vehicle.id}`">{{props.documentData.vehicle.licensePlate}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.product">
+              <td>Artikel</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/products/show/${props.documentData.product.id}`">{{props.documentData.product.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.inventoryitem">
+              <td>Inventarartikel</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/inventoryitem/show/${props.documentData.inventoryitem.id}`">{{props.documentData.inventoryitem.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.check">
+              <td>Überprüfung</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/checks/show/${props.documentData.check.id}`">{{props.documentData.check.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.profile">
+              <td>Mitarbeiter</td>
+              <td>
+                <nuxt-link :to="`/profiles/show/${props.documentData.profile.id}`">{{props.documentData.profile.fullName}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.incominginvoice">
+              <td>Eingangsrechnung</td>
+              <td>
+                <nuxt-link :to="`/incomingInvoices/show/${props.documentData.incominginvoice.id}`">{{props.documentData.incominginvoice.reference}}</nuxt-link>
+              </td>
+            </tr>
+          </table>
+
+          <UDivider class="my-3">Datei zuweisen</UDivider>
+
+          <UFormGroup
+              label="Resource auswählen"
+          >
+            <USelectMenu
+                :options="resourceOptions"
+                v-model="resourceToAssign"
+                value-attribute="value"
+                option-attribute="label"
+                @change="getItemsBySelectedResource"
+            >
+
+            </USelectMenu>
+          </UFormGroup>
+          <UFormGroup
+              label="Eintrag auswählen:"
+          >
+            <USelectMenu
+                :options="itemOptions"
+                v-model="idToAssign"
+                :option-attribute="resourceOptions.find(i => i.value === resourceToAssign)? resourceOptions.find(i => i.value === resourceToAssign).optionAttr : 'name'"
+                value-attribute="id"
+                @change="updateDocumentAssignment"
+            ></USelectMenu>
+          </UFormGroup>
+
+
+
+          <UDivider class="my-5">Datei verschieben</UDivider>
+
+          <InputGroup class="w-full">
+            <USelectMenu
+                class="flex-auto"
+                v-model="folderToMoveTo"
+                value-attribute="id"
+                option-attribute="name"
+                :options="folders"
+            />
+            <UButton
+              @click="moveFile"
+              variant="outline"
+              :disabled="!folderToMoveTo"
+            >Verschieben</UButton>
+          </InputGroup>
+
+          <UDivider class="my-5">Dateityp</UDivider>
+
+          <InputGroup class="w-full">
+            <USelectMenu
+                class="flex-auto"
+                v-model="props.documentData.type"
+                value-attribute="id"
+                option-attribute="name"
+                :options="filetypes"
+                @change="updateDocument"
+            />
+          </InputGroup>
+          <UDivider class="my-5">Dokumentenbox</UDivider>
+
+          <InputGroup class="w-full">
+            <USelectMenu
+                class="flex-auto"
+                v-model="props.documentData.documentbox"
+                value-attribute="id"
+                option-attribute="key"
+                :options="documentboxes"
+                @change="updateDocument"
+            />
+          </InputGroup>
+
+        </div>
+      </div>
+    </UCard>
+  </UModal>
+</template>
+
+<style scoped>
+
+.bigPreview {
+  width: 100%;
+  aspect-ratio: 1/ 1.414;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/DocumentList.vue b/frontend/components/DocumentList.vue
new file mode 100644
index 0000000..69709bf
--- /dev/null
+++ b/frontend/components/DocumentList.vue
@@ -0,0 +1,43 @@
+<script setup>
+const props = defineProps({
+  documents: {
+    type: Array,
+    required:true
+  },
+  returnDocumentId: {
+    type: Boolean,
+  }
+})
+const dataStore = useDataStore()
+
+const emit = defineEmits(["updateNeeded"])
+
+</script>
+
+<template>
+  <div class="documentList">
+    <DocumentDisplay
+        v-for="item in documents"
+        :document-data="item"
+        :key="item.id"
+        @clicked="(info) => $emit('selectDocument', info)"
+        :return-emit="returnDocumentId"
+        @updatedNeeded="emit('updatedNeeded')"
+    />
+  </div>
+</template>
+
+<style scoped>
+.documentList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  overflow-y: scroll;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.documentList::-webkit-scrollbar {
+  display: none;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/DocumentUpload.vue b/frontend/components/DocumentUpload.vue
new file mode 100644
index 0000000..343fb88
--- /dev/null
+++ b/frontend/components/DocumentUpload.vue
@@ -0,0 +1,42 @@
+<script setup >
+
+import DocumentUploadModal from "~/components/DocumentUploadModal.vue";
+
+const props = defineProps({
+  type: {
+    type: String
+  },
+  elementId: {
+    type: String
+  }
+})
+
+const {type, elementId} = props
+
+const emit = defineEmits(["uploadFinished"])
+
+const modal = useModal()
+
+const openModal = () => {
+  let fileProps = {folder: null, type: null, typeEnabled: true}
+
+  fileProps[props.type] = props.elementId
+
+  console.log(fileProps)
+
+  modal.open(DocumentUploadModal,{fileData: fileProps, onUploadFinished: () => emit("uploadFinished")})
+}
+</script>
+
+<template>
+  <UButton
+      @click="openModal"
+      icon="i-heroicons-arrow-up-tray"
+  >
+    Hochladen
+  </UButton>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/DocumentUploadModal.vue b/frontend/components/DocumentUploadModal.vue
new file mode 100644
index 0000000..482db80
--- /dev/null
+++ b/frontend/components/DocumentUploadModal.vue
@@ -0,0 +1,161 @@
+<script setup>
+// Falls useDropZone nicht auto-importiert wird:
+// import { useDropZone } from '@vueuse/core'
+
+const props = defineProps({
+  fileData: {
+    type: Object,
+    default: {
+      type: null
+    }
+  }
+})
+
+const emit = defineEmits(["uploadFinished"])
+
+const modal = useModal()
+// const profileStore = useProfileStore() // Wird im Snippet nicht genutzt, aber ich lasse es drin
+
+const uploadInProgress = ref(false)
+const availableFiletypes = ref([])
+
+// 1. State für die Dateien und die Dropzone Referenz
+const selectedFiles = ref([])
+const dropZoneRef = ref(null)
+
+// 2. Setup der Dropzone
+const onDrop = (files) => {
+  // Wenn Dateien gedroppt werden, speichern wir sie
+  // files ist hier meist ein Array, wir stellen sicher, dass es passt
+  selectedFiles.value = files || []
+}
+
+const { isOverDropZone } = useDropZone(dropZoneRef, {
+  onDrop,
+  // Verhindert, dass der Browser das Bild einfach öffnet
+  preventDefaultForDrop: true,
+})
+
+// 3. Handler für den klassischen Datei-Input Klick
+const onFileInputChange = (e) => {
+  if (e.target.files) {
+    selectedFiles.value = Array.from(e.target.files)
+  }
+}
+
+const setup = async () => {
+  availableFiletypes.value = await useEntities("filetags").select()
+}
+
+setup()
+
+const uploadFiles = async () => {
+  // Validierung: Keine Dateien ausgewählt
+  if (!selectedFiles.value || selectedFiles.value.length === 0) {
+    alert("Bitte wählen Sie zuerst Dateien aus.") // Oder eine schönere Toast Notification
+    return
+  }
+
+  uploadInProgress.value = true;
+
+  let fileData = props.fileData
+  delete fileData.typeEnabled
+
+  // 4. Hier nutzen wir nun selectedFiles.value statt document.getElementById
+  await useFiles().uploadFiles(fileData, selectedFiles.value, [], true)
+
+  uploadInProgress.value = false;
+  emit("uploadFinished")
+  modal.close()
+}
+
+// Helper Funktion um Dateinamen anzuzeigen (da das Input Feld leer bleibt beim Droppen)
+const fileNames = computed(() => {
+  if (!selectedFiles.value.length) return ''
+  return selectedFiles.value.map(f => f.name).join(', ')
+})
+</script>
+
+<template>
+  <UModal>
+    <div ref="dropZoneRef" class="relative h-full flex flex-col">
+
+      <div
+          v-if="isOverDropZone"
+          class="absolute inset-0 z-50 flex items-center justify-center bg-primary-500/10 border-2 border-primary-500 border-dashed rounded-lg backdrop-blur-sm transition-all"
+      >
+        <span class="text-xl font-bold text-primary-600 bg-white/80 px-4 py-2 rounded shadow-sm">
+          Dateien hier ablegen
+        </span>
+      </div>
+
+      <UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Datei hochladen
+            </h3>
+            <UButton
+                color="gray"
+                variant="ghost"
+                icon="i-heroicons-x-mark-20-solid"
+                class="-my-1"
+                @click="modal.close()"
+                :disabled="uploadInProgress"
+            />
+          </div>
+        </template>
+
+        <UFormGroup
+            label="Datei:"
+            :help="selectedFiles.length > 0 ? `${selectedFiles.length} Datei(en) ausgewählt` : 'Ziehen Sie Dateien hierher oder klicken Sie'"
+        >
+          <UInput
+              v-if="selectedFiles.length === 0"
+              type="file"
+              id="fileUploadInput"
+              multiple
+              accept="image/jpeg, image/png, image/gif, application/pdf"
+              @change="onFileInputChange"
+          />
+
+          <div v-if="selectedFiles.length > 0" class="mt-2 text-sm text-gray-500">
+            Ausgewählt: <span class="font-medium text-gray-700 dark:text-gray-300">{{ fileNames }}</span>
+          </div>
+        </UFormGroup>
+
+        <UFormGroup
+            label="Typ:"
+            class="mt-3"
+        >
+          <USelectMenu
+              option-attribute="name"
+              value-attribute="id"
+              searchable
+              searchable-placeholder="Suchen..."
+              :options="availableFiletypes"
+              v-model="props.fileData.type"
+              :disabled="!props.fileData.typeEnabled"
+          >
+            <template #label>
+              <span v-if="availableFiletypes.find(x => x.id === props.fileData.type)">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
+              <span v-else>Kein Typ ausgewählt</span>
+            </template>
+          </USelectMenu>
+        </UFormGroup>
+
+        <template #footer>
+          <UButton
+              @click="uploadFiles"
+              :loading="uploadInProgress"
+              :disabled="uploadInProgress || selectedFiles.length === 0"
+          >Hochladen</UButton>
+        </template>
+      </UCard>
+    </div>
+  </UModal>
+</template>
+
+<style scoped>
+/* Optional: Animationen für das Overlay */
+</style>
\ No newline at end of file
diff --git a/frontend/components/Editor.client.vue b/frontend/components/Editor.client.vue
new file mode 100644
index 0000000..3b74bb5
--- /dev/null
+++ b/frontend/components/Editor.client.vue
@@ -0,0 +1,141 @@
+<script setup>
+const editor = useEditor({
+  content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
+  extensions: [TiptapStarterKit],
+});
+</script>
+
+<template>
+
+
+  <div>
+    <InputGroup>
+      <UButtonGroup>
+        <UButton
+            @click="editor.chain().focus().undo().run()"
+            :disabled="!editor.can().chain().focus().undo().run()"
+            icon="i-mdi-undo"
+            class="px-3"
+        />
+        <UButton
+            @click="editor.chain().focus().redo().run()"
+            :disabled="!editor.can().chain().focus().redo().run()"
+            icon="i-mdi-redo"
+            class="px-3"
+        />
+      </UButtonGroup>
+
+      <UButtonGroup v-if="editor">
+
+
+        <UButton
+            @click="editor.chain().focus().toggleBold().run()"
+            :disabled="!editor.can().chain().focus().toggleBold().run()"
+            :variant="editor.isActive('bold') ? 'solid' : 'outline'"
+        >
+          B
+        </UButton>
+        <UButton
+            @click="editor.chain().focus().toggleItalic().run()"
+            :disabled="!editor.can().chain().focus().toggleItalic().run()"
+            :variant="editor.isActive('italic') ? 'solid' : 'outline'"
+        >
+          <span class="italic">I</span>
+        </UButton>
+        <UButton
+            @click="editor.chain().focus().toggleStrike().run()"
+            :disabled="!editor.can().chain().focus().toggleStrike().run()"
+            :variant="editor.isActive('strike') ? 'solid' : 'outline'"
+        >
+          <span class="line-through">D</span>
+        </UButton>
+      </UButtonGroup>
+      <UButtonGroup>
+<!--        <UButton
+            @click="editor.chain().focus().toggleCode().run()"
+            :disabled="!editor.can().chain().focus().toggleCode().run()"
+            :class="{ 'is-active': editor.isActive('code') }"
+        >
+          code
+        </UButton>
+        <UButton @click="editor.chain().focus().unsetAllMarks().run()">
+          clear marks
+        </UButton>
+        <UButton @click="editor.chain().focus().clearNodes().run()">
+          clear nodes
+        </UButton>
+        <UButton
+            @click="editor.chain().focus().setParagraph().run()"
+            :class="{ 'is-active': editor.isActive('paragraph') }"
+        >
+          <span>P</span>
+        </UButton>-->
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+            icon="i-mdi-format-header-1"
+        />
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+            icon="i-mdi-format-header-2"
+        />
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+            icon="i-mdi-format-header-3"
+        />
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
+            icon="i-mdi-format-header-4"
+        />
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
+            icon="i-mdi-format-header-5"
+        />
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
+            icon="i-mdi-format-header-6"
+        />
+        <UButton
+            @click="editor.chain().focus().toggleBulletList().run()"
+            :class="{ 'is-active': editor.isActive('bulletList') }"
+            icon="i-mdi-format-list-bulleted"
+        />
+        <UButton
+            @click="editor.chain().focus().toggleOrderedList().run()"
+            :class="{ 'is-active': editor.isActive('orderedList') }"
+            icon="i-mdi-format-list-numbered"
+        />
+<!--        <UButton
+            @click="editor.chain().focus().toggleCodeBlock().run()"
+            :class="{ 'is-active': editor.isActive('codeBlock') }"
+        >
+          code block
+        </UButton>
+        <UButton
+            @click="editor.chain().focus().toggleBlockquote().run()"
+            :class="{ 'is-active': editor.isActive('blockquote') }"
+        >
+          blockquote
+        </UButton>
+        <UButton @click="editor.chain().focus().setHorizontalRule().run()">
+          horizontal rule
+        </UButton>
+        <UButton @click="editor.chain().focus().setHardBreak().run()">
+          hard break
+        </UButton>-->
+
+      </UButtonGroup>
+    </InputGroup>
+
+    <TiptapEditorContent class="mt-5" :editor="editor" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityEdit.vue b/frontend/components/EntityEdit.vue
new file mode 100644
index 0000000..9976565
--- /dev/null
+++ b/frontend/components/EntityEdit.vue
@@ -0,0 +1,855 @@
+<script setup>
+import dayjs from "dayjs";
+import MaterialComposing from "~/components/materialComposing.vue";
+import PersonalComposing from "~/components/personalComposing.vue";
+
+const props = defineProps({
+  type: {
+    required: true,
+    type: String
+  },
+  mode: {
+    required: true,
+    type: String
+  },
+  createQuery: {
+    type: Object
+  },
+  item: {
+    required: true,
+    type: Object
+  },
+  inModal: {
+    type: Boolean,
+  },
+  platform: {
+    type: String,
+  }
+})
+
+const emit = defineEmits(["returnData"])
+
+
+const {type} = props
+
+defineShortcuts({
+  'backspace': () => {
+    router.push(`/${type}`)
+  },
+  'arrowleft': () => {
+    if(openTab.value > 0){
+      openTab.value -= 1
+    }
+  },
+  'arrowright': () => {
+    if(openTab.value < 3) {
+      openTab.value += 1
+    }
+  },
+})
+
+const router = useRouter()
+const route = useRoute()
+const dataStore = useDataStore()
+const modal = useModal()
+
+
+const dataType = dataStore.dataTypes[type]
+const openTab = ref(0)
+const item = ref(JSON.parse(props.item))
+console.log(item.value)
+
+const oldItem = ref(null)
+const generateOldItemData = () => {
+  oldItem.value = JSON.parse(props.item)
+}
+generateOldItemData()
+
+
+const setupCreate = () => {
+  dataType.templateColumns.forEach(datapoint => {
+    if(datapoint.key.includes(".")){
+      !item.value[datapoint.key.split(".")[0]] ? item.value[datapoint.key.split(".")[0]] = {} : null
+    }
+
+    if(datapoint.inputType === "editor") {
+      if(datapoint.key.includes(".")){
+        item.value[datapoint.key.split(".")[0]][datapoint.key.split(".")[1]] = {}
+      } else {
+        item.value[datapoint.key] = {}
+      }
+
+
+    }
+
+  })
+}
+setupCreate()
+
+const setupQuery = () => {
+  console.log("setupQuery")
+  console.log(props.mode)
+  if(props.mode === "create" && (route.query || props.createQuery)) {
+
+
+    let data = !props.inModal ? route.query : props.createQuery
+
+    Object.keys(data).forEach(key => {
+      if(dataType.templateColumns.find(i => i.key === key)) {
+        if (["customer", "contract", "plant", "contact", "project"].includes(key)) {
+          item.value[key] = Number(data[key])
+        } else {
+          item.value[key] = data[key]
+        }
+      } else if(key === "resources") {
+        /*item.value[key] = data[key]*/
+        JSON.parse(data[key]).forEach(async (i) => {
+          console.log(i)
+          let type = i.substring(0,1)
+          let id = i.substring(2,i.length)
+          console.log(type)
+          console.log(id)
+          let holder = ""
+          if(type === "P"){
+            holder = "profiles"
+          } else if(type === "F"){
+            holder = "vehicles"
+            id = Number(id)
+          } else if(type === "I"){
+            holder = "inventoryitems"
+            id = Number(id)
+          } else if(type === "G"){
+            holder = "inventoryitemgroups"
+          }
+
+          if(typeof item.value[holder] === "object") {
+            item.value[holder].push(id)
+          } else {
+            item.value[holder] = [id]
+          }
+
+
+        })
+
+
+      }
+    })
+  }
+}
+setupQuery()
+
+const loadedOptions = ref({})
+const loadOptions = async () => {
+  let optionsToLoad = dataType.templateColumns.filter(i => i.selectDataType).map(i => {
+    return {
+      option: i.selectDataType,
+      key: i.key
+    }
+  })
+
+  for await(const option of optionsToLoad) {
+    if(option.option === "countrys") {
+      loadedOptions.value[option.option] = useEntities("countrys").selectSpecial()
+    } else if(option.option === "units") {
+      loadedOptions.value[option.option] = useEntities("units").selectSpecial()
+    } else {
+      loadedOptions.value[option.option] = (await useEntities(option.option).select())
+
+      if(dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter){
+        loadedOptions.value[option.option] = loadedOptions.value[option.option].filter(i => dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter(i, item))
+      }
+    }
+  }
+}
+
+loadOptions()
+
+const contentChanged = (content, datapoint) => {
+  if(datapoint.key.includes(".")){
+    item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html = content.html
+    item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].text = content.text
+    item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].json = content.json
+  } else {
+    item[datapoint.key].html = content.html
+    item[datapoint.key].text = content.text
+    item[datapoint.key].json = content.json
+  }
+}
+
+const saveAllowed = ref(false)
+const calcSaveAllowed = (item) => {
+  let allowedCount = 0
+
+  dataType.templateColumns.filter(i => i.inputType).forEach(datapoint => {
+    if(datapoint.required) {
+
+      if(datapoint.key.includes(".")){
+        if(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]) allowedCount += 1
+      } else {
+        if(item[datapoint.key]) allowedCount += 1
+      }
+    } else {
+      allowedCount += 1
+    }
+  })
+
+  saveAllowed.value = allowedCount >= dataType.templateColumns.filter(i => i.inputType).length
+}
+//calcSaveAllowed()
+
+watch(item.value, async (newItem, oldItem) => {
+  calcSaveAllowed(newItem)
+})
+
+const createItem = async () => {
+  let ret = null
+
+  if(props.inModal) {
+    ret =  await useEntities(type).create(item.value, true)
+
+  } else {
+    ret = await useEntities(type).create(item.value)//dataStore.createNewItem(type,item.value)
+  }
+
+  emit('returnData', ret)
+  modal.close()
+}
+
+const updateItem = async () => {
+  let ret = null
+
+  if(props.inModal) {
+    ret = await useEntities(type).update(item.value.id, item.value, true)
+    emit('returnData', ret)
+    modal.close()
+  } else {
+    ret = await useEntities(type).update(item.value.id, item.value)
+    emit('returnData', ret)
+  }
+
+
+}
+
+
+</script>
+
+<template>
+  <UDashboardNavbar
+      v-if="!props.inModal"
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #toggle>
+      <div v-if="platform === 'mobile'"></div>
+    </template>
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.back()/*router.push(`/standardEntity/${type}`)*/"
+      >
+<!--        {{dataType.label}}-->
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="item"
+          :class="['text-xl','font-medium', 'text-center']"
+      >{{item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
+    </template>
+    <template #right>
+      <ArchiveButton
+          color="rose"
+          v-if="platform !== 'mobile'"
+          variant="outline"
+          :type="type"
+          @confirmed="useEntities(type).archive(item.id)"
+      />
+      <UButton
+          v-if="item.id"
+          @click="updateItem"
+          :disabled="!saveAllowed"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else
+          @click="createItem"
+          :disabled="!saveAllowed"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="router.push(item.id ? `/standardEntity/${type}/show/${item.id}` : `/standardEntity/${type}`)"
+          color="red"
+          class="ml-1"
+      >
+        Abbrechen
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardNavbar
+      v-else
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #center>
+      <h1
+          v-if="item"
+          :class="['text-xl','font-medium']"
+      >{{item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
+    </template>
+    <template #right>
+      <UButton
+          v-if="item.id"
+          @click="updateItem"
+          :disabled="!saveAllowed"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else
+          @click="createItem"
+          :disabled="!saveAllowed"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="modal.close()"
+          color="red"
+          class="ml-2"
+          icon="i-heroicons-x-mark"
+          variant="outline"
+      />
+    </template>
+  </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <UForm
+        class="p-5"
+    >
+      <div :class="platform ===  'mobile' ?['flex','flex-col'] : ['flex','flex-row']">
+        <div
+            v-for="(columnName,index) in dataType.inputColumns"
+            :class="platform === 'mobile' ? ['w-full'] : [`w-1/${dataType.inputColumns.length}`, ... index < dataType.inputColumns.length -1 ? ['mr-5'] : []]"
+        >
+          <UDivider>{{columnName}}</UDivider>
+
+          <!--
+           Die Form Group darf nur in der ersten bearbeitet werden und muss dann runterkopiert werden
+           -->
+
+          <div
+              v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && i.inputColumn === columnName)"
+          >
+            <UFormGroup
+                v-if="(datapoint.showFunction ? datapoint.showFunction(item) : true)"
+                :label="datapoint.label"
+            >
+              <template #help>
+                <component
+                    v-if="datapoint.helpComponent"
+                    :is="datapoint.helpComponent"
+                    :item="item"
+                />
+              </template>
+              <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
+                <UInput
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                    class="flex-auto"
+                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                    v-if="['text','number'].includes(datapoint.inputType)"
+                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    :type="datapoint.inputType"
+                    :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
+                >
+                  <template #trailing v-if="datapoint.inputTrailing">
+                    <span class="text-gray-500 dark:text-gray-400 text-xs">{{datapoint.inputTrailing}}</span>
+                  </template>
+                </UInput>
+                <UToggle
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
+                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                    v-else-if="datapoint.inputType === 'bool'"
+                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                />
+                <USelectMenu
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                    class="flex-auto"
+                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                    v-else-if="datapoint.inputType === 'select'"
+                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    :option-attribute="datapoint.selectOptionAttribute"
+                    :value-attribute="datapoint.selectValueAttribute || 'id'"
+                    :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
+                    :searchable="datapoint.selectSearchAttributes"
+                    :search-attributes="datapoint.selectSearchAttributes"
+                    :multiple="datapoint.selectMultiple"
+                >
+                  <template #empty>
+                    Keine Optionen verfügbar
+                  </template>
+                </USelectMenu>
+                <UTextarea
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                    class="flex-auto"
+                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                    v-else-if="datapoint.inputType === 'textarea'"
+                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    rows="4"
+                />
+                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+                  <UButton
+                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                      icon="i-heroicons-calendar-days-20-solid"
+                      :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
+                      variant="outline"
+                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+
+                  />
+
+                  <template #panel="{ close }">
+                    <LazyDatePicker
+                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    />
+                  </template>
+                </UPopover>
+                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+                  <UButton
+                      :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                      icon="i-heroicons-calendar-days-20-solid"
+                      :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
+                      variant="outline"
+                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+
+                  />
+
+                  <template #panel="{ close }">
+                    <LazyDatePicker
+                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                        mode="datetime"
+                    />
+                  </template>
+                </UPopover>
+                <!-- TODO: DISABLED FOR TIPTAP -->
+                <Tiptap
+                    v-else-if="datapoint.inputType === 'editor'"
+                    @updateContent="(i) => contentChanged(i,datapoint)"
+                    :preloadedContent="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
+                />
+
+                <UButton
+                    v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
+                    @click="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] = null"
+                    variant="outline"
+                    color="white"
+                    icon="i-heroicons-x-mark"
+                />
+              </InputGroup>
+              <InputGroup class="w-full" v-else>
+                <UInput
+                    class="flex-auto"
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                    v-if="['text','number'].includes(datapoint.inputType)"
+                    v-model="item[datapoint.key]"
+                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    :type="datapoint.inputType"
+                    :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
+                >
+                  <template #trailing v-if="datapoint.inputTrailing">
+                    {{datapoint.inputTrailing}}
+                  </template>
+                </UInput>
+                <UToggle
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
+                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                    v-else-if="datapoint.inputType === 'bool'"
+                    v-model="item[datapoint.key]"
+                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                />
+                <USelectMenu
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                    class="flex-auto"
+                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                    v-else-if="datapoint.inputType === 'select'"
+                    v-model="item[datapoint.key]"
+                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    :option-attribute="datapoint.selectOptionAttribute"
+                    :value-attribute="datapoint.selectValueAttribute || 'id'"
+                    :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
+                    :searchable="datapoint.selectSearchAttributes"
+                    :search-attributes="datapoint.selectSearchAttributes"
+                    :multiple="datapoint.selectMultiple"
+                    searchable-placeholder="Suche..."
+                >
+                  <template #empty>
+                    Keine Optionen verfügbar
+                  </template>
+                </USelectMenu>
+                <UTextarea
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                    class="flex-auto"
+                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                    v-else-if="datapoint.inputType === 'textarea'"
+                    v-model="item[datapoint.key]"
+                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    rows="4"
+                />
+                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+                  <UButton
+                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                      icon="i-heroicons-calendar-days-20-solid"
+                      :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
+                      variant="outline"
+                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                  />
+
+                  <template #panel="{ close }">
+                    <LazyDatePicker
+                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                        v-model="item[datapoint.key]" @close="close"
+                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    />
+                  </template>
+                </UPopover>
+                <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+                  <UButton
+                      :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                      icon="i-heroicons-calendar-days-20-solid"
+                      :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
+                      variant="outline"
+                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                  />
+
+                  <template #panel="{ close }">
+                    <LazyDatePicker
+                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                        v-model="item[datapoint.key]"
+                        @close="close"
+                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                        mode="datetime"
+                    />
+                  </template>
+                </UPopover>
+                <!-- TODO: Color/Required for TipTap and MaterialComposing -->
+                <Tiptap
+                    v-else-if="datapoint.inputType === 'editor'"
+                    @updateContent="(i) => contentChanged(i,datapoint)"
+                    :preloadedContent="item[datapoint.key].html"
+                />
+
+
+                <MaterialComposing
+                    v-else-if="datapoint.inputType === 'materialComposing'"
+                    :item="item"
+                />
+                <PersonalComposing
+                    v-else-if="datapoint.inputType === 'personalComposing'"
+                    :item="item"
+                />
+
+                <UButton
+                    v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
+                    @click="item[datapoint.key] = null"
+                    variant="outline"
+                    color="white"
+                    icon="i-heroicons-x-mark"
+                />
+              </InputGroup>
+              <!--        <div
+                          v-if="profileStore.ownTenant.ownFields"
+                      >
+                        <UDivider
+                            class="mt-3"
+                        >Eigene Felder</UDivider>
+
+                        <UFormGroup
+                            v-for="field in profileStore.ownTenant.ownFields.contracts"
+                            :key="field.key"
+                            :label="field.label"
+                        >
+                          <UInput
+                              v-if="field.type === 'text'"
+                              v-model="item.ownFields[field.key]"
+                          />
+                          <USelectMenu
+                              v-else-if="field.type === 'select'"
+                              :options="field.options"
+                              v-model="item.ownFields[field.key]"
+                          />
+                        </UFormGroup>
+                      </div>-->
+
+            </UFormGroup>
+          </div>
+
+
+
+        </div>
+      </div>
+      <UFormGroup
+          v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && !i.inputColumn)"
+          :label="datapoint.label"
+      >
+        <template #help>
+          <component
+              v-if="datapoint.helpComponent"
+              :is="datapoint.helpComponent"
+              :item="item"
+          />
+        </template>
+        <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
+          <UInput
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+              class="flex-auto"
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+              v-if="['text','number'].includes(datapoint.inputType)"
+              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+              :type="datapoint.inputType"
+              :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
+          >
+            <template #trailing v-if="datapoint.inputTrailing">
+              <span class="text-gray-500 dark:text-gray-400 text-xs">{{datapoint.inputTrailing}}</span>
+            </template>
+          </UInput>
+          <UToggle
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+              v-else-if="datapoint.inputType === 'bool'"
+              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+          />
+          <USelectMenu
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+              class="flex-auto"
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+              v-else-if="datapoint.inputType === 'select'"
+              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+              :option-attribute="datapoint.selectOptionAttribute"
+              :value-attribute="datapoint.selectValueAttribute || 'id'"
+              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
+              :searchable="datapoint.selectSearchAttributes"
+              :search-attributes="datapoint.selectSearchAttributes"
+              :multiple="datapoint.selectMultiple"
+          >
+            <template #empty>
+              Keine Optionen verfügbar
+            </template>
+          </USelectMenu>
+          <UTextarea
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+              class="flex-auto"
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+              v-else-if="datapoint.inputType === 'textarea'"
+              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+              rows="4"
+          />
+          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+            <UButton
+                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
+                variant="outline"
+                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+
+            />
+
+            <template #panel="{ close }">
+              <LazyDatePicker
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+              />
+            </template>
+          </UPopover>
+          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+            <UButton
+                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
+                variant="outline"
+                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+
+            />
+
+            <template #panel="{ close }">
+              <LazyDatePicker
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                  mode="datetime"
+              />
+            </template>
+          </UPopover>
+          <!-- TODO: DISABLED FOR TIPTAP -->
+          <Tiptap
+              v-else-if="datapoint.inputType === 'editor'"
+              @updateContent="(i) => contentChanged(i,datapoint)"
+              :preloadedContent="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
+          />
+
+          <UButton
+              v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
+              @click="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] = null"
+              variant="outline"
+              color="white"
+              icon="i-heroicons-x-mark"
+          />
+        </InputGroup>
+        <InputGroup class="w-full" v-else>
+          <UInput
+              class="flex-auto"
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+              v-if="['text','number'].includes(datapoint.inputType)"
+              v-model="item[datapoint.key]"
+              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+              :type="datapoint.inputType"
+              :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
+          >
+            <template #trailing v-if="datapoint.inputTrailing">
+              {{datapoint.inputTrailing}}
+            </template>
+          </UInput>
+          <UToggle
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+              v-else-if="datapoint.inputType === 'bool'"
+              v-model="item[datapoint.key]"
+              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+          />
+          <USelectMenu
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+              class="flex-auto"
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+              v-else-if="datapoint.inputType === 'select'"
+              v-model="item[datapoint.key]"
+              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+              :option-attribute="datapoint.selectOptionAttribute"
+              :value-attribute="datapoint.selectValueAttribute || 'id'"
+              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
+              :searchable="datapoint.selectSearchAttributes"
+              :search-attributes="datapoint.selectSearchAttributes"
+              :multiple="datapoint.selectMultiple"
+              searchable-placeholder="Suche..."
+          >
+            <template #empty>
+              Keine Optionen verfügbar
+            </template>
+          </USelectMenu>
+          <UTextarea
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+              class="flex-auto"
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+              v-else-if="datapoint.inputType === 'textarea'"
+              v-model="item[datapoint.key]"
+              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+              rows="4"
+          />
+          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+            <UButton
+                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
+                variant="outline"
+                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+            />
+
+            <template #panel="{ close }">
+              <LazyDatePicker
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                  v-model="item[datapoint.key]" @close="close"
+                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+              />
+            </template>
+          </UPopover>
+          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+            <UButton
+                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
+                variant="outline"
+                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+            />
+
+            <template #panel="{ close }">
+              <LazyDatePicker
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                  v-model="item[datapoint.key]"
+                  @close="close"
+                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                  mode="datetime"
+              />
+            </template>
+          </UPopover>
+          <!-- TODO: Color/Required for TipTap and MaterialComposing -->
+          <Tiptap
+              v-else-if="datapoint.inputType === 'editor'"
+              @updateContent="(i) => contentChanged(i,datapoint)"
+              :preloadedContent="item[datapoint.key].html"
+          />
+
+
+          <MaterialComposing
+            v-else-if="datapoint.inputType === 'materialComposing'"
+            :item="item"
+          />
+          <PersonalComposing
+              v-else-if="datapoint.inputType === 'personalComposing'"
+              :item="item"
+          />
+
+          <UButton
+              v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
+              @click="item[datapoint.key] = null"
+              variant="outline"
+              color="white"
+              icon="i-heroicons-x-mark"
+          />
+        </InputGroup>
+<!--        <div
+            v-if="profileStore.ownTenant.ownFields"
+        >
+          <UDivider
+              class="mt-3"
+          >Eigene Felder</UDivider>
+
+          <UFormGroup
+              v-for="field in profileStore.ownTenant.ownFields.contracts"
+              :key="field.key"
+              :label="field.label"
+          >
+            <UInput
+                v-if="field.type === 'text'"
+                v-model="item.ownFields[field.key]"
+            />
+            <USelectMenu
+                v-else-if="field.type === 'select'"
+                :options="field.options"
+                v-model="item.ownFields[field.key]"
+            />
+          </UFormGroup>
+        </div>-->
+
+      </UFormGroup>
+    </UForm>
+  </UDashboardPanelContent>
+</template>
+
+<style scoped>
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityList.vue b/frontend/components/EntityList.vue
new file mode 100644
index 0000000..b977b7a
--- /dev/null
+++ b/frontend/components/EntityList.vue
@@ -0,0 +1,203 @@
+<script setup>
+import {useTempStore} from "~/stores/temp.js";
+import FloatingActionButton from "~/components/mobile/FloatingActionButton.vue";
+import EntityTable from "~/components/EntityTable.vue";
+import EntityTableMobile from "~/components/EntityTableMobile.vue";
+
+const { has } = usePermission()
+
+
+const props = defineProps({
+  type: {
+    required: true,
+    type: String
+  },
+  items: {
+    required: true,
+    type: Array
+  },
+  platform: {
+    required: true,
+  },
+  loading: {
+    required: true,
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(["sort"]);
+
+
+const {type} = props
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push(`/standardEntity/${type}/create`)
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/standardEntity/${type}/show/${filteredRows.value[selectedItem.value].id}`)
+    }
+  },
+  'arrowdown': () => {
+    if(selectedItem.value < filteredRows.value.length - 1) {
+      selectedItem.value += 1
+    } else {
+      selectedItem.value = 0
+    }
+  },
+  'arrowup': () => {
+    if(selectedItem.value === 0) {
+      selectedItem.value = filteredRows.value.length - 1
+    } else {
+      selectedItem.value -= 1
+    }
+  }
+})
+
+
+const router = useRouter()
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+const tempStore = useTempStore()
+
+const dataType = dataStore.dataTypes[type]
+
+const selectedColumns = ref(tempStore.columns[type] ? tempStore.columns[type] : dataType.templateColumns.filter(i => !i.disabledInTable))
+const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
+
+const searchString = ref(tempStore.searchStrings[props.type] ||'')
+
+const clearSearchString = () => {
+  tempStore.clearSearchString(type)
+  searchString.value = ''
+}
+
+const selectableFilters = ref(dataType.filters.map(i => i.name))
+const selectedFilters = ref(dataType.filters.filter(i => i.default).map(i => i.name) || [])
+
+const filteredRows = computed(() => {
+
+  let tempItems = props.items.map(i => {
+    return {
+      ...i,
+      class: i.archived ? 'bg-red-500/50 dark:bg-red-400/50' : null
+    }
+  })
+
+  if(selectedFilters.value.length > 0) {
+    selectedFilters.value.forEach(filterName => {
+      let filter = dataType.filters.find(i => i.name === filterName)
+      tempItems = tempItems.filter(filter.filterFunction)
+    })
+  }
+
+  return useSearch(searchString.value, tempItems)
+})
+</script>
+
+<template>
+  <FloatingActionButton
+   :label="`+ ${dataType.labelSingle}`"
+   variant="outline"
+   v-if="platform === 'mobile'"
+   @click="router.push(`/standardEntity/${type}/create`)"
+  />
+  <UDashboardNavbar :title="dataType.label" :badge="filteredRows.length">
+    <template #toggle>
+      <div v-if="platform === 'mobile'"></div>
+    </template>
+    <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()"
+          @change="tempStore.modifySearchString(type,searchString)"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
+      <UButton
+        icon="i-heroicons-x-mark"
+        variant="outline"
+        color="rose"
+        @click="clearSearchString()"
+        v-if="searchString.length > 0"
+      />
+
+      <UButton
+          v-if="platform !== 'mobile' && has(`${type}-create`)/*&& useRole().checkRight(`${type}-create`)*/"
+          @click="router.push(`/standardEntity/${type}/create`)"
+          class="ml-3"
+      >+ {{dataType.labelSingle}}</UButton>
+    </template>
+  </UDashboardNavbar>
+
+
+  <UDashboardToolbar>
+    <template #left v-if="$slots['left-toolbar']">
+      <slot name="left-toolbar"/>
+    </template>
+
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+          multiple
+          class="hidden lg:block"
+          by="key"
+          :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
+          :ui-menu="{ width: 'min-w-max' }"
+          @change="tempStore.modifyColumns(type,selectedColumns)"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+      <USelectMenu
+          v-if="selectableFilters.length > 0"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          multiple
+          v-model="selectedFilters"
+          :options="selectableFilters"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
+          :ui-menu="{ width: 'min-w-max' }"
+      >
+        <template #label>
+          Filter
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+  <EntityTableMobile
+    v-if="platform === 'mobile'"
+    :type="props.type"
+    :columns="columns"
+    :rows="filteredRows"
+  />
+  <EntityTable
+    v-else
+    @sort="(i) => emit('sort',i)"
+    :type="props.type"
+    :columns="columns"
+    :rows="filteredRows"
+    :loading="props.loading"
+  />
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityModalButtons.vue b/frontend/components/EntityModalButtons.vue
new file mode 100644
index 0000000..b754b05
--- /dev/null
+++ b/frontend/components/EntityModalButtons.vue
@@ -0,0 +1,83 @@
+<script setup>
+import StandardEntityModal from "~/components/StandardEntityModal.vue";
+
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+  id: {
+    type: String,
+  },
+  createQuery: {
+    type: Object,
+    default: {}
+  },
+  buttonShow: {
+    type: Boolean,
+    default: true
+  },
+  buttonEdit: {
+    type: Boolean,
+    default: true
+  },
+  buttonCreate: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(["returnData"])
+
+
+const modal = useModal()
+
+
+
+</script>
+
+<template>
+  <UButton
+      variant="outline"
+      class="w-25 ml-2"
+      v-if="props.id && props.buttonShow"
+      icon="i-heroicons-eye"
+      @click="modal.open(StandardEntityModal, {
+        id: props.id,
+        type: props.type,
+        mode: 'show',
+      })"
+  />
+  <UButton
+      variant="outline"
+      class="w-25 ml-2"
+      v-if="props.id && props.buttonEdit"
+      icon="i-heroicons-pencil-solid"
+      @click="modal.open(StandardEntityModal, {
+        id: props.id,
+        type: props.type,
+        mode: 'edit',
+        onReturnData(data) {
+          emit('returnData', data)
+        }
+      })"
+  />
+  <UButton
+      variant="outline"
+      class="w-25 ml-2"
+      v-if="!props.id && props.buttonCreate"
+      icon="i-heroicons-plus"
+      @click="modal.open(StandardEntityModal, {
+        type: props.type,
+        mode: 'create',
+        createQuery: props.createQuery,
+        onReturnData(data) {
+          emit('returnData', data)
+        }
+      })"
+  />
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityShow.vue b/frontend/components/EntityShow.vue
new file mode 100644
index 0000000..815dc7f
--- /dev/null
+++ b/frontend/components/EntityShow.vue
@@ -0,0 +1,367 @@
+<script setup>
+
+import EntityShowSubTimes from "~/components/EntityShowSubTimes.vue";
+
+const props = defineProps({
+  type: {
+    required: true,
+    type: String
+  },
+  item: {
+    required: true,
+    type: Object
+  },
+  inModal: {
+    type: Boolean,
+  },
+  platform: {
+    type: String,
+  }
+})
+
+const {type} = props
+
+defineShortcuts({
+  'backspace': () => {
+    router.back()
+  },
+  'arrowleft': () => {
+    if(openTab.value > 0){
+      openTab.value -= 1
+      router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
+    }
+  },
+  'arrowright': () => {
+    if(openTab.value < dataType.showTabs.length - 1) {
+      openTab.value += 1
+      router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
+    }
+  },
+})
+
+const emit = defineEmits(["updateNeeded"])
+
+const router = useRouter()
+const route = useRoute()
+const dataStore = useDataStore()
+const modal = useModal()
+const auth = useAuthStore()
+
+const dataType = dataStore.dataTypes[type]
+
+const openTab = ref(route.query.tabIndex || 0)
+
+
+
+const getAvailableQueryStringData = (keys) => {
+  let returnString =""
+
+  function addParam (key,value) {
+    if(returnString.length  === 0) {
+      returnString += `${key}=${value}`
+    } else {
+      returnString += `&${key}=${value}`
+
+    }
+  }
+
+
+  if(props.item.customer) {
+    addParam("customer", props.item.customer.id)
+  } else if(type === "customers") {
+    addParam("customer", props.item.id)
+  }
+
+  if(props.item.project) {
+    addParam("project", props.item.project.id)
+  } else if(type === "projects") {
+    addParam("project", props.item.id)
+  }
+
+  if(props.item.plant) {
+    addParam("plant", props.item.plant.id)
+  } else if(type === "plants") {
+    addParam("plant", props.item.id)
+  }
+
+  if(keys) {
+    Object.keys(keys).forEach(key => {
+      addParam(key, keys[key])
+    })
+  }
+
+  return returnString
+
+}
+
+const onTabChange = (index) => {
+  router.push(`${router.currentRoute.value.path}?tabIndex=${index}`)
+}
+
+const changePinned = async () => {
+  let newPins = []
+
+  if(auth.profile.pinned_on_navigation.find(i => i.datatype === type && i.id === props.item.id)){
+    //Remove Pin
+
+    newPins = auth.profile.pinned_on_navigation.filter(i => !(i.datatype === type && i.id === props.item.id))
+  } else {
+    //Add Pin
+
+    newPins = [
+        ...auth.profile.pinned_on_navigation,
+      {
+        id: props.item.id,
+        icon: "i-heroicons-document",
+        type: "standardEntity",
+        datatype: type,
+        label: props.item[dataType.templateColumns.find(i => i.title).key]
+      }
+    ]
+  }
+
+  const res = await useNuxtApp().$api(`/api/user/${auth.user.id}/profile`,{
+    method: "PUT",
+    body: {
+      data: {
+        pinned_on_navigation: newPins
+      }
+    }
+  })
+
+  await auth.fetchMe()
+
+
+
+}
+
+</script>
+
+<template>
+  <UDashboardNavbar
+      v-if="props.inModal"
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #center>
+      <h1
+          v-if="item"
+          :class="['text-xl','font-medium']"
+      >{{item ? `${dataType.labelSingle}${props.item[dataType.templateColumns.find(i => i.title).key] ? ': ' + props.item[dataType.templateColumns.find(i => i.title).key] : ''}`: '' }}</h1>
+    </template>
+    <template #right>
+      <UButton
+          @click="modal.close()"
+          color="red"
+          class="ml-2"
+          icon="i-heroicons-x-mark"
+          variant="outline"
+      />
+    </template>
+  </UDashboardNavbar>
+  <UDashboardNavbar
+      v-else-if="!props.inModal && platform !== 'mobile'"
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.back()/*router.push(`/standardEntity/${type}`)*/"
+      >
+          Zurück
+      </UButton>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/standardEntity/${type}`)"
+      >
+          Übersicht
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="item"
+          :class="['text-xl','font-medium']"
+      >{{item ? `${dataType.labelSingle}${props.item[dataType.templateColumns.find(i => i.title).key] ? ': ' + props.item[dataType.templateColumns.find(i => i.title).key] : ''}`: '' }}</h1>
+    </template>
+    <template #right>
+      <UButton
+          v-if="auth.profile"
+        :variant="auth.profile?.pinned_on_navigation.find(i => i.datatype === type && i.id === props.item.id) ? 'solid' : 'outline'"
+        icon="i-heroicons-star"
+        color="yellow"
+        @click="changePinned"
+      ></UButton>
+      <UButton
+          @click="router.push(`/standardEntity/${type}/edit/${item.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardNavbar
+      v-else-if="!props.inModal && platform === 'mobile'"
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #toggle>
+      <div></div>
+    </template>
+    <template #center>
+      <h1
+          v-if="item"
+          :class="['text-xl','font-medium','text-truncate']"
+      >{{item ? `${dataType.labelSingle}${props.item[dataType.templateColumns.find(i => i.title).key] ? ': ' + props.item[dataType.templateColumns.find(i => i.title).key] : ''}`: '' }}</h1>
+    </template>
+    <template #right>
+      <UButton
+          @click="router.push(`/standardEntity/${type}/edit/${item.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UTabs
+      :items="dataType.showTabs"
+      v-if="props.item.id && platform !== 'mobile'"
+      class="p-5"
+      v-model="openTab"
+      @change="onTabChange"
+  >
+    <template #item="{item:tab}">
+      <div v-if="tab.label === 'Informationen'" class="flex flex-row">
+
+        <EntityShowSubInformation
+            :top-level-type="type"
+            :item="props.item"
+            class="w-1/2 mr-5"
+            :platform="platform"
+        />
+
+        <EntityShowSubHistoryDisplay
+            :top-level-type="type"
+            :item="props.item"
+            class="w-1/2"
+            :platform="platform"
+        />
+      </div>
+
+      <EntityShowSubFiles
+          :item="props.item"
+          :query-string-data="getAvailableQueryStringData()"
+          v-else-if="tab.label === 'Dateien'"
+          :top-level-type="type"
+          type="files"
+          @updateNeeded="emit('updateNeeded')"
+          :platform="platform"
+      />
+      <!-- TODO Change Active Phase      -->
+      <EntityShowSubPhases
+          :item="props.item"
+          :top-level-type="type"
+          v-else-if="tab.label === 'Phasen'"
+          :query-string-data="getAvailableQueryStringData()"
+          @updateNeeded="emit('updateNeeded')"
+          :platform="platform"
+      />
+     <EntityShowSubCreatedDocuments
+          :item="props.item"
+          :top-level-type="type"
+          v-else-if="tab.label === 'Ausgangsbelege'"
+          :query-string-data="getAvailableQueryStringData()"
+          :platform="platform"
+      />
+       <EntityShowSubCostCentreReport
+          :top-level-type="type"
+          :item="props.item"
+          v-else-if="tab.label === 'Auswertung Kostenstelle'"
+          :platform="platform"
+      />
+      <EntityShowSubOwnAccountsStatements
+          :top-level-type="type"
+          :item="props.item"
+          v-else-if="tab.label === 'Buchungen'"
+          :platform="platform"
+      />
+      <EntityShowSubTimes
+          :top-level-type="type"
+          :item="props.item"
+          v-else-if="tab.label === 'Zeiten'"
+          :platform="platform"
+      />
+      <EntityShowSub
+          :item="props.item"
+          :query-string-data="getAvailableQueryStringData()"
+          :tab-label="tab.label"
+          :top-level-type="type"
+          :type="tab.key"
+          v-else
+          :platform="platform"
+      />
+    </template>
+  </UTabs>
+  <UDashboardPanelContent v-else style="overflow-x: hidden;">
+    <div v-for="sub in dataType.showTabs" :key="sub.key">
+      <div v-if="sub.label === 'Informationen'">
+
+        <EntityShowSubInformation
+            :top-level-type="type"
+            :item="props.item"
+            :platform="platform"
+        />
+
+        <EntityShowSubHistoryDisplay
+            :top-level-type="type"
+            :item="props.item"
+            :platform="platform"
+        />
+      </div>
+
+      <EntityShowSubFiles
+          :item="props.item"
+          :query-string-data="getAvailableQueryStringData()"
+          v-else-if="sub.label === 'Dateien'"
+          :top-level-type="type"
+          type="files"
+          @updateNeeded="emit('updateNeeded')"
+          :platform="platform"
+      />
+      <!--<EntityShowSubPhases
+          :item="props.item"
+          :top-level-type="type"
+          v-else-if="sub.label === 'Phasen'"
+          :query-string-data="getAvailableQueryStringData()"
+          @updateNeeded="emit('updateNeeded')"
+          :platform="platform"
+      />
+      <EntityShowSubCreatedDocuments
+          :item="props.item"
+          :top-level-type="type"
+          v-else-if="sub.label === 'Ausgangsbelege'"
+          :query-string-data="getAvailableQueryStringData()"
+          :platform="platform"
+      />
+      <EntityShowSubCostCentreReport
+          :top-level-type="type"
+          :item="props.item"
+          v-else-if="sub.label === 'Auswertung Kostenstelle'"
+          :platform="platform"
+      />
+
+      <EntityShowSub
+          :item="props.item"
+          :query-string-data="getAvailableQueryStringData()"
+          :tab-label="sub.label"
+          :top-level-type="type"
+          v-else
+          :platform="platform"
+      />-->
+    </div>
+
+  </UDashboardPanelContent>
+
+</template>
+
+<style scoped>
+
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityShowSub.vue b/frontend/components/EntityShowSub.vue
new file mode 100644
index 0000000..e788fee
--- /dev/null
+++ b/frontend/components/EntityShowSub.vue
@@ -0,0 +1,128 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  tabLabel: {
+    type: String,
+    required: true
+  },
+  type: {
+    type: String,
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+let type = ref("")
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+
+const router = useRouter()
+
+let dataType = null
+
+const selectedColumns = ref(null)
+const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
+
+const loaded = ref(false)
+
+const setup = () => {
+
+  if(!props.type && props.tabLabel ) {
+    if(props.tabLabel === "Aufgaben") {
+      type.value = "tasks"
+    } else if(props.tabLabel === "Projekte") {
+      type.value = "projects"
+    } else if(props.tabLabel === "Termine") {
+      type.value = "events"
+    } else if(props.tabLabel === "Objekte") {
+      type.value = "plants"
+    } else if(props.tabLabel === "Ansprechpartner") {
+      type.value = "contacts"
+    } else if(props.tabLabel === "Verträge") {
+      type.value = "contracts"
+    } else if(props.tabLabel === "Überprüfungen") {
+      type.value = "checks"
+    }
+  } else {
+    type.value = props.type
+  }
+
+  dataType = dataStore.dataTypes[type.value]
+
+  selectedColumns.value = tempStore.columns[type.value] ? tempStore.columns[type.value] : dataType.templateColumns.filter(i => !i.disabledInTable)
+
+  loaded.value = true
+}
+
+setup()
+
+
+</script>
+
+<template>
+  <UCard class="mt-5" v-if="loaded" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>{{dataType.label}}</span>
+    </template>
+    <Toolbar>
+      <UButton
+          @click="router.push(`/standardEntity/${type}/create?${props.queryStringData}`)"
+      >
+        + {{dataType.labelSingle}}
+      </UButton>
+      <UButton
+          v-if="props.topLevelType === 'customers' && type === 'plants'"
+          @click="router.push(`/standardEntity/plants/create?${props.queryStringData}&name=${encodeURIComponent(`${props.item.infoData.street}, ${props.item.infoData.zip} ${props.item.infoData.city}`)}`)"
+      >
+        + Kundenadresse als Objekt
+      </UButton>
+
+      <template #right>
+        <USelectMenu
+            v-model="selectedColumns"
+            icon="i-heroicons-adjustments-horizontal-solid"
+            :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+            multiple
+            class="hidden lg:block"
+            by="key"
+            :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
+            :ui-menu="{ width: 'min-w-max' }"
+            @change="tempStore.modifyColumns(type,selectedColumns)"
+        >
+          <template #label>
+            Spalten
+          </template>
+        </USelectMenu>
+      </template>
+
+    </Toolbar>
+    <div class="scroll" style="height: 70vh">
+      <EntityTable
+          :type="type"
+          :columns="columns"
+          :rows="props.item[type]"
+          style
+      />
+    </div>
+
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityShowSubCostCentreReport.vue b/frontend/components/EntityShowSubCostCentreReport.vue
new file mode 100644
index 0000000..b290392
--- /dev/null
+++ b/frontend/components/EntityShowSubCostCentreReport.vue
@@ -0,0 +1,35 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Auswertung</span>
+    </template>
+    <costcentre-display :item="props.item"/>
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityShowSubCreatedDocuments.vue b/frontend/components/EntityShowSubCreatedDocuments.vue
new file mode 100644
index 0000000..3c5d26f
--- /dev/null
+++ b/frontend/components/EntityShowSubCreatedDocuments.vue
@@ -0,0 +1,314 @@
+<script setup>
+
+import dayjs from "dayjs";
+import {useSum} from "~/composables/useSum.js";
+defineShortcuts({
+  /*'/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },*/
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/standardEntity/${props.topLevelType}/show/${props.item.createddocuments.value[selectedItem.value].id}`)
+    }
+  },
+  'arrowdown': () => {
+    if(selectedItem.value < props.item.createddocuments.length - 1) {
+      selectedItem.value += 1
+    } else {
+      selectedItem.value = 0
+    }
+  },
+  'arrowup': () => {
+    if(selectedItem.value === 0) {
+      selectedItem.value = props.item.createddocuments.length - 1
+    } else {
+      selectedItem.value -= 1
+    }
+  }
+})
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  type: {
+    type: String,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+
+const router = useRouter()
+
+const createddocuments = ref([])
+
+const setup = async () => {
+  //createddocuments.value = (await useSupabaseSelect("createddocuments")).filter(i => !i.archived)
+  createddocuments.value = (await useEntities("createddocuments").select()).filter(i => !i.archived)
+}
+setup()
+
+const templateColumns = [
+  {
+    key: "reference",
+    label: "Referenz"
+
+
+  },
+  {
+    key: 'type',
+    label: "Typ"
+  },{
+    key: 'state',
+    label: "Status"
+  },{
+    key: 'paid',
+    label: "Bezahlt"
+  },{
+    key: 'amount',
+    label: "Betrag"
+  },
+  {
+    key: "date",
+    label: "Datum"
+  },
+  {
+    key: "dueDate",
+    label: "Fällig"
+  }
+]
+const selectedColumns = ref(tempStore.columns["createddocuments"] ? tempStore.columns["createddocuments"] : templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.find(i => i.key === column.key)))
+
+const selectedItem = ref(0)
+
+const getAvailableQueryStringData = (keys) => {
+  let returnString = props.queryStringData
+
+  function addParam (key,value) {
+    if(returnString.length  === 0) {
+      returnString += `${key}=${value}`
+    } else {
+      returnString += `&${key}=${value}`
+    }
+  }
+
+  if(keys) {
+    Object.keys(keys).forEach(key => {
+      addParam(key, keys[key])
+    })
+  }
+
+  return returnString
+
+}
+
+const invoiceDeliveryNotes = () => {
+  router.push(`/createDocument/edit?type=invoices&loadMode=deliveryNotes&linkedDocuments=[${props.item.createddocuments.filter(i => i.type === "deliveryNotes").map(i => i.id)}]`)
+}
+
+const showFinalInvoiceConfig = ref(false)
+const referenceDocument = ref(null)
+const advanceInvoicesToAdd = ref([])
+const invoiceAdvanceInvoices = () => {
+  router.push(`/createDocument/edit?type=invoices&loadMode=finalInvoice&linkedDocuments=[${[referenceDocument.value, ... advanceInvoicesToAdd.value]}]`)
+}
+
+const selectItem = (item) => {
+  console.log(item)
+
+  if(item.state === "Entwurf"){
+    router.push(`/createDocument/edit/${item.id}`)
+  } else if(item.state !== "Entwurf") {
+    router.push(`/createDocument/show/${item.id}`)
+  }
+}
+
+</script>
+
+<template>
+  <UCard class="mt-5" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Ausgangsbelege</span>
+    </template>
+    <Toolbar>
+      <!-- TODO Rendering when Screen is too small      -->
+      <UButton
+          @click="invoiceDeliveryNotes"
+          v-if="props.topLevelType === 'projects'"
+      >
+        Lieferscheine abrechnen
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'quotes'})}`)"
+      >
+        + Angebot
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'confirmationOrders'})}`)"
+      >
+        + Auftragsbestätigung
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'deliveryNotes'})}`)"
+      >
+        + Lieferschein
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'advanceInvoices'})}`)"
+      >
+        + Abschlagsrechnung
+      </UButton>
+      <UButton
+          @click="showFinalInvoiceConfig = true"
+          v-if="props.topLevelType === 'projects'"
+          :disabled="!props.item.createddocuments?.filter(i => !i.archived && i.type === 'advanceInvoices').length > 0"
+      >
+        + Schlussrechnung
+      </UButton>
+      <UModal
+          prevent-close
+          v-model="showFinalInvoiceConfig"
+      >
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                Schlussrechnung konfigurieren
+              </h3>
+              <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+            </div>
+          </template>
+
+          <UFormGroup
+              label="Rechnungsvorlage"
+          >
+            <USelectMenu
+                :options="props.item.createddocuments.filter(i => ['confirmationOrders','quotes'].includes(i.type))"
+                value-attribute="id"
+                option-attribute="documentNumber"
+                v-model="referenceDocument"
+            />
+          </UFormGroup>
+
+          <UFormGroup
+              label="Abschlagsrechnungen"
+          >
+            <USelectMenu
+                :options="props.item.createddocuments.filter(i => ['advanceInvoices'].includes(i.type))"
+                multiple
+                value-attribute="id"
+                option-attribute="documentNumber"
+                v-model="advanceInvoicesToAdd"
+            />
+          </UFormGroup>
+
+          <template #footer>
+            <UButton
+                @click="invoiceAdvanceInvoices"
+            >
+              Weiter
+            </UButton>
+          </template>
+        </UCard>
+      </UModal>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'invoices'})}`)"
+      >
+        + Rechnung
+      </UButton>
+
+      <template #right>
+        <USelectMenu
+            v-model="selectedColumns"
+            icon="i-heroicons-adjustments-horizontal-solid"
+            :options="templateColumns"
+            multiple
+            class="hidden lg:block"
+            by="key"
+            @change="tempStore.modifyColumns('createddocuments',selectedColumns)"
+        >
+          <template #label>
+            Spalten
+          </template>
+        </USelectMenu>
+      </template>
+    </Toolbar>
+    <UTable
+        :rows="props.item.createddocuments.filter(i => !i.archived)"
+        :columns="columns"
+        class="w-full"
+        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+        @select="selectItem"
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+        style="height: 70vh"
+    >
+      <template #type-data="{row}">
+        {{dataStore.documentTypesForCreation[row.type].labelSingle}}
+      </template>
+      <template #state-data="{row}">
+        <span
+            v-if="row.state === 'Entwurf'"
+            class="text-rose-500"
+        >
+          {{row.state}}
+        </span>
+        <span
+            v-if="row.state === 'Gebucht'"
+            class="text-cyan-500"
+        >
+          {{row.state}}
+        </span>
+        <span
+            v-if="row.state === 'Abgeschlossen'"
+            class="text-primary-500"
+        >
+          {{row.state}}
+        </span>
+      </template>
+      <template #paid-data="{row}">
+        <div v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht'">
+          <span v-if="useSum().getIsPaid(row,createddocuments)" class="text-primary-500">Bezahlt</span>
+          <span v-else class="text-rose-600">Offen</span>
+        </div>
+      </template>
+      <template #reference-data="{row}">
+        <span v-if="row === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span>
+        <span v-else>{{row.documentNumber}}</span>
+      </template>
+      <template #date-data="{row}">
+        <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
+        <span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span>
+      </template>
+      <template #dueDate-data="{row}">
+        <span v-if="row.paymentDays && ['invoices','advanceInvoices'].includes(row.type)" >{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span>
+      </template>
+      <template #amount-data="{row}">
+        <span v-if="row.type !== 'deliveryNotes'">{{useCurrency(useSum().getCreatedDocumentSum(row, createddocuments))}}</span>
+      </template>
+    </UTable>
+
+
+  </UCard>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityShowSubFiles.vue b/frontend/components/EntityShowSubFiles.vue
new file mode 100644
index 0000000..b4d1d74
--- /dev/null
+++ b/frontend/components/EntityShowSubFiles.vue
@@ -0,0 +1,134 @@
+<script setup>
+const props = defineProps({
+  item: { type: Object, required: true },
+  type: { type: String, required: true },
+  topLevelType: { type: String, required: true },
+  platform: { type: String, required: true }
+})
+
+const emit = defineEmits(["updateNeeded"])
+const files = useFiles()
+
+const availableFiles = ref([])
+const activeFile = ref(null)
+const showViewer = ref(false)
+
+const setup = async () => {
+  if (props.item.files?.length > 0) {
+    availableFiles.value =
+        (await files.selectSomeDocuments(props.item.files.map((f) => f.id))) || []
+  }
+}
+setup()
+
+// Datei öffnen (Mobile/Tablet)
+function openFile(file) {
+  activeFile.value = file
+  showViewer.value = true
+}
+
+function closeViewer() {
+  showViewer.value = false
+  activeFile.value = null
+}
+
+// PDF oder Bild?
+function isPdf(file) {
+  return file.path.includes("pdf")
+}
+function isImage(file) {
+  return file.mimetype?.startsWith("image/")
+}
+</script>
+
+<template>
+  <UCard class="mt-5" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header>
+      <span>Dateien</span>
+    </template>
+
+    <!-- Upload -->
+    <Toolbar>
+      <DocumentUpload
+          :type="props.topLevelType.substring(0, props.topLevelType.length - 1)"
+          :element-id="props.item.id"
+          @uploadFinished="emit('updateNeeded')"
+      />
+    </Toolbar>
+
+    <!-- 📱 MOBILE: File Cards -->
+    <div v-if="props.platform === 'mobile'" class="space-y-3 mt-3">
+      <div
+          v-for="file in availableFiles"
+          :key="file.id"
+          class="p-4 border rounded-xl bg-gray-50 dark:bg-gray-900 flex items-center justify-between active:scale-95 transition cursor-pointer"
+          @click="openFile(file)"
+      >
+        <div>
+          <p class="font-semibold truncate max-w-[200px]">{{ file?.path?.split("/").pop() }}</p>
+        </div>
+
+        <UIcon
+            name="i-heroicons-chevron-right-20-solid"
+            class="w-5 h-5 text-gray-400"
+        />
+      </div>
+
+      <UAlert
+          v-if="!availableFiles.length"
+          icon="i-heroicons-x-mark"
+          title="Keine Dateien verfügbar"
+      />
+    </div>
+
+    <!-- 🖥️ DESKTOP: Classic List -->
+    <template v-else>
+      <DocumentList
+          :key="props.item.files.length"
+          :documents="availableFiles"
+          v-if="availableFiles.length > 0"
+      />
+
+      <UAlert v-else icon="i-heroicons-x-mark" title="Keine Dateien verfügbar" />
+    </template>
+  </UCard>
+
+  <!-- 📱 PDF / IMG Viewer Slideover -->
+  <UModal v-model="showViewer" side="bottom" class="h-[100dvh]" fullscreen>
+    <!-- Header -->
+    <div class="p-4 border-b flex justify-between items-center flex-shrink-0">
+      <h3 class="font-bold truncate max-w-[70vw]">{{ activeFile?.path?.split("/").pop() }}</h3>
+      <UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeViewer" />
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 overflow-y-auto m-2">
+      <!-- PDF -->
+      <div v-if="activeFile && isPdf(activeFile)" class="h-full">
+        <PDFViewer
+            :no-controls="true"
+            :file-id="activeFile.id"
+            location="fileviewer-mobile"
+            class="h-full"
+        />
+      </div>
+
+      <!-- IMAGE -->
+      <div
+          v-else-if="activeFile && isImage(activeFile)"
+          class="p-4 flex justify-center"
+      >
+        <img
+            :src="activeFile.url"
+            class="max-w-full max-h-[80vh] rounded-lg shadow"
+        />
+      </div>
+
+      <UAlert
+          v-else
+          title="Nicht unterstützter Dateityp"
+          icon="i-heroicons-exclamation-triangle"
+      />
+    </div>
+  </UModal>
+</template>
diff --git a/frontend/components/EntityShowSubHistoryDisplay.vue b/frontend/components/EntityShowSubHistoryDisplay.vue
new file mode 100644
index 0000000..5b5ec89
--- /dev/null
+++ b/frontend/components/EntityShowSubHistoryDisplay.vue
@@ -0,0 +1,42 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+const dataStore = useDataStore()
+
+const dataType = dataStore.dataTypes[props.topLevelType]
+
+</script>
+
+<template>
+  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <HistoryDisplay
+        :type="props.topLevelType"
+        v-if="props.item.id"
+        :element-id="props.item.id"
+        render-headline
+    />
+<!--TODO Workaround für die Höhe finden? Evt unterseite oder Modal oder ganz nach unten    -->
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityShowSubInformation.vue b/frontend/components/EntityShowSubInformation.vue
new file mode 100644
index 0000000..811a0eb
--- /dev/null
+++ b/frontend/components/EntityShowSubInformation.vue
@@ -0,0 +1,77 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+
+const router = useRouter()
+
+const dataType = dataStore.dataTypes[props.topLevelType]
+
+// const selectedColumns = ref(tempStore.columns[props.topLevelType] ? tempStore.columns[props.topLevelType] : dataType.templateColumns.filter(i => !i.disabledInTable))
+// const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
+
+</script>
+
+<template>
+  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Informationen</span>
+    </template>
+    <UAlert
+        v-if="props.item.archived"
+        color="rose"
+        variant="outline"
+        :title="`${dataType.labelSingle} archiviert`"
+        icon="i-heroicons-archive-box"
+        class="mb-5"
+    />
+    <div class="text-wrap">
+      <table class="w-full">
+        <tbody>
+        <tr
+            v-for="datapoint in dataType.templateColumns"
+        >
+          <td>{{datapoint.label}}:</td>
+          <td>
+            <component v-if="datapoint.component" :is="datapoint.component" :row="props.item" :in-show="true"></component>
+            <div v-else>
+              <span v-if="datapoint.key.includes('.')">{{props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]}}{{datapoint.unit}}</span>
+              <span v-else>{{props.item[datapoint.key]}} {{datapoint.unit}}</span>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+
+      </table>
+    </div>
+
+  </UCard>
+
+</template>
+
+<style scoped>
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityShowSubOwnAccountsStatements.vue b/frontend/components/EntityShowSubOwnAccountsStatements.vue
new file mode 100644
index 0000000..027d7a0
--- /dev/null
+++ b/frontend/components/EntityShowSubOwnAccountsStatements.vue
@@ -0,0 +1,108 @@
+<script setup>
+import dayjs from "dayjs";
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const profileStore = useProfileStore()
+
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+const statementallocations = ref([])
+const incominginvoices = ref([])
+
+const setup = async () => {
+  //statementallocations.value = (await supabase.from("statementallocations").select("*, bs_id(*)").eq("account", route.params.id).eq("tenant",profileStore.currentTenant).order("created_at",{ascending: true})).data
+  //incominginvoices.value = (await useSupabaseSelect("incominginvoices", "*, vendor(*)")).filter(i => i.accounts.find(x => x.account == route.params.id))
+}
+
+setup()
+
+const selectAllocation = (allocation) => {
+  if(allocation.type === "statementallocation") {
+    router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
+  } else if(allocation.type === "incominginvoice") {
+    router.push(`/incominginvoices/show/${allocation.incominginvoiceid}`)
+  }
+}
+
+const renderedAllocations = computed(() => {
+
+  let tempstatementallocations = props.item.statementallocations.map(i => {
+    return {
+      ...i,
+      type: "statementallocation",
+      date: i.bs_id.date,
+      partner: i.bs_id ? (i.bs_id.debName ? i.bs_id.debName : (i.bs_id.credName ? i.bs_id.credName : '')) : ''
+    }
+  })
+
+
+  /*let incominginvoicesallocations = []
+
+  incominginvoices.value.forEach(i => {
+
+    incominginvoicesallocations.push(...i.accounts.filter(x => x.account == route.params.id).map(x => {
+      return {
+        ...x,
+        incominginvoiceid: i.id,
+        type: "incominginvoice",
+        amount: x.amountGross ? x.amountGross : x.amountNet,
+        date: i.date,
+        partner: i.vendor.name,
+        description: i.description,
+        color: i.expense ? "red" : "green"
+      }
+    }))
+  })*/
+
+  return [...tempstatementallocations/*, ... incominginvoicesallocations*/]
+})
+
+
+</script>
+
+<template>
+  <UCard class="mt-5">
+    <UTable
+        v-if="props.item.statementallocations"
+        :rows="renderedAllocations"
+        :columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]"
+        @select="(i) => selectAllocation(i)"
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+    >
+      <template #amount-data="{row}">
+        <span class="text-right text-rose-600" v-if="row.amount < 0 || row.color === 'red'">{{useCurrency(row.amount)}}</span>
+        <span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span>
+        <span v-else>{{useCurrency(row.amount)}}</span>
+      </template>
+      <template #date-data="{row}">
+        {{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
+      </template>
+      <template #description-data="{row}">
+        {{row.description ? row.description : ''}}
+      </template>
+    </UTable>
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityShowSubPhases.vue b/frontend/components/EntityShowSubPhases.vue
new file mode 100644
index 0000000..9204df3
--- /dev/null
+++ b/frontend/components/EntityShowSubPhases.vue
@@ -0,0 +1,169 @@
+<script setup>
+
+import dayjs from "dayjs";
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(["updateNeeded"]);
+
+const router = useRouter()
+const profileStore = useProfileStore()
+const supabase = useSupabaseClient()
+
+const renderedPhases = computed(() => {
+  if(props.topLevelType === "projects" && props.item.phases) {
+    return props.item.phases.map((phase,index,array) => {
+
+      let isAvailable = false
+
+      if(phase.active) {
+        isAvailable = true
+      } else if(index > 0 && array[index-1].active ){
+        isAvailable = true
+      } else if(index > 1 && array[index-1].optional && array[index-2].active){
+        isAvailable = true
+      } else if(array.findIndex(i => i.active) > index) {
+        isAvailable = true
+      } else if(phase.label === "Abgeschlossen") {
+        isAvailable = true
+      }
+
+
+      return {
+        ...phase,
+        label: phase.optional ? `${phase.label}(optional)`: phase.label,
+        disabled: !isAvailable,
+        defaultOpen: phase.active ? true : false
+      }
+    })
+  } else {
+    return []
+  }
+})
+
+const changeActivePhase = async (key) => {
+  let item = await useEntities("projects").selectSingle(props.item.id,'*')
+
+  let phaseLabel = ""
+
+  item.phases = item.phases.map(p => {
+    if(p.active) p.active = false
+
+    if(p.key === key) {
+      p.active = true
+      p.activated_at = dayjs().format()
+      p.activated_by = profileStore.activeProfile.id
+      phaseLabel = p.label
+    }
+
+    return p
+  })
+
+  const res = await useEntities("projects").update(item.id, {phases:item.phases,active_phase: item.phases.find(i => i.active).label})
+
+  //const {error:updateError} = await supabase.from("projects").update({phases: item.phases}).eq("id",item.id)
+
+
+
+  /*const {error} = await supabase.from("historyitems").insert({
+    createdBy: profileStore.activeProfile.id,
+    tenant: profileStore.currentTenant,
+    text: `Aktive Phase zu "${phaseLabel}" gewechselt`,
+    project: item.id
+  })*/
+
+  emit("updateNeeded")
+
+}
+
+
+</script>
+
+<template>
+  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Phasen</span>
+    </template>
+    <UAccordion
+        :items="renderedPhases"
+    >
+      <template #default="{item,index,open}">
+        <UButton
+            variant="ghost"
+            :color="item.active ? 'primary' : 'white'"
+            class="mb-1"
+            :disabled="true"
+        >
+          <template #leading>
+            <div class="w-6 h-6  flex items-center justify-center -my-1">
+              <UIcon :name="item.icon" class="w-4 h-4 " />
+            </div>
+          </template>
+
+          <span class="truncate"> {{item.label}}</span>
+
+          <template #trailing>
+            <UIcon
+                name="i-heroicons-chevron-right-20-solid"
+                class="w-5 h-5 ms-auto transform transition-transform duration-200"
+                :class="[open && 'rotate-90']"
+            />
+          </template>
+
+        </UButton>
+      </template>
+      <template #item="{item, index}">
+        <UCard class="mx-5">
+          <template #header>
+            <span class="dark:text-white text-black">{{item.label}}</span>
+          </template>
+          <InputGroup>
+            <!-- TODO: Reactive Change Phase                  -->
+            <UButton
+                v-if="!item.activated_at && index !== 0 "
+                @click="changeActivePhase(item.key)"
+            >
+              Phase aktivieren
+            </UButton>
+            <UButton
+                v-if="item.active"
+                v-for="button in item.quickactions"
+                @click="router.push(`${button.link}&${props.queryStringData}`)"
+            >
+              {{button.label}}
+            </UButton>
+          </InputGroup>
+
+          <div>
+            <p v-if="item.activated_at" class="dark:text-white text-black">Aktiviert am: {{dayjs(item.activated_at).format("DD.MM.YY HH:mm")}} Uhr</p>
+            <p v-if="item.activated_by" class="dark:text-white text-black">Aktiviert durch: {{profileStore.getProfileById(item.activated_by).fullName}}</p>
+            <p v-if="item.description" class="dark:text-white text-black">Beschreibung: {{item.description}}</p>
+          </div>
+        </UCard>
+
+
+      </template>
+    </UAccordion>
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityShowSubTimes.vue b/frontend/components/EntityShowSubTimes.vue
new file mode 100644
index 0000000..0ca3c7e
--- /dev/null
+++ b/frontend/components/EntityShowSubTimes.vue
@@ -0,0 +1,117 @@
+<script setup>
+import dayjs from "dayjs";
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const profileStore = useProfileStore()
+
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+
+const setup = async () => {
+
+}
+
+setup()
+
+const columns = [
+  {
+    key:"state",
+    label: "Status",
+  },
+  {
+    key: "user",
+    label: "Benutzer",
+  },
+  {
+    key:"startDate",
+    label:"Start",
+  },
+  {
+    key: "endDate",
+    label: "Ende",
+  },
+  {
+    key: "duration",
+    label: "Dauer",
+  },
+  {
+    key:"type",
+    label:"Typ",
+  },
+  {
+    key: "project",
+    label: "Projekt",
+  },
+  {
+    key: "notes",
+    label: "Notizen",
+  }
+]
+
+</script>
+
+<template>
+  <UCard class="mt-5">
+    <UTable
+        class="mt-3"
+        :columns="columns"
+        :rows="props.item.times"
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+    >
+      <template #state-data="{row}">
+                <span
+                    v-if="row.state === 'Entwurf'"
+                    class="text-rose-500"
+                >{{row.state}}</span>
+        <span
+            v-if="row.state === 'Eingereicht'"
+            class="text-cyan-500"
+        >{{row.state}}</span>
+        <span
+            v-if="row.state === 'Bestätigt'"
+            class="text-primary-500"
+        >{{row.state}}</span>
+      </template>
+      <template #user-data="{row}">
+        {{row.profile ? row.profile.fullName : "" }}
+      </template>
+
+      <template #startDate-data="{row}">
+        {{dayjs(row.startDate).format("DD.MM.YY HH:mm")}}
+      </template>
+      <template #endDate-data="{row}">
+        {{dayjs(row.endDate).format("DD.MM.YY HH:mm")}}
+      </template>
+      <template #duration-data="{row}">
+        {{Math.floor(dayjs(row.endDate).diff(row.startDate, "minutes")/60)}}:{{String(dayjs(row.endDate).diff(row.startDate, "minutes") % 60).padStart(2,"0")}} h
+
+      </template>
+      <template #project-data="{row}">
+        {{row.project ? row.project.name : "" }}
+      </template>
+    </UTable>
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityTable.vue b/frontend/components/EntityTable.vue
new file mode 100644
index 0000000..c243fc8
--- /dev/null
+++ b/frontend/components/EntityTable.vue
@@ -0,0 +1,137 @@
+<script setup>
+  defineShortcuts({
+    /*'/': () => {
+      //console.log(searchinput)
+      //searchinput.value.focus()
+      document.getElementById("searchinput").focus()
+    },*/
+    'Enter': {
+      usingInput: true,
+      handler: () => {
+        router.push(`/standardEntity/${props.type}/show/${props.rows.value[selectedItem.value].id}`)
+      }
+    },
+    'arrowdown': () => {
+      if(selectedItem.value < props.rows.length - 1) {
+        selectedItem.value += 1
+      } else {
+        selectedItem.value = 0
+      }
+    },
+    'arrowup': () => {
+      if(selectedItem.value === 0) {
+        selectedItem.value = props.rows.length - 1
+      } else {
+        selectedItem.value -= 1
+      }
+    }
+  })
+  const props = defineProps({
+    rows: {
+      type: Array,
+      required: true,
+      default: []
+    },
+    columns: {
+      type: Array,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+      default: false
+    }
+  })
+
+  const emit = defineEmits(["sort"]);
+
+  const dataStore = useDataStore()
+
+  const router = useRouter()
+
+  const dataType = dataStore.dataTypes[props.type]
+
+  const selectedItem = ref(0)
+  const sort = ref({
+    column: dataType.supabaseSortColumn || "date",
+    direction: 'desc'
+  })
+
+</script>
+
+<template>
+  <UTable
+      :loading="props.loading"
+      :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
+      sort-mode="manual"
+      v-model:sort="sort"
+      @update:sort="emit('sort',{sort_column: sort.column, sort_direction: sort.direction})"
+      v-if="dataType && columns"
+      :rows="props.rows"
+      :columns="props.columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/standardEntity/${type}/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
+  >
+<!--    <template
+        v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
+        v-slot:[`${column.key}-header`]="{row}">
+      <span class="text-nowrap">{{column.label}}</span>
+    </template>-->
+    <template #name-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">
+        <UTooltip
+            :text="row.name"
+        >
+          {{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}}
+        </UTooltip>      </span>
+      <span v-else>
+        <UTooltip
+          :text="row.name"
+        >
+          {{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}}
+        </UTooltip>
+      </span>
+    </template>
+    <template #fullName-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.fullName}}
+      </span>
+      <span v-else>
+        {{row.fullName}}
+      </span>
+    </template>
+    <template #licensePlate-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.licensePlate}}
+      </span>
+      <span v-else>
+        {{row.licensePlate}}
+      </span>
+    </template>
+    <template
+        v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
+        v-slot:[`${column.key}-data`]="{row}">
+      <component v-if="column.component" :is="column.component" :row="row"></component>
+      <span v-else-if="row[column.key]">
+        <UTooltip :text="row[column.key]">
+        {{row[column.key] ? `${column.maxLength ? (row[column.key].length > column.maxLength ? `${row[column.key].substring(0,column.maxLength)}...` : row[column.key]) : row[column.key]} ${column.unit ? column.unit : ''}`: ''}}
+      </UTooltip>
+      </span>
+
+    </template>
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/EntityTableMobile.vue b/frontend/components/EntityTableMobile.vue
new file mode 100644
index 0000000..f6baaf5
--- /dev/null
+++ b/frontend/components/EntityTableMobile.vue
@@ -0,0 +1,129 @@
+<script setup>
+  /*defineShortcuts({
+    /!*'/': () => {
+      //console.log(searchinput)
+      //searchinput.value.focus()
+      document.getElementById("searchinput").focus()
+    },*!/
+    'Enter': {
+      usingInput: true,
+      handler: () => {
+        router.push(`/standardEntity/${props.type}/show/${props.rows.value[selectedItem.value].id}`)
+      }
+    },
+    'arrowdown': () => {
+      if(selectedItem.value < props.rows.length - 1) {
+        selectedItem.value += 1
+      } else {
+        selectedItem.value = 0
+      }
+    },
+    'arrowup': () => {
+      if(selectedItem.value === 0) {
+        selectedItem.value = props.rows.length - 1
+      } else {
+        selectedItem.value -= 1
+      }
+    }
+  })*/
+
+  const props = defineProps({
+    rows: {
+      type: Array,
+      required: true,
+      default: []
+    },
+    columns: {
+      type: Array,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    }
+  })
+
+  const dataStore = useDataStore()
+
+  const router = useRouter()
+
+  const dataType = dataStore.dataTypes[props.type]
+
+  const selectedItem = ref(0)
+
+
+</script>
+
+<template>
+  <UDashboardPanelContent class="w-full">
+    <a
+        v-for="item in props.rows"
+        class="my-1"
+        @click="router.push(`/standardEntity/${type}/show/${item.id}`)"
+    >
+      <p class="truncate text-left text-primary text-xl">{{dataType.templateColumns.find(i => i.title).key ? item[dataType.templateColumns.find(i => i.title).key] : null}}</p>
+      <p class="text-sm">
+        {{ dataType.numberRangeHolder ? item[dataType.numberRangeHolder] : null}}
+
+        <span v-for="secondInfo in dataType.templateColumns.filter(i => i.secondInfo)">{{(secondInfo.secondInfoKey && item[secondInfo.key]) ? item[secondInfo.key][secondInfo.secondInfoKey] : item[secondInfo.key]}}</span>
+
+      </p>
+    </a>
+  </UDashboardPanelContent>
+
+
+
+
+<!--  <UTable
+      v-if="dataType && columns"
+      :rows="props.rows"
+      :columns="props.columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/standardEntity/${type}/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
+  >
+    <template
+        v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
+        v-slot:[`${column.key}-header`]="{row}">
+      <span class="text-nowrap">{{column.label}}</span>
+    </template>
+    <template #name-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.name}}
+      </span>
+      <span v-else>
+        {{row.name}}
+      </span>
+    </template>
+    <template #fullName-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.fullName}}
+      </span>
+      <span v-else>
+        {{row.fullName}}
+      </span>
+    </template>
+    <template #licensePlate-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.licensePlate}}
+      </span>
+      <span v-else>
+        {{row.licensePlate}}
+      </span>
+    </template>
+    <template
+        v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
+        v-slot:[`${column.key}-data`]="{row}">
+      <component v-if="column.component" :is="column.component" :row="row"></component>
+      <span v-else>{{row[column.key] ? `${row[column.key]} ${column.unit ? column.unit : ''}`: ''}}</span>
+    </template>
+  </UTable>-->
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/GlobalMessages.vue b/frontend/components/GlobalMessages.vue
new file mode 100644
index 0000000..5c9251a
--- /dev/null
+++ b/frontend/components/GlobalMessages.vue
@@ -0,0 +1,89 @@
+<script setup>
+
+const supabase = useSupabaseClient()
+const profileStore = useProfileStore()
+
+const globalMessages = ref([])
+
+const setup = async () => {
+  let {data} = await supabase.from("globalmessages").select("*, profiles(id)")
+
+  data = data.filter((message) => message.profiles.length === 0)
+
+  globalMessages.value = data
+
+  if(data.length > 0) {
+    messageToShow.value = data[0]
+    showMessageModal.value = true
+  }
+
+
+}
+
+
+const showMessageModal = ref(false)
+const messageToShow = ref(null)
+
+const showMessage = (message) => {
+  messageToShow.value = message
+  showMessageModal.value = true
+}
+const markMessageAsRead = async () => {
+  await supabase.from("globalmessagesseen").insert({
+    profile: profileStore.activeProfile.id,
+    message: messageToShow.value.id,
+  })
+  showMessageModal.value = false
+  setup()
+
+}
+
+
+
+
+setup()
+</script>
+
+<template>
+  <UModal v-model="showMessageModal" prevent-close>
+    <UCard>
+      <template #header>
+        <span class="font-bold">{{messageToShow.title}}</span>
+      </template>
+      <p class=" my-2" v-html="messageToShow.description"></p>
+      <UButton
+          variant="outline"
+          @click="markMessageAsRead"
+      >Gelesen</UButton>
+    </UCard>
+  </UModal>
+
+<!--  <UCard
+      v-if="globalMessages.length >0"
+      class="mt-3"
+      style="border: .75px solid #69c350"
+  >
+    <p class="font-bold">{{globalMessages[0].title}}</p>
+    <UButton
+        icon="i-heroicons-chevron-right"
+        variant="ghost"
+        @click="showMessage(globalMessages[0])"
+    />
+    <UModal v-model="showMessageModal">
+      <UCard>
+        <template #header>
+          <span class="font-bold">{{messageToShow.title}}</span>
+        </template>
+        <p class=" my-2" v-html="messageToShow.description"></p>
+        <UButton
+            variant="outline"
+            @click="markMessageAsRead"
+        >Gelesen</UButton>
+      </UCard>
+    </UModal>
+  </UCard>-->
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/GlobalSearch.vue b/frontend/components/GlobalSearch.vue
new file mode 100644
index 0000000..45ef81a
--- /dev/null
+++ b/frontend/components/GlobalSearch.vue
@@ -0,0 +1,140 @@
+<script setup>
+
+const showCommandPalette = ref(false)
+const selectedCommand = ref("")
+const commandPaletteRef = ref()
+const router = useRouter()
+const dataStore = useDataStore()
+const openCommandPalette = () => {
+  showCommandPalette.value = true
+  console.log("Open Command Palette")
+}
+
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    handler: () => {
+      openCommandPalette()
+    }
+  }
+})
+
+const actions = [
+
+  {
+    id: 'new-task',
+    label: 'Aufgabe hinzufügen',
+    icon: 'i-heroicons-rectangle-stack',
+    to: "/tasks/create" ,
+  },
+  {
+    id: 'new-customer',
+    label: 'Kunde hinzufügen',
+    icon: 'i-heroicons-user-group',
+    to: "/customers/create" ,
+  },
+  {
+    id: 'new-vendor',
+    label: 'Lieferant hinzufügen',
+    icon: 'i-heroicons-truck',
+    to: "/vendors/create" ,
+  },
+  {
+    id: 'new-contact',
+    label: 'Ansprechpartner hinzufügen',
+    icon: 'i-heroicons-user-group',
+    to: "/contacts/create" ,
+  },
+  {
+    id: 'new-project',
+    label: 'Projekt hinzufügen',
+    icon: 'i-heroicons-clipboard-document-check',
+    to: "/projects/create" ,
+  },{
+    id: 'new-plant',
+    label: 'Objekt hinzufügen',
+    icon: 'i-heroicons-clipboard-document',
+    to: "/plants/create" ,
+  },
+  {
+    id: 'new-product',
+    label: 'Artikel hinzufügen',
+    icon: 'i-heroicons-puzzle-piece',
+    to: "/products/create" ,
+  }
+]
+
+
+const groups = computed(() =>
+    [{
+      key: 'actions',
+      commands: actions
+    },{
+      key: "customers",
+      label: "Kunden",
+      commands: dataStore.customers.map(item => { return {id: item.id, label: item.name, to: `/customers/show/${item.id}`}})
+    },{
+      key: "vendors",
+      label: "Lieferanten",
+      commands: dataStore.vendors.map(item => { return {id: item.id, label: item.name, to: `/vendors/show/${item.id}`}})
+    },{
+      key: "contacts",
+      label: "Ansprechpartner",
+      commands: dataStore.contacts.map(item => { return {id: item.id, label: item.fullName, to: `/contacts/show/${item.id}`}})
+    },{
+      key: "products",
+      label: "Artikel",
+      commands: dataStore.products.map(item => { return {id: item.id, label: item.name, to: `/products/show/${item.id}`}})
+    },{
+      key: "tasks",
+      label: "Aufgaben",
+      commands: dataStore.tasks.map(item => { return {id: item.id, label: item.name, to: `/tasks/show/${item.id}`}})
+    },{
+      key: "plants",
+      label: "Objekte",
+      commands: dataStore.plants.map(item => { return {id: item.id, label: item.name, to: `/plants/show/${item.id}`}})
+    },{
+      key: "projects",
+      label: "Projekte",
+      commands: dataStore.projects.map(item => { return {id: item.id, label: item.name, to: `/projects/show/${item.id}`}})
+    }
+    ].filter(Boolean))
+
+function onSelect (option) {
+  if (option.click) {
+    option.click()
+  } else if (option.to) {
+    router.push(option.to)
+  } else if (option.href) {
+    window.open(option.href, '_blank')
+  }
+
+  showCommandPalette.value = false
+
+}
+</script>
+
+<template>
+  <UButton
+      icon="i-heroicons-magnifying-glass"
+      variant="ghost"
+      @click="openCommandPalette"
+
+  />
+
+  <UModal
+      v-model="showCommandPalette"
+  >
+    <UCommandPalette
+        v-model="selectedCommand"
+        :groups="groups"
+        :autoselect="false"
+        @update:model-value="onSelect"
+        ref="commandPaletteRef"
+    />
+  </UModal>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/HelpSlideover.vue b/frontend/components/HelpSlideover.vue
new file mode 100644
index 0000000..36cdd08
--- /dev/null
+++ b/frontend/components/HelpSlideover.vue
@@ -0,0 +1,231 @@
+<script setup>
+const { isHelpSlideoverOpen } = useDashboard()
+const { metaSymbol } = useShortcuts()
+
+const shortcuts = ref(false)
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+const query = ref('')
+const supabase = useSupabaseClient()
+const toast = useToast()
+const router = useRouter()
+
+
+const links = [{
+  label: 'Shortcuts',
+  icon: 'i-heroicons-key',
+  trailingIcon: 'i-heroicons-arrow-right-20-solid',
+  onClick: () => {
+    shortcuts.value = true
+  }
+},/* {
+  label: 'Tickets',
+  icon: 'i-heroicons-clipboard-document',
+  to: '/support',
+},*/  {
+  label: 'Webseite',
+  icon: 'i-heroicons-globe-europe-africa',
+  to: 'https://fedeo.de',
+  target: '_blank'
+}, {
+  label: 'Versionshistorie',
+  icon: 'i-heroicons-rocket-launch',
+  to: 'https://fedeo.de/changelog',
+  target: '_blank'
+},/* {
+  label: 'Roadmap',
+  icon: 'i-heroicons-rocket-launch',
+  to: 'https://fedeo.de/roadmap',
+  target: '_blank'
+},*/ {
+  label: 'Doku',
+  icon: 'i-heroicons-book-open',
+  to: 'https://fedeo.de/docs',
+  target: '_blank'
+}, {
+  label: 'Status',
+  icon: 'i-heroicons-shield-check',
+  to: 'https://uptime.fedeo.io/status/fedeo',
+  target: '_blank'
+}/*, {
+  label: 'Bugs & Features',
+  icon: 'i-heroicons-book-open',
+  to: 'https://gitlab.federspiel.software/fedeo/software-features',
+  target: '_blank'
+}, {
+  label: 'GitHub repository',
+  icon: 'i-simple-icons-github',
+  to: 'https://github.com/nuxt/ui-pro',
+  target: '_blank'
+}, {
+  label: 'Buy Nuxt UI Pro',
+  icon: 'i-heroicons-credit-card',
+  to: 'https://ui.nuxt.com/pro/purchase',
+  target: '_blank'
+}*/]
+
+const categories = computed(() => [{
+  title: 'General',
+  items: [
+    { shortcuts: [metaSymbol.value, 'K'], name: 'Hauptmenü' },
+    { shortcuts: ['N'], name: 'Benachrichtigungen' },
+    { shortcuts: ['?'], name: 'Help & Support' },
+    { shortcuts: ['/'], name: 'Suche' }
+  ]
+}, {
+  title: 'Navigation',
+  items: [
+    { shortcuts: ['G', 'H'], name: 'Gehe zu Dashboard' },
+    { shortcuts: ['G', 'A'], name: 'Gehe zu Aufgaben' },
+    { shortcuts: ['G', 'D'], name: 'Gehe zu Dokumente' },
+    { shortcuts: ['G', 'K'], name: 'Gehe zu Kunden' },
+    { shortcuts: ['G', 'L'], name: 'Gehe zu Lieferanten' },
+    { shortcuts: ['G', 'P'], name: 'Gehe zu Projekte' },
+    { shortcuts: ['G', 'V'], name: 'Gehe zu Verträge' },
+    { shortcuts: ['G', 'O'], name: 'Gehe zu Objekte' },/*
+    { shortcuts: ['G', 'I'], name: 'Go to Inbox' },
+    { shortcuts: ['G', 'U'], name: 'Go to Users' },*/
+    { shortcuts: ['G', 'S'], name: 'Gehe zu Einstellungen' },
+    { shortcuts: ['↑'], name: 'Vorheriger Eintrag' },
+    { shortcuts: ['↓'], name: 'Nächster Eintrag' },
+    { shortcuts: ['↵'], name: 'Eintrag Öffnen' },
+    { shortcuts: ['←'], name: 'Tab nach links wechseln' },
+    { shortcuts: ['→'], name: 'Tab nach rechts wechseln' },
+  ]
+}, /*{
+  title: 'Inbox',
+  items: [
+    { shortcuts: ['↑'], name: 'Prev notification' },
+    { shortcuts: ['↓'], name: 'Next notification' }
+  ]
+}*/])
+
+const filteredCategories = computed(() => {
+  return categories.value.map(category => ({
+    title: category.title,
+    items: category.items.filter(item => {
+      return item.name.search(new RegExp(query.value, 'i')) !== -1
+    })
+  })).filter(category => !!category.items.length)
+})
+
+const contactRequestData = ref({
+  message: "",
+  title: "",
+})
+
+const loadingContactRequest = ref(false)
+
+const addContactRequest = async () => {
+  console.log("ADD")
+  loadingContactRequest.value = true
+  const retVal = await useFunctions().useCreateTicket(contactRequestData.value.title,contactRequestData.value.message,router.currentRoute.value.fullPath,"helpSlideover",)
+
+  if(retVal) {
+    toast.add({title: "Anfrage erfolgreich erstellt"})
+    resetContactRequest()
+  } else {
+    toast.add({title: "Anfrage konnte nicht erstellt werden",color:"rose"})
+  }
+  loadingContactRequest.value = false
+}
+
+const resetContactRequest = () => {
+  contactRequestData.value = {
+    message: "",
+    title: "",
+  }
+}
+</script>
+
+<template>
+  <UDashboardSlideover v-model="isHelpSlideoverOpen">
+    <template #title>
+      <UButton
+          v-if="shortcuts"
+          color="gray"
+          variant="ghost"
+          size="sm"
+          icon="i-heroicons-arrow-left-20-solid"
+          @click="shortcuts = false"
+      />
+
+      {{ shortcuts ? 'Shortcuts' : 'Hilfe & Information' }}
+    </template>
+
+    <div v-if="shortcuts" class="space-y-6">
+      <UInput v-model="query" icon="i-heroicons-magnifying-glass" placeholder="Search..." autofocus color="gray" />
+
+      <div v-for="(category, index) in filteredCategories" :key="index">
+        <p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold">
+          {{ category.title }}
+        </p>
+
+        <div class="space-y-2">
+          <div v-for="(item, i) in category.items" :key="i" class="flex items-center justify-between">
+            <span class="text-sm text-gray-500 dark:text-gray-400">{{ item.name }}</span>
+
+            <div class="flex items-center justify-end flex-shrink-0 gap-0.5">
+              <UKbd v-for="(shortcut, j) in item.shortcuts" :key="j">
+                {{ shortcut }}
+              </UKbd>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="flex flex-col gap-y-3">
+      <UButton v-for="(link, index) in links" :key="index" color="white" v-bind="link" />
+    </div>
+<!--    <div class="mt-5" v-if="!loadingContactRequest">
+      <h1 class="font-semibold">Kontaktanfrage:</h1>
+      <UForm
+        class="p-3"
+        @submit="addContactRequest"
+        @reset="resetContactRequest"
+      >
+&lt;!&ndash;        <UFormGroup
+          label="Art:"
+        >
+          <USelectMenu
+              :options="['Hilfe','Software Problem / Bug','Funktionsanfrage','Kontakt','Sonstiges']"
+              v-model="contactRequestData.contactType"
+          />
+        </UFormGroup>&ndash;&gt;
+        <UFormGroup
+          label="Titel:"
+        >
+          <UInput
+            v-model="contactRequestData.title"
+          />
+        </UFormGroup>
+        <UFormGroup
+          label="Nachricht:"
+        >
+          <UTextarea
+              v-model="contactRequestData.message"
+              rows="6"
+          />
+        </UFormGroup>
+        <InputGroup class="mt-3">
+          <UButton
+            type="submit"
+            :disabled="!contactRequestData.title || !contactRequestData.message"
+          >
+            Senden
+          </UButton>
+          <UButton
+            type="reset"
+            color="rose"
+            variant="outline"
+            :disabled="!contactRequestData.title && !contactRequestData.message"
+          >
+            Zurücksetzen
+          </UButton>
+        </InputGroup>
+
+      </UForm>
+    </div>
+    <UProgress class="mt-5" animation="carousel" v-else/>-->
+  </UDashboardSlideover>
+</template>
\ No newline at end of file
diff --git a/frontend/components/HistoryDisplay.vue b/frontend/components/HistoryDisplay.vue
new file mode 100644
index 0000000..13e24b5
--- /dev/null
+++ b/frontend/components/HistoryDisplay.vue
@@ -0,0 +1,165 @@
+<script setup>
+import dayjs from "dayjs"
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+  elementId: {
+    type: String,
+    required: true
+  },
+  renderHeadline: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const auth = useAuthStore()
+
+const toast = useToast()
+const showAddHistoryItemModal = ref(false)
+const colorMode = useColorMode()
+
+const items = ref([])
+const platform = ref("default")
+
+const setup = async () => {
+
+  if(await useCapacitor().getIsPhone()) platform.value = "mobile"
+
+  if(props.type && props.elementId){
+    items.value = await useNuxtApp().$api(`/api/resource/${props.type}/${props.elementId}/history`)
+  } /*else {
+
+  }*/
+}
+
+setup()
+
+
+
+const addHistoryItemData = ref({
+  text: ""
+})
+
+const addHistoryItem = async () => {
+
+  const res = await useNuxtApp().$api(`/api/resource/${props.type}/${props.elementId}/history`, {
+    method: "POST",
+    body: addHistoryItemData.value
+  })
+
+
+
+
+  addHistoryItemData.value = {}
+  toast.add({title: "Eintrag erfolgreich erstellt"})
+  showAddHistoryItemModal.value = false
+  await setup()
+
+
+}
+
+const renderText = (text) => {
+  const regex = /(@\w*)/g
+
+  text = text.replaceAll(regex, "<a class='text-primary-500'>$&</a>")
+
+  return text
+}
+
+</script>
+
+<template>
+  <UModal
+    v-model="showAddHistoryItemModal"
+
+  >
+    <UCard class="h-full">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Eintrag hinzufügen
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAddHistoryItemModal = false" />
+        </div>
+      </template>
+
+      <UFormGroup
+        label="Text:"
+      >
+        <UTextarea
+          v-model="addHistoryItemData.text"
+          @keyup.meta.enter="addHistoryItem"
+        />
+<!-- TODO: Add Dropdown and Checking for Usernames  -->
+<!--        <template #help>
+          <UKbd>{{metaSymbol}}</UKbd> <UKbd>Enter</UKbd> Speichern
+        </template>-->
+
+      </UFormGroup>
+
+
+      <template #footer>
+        <UButton @click="addHistoryItem">Speichern</UButton>
+      </template>
+    </UCard>
+  </UModal>
+  <Toolbar
+      v-if="!props.renderHeadline && props.elementId && props.type"
+  >
+    <UButton
+        @click="showAddHistoryItemModal = true"
+    >
+      + Eintrag
+    </UButton>
+  </Toolbar>
+  <div v-else-if="props.renderHeadline && props.elementId && props.type">
+    <div :class="`flex justify-between`">
+      <p class=""><span class="text-xl">Logbuch</span> <UBadge variant="outline">{{items.length}}</UBadge></p>
+      <UButton
+          @click="showAddHistoryItemModal = true"
+      >
+        + Eintrag
+      </UButton>
+    </div>
+    <UDivider class="my-3"/>
+  </div>
+
+  <!-- ITEM LIST  -->
+  <div style="height: 90%; overflow-y: scroll">
+    <div
+        v-if="items.length > 0"
+        v-for="(item,index) in items.slice().reverse()"
+    >
+      <UDivider
+          class="my-3"
+          v-if="index !== 0"
+      />
+      <div class="flex items-center gap-3">
+        <UAvatar
+            v-if="!item.created_by"
+            :src="colorMode.value === 'light' ? '/Logo.png' : '/Logo_Dark.png' "
+        />
+        <UAvatar
+            :alt="item.created_by_profile?.full_name"
+            v-else
+        />
+        <div>
+          <h3 v-if="item.created_by">{{item.created_by_profile?.full_name}}</h3>
+          <h3 v-else>FEDEO Bot</h3>
+          <span v-html="renderText(item.text)"/><br>
+          <span class="text-gray-500">{{dayjs(item.created_at).format("DD.MM.YY HH:mm")}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/InboxList.vue b/frontend/components/InboxList.vue
new file mode 100644
index 0000000..04ab42b
--- /dev/null
+++ b/frontend/components/InboxList.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { format, isToday } from 'date-fns'
+
+const props = defineProps({
+  modelValue: {
+    type: Object ,
+    default: null
+  },
+  mails: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const mailsRefs = ref<Element[]>([])
+
+const selectedMail = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value: Mail | null) {
+    emit('update:modelValue', value)
+  }
+})
+
+watch(selectedMail, () => {
+  if (!selectedMail.value) {
+    return
+  }
+
+  const ref = mailsRefs.value[selectedMail.value.id]
+  if (ref) {
+    ref.scrollIntoView({ block: 'nearest' })
+  }
+})
+
+defineShortcuts({
+  arrowdown: () => {
+    const index = props.mails.findIndex((mail) => mail.id === selectedMail.value?.id)
+
+    if (index === -1) {
+      selectedMail.value = props.mails[0]
+    } else if (index < props.mails.length - 1) {
+      selectedMail.value = props.mails[index + 1]
+    }
+  },
+  arrowup: () => {
+    const index = props.mails.findIndex((mail) => mail.id === selectedMail.value?.id)
+
+    if (index === -1) {
+      selectedMail.value = props.mails[props.mails.length - 1]
+    } else if (index > 0) {
+      selectedMail.value = props.mails[index - 1]
+    }
+  }
+})
+</script>
+
+<template>
+  <UDashboardPanelContent class="p-0">
+    <div v-for="(mail, index) in mails" :key="index" :ref="el => { mailsRefs[mail.id] = el as Element }">
+      <div
+          class="p-4 text-sm cursor-pointer border-l-2"
+          :class="[
+          mail.unread ? 'text-gray-900 dark:text-white' : 'text-gray-600 dark:text-gray-300',
+          selectedMail && selectedMail.id === mail.id ? 'border-primary-500 dark:border-primary-400 bg-primary-100 dark:bg-primary-900/25' : 'border-white dark:border-gray-900 hover:border-primary-500/25 dark:hover:border-primary-400/25 hover:bg-primary-100/50 dark:hover:bg-primary-900/10'
+        ]"
+          @click="selectedMail = mail"
+      >
+        <div class="flex items-center justify-between" :class="[mail.unread && 'font-semibold']">
+          <div class="flex items-center gap-3">
+            {{ mail.from.name }}
+
+            <UChip v-if="mail.unread" />
+          </div>
+
+          <span>{{ isToday(new Date(mail.date)) ? format(new Date(mail.date), 'HH:mm') : format(new Date(mail.date), 'dd MMM') }}</span>
+        </div>
+        <p :class="[mail.unread && 'font-semibold']">
+          {{ mail.subject }}
+        </p>
+        <p class="text-gray-400 dark:text-gray-500 line-clamp-1">
+          {{ mail.body }}
+        </p>
+      </div>
+
+      <UDivider />
+    </div>
+  </UDashboardPanelContent>
+</template>
\ No newline at end of file
diff --git a/frontend/components/InboxMail.vue b/frontend/components/InboxMail.vue
new file mode 100644
index 0000000..fcf7314
--- /dev/null
+++ b/frontend/components/InboxMail.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { format, isToday } from 'date-fns'
+
+defineProps({
+  mail: {
+    type: Object,
+    required: true
+  },
+  selected: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <UDashboardPanelContent>
+    <div class="flex justify-between">
+      <div class="flex items-center gap-4">
+        <UAvatar v-bind="mail.from.avatar" :alt="mail.from.name" size="lg" />
+
+        <div class="min-w-0">
+          <p class="text-gray-900 dark:text-white font-semibold">
+            {{ mail.from.name }}
+          </p>
+          <p class="text-gray-500 dark:text-gray-400 font-medium">
+            {{ mail.subject }}
+          </p>
+        </div>
+      </div>
+
+      <p class="font-medium text-gray-900 dark:text-white">
+        {{ isToday(new Date(mail.date)) ? format(new Date(mail.date), 'HH:mm') : format(new Date(mail.date), 'dd MMM') }}
+      </p>
+    </div>
+
+    <UDivider class="my-5" />
+
+    <div class="flex-1">
+      <p class="text-lg">
+        {{ mail.body }}
+      </p>
+    </div>
+
+    <UDivider class="my-5" />
+
+    <form @submit.prevent>
+      <UTextarea color="gray" required size="xl" :rows="5" :placeholder="`Reply to ${mail.from.name}`">
+        <UButton type="submit" color="black" label="Send" icon="i-heroicons-paper-airplane" class="absolute bottom-2.5 right-3.5" />
+      </UTextarea>
+    </form>
+  </UDashboardPanelContent>
+</template>
\ No newline at end of file
diff --git a/frontend/components/InputGroup.vue b/frontend/components/InputGroup.vue
new file mode 100644
index 0000000..bcf7d9d
--- /dev/null
+++ b/frontend/components/InputGroup.vue
@@ -0,0 +1,20 @@
+<script setup>
+const props = defineProps({
+  gap: {
+    type: Number,
+    default: 1
+  }
+})
+
+const {gap} = props
+</script>
+
+<template>
+  <div :class="`flex items-center gap-${gap}`">
+    <slot/>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/LabelPrintModal.vue b/frontend/components/LabelPrintModal.vue
new file mode 100644
index 0000000..e660a6d
--- /dev/null
+++ b/frontend/components/LabelPrintModal.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import LabelPrinterButton from "~/components/LabelPrinterButton.vue";
+
+const labelPrinter = useLabelPrinterStore()
+
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+
+defineShortcuts({
+  meta_p: {
+    usingInput: true,
+    handler: () => {
+      if(!labelPrinter.connected) return
+      printLabel()
+    }
+  },
+  escape: {
+    usingInput: true,
+    handler: () => {
+      modal.close()
+    }
+  }
+})
+
+const emit = defineEmits(["printed"])
+const modal = useModal()
+const { $api } = useNuxtApp()
+
+const loading = ref(true)
+const printing = ref(false)
+const labelData = ref<any>(null) // gerendertes Bild vom Backend
+
+
+
+/** Label vom Backend rendern */
+async function loadLabel() {
+  loading.value = true
+  try {
+    labelData.value = await $api(`/api/print/label`, {
+      method: "POST",
+      body: JSON.stringify({
+        context: props.context || null
+      })
+    })
+  } catch (err) {
+    console.error("Label render error", err)
+  }
+  loading.value = false
+}
+
+/** Drucken */
+async function printLabel() {
+  if (!labelPrinter.connected) return
+
+  printing.value = true
+  try {
+    await labelPrinter.print(labelData.value.encoded, { density: 5, pages: 1 })
+    modal.close()
+  } catch (err) {
+    console.error("Print error", err)
+  }
+  printing.value = false
+}
+const handleConnect = async () => {
+  await loadLabel()
+  await labelPrinter.connect("ble")
+}
+onMounted(() => {
+  if(labelPrinter.connected) {
+    loadLabel()
+  }
+
+
+})
+
+</script>
+
+<template>
+  <UModal>
+    <UCard>
+
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-lg font-semibold">Label drucken</h3>
+          <UButton icon="i-heroicons-x-mark" variant="ghost" @click="modal.close()" />
+        </div>
+      </template>
+
+      <div v-if="!loading && labelPrinter.connected">
+        <img
+            :src="`data:image/png;base64,${labelData.base64}`"
+            alt="Label Preview"
+            class="max-w-full max-h-64 object-contain"
+        />
+      </div>
+      <div v-else-if="loading && !labelPrinter.connected">
+        Kein Drucker verbunden
+
+        <LabelPrinterButton/>
+
+      </div>
+      <UProgress animation="carousel" v-else/>
+
+
+
+      <template #footer>
+        <div class="flex justify-between">
+          <UButton variant="ghost" @click="modal.close()">Abbrechen</UButton>
+
+          <UButton
+              color="primary"
+              :disabled="!labelPrinter.connected || printing"
+              :loading="printing"
+              @click="printLabel"
+          >
+            Drucken
+            <UKbd>⌘</UKbd>
+            <UKbd>P</UKbd>
+          </UButton>
+        </div>
+      </template>
+
+    </UCard>
+  </UModal>
+</template>
diff --git a/frontend/components/LabelPrinterButton.vue b/frontend/components/LabelPrinterButton.vue
new file mode 100644
index 0000000..2a29fee
--- /dev/null
+++ b/frontend/components/LabelPrinterButton.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+
+const labelPrinter = useLabelPrinterStore()
+
+const showPrinterInfo = ref(false)
+
+const handleClick = async () => {
+  if(labelPrinter.connected) {
+    showPrinterInfo.value = true
+  } else {
+    await labelPrinter.connect('ble')
+  }
+}
+
+
+</script>
+
+<template>
+  <!-- Printer Button -->
+
+  <UModal v-model="showPrinterInfo">
+    <UCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-lg font-semibold">Drucker Informationen</h3>
+          <UButton icon="i-heroicons-x-mark" variant="ghost" @click="showPrinterInfo = false" />
+        </div>
+      </template>
+      <p>Seriennummer: {{labelPrinter.info.serial}}</p>
+      <p>MAC: {{labelPrinter.info.mac}}</p>
+      <p>Modell: {{labelPrinter.info.modelId}}</p>
+      <p>Charge: {{labelPrinter.info.charge}}</p>
+      <p>Hardware Version: {{labelPrinter.info.hardwareVersion}}</p>
+      <p>Software Version: {{labelPrinter.info.softwareVersion}}</p>
+    </UCard>
+  </UModal>
+
+  <UButton
+      :icon="labelPrinter.connected ? 'i-heroicons-printer' : 'i-heroicons-printer'"
+      :color="labelPrinter.connected ? 'green' : 'gray'"
+      variant="soft"
+      class="w-full justify-start"
+      :loading="labelPrinter.connectLoading"
+      @click="handleClick"
+  >
+    <span v-if="labelPrinter.connected">Drucker verbunden</span>
+    <span v-else>Drucker verbinden</span>
+  </UButton>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/MainNav.vue b/frontend/components/MainNav.vue
new file mode 100644
index 0000000..0307b41
--- /dev/null
+++ b/frontend/components/MainNav.vue
@@ -0,0 +1,470 @@
+<script setup>
+
+const route = useRoute()
+const auth = useAuthStore()
+
+const {has} = usePermission()
+
+const links = computed(() => {
+  return [
+      ...(auth.profile?.pinned_on_navigation || []).map(pin => {
+        if(pin.type === "external") {
+          return {
+            label: pin.label,
+            to: pin.link,
+            icon: pin.icon,
+            target: "_blank",
+            pinned: true
+          }
+        }else if(pin.type === "standardEntity") {
+          return {
+            label: pin.label,
+            to: `/standardEntity/${pin.datatype}/show/${pin.id}`,
+            icon: pin.icon,
+            pinned: true
+          }
+        }
+      }),
+
+    ... false ? [{
+      label: "Support Tickets",
+      to: "/support",
+      icon: "i-heroicons-rectangle-stack",
+    }] : [],
+    {
+      id: 'dashboard',
+      label: "Dashboard",
+      to: "/",
+      icon: "i-heroicons-home"
+    }, {
+      id: 'historyitems',
+      label: "Logbuch",
+      to: "/historyitems",
+      icon: "i-heroicons-book-open",
+      disabled: true
+    },
+    {
+      label: "Organisation",
+      icon: "i-heroicons-rectangle-stack",
+      defaultOpen: false,
+      children: [
+        ... has("tasks") ? [{
+          label: "Aufgaben",
+          to: "/standardEntity/tasks",
+          icon: "i-heroicons-rectangle-stack"
+        }] : [],
+        /*... true ? [{
+          label: "Plantafel",
+          to: "/calendar/timeline",
+          icon: "i-heroicons-calendar-days"
+        }] : [],
+        ... true ? [{
+          label: "Kalender",
+          to: "/calendar/grid",
+          icon: "i-heroicons-calendar-days"
+        }] : [],
+        ... true ? [{
+          label: "Termine",
+          to: "/standardEntity/events",
+          icon: "i-heroicons-calendar-days"
+        }] : [],*/
+        /*{
+          label: "Dateien",
+          to: "/files",
+          icon: "i-heroicons-document"
+        },*/
+      ]
+    },
+    {
+      label: "Dokumente",
+      icon: "i-heroicons-rectangle-stack",
+      defaultOpen: false,
+      children: [
+        {
+          label: "Dateien",
+          to: "/files",
+          icon: "i-heroicons-document"
+        },{
+          label: "Anschreiben",
+          to: "/createdletters",
+          icon: "i-heroicons-document",
+          disabled: true
+        },{
+          label: "Boxen",
+          to: "/standardEntity/documentboxes",
+          icon: "i-heroicons-archive-box",
+          disabled: true
+        },
+      ]
+    },
+    {
+      label: "Kommunikation",
+      icon: "i-heroicons-megaphone",
+      defaultOpen: false,
+      children: [
+        {
+          label: "Helpdesk",
+          to: "/helpdesk",
+          icon: "i-heroicons-chat-bubble-left-right",
+          disabled: true
+        },
+        {
+          label: "E-Mail",
+          to: "/email/new",
+          icon: "i-heroicons-envelope",
+          disabled: true
+        }/*, {
+          label: "Logbücher",
+          to: "/communication/historyItems",
+          icon: "i-heroicons-book-open"
+        }, {
+          label: "Chats",
+          to: "/chats",
+          icon: "i-heroicons-chat-bubble-left"
+        }*/
+      ]
+    },
+    ... (has("customers") || has("vendors") || has("contacts")) ? [{
+      label: "Kontakte",
+      defaultOpen: false,
+      icon: "i-heroicons-user-group",
+      children: [
+        ... has("customers") ? [{
+          label: "Kunden",
+          to: "/standardEntity/customers",
+          icon: "i-heroicons-user-group"
+        }] : [],
+        ... has("vendors") ? [{
+          label: "Lieferanten",
+          to: "/standardEntity/vendors",
+          icon: "i-heroicons-truck"
+        }] : [],
+        ... has("contacts") ? [{
+          label: "Ansprechpartner",
+          to: "/standardEntity/contacts",
+          icon: "i-heroicons-user-group"
+        }] : [],
+      ]
+    },] : [],
+    {
+      label: "Mitarbeiter",
+      defaultOpen:false,
+      icon: "i-heroicons-user-group",
+      children: [
+        ... true ? [{
+          label: "Anwesenheiten",
+          to: "/staff/time",
+          icon: "i-heroicons-clock",
+        }] : [],
+        /*... has("absencerequests") ? [{
+          label: "Abwesenheiten",
+          to: "/standardEntity/absencerequests",
+          icon: "i-heroicons-document-text"
+        }] : [],*/
+        /*{
+          label: "Fahrten",
+          to: "/trackingTrips",
+          icon: "i-heroicons-map"
+        },*/
+      ]
+    },
+    ... [{
+      label: "Buchhaltung",
+      defaultOpen: false,
+      icon: "i-heroicons-chart-bar-square",
+      children: [
+        {
+          label: "Ausgangsbelege",
+          to: "/createDocument",
+          icon: "i-heroicons-document-text"
+        },{
+          label: "Serienvorlagen",
+          to: "/createDocument/serialInvoice",
+          icon: "i-heroicons-document-text"
+        },{
+          label: "Eingangsbelege",
+          to: "/incomingInvoices",
+          icon: "i-heroicons-document-text",
+        },{
+          label: "Kostenstellen",
+          to: "/standardEntity/costcentres",
+          icon: "i-heroicons-document-currency-euro"
+        },{
+          label: "Buchungskonten",
+          to: "/accounts",
+          icon: "i-heroicons-document-text",
+        },{
+          label: "zusätzliche Buchungskonten",
+          to: "/standardEntity/ownaccounts",
+          icon: "i-heroicons-document-text"
+        },
+        {
+          label: "Bank",
+          to: "/banking",
+          icon: "i-heroicons-document-text",
+        },
+      ]
+    }],
+    ... has("inventory") ? [{
+      label: "Lager",
+      icon: "i-heroicons-puzzle-piece",
+      defaultOpen: false,
+      children: [
+        /*{
+          label: "Vorgänge",
+          to: "/inventory",
+          icon: "i-heroicons-square-3-stack-3d"
+        },{
+          label: "Bestände",
+          to: "/inventory/stocks",
+          icon: "i-heroicons-square-3-stack-3d"
+        },*/
+        ... has("spaces") ? [{
+          label: "Lagerplätze",
+          to: "/standardEntity/spaces",
+          icon: "i-heroicons-square-3-stack-3d"
+        }] : [],
+      ]
+    },] : [],
+    {
+      label: "Stammdaten",
+      defaultOpen: false,
+      icon: "i-heroicons-clipboard-document",
+      children: [
+        ... has("products") ? [{
+          label: "Artikel",
+          to: "/standardEntity/products",
+          icon: "i-heroicons-puzzle-piece"
+        }] : [],
+        ... has("productcategories") ? [{
+          label: "Artikelkategorien",
+          to: "/standardEntity/productcategories",
+          icon: "i-heroicons-puzzle-piece"
+        }] : [],
+        ... has("services") ? [{
+          label: "Leistungen",
+          to: "/standardEntity/services",
+          icon: "i-heroicons-wrench-screwdriver"
+        }] : [],
+        ... has("servicecategories") ? [{
+          label: "Leistungskategorien",
+          to: "/standardEntity/servicecategories",
+          icon: "i-heroicons-wrench-screwdriver"
+        }] : [],
+        {
+          label: "Mitarbeiter",
+          to: "/staff/profiles",
+          icon: "i-heroicons-user-group"
+        },
+        {
+          label: "Stundensätze",
+          to: "/standardEntity/hourrates",
+          icon: "i-heroicons-user-group"
+        },
+        ... has("vehicles") ? [{
+          label: "Fahrzeuge",
+          to: "/standardEntity/vehicles",
+          icon: "i-heroicons-truck"
+        }] : [],
+        ... has("inventoryitems") ? [{
+          label: "Inventar",
+          to: "/standardEntity/inventoryitems",
+          icon: "i-heroicons-puzzle-piece"
+        }] : [],
+        ... has("inventoryitems") ? [{
+          label: "Inventargruppen",
+          to: "/standardEntity/inventoryitemgroups",
+          icon: "i-heroicons-puzzle-piece"
+        }] : [],
+      ]
+    },
+
+    ... has("projects") ? [{
+      label: "Projekte",
+      to: "/standardEntity/projects",
+      icon: "i-heroicons-clipboard-document-check"
+    },] : [],
+    ... has("contracts") ? [{
+      label: "Verträge",
+      to: "/standardEntity/contracts",
+      icon: "i-heroicons-clipboard-document"
+    }] : [],
+    ... has("plants") ? [{
+      label: "Objekte",
+      to: "/standardEntity/plants",
+      icon: "i-heroicons-clipboard-document"
+    },] : [],
+    /*... has("checks") ? [{
+      label: "Überprüfungen",
+      to: "/standardEntity/checks",
+      icon: "i-heroicons-magnifying-glass"
+    },] : [],*/
+    {
+      label: "Einstellungen",
+      defaultOpen: false,
+      icon: "i-heroicons-cog-8-tooth",
+      children: [
+        {
+          label: "Nummernkreise",
+          to: "/settings/numberRanges",
+          icon: "i-heroicons-clipboard-document-list",
+        },/*{
+          label: "Rollen",
+          to: "/roles",
+          icon: "i-heroicons-key"
+        },*/{
+          label: "E-Mail Konten",
+          to: "/settings/emailaccounts",
+          icon: "i-heroicons-envelope",
+        },{
+          label: "Bankkonten",
+          to: "/settings/banking",
+          icon: "i-heroicons-currency-euro",
+        },{
+          label: "Textvorlagen",
+          to: "/settings/texttemplates",
+          icon: "i-heroicons-clipboard-document-list",
+        },/*{
+          label: "Eigene Felder",
+          to: "/settings/ownfields",
+          icon: "i-heroicons-clipboard-document-list"
+        },*/{
+          label: "Firmeneinstellungen",
+          to: "/settings/tenant",
+          icon: "i-heroicons-building-office",
+        },{
+          label: "Projekttypen",
+          to: "/projecttypes",
+          icon: "i-heroicons-clipboard-document-list",
+        },{
+          label: "Export",
+          to: "/export",
+          icon: "i-heroicons-clipboard-document-list"
+        }
+      ]
+    }
+  ]
+})
+
+// nur Items mit Children → für Accordion
+const accordionItems = computed(() =>
+    links.value.filter(item => Array.isArray(item.children) && item.children.length > 0)
+)
+
+// nur Items ohne Children → als Buttons
+const buttonItems = computed(() =>
+    links.value.filter(item => !item.children || item.children.length === 0)
+)
+</script>
+
+<template>
+  <!-- Standalone Buttons -->
+  <div class="flex flex-col gap-1">
+    <UButton
+        v-for="item in buttonItems"
+        :key="item.label"
+        :variant="item.pinned ? 'ghost' : 'ghost'"
+        :color="(item.to && route.path === item.to) ? 'primary' : (item.pinned ? 'amber' : 'gray')"
+        :icon="item.pinned ? 'i-heroicons-star' : item.icon"
+        class="w-full"
+        :to="item.to"
+        :target="item.target"
+    >
+      <UIcon
+          v-if="item.pinned"
+          :name="item.icon"
+          class="w-5 h-5 me-2"
+      />
+      {{ item.label }}
+    </UButton>
+  </div>
+  <UDivider/>
+  <!-- Accordion für die Items mit Children -->
+  <UAccordion
+      :items="accordionItems"
+      :multiple="false"
+      class="mt-2"
+  >
+    <template #default="{ item, open }">
+      <UButton
+          :variant="'ghost'"
+          :color="(item.children?.some(c => route.path.includes(c.to))) ? 'primary' : 'gray'"
+          :icon="item.icon"
+          class="w-full"
+      >
+        {{ item.label }}
+        <template #trailing>
+          <UIcon
+              name="i-heroicons-chevron-right-20-solid"
+              class="w-5 h-5 ms-auto transform transition-transform duration-200"
+              :class="[open && 'rotate-90']"
+          />
+        </template>
+      </UButton>
+    </template>
+
+    <template #item="{ item }">
+      <div class="flex flex-col">
+        <UButton
+            v-for="child in item.children"
+            :key="child.label"
+            variant="ghost"
+            :color="child.to === route.path ? 'primary' : 'gray'"
+            :icon="child.icon"
+            class="ml-4"
+            :to="child.to"
+            :target="child.target"
+            :disabled="child.disabled"
+        >
+          {{ child.label }}
+        </UButton>
+      </div>
+    </template>
+  </UAccordion>
+<!--  <UAccordion
+      :items="links"
+      :multiple="false"
+  >
+    <template #default="{ item, index, open }">
+      <UButton
+          :variant="item.pinned ? 'ghost' : 'ghost'"
+          :color="(item.to && route.path === item.to) || (item.children?.some(c => route.path.includes(c.to))) ? 'primary' : (item.pinned ? 'amber' : 'gray')"
+          :icon="item.pinned ? 'i-heroicons-star' : item.icon"
+          class="w-full"
+          :to="item.to"
+          :target="item.target"
+      >
+        <UIcon
+            v-if="item.pinned"
+            :name="item.icon" class="w-5 h-5 me-2" />
+        {{ item.label }}
+
+        <template v-if="item.children" #trailing>
+          <UIcon
+              name="i-heroicons-chevron-right-20-solid"
+              class="w-5 h-5 ms-auto transform transition-transform duration-200"
+              :class="[open && 'rotate-90']"
+          />
+        </template>
+      </UButton>
+    </template>
+
+    <template #item="{ item }">
+      <div class="flex flex-col" v-if="item.children?.length > 0">
+        <UButton
+            v-for="child in item.children"
+            :key="child.label"
+            variant="ghost"
+            :color="child.to === route.path ? 'primary' : 'gray'"
+            :icon="child.icon"
+            class="ml-4"
+            :to="child.to"
+            :target="child.target"
+        >
+          {{ child.label }}
+        </UButton>
+      </div>
+    </template>
+  </UAccordion>-->
+
+</template>
\ No newline at end of file
diff --git a/frontend/components/Map.vue b/frontend/components/Map.vue
new file mode 100644
index 0000000..f32ffd1
--- /dev/null
+++ b/frontend/components/Map.vue
@@ -0,0 +1,64 @@
+<script setup>
+
+const props = defineProps({
+  startMarker: {
+    type: Array,
+    required: true
+  },
+  endMarker: {
+    type: Array,
+    required: true
+  }
+})
+
+const {startMarker,endMarker} = props
+
+const zoom =ref(2)
+
+
+
+
+</script>
+
+<template>
+  <div class="h-full w-full">
+    <LMap
+        style="height: 300px;"
+        :center="startMarker"
+        :use-global-leaflet="false"
+        :zoom="10"
+        ref="map"
+    >
+      <LTileLayer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
+          layer-type="base"
+          name="OpenStreetMap"
+      />
+      <LMarker
+          :lat-lng="startMarker"
+      >
+        <LIcon
+            icon-url="https://api.iconify.design/heroicons:map-pin-solid.svg"
+        />
+      </LMarker>
+      <LMarker
+          :lat-lng="endMarker"
+      >
+        <LIcon
+            icon-url="https://api.iconify.design/heroicons:flag-solid.svg"
+        />
+      </LMarker>
+    </LMap>
+    <div class="w-2/3 mx-auto mt-3 flex flex-row justify-between">
+
+      <p><UIcon name="i-heroicons-map-pin-solid" class="mr-3"/>Start</p>
+
+      <p><UIcon name="i-heroicons-flag-solid" class="mr-3"/>Ziel</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/NotificationsSlideover.vue b/frontend/components/NotificationsSlideover.vue
new file mode 100644
index 0000000..a66d9bf
--- /dev/null
+++ b/frontend/components/NotificationsSlideover.vue
@@ -0,0 +1,60 @@
+<script setup>
+import {formatTimeAgo} from '@vueuse/core'
+
+const supabase = useSupabaseClient()
+
+
+const { isNotificationsSlideoverOpen } = useDashboard()
+
+watch(isNotificationsSlideoverOpen, async (newVal,oldVal) => {
+  if(newVal === true) {
+    await setup()
+  }
+})
+
+const notifications = ref([])
+
+const setup = async () => {
+  notifications.value = (await supabase.from("notifications").select()).data
+}
+
+setup()
+
+const setNotificationAsRead = async (notification) => {
+  console.log(notification)
+
+  const {data,error} = await supabase.from("notifications").update({read: true}).eq("id", notification.id)
+
+  console.log(error)
+
+  setup()
+
+}
+</script>
+
+<template>
+  <UDashboardSlideover v-model="isNotificationsSlideoverOpen" title="Benachrichtigungen">
+    <NuxtLink
+        v-for="notification in notifications"
+        :key="notification.id"
+        :to="notification.link"
+        class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative"
+        @click="setNotificationAsRead(notification)"
+    >
+      <UChip color="primary" :show="!notification.read" inset>
+        <UAvatar alt="FEDEO" size="md" />
+      </UChip>
+
+      <div class="text-sm flex-1">
+        <p class="flex items-center justify-between">
+          <span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span>
+
+          <time :datetime="notification.date" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.created_at))" />
+        </p>
+        <p class="text-gray-500 dark:text-gray-400">
+          {{ notification.message }}
+        </p>
+      </div>
+    </NuxtLink>
+  </UDashboardSlideover>
+</template>
diff --git a/frontend/components/OwnFields.vue b/frontend/components/OwnFields.vue
new file mode 100644
index 0000000..d2c76fb
--- /dev/null
+++ b/frontend/components/OwnFields.vue
@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({
+  resource: {
+    required: true,
+    type: String
+  },
+  elementId: {
+    required: true,
+    type: String
+  },
+  edit: {
+    type: Boolean
+  }
+})
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/PDFViewer.client.vue b/frontend/components/PDFViewer.client.vue
new file mode 100644
index 0000000..2397391
--- /dev/null
+++ b/frontend/components/PDFViewer.client.vue
@@ -0,0 +1,243 @@
+<script setup>
+import { ref, onMounted, watch } from "vue"
+import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer"
+
+const props = defineProps({
+  // Beispiel: "FEDEO/26/filesbyid/11990345-8711-4e23-8851-c50f028fc915/RE25-1081.pdf"
+  fileId: {
+    type: String,
+  },
+  uri: {
+    type: String,
+  },
+  scale: {
+    type: Number,
+    default: 1.2,
+  },
+  location: {
+    type: String,
+
+  },
+  noControls: {
+    type: Boolean,
+    default: false,
+  }
+})
+
+
+const config = useRuntimeConfig()
+useLicense(config.public.pdfLicense)
+
+const tempStore = useTempStore()
+
+const pdfSrc = ref(null) // ObjectURL fürs Viewer
+const { $api } = useNuxtApp()
+
+async function loadPdf(id) {
+  try {
+    const arrayBuffer = await $api(`/api/files/download/${id}`, {
+      method: "POST",
+      responseType: "arrayBuffer", // wichtig für pdf.js
+    })
+    const blob = new Blob([arrayBuffer], { type: "application/pdf" })
+    pdfSrc.value = URL.createObjectURL(blob)
+  } catch (err) {
+    console.error("Fehler beim Laden der PDF:", err)
+  }
+}
+
+onMounted(() => {
+  if(props.fileId) {
+    loadPdf(props.fileId)
+  } else if(props.uri) {
+    pdfSrc.value = props.uri
+  }
+
+  //window.addEventListener("resize", handleZoomTool("pageWidth"), true);
+
+})
+watch(() => props.fileId, (newPath) => {
+  if (newPath) loadPdf(newPath)
+})
+
+const vpvRef = ref(null);
+
+//Zoom Control
+
+const zoomControl = computed(() => vpvRef.value?.zoomControl)
+
+const currentScale = computed(() => {
+  return zoomControl.value?.scale
+})
+
+const handleZoomTool = (type, rawScale) => {
+  console.log(type)
+  const zoomCtrl = unref(zoomControl)
+  if (!zoomCtrl) return
+
+  const scale = unref(currentScale)
+  if(!type ){
+    zoomCtrl.zoom(rawScale)
+  } else if (type === "in") {
+    scale && zoomCtrl.zoom(scale + 0.25)
+  } else if (type === "out") {
+    scale && zoomCtrl.zoom(scale - 0.25)
+  } else {
+    zoomCtrl.zoom(type)
+  }
+
+  if(["in","out"].includes(type)){
+    tempStore.modifySettings(`pdfviewer-scale-${props.location}`,scale)
+  }
+
+}
+//Page Control
+const pageControl = computed(() => vpvRef.value?.pageControl)
+const currentPageInput = computed(() => pageControl.value?.currentPage)
+const searchControl = computed(() => vpvRef.value?.searchControl)
+const totalMatches = computed(() => searchControl.value?.searchMatches?.totalMatches)
+
+const isNextPageButtonDisable = computed(() =>
+    pageControl.value?.currentPage === pageControl.value?.totalPages
+)
+
+const isPreviousPageButtonDisable = computed(() =>
+    pageControl.value?.currentPage === 1
+)
+
+const prevPage = () => {
+  const isFirstPage = pageControl.value?.currentPage === 1
+  if (isFirstPage) return
+  pageControl.value?.goToPage(pageControl.value?.currentPage - 1)
+}
+
+const nextPage = () => {
+  const isLastPage = pageControl.value?.currentPage === pageControl.value?.totalPages
+  if (isLastPage) return
+  pageControl.value?.goToPage(pageControl.value?.currentPage + 1)
+}
+
+const handleKeyPress = (event) => {
+  if (event.key === "Enter") {
+    handlePageInput(event)
+  }
+}
+
+//Handle Download
+const downloadControl = computed(() => vpvRef.value?.downloadControl)
+
+const handleDownloadFile = async () => {
+  if(props.fileId){
+    await useFiles().downloadFile(props.fileId)
+  } else if(props.uri){
+    const a = document.createElement("a");
+    a.href = props.uri;
+    a.download = "entwurf.pdf";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+
+
+
+  /*const downloadCtrl = unref(downloadControl)
+  if (!downloadCtrl) return
+  downloadCtrl.download()*/
+}
+
+watch(downloadControl, (downloadCtrl) => {
+  if (!downloadCtrl) return
+
+  downloadCtrl.onError = (error) => {
+    console.log("Download error", error)
+  }
+
+  downloadCtrl.onComplete = () => {
+    console.log("Download completed")
+  }
+})
+
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 justify-self-center" v-if="!noControls">
+    <div class="flex items-center gap-4 text-[#7862FF] bg-pale-blue border-[#D7D1FB] rounded-lg p-2 justify-center">
+
+      <!-- Zoom out button -->
+      <UButton
+          @click="() => handleZoomTool('pageWidth')"
+          icon="i-heroicons-document-text"
+          variant="outline"
+      ></UButton>
+
+      <UButton
+          @click="() => handleZoomTool('out')"
+          icon="i-heroicons-magnifying-glass-minus"
+          variant="outline"
+      ></UButton>
+
+      <!-- Zoom in button -->
+      <UButton
+          @click="() => handleZoomTool('in')"
+          icon="i-heroicons-magnifying-glass-plus"
+          variant="outline"
+      ></UButton>
+      <UButton
+          v-if="props.fileId || props.uri"
+        @click="handleDownloadFile"
+        variant="outline"
+        icon="i-heroicons-arrow-down-on-square"
+      />
+      <UButton
+          @click="prevPage"
+          :disabled="isPreviousPageButtonDisable"
+          icon="i-heroicons-chevron-up"
+          variant="outline"
+      ></UButton>
+
+
+
+      <!-- Page number input and total pages display -->
+      <div class="flex items-center text-sm font-normal">
+        <UInput
+            v-model="currentPageInput"
+            class="w-24 h-8 rounded-sm focus:outline-none"
+            @change="handleKeyPress"
+        >
+          <template #trailing>
+            / {{ pageControl?.totalPages }}
+          </template>
+        </UInput>
+      </div>
+
+      <!-- Next page button -->
+      <UButton
+          @click="nextPage"
+          :disabled="isNextPageButtonDisable"
+          icon="i-heroicons-chevron-down"
+          variant="outline"
+      ></UButton>
+    </div>
+  </div>
+  <div class="pdf-container">
+    <VPdfViewer
+        v-if="pdfSrc"
+        :src="pdfSrc"
+        style="height: 78vh; width: 100%;"
+        :toolbar-options="false"
+        ref="vpvRef"
+        @loaded="handleZoomTool(null,tempStore.settings[`pdfviewer-scale-${props.location}`] || 1)"
+    />
+    <div v-else>
+      <UProgress
+          class="mt-5 w-2/3 mx-auto"
+          animation="carousel"></UProgress>
+    </div>
+  </div></template>
+
+<style scoped>
+.pdf-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/frontend/components/PageLeaveGuard.vue b/frontend/components/PageLeaveGuard.vue
new file mode 100644
index 0000000..af9a563
--- /dev/null
+++ b/frontend/components/PageLeaveGuard.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
+
+// Wir erwarten eine Prop, die sagt, ob geschützt werden soll
+const props = defineProps<{
+  when: boolean // z.B. true, wenn Formular dirty ist
+}>()
+
+const showModal = ref(false)
+const pendingNext = ref<null | ((val?: boolean) => void)>(null)
+
+// --- 1. Interne Navigation (Nuxt) ---
+onBeforeRouteLeave((to, from, next) => {
+  if (!props.when) {
+    next()
+    return
+  }
+
+  // Navigation pausieren & Modal zeigen
+  pendingNext.value = next
+  showModal.value = true
+})
+
+const confirmLeave = () => {
+  if (pendingNext.value) pendingNext.value()
+  showModal.value = false
+}
+
+const cancelLeave = () => {
+  showModal.value = false
+  // Navigation wird implizit abgebrochen
+}
+
+// --- 2. Externe Navigation (Browser Tab schließen) ---
+const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+  if (props.when) {
+    e.preventDefault()
+    e.returnValue = ''
+  }
+}
+
+onMounted(() => window.addEventListener('beforeunload', handleBeforeUnload))
+onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnload))
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="showModal" class="guard-overlay">
+      <div class="guard-modal">
+
+        <div class="guard-header">
+          <slot name="title">Seite wirklich verlassen?</slot>
+        </div>
+
+        <div class="guard-body">
+          <slot>
+            Du hast ungespeicherte Änderungen. Diese gehen verloren, wenn du die Seite verlässt.
+          </slot>
+        </div>
+
+        <div class="guard-actions">
+          <button @click="cancelLeave" class="btn-cancel">
+            Nein, bleiben
+          </button>
+          <button @click="confirmLeave" class="btn-confirm">
+            Ja, verlassen
+          </button>
+        </div>
+
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+/* Basis-Styling - passe dies an dein Design System an */
+.guard-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 9999; backdrop-filter: blur(2px);
+}
+.guard-modal {
+  background: white; padding: 24px; border-radius: 12px;
+  width: 90%; max-width: 400px; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+  font-family: sans-serif;
+}
+.guard-header { font-size: 1.25rem; font-weight: bold; margin-bottom: 1rem; }
+.guard-body { margin-bottom: 1.5rem; color: #4a5568; }
+.guard-actions { display: flex; justify-content: flex-end; gap: 12px; }
+
+/* Buttons */
+button { padding: 8px 16px; border-radius: 6px; cursor: pointer; border: none; font-weight: 600;}
+.btn-cancel { background: #edf2f7; color: #2d3748; }
+.btn-cancel:hover { background: #e2e8f0; }
+.btn-confirm { background: #e53e3e; color: white; }
+.btn-confirm:hover { background: #c53030; }
+</style>
\ No newline at end of file
diff --git a/frontend/components/Placeholder.vue b/frontend/components/Placeholder.vue
new file mode 100644
index 0000000..35c3338
--- /dev/null
+++ b/frontend/components/Placeholder.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="relative overflow-hidden rounded border border-dashed border-gray-400 dark:border-gray-500 opacity-75 px-4 flex items-center justify-center">
+    <svg class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10" fill="none">
+      <defs>
+        <pattern
+            id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+            x="0"
+            y="0"
+            width="10"
+            height="10"
+            patternUnits="userSpaceOnUse"
+        >
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+        </pattern>
+      </defs>
+      <rect stroke="none" fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)" width="100%" height="100%" />
+    </svg>
+
+    <slot />
+  </div>
+</template>
\ No newline at end of file
diff --git a/frontend/components/ProfileSelection.vue b/frontend/components/ProfileSelection.vue
new file mode 100644
index 0000000..49ce1f3
--- /dev/null
+++ b/frontend/components/ProfileSelection.vue
@@ -0,0 +1,24 @@
+<script setup>
+
+const profileStore = useProfileStore()
+
+
+
+</script>
+
+<template>
+  <div class="w-1/2 mx-auto">
+    <p class="text-2xl mb-5 text-center">Bitte wähle dein gewünschtes Profil</p>
+    <div v-for="profile in profileStore.ownProfiles" class="flex justify-between my-3">
+      {{profileStore.tenants.find(i => i.id === profile.tenant).name}}
+      <UButton
+        variant="outline"
+        @click="profileStore.changeProfile(profile.id)"
+      >Auswählen</UButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/PublicDynamicForm.vue b/frontend/components/PublicDynamicForm.vue
new file mode 100644
index 0000000..a3cdd07
--- /dev/null
+++ b/frontend/components/PublicDynamicForm.vue
@@ -0,0 +1,201 @@
+<script setup>
+import dayjs from 'dayjs'
+
+const props = defineProps({
+  context: { type: Object, required: true },
+  token: { type: String, required: true },
+  pin: { type: String, default: '' }
+})
+
+const emit = defineEmits(['success'])
+const { $api } = useNuxtApp()
+const toast = useToast()
+
+const config = computed(() => props.context.config)
+const data = computed(() => props.context.data)
+
+// Initiale Werte setzen
+const form = ref({
+  profile: props.context.meta?.defaultProfileId || null,
+  project: null,
+  service: config.value?.defaults?.serviceId || null,
+  // Wenn manualTime erlaubt, setze Startzeit auf jetzt, sonst null (wird im Backend gesetzt)
+  startDate: config.value?.features?.timeTracking?.allowManualTime ? new Date() : null,
+  endDate: config.value?.features?.timeTracking?.allowManualTime ? dayjs().add(1, 'hour').toDate() : null,
+  dieselUsage: 0,
+  description: ''
+})
+
+const isSubmitting = ref(false)
+const errors = ref({})
+
+// Validierung basierend auf JSON Config
+const validate = () => {
+  errors.value = {}
+  let isValid = true
+  const validationRules = config.value.validation || {}
+
+  // Standard-Validierung
+  if (!form.value.project && data.value.projects?.length > 0) {
+    errors.value.project = 'Pflichtfeld'
+    isValid = false
+  }
+
+  if (!form.value.service && data.value.services?.length > 0) {
+    errors.value.service = 'Pflichtfeld'
+    isValid = false
+  }
+
+  // Profil nur validieren, wenn Auswahl möglich ist
+  if (!form.value.profile && data.value.profiles?.length > 0 && !props.context.meta.defaultProfileId) {
+    errors.value.profile = 'Bitte Mitarbeiter wählen'
+    isValid = false
+  }
+
+  // Feature: Agriculture
+  if (config.value.features?.agriculture?.showDieselUsage && validationRules.requireDiesel) {
+    if (!form.value.dieselUsage || form.value.dieselUsage <= 0) {
+      errors.value.diesel = 'Dieselverbrauch erforderlich'
+      isValid = false
+    }
+  }
+
+  return isValid
+}
+
+const submit = async () => {
+  if (!validate()) return
+
+  isSubmitting.value = true
+  try {
+    const payload = { ...form.value }
+
+    // Headers vorbereiten (PIN mitsenden!)
+    const headers = {}
+    if (props.pin) headers['x-public-pin'] = props.pin
+
+    // An den Submit-Endpunkt senden (den müssen wir im Backend noch bauen!)
+    await $fetch(`http://localhost:3100/workflows/submit/${props.token}`, {
+      method: 'POST',
+      body: payload,
+      headers
+    })
+
+    emit('success')
+  } catch (e) {
+    console.error(e)
+    toast.add({ title: 'Fehler beim Speichern', color: 'red' })
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <UCard :ui="{ body: { padding: 'p-6 sm:p-8' } }" v-if="props.context && props.token">
+    <template #header>
+      <div class="text-center">
+        <h1 class="text-xl font-bold text-gray-900">{{ config?.ui?.title || 'Erfassung' }}</h1>
+        <p v-if="config?.ui?.description" class="text-sm text-gray-500 mt-1">{{ config?.ui?.description }}</p>
+      </div>
+    </template>
+
+    <div class="space-y-5">
+
+      <UFormGroup
+          v-if="!context?.meta?.defaultProfileId && data?.profiles?.length > 0"
+          label="Mitarbeiter"
+          :error="errors.profile"
+          required
+      >
+        <USelectMenu
+            v-model="form.profile"
+            :options="data.profiles"
+            option-attribute="fullName"
+            value-attribute="id"
+            placeholder="Name auswählen..."
+            searchable
+            searchable-placeholder="Suchen..."
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          v-if="data?.projects?.length > 0"
+          :label="config.ui?.labels?.project || 'Projekt'"
+          :error="errors.project"
+          required
+      >
+        <USelectMenu
+            v-model="form.project"
+            :options="data.projects"
+            option-attribute="name"
+            value-attribute="id"
+            placeholder="Wählen..."
+            searchable
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          v-if="data?.services?.length > 0"
+          :label="config?.ui?.labels?.service || 'Leistung'"
+          :error="errors.service"
+          required
+      >
+        <USelectMenu
+            v-model="form.service"
+            :options="data.services"
+            option-attribute="name"
+            value-attribute="id"
+            placeholder="Wählen..."
+        />
+      </UFormGroup>
+
+      <div v-if="config?.features?.timeTracking?.allowManualTime" class="grid grid-cols-2 gap-3">
+        <UFormGroup label="Start">
+          <input
+              type="datetime-local"
+              class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-600 sm:text-sm sm:leading-6 px-2"
+              :value="dayjs(form.startDate).format('YYYY-MM-DDTHH:mm')"
+              @input="e => form.startDate = new Date(e.target.value)"
+          />
+        </UFormGroup>
+        <UFormGroup label="Ende">
+          <input
+              type="datetime-local"
+              class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-600 sm:text-sm sm:leading-6 px-2"
+              :value="dayjs(form.endDate).format('YYYY-MM-DDTHH:mm')"
+              @input="e => form.endDate = new Date(e.target.value)"
+          />
+        </UFormGroup>
+      </div>
+
+      <UFormGroup
+          v-if="config?.features?.agriculture?.showDieselUsage"
+          label="Dieselverbrauch"
+          :error="errors.diesel"
+          :required="config?.validation?.requireDiesel"
+      >
+        <UInput v-model="form.dieselUsage" type="number" step="0.1" placeholder="0.0">
+          <template #trailing>
+            <span class="text-gray-500 text-xs">Liter</span>
+          </template>
+        </UInput>
+      </UFormGroup>
+
+      <UFormGroup :label="config?.ui?.labels?.description || 'Notiz'">
+        <UTextarea v-model="form.description" :rows="3" />
+      </UFormGroup>
+
+    </div>
+
+    <template #footer>
+      <UButton
+          block
+          size="xl"
+          :loading="isSubmitting"
+          @click="submit"
+          :label="config?.ui?.submitButtonText || 'Speichern'"
+      />
+    </template>
+  </UCard>
+</template>
\ No newline at end of file
diff --git a/frontend/components/StaffTimeEntryModal.vue b/frontend/components/StaffTimeEntryModal.vue
new file mode 100644
index 0000000..dcf370f
--- /dev/null
+++ b/frontend/components/StaffTimeEntryModal.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormSubmitEvent } from '#ui/types'
+import { useStaffTime } from '~/composables/useStaffTime'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  entry: { type: Object, default: null },
+  defaultUserId: { type: String, default: null }
+})
+
+const emit = defineEmits(['update:modelValue', 'saved'])
+
+// 💡 createEntry importieren
+const { update, createEntry } = useStaffTime()
+const { $dayjs } = useNuxtApp()
+const toast = useToast()
+
+const loading = ref(false)
+
+const types = [
+  { label: 'Arbeitszeit', value: 'work' },
+  { label: 'Pause', value: 'pause' },
+  { label: 'Urlaub', value: 'vacation' },
+  { label: 'Krankheit', value: 'sick' },
+  { label: 'Feiertag', value: 'holiday' },
+  { label: 'Sonstiges', value: 'other' }
+]
+
+const state = reactive({
+  start_date: '',
+  start_time: '',
+  end_date: '',
+  end_time: '',
+  type: 'work',
+  description: ''
+})
+
+const schema = z.object({
+  start_date: z.string().min(1, 'Datum erforderlich'),
+  start_time: z.string().min(1, 'Zeit erforderlich'),
+  type: z.string(),
+  description: z.string().optional()
+})
+
+const isOpen = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+const toDateStr = (dateStr: string) => dateStr ? $dayjs(dateStr).format('YYYY-MM-DD') : ''
+const toTimeStr = (dateStr: string) => dateStr ? $dayjs(dateStr).format('HH:mm') : ''
+
+watch(() => props.entry, (newVal) => {
+  if (newVal) {
+    // EDIT
+    state.start_date = toDateStr(newVal.started_at)
+    state.start_time = toTimeStr(newVal.started_at)
+    state.end_date = newVal.stopped_at ? toDateStr(newVal.stopped_at) : ''
+    state.end_time = newVal.stopped_at ? toTimeStr(newVal.stopped_at) : ''
+    state.type = newVal.type || 'work'
+    state.description = newVal.description || ''
+  } else {
+    // CREATE (Standardwerte: Heute)
+    const now = $dayjs()
+    state.start_date = now.format('YYYY-MM-DD')
+    state.start_time = now.format('HH:mm')
+    state.end_date = ''
+    state.end_time = ''
+    state.type = 'work'
+    state.description = ''
+  }
+}, { immediate: true })
+
+async function onSubmit(event: FormSubmitEvent<any>) {
+  loading.value = true
+  try {
+    // 1. Datum und Zeit kombinieren
+    const startIso = $dayjs(`${state.start_date} ${state.start_time}`).toISOString()
+
+    let endIso = null
+    if (state.end_date && state.end_time) {
+      endIso = $dayjs(`${state.end_date} ${state.end_time}`).toISOString()
+
+      if ($dayjs(endIso).isBefore($dayjs(startIso))) {
+        throw new Error("Endzeitpunkt muss nach dem Startzeitpunkt liegen.")
+      }
+    }
+
+    if (props.entry) {
+      // 🟢 UPDATE (Bearbeiten)
+      await update(props.entry, {
+        start: startIso,
+        end: endIso,
+        type: state.type,
+        description: state.description
+      })
+      toast.add({ title: 'Eintrag aktualisiert', color: 'green' })
+    } else {
+      // 🟢 CREATE (Neu Erstellen)
+      // 💡 HIER WAR DER FEHLER: Wir nutzen jetzt createEntry mit den Daten aus dem Formular
+      await createEntry({
+        start: startIso,   // Die eingegebene Startzeit
+        end: endIso,       // Die eingegebene Endzeit (oder null)
+        type: state.type,
+        description: state.description
+      })
+
+      toast.add({ title: 'Zeit manuell erfasst', color: 'green' })
+    }
+
+    emit('saved')
+    isOpen.value = false
+  } catch (error: any) {
+    toast.add({ title: 'Fehler', description: error.message, color: 'red' })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal v-model="isOpen">
+    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            {{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+        </div>
+      </template>
+
+      <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+
+        <UFormGroup label="Typ" name="type">
+          <USelectMenu v-model="state.type" :options="types" value-attribute="value" option-attribute="label" />
+        </UFormGroup>
+
+        <div class="grid grid-cols-2 gap-4">
+          <UFormGroup label="Start Datum" name="start_date">
+            <UInput type="date" v-model="state.start_date" />
+          </UFormGroup>
+          <UFormGroup label="Start Zeit" name="start_time">
+            <UInput type="time" v-model="state.start_time" />
+          </UFormGroup>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+          <UFormGroup label="Ende Datum" name="end_date">
+            <UInput type="date" v-model="state.end_date" />
+          </UFormGroup>
+          <UFormGroup label="Ende Zeit" name="end_time">
+            <UInput type="time" v-model="state.end_time" />
+          </UFormGroup>
+        </div>
+        <p class="text-xs text-gray-500 -mt-2">Leer lassen, wenn die Zeit noch läuft.</p>
+
+        <UFormGroup label="Beschreibung / Notiz" name="description">
+          <UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
+        </UFormGroup>
+
+        <div class="flex justify-end gap-2 pt-4">
+          <UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
+          <UButton type="submit" label="Speichern" color="primary" :loading="loading" />
+        </div>
+      </UForm>
+    </UCard>
+  </UModal>
+</template>
\ No newline at end of file
diff --git a/frontend/components/StandardEntityModal.vue b/frontend/components/StandardEntityModal.vue
new file mode 100644
index 0000000..98850ac
--- /dev/null
+++ b/frontend/components/StandardEntityModal.vue
@@ -0,0 +1,98 @@
+<script setup>
+
+const toast = useToast()
+const dataStore = useDataStore()
+const supabase = useSupabaseClient()
+const modal = useModal()
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+  mode: {
+    type: String,
+    required: true,
+    default: "show"
+  },
+  createQuery: {
+    type: Object
+  },
+  id: {
+    type: String,
+  },
+})
+
+
+
+const emit = defineEmits(["updateNeeded","returnData"])
+
+const dataType = dataStore.dataTypes[props.type]
+
+const loaded = ref(false)
+const items = ref([])
+const item = ref({})
+
+const setupPage = async () => {
+  if(props.mode === "show") {
+    //Load Data for Show
+    item.value = await useEntities(props.type).selectSingle(props.id, dataType.supabaseSelectWithInformation || "*")
+  } else if(props.mode === "edit") {
+    //Load Data for Edit
+    const data = JSON.stringify(await useEntities(props.type).selectSingle(props.id)/*(await supabase.from(props.type).select().eq("id", props.id).single()).data*/)
+    //await useSupabaseSelectSingle(type, route.params.id)
+    item.value = data
+
+  }  else if(props.mode === "create") {
+    //Load Data for Create
+    item.value = JSON.stringify({})
+
+  } else if(props.mode === "list") {
+    //Load Data for List
+    items.value = await useEntities(props.type).select(dataType.supabaseSelectWithInformation || "*", dataType.supabaseSortColumn,dataType.supabaseSortAscending || false)
+  }
+
+  loaded.value = true
+}
+
+setupPage()
+
+
+
+
+</script>
+
+<template>
+  <UModal :fullscreen="props.mode === 'show'">
+    <EntityShow
+        v-if="loaded && props.mode === 'show'"
+        :type="props.type"
+        :item="item"
+        @updateNeeded="setupPage"
+        :key="item"
+        :in-modal="true"
+    />
+    <EntityEdit
+        v-else-if="loaded && (props.mode === 'edit' || props.mode === 'create')"
+        :type="props.type"
+        :item="item"
+        :inModal="true"
+        @return-data="(data) => emit('return-data',data)"
+        :createQuery="props.createQuery"
+        :mode="props.mode"
+    />
+<!--    <EntityList
+        v-else-if="loaded && props.mode === 'list'"
+        :type="props.type"
+        :items="items"
+    />-->
+    <UProgress
+        v-else
+        animation="carousel"
+        class="p-5 mt-10"
+    />
+  </UModal>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/TenantDropdown.vue b/frontend/components/TenantDropdown.vue
new file mode 100644
index 0000000..fa5eb6f
--- /dev/null
+++ b/frontend/components/TenantDropdown.vue
@@ -0,0 +1,27 @@
+<script setup>
+const auth = useAuthStore()
+
+const selectedTenant = ref(auth.user.tenant_id)
+
+
+</script>
+
+<template>
+  <USelectMenu
+    :options="auth.tenants"
+    value-attribute="id"
+    class="w-40"
+    @change="auth.switchTenant(selectedTenant)"
+    v-model="selectedTenant"
+  >
+    <UButton color="gray" variant="ghost" :class="[open && 'bg-gray-50 dark:bg-gray-800']" class="w-full">
+      <UAvatar :alt="auth.activeTenantData?.name" size="md" />
+
+      <span class="truncate text-gray-900 dark:text-white font-semibold">{{auth.tenants.find(i => auth.activeTenant === i.id).name}}</span>
+    </UButton>
+
+    <template #option="{option}">
+      {{option.name}}
+    </template>
+  </USelectMenu>
+</template>
\ No newline at end of file
diff --git a/frontend/components/Tiptap.vue b/frontend/components/Tiptap.vue
new file mode 100644
index 0000000..0adeb65
--- /dev/null
+++ b/frontend/components/Tiptap.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="p-3 editor">
+    <div v-if="editor">
+      <InputGroup class="mb-3">
+        <UButton
+            @click="editor.chain().focus().toggleBold().run()"
+            :disabled="!editor.can().chain().focus().toggleBold().run()"
+            :class="{ 'is-active': editor.isActive('bold') }"
+            icon="i-heroicons-bold"
+            variant="outline"
+        />
+        <UButton
+            @click="editor.chain().focus().toggleItalic().run()"
+            :disabled="!editor.can().chain().focus().toggleItalic().run()"
+            :class="{ 'is-active': editor.isActive('italic') }"
+            icon="i-heroicons-italic"
+            variant="outline"
+        />
+        <UButton
+            @click="editor.chain().focus().toggleStrike().run()"
+            :disabled="!editor.can().chain().focus().toggleStrike().run()"
+            :class="{ 'is-active': editor.isActive('strike') }"
+            icon="i-mdi-format-strikethrough"
+            variant="outline"
+        />
+        <!--<UButton
+            @click="editor.chain().focus().toggleCode().run()"
+            :disabled="!editor.can().chain().focus().toggleCode().run()"
+            :class="{ 'is-active': editor.isActive('code') }"
+            icon="i-heroicons-code-bracket"
+            variant="outline"
+        />
+              <UButton @click="editor.chain().focus().unsetAllMarks().run()">
+                clear marks
+              </UButton>
+              <UButton @click="editor.chain().focus().clearNodes().run()">
+                clear nodes
+              </UButton>
+        <UButton
+            @click="editor.chain().focus().setParagraph().run()"
+            :class="{ 'is-active': editor.isActive('paragraph') }"
+            variant="outline"
+        >
+          paragraph
+        </UButton>-->
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+            variant="outline"
+        >h1</UButton>
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+            variant="outline"
+        >h2</UButton>
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+            variant="outline"
+        >
+          h3
+        </UButton>
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
+            variant="outline"
+        >
+          h4
+        </UButton>
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
+            variant="outline"
+        >
+          h5
+        </UButton>
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
+            variant="outline"
+        >
+          h6
+        </UButton>
+        <UButton
+            @click="editor.chain().focus().toggleBulletList().run()"
+            :class="{ 'is-active': editor.isActive('bulletList') }"
+            icon="i-heroicons-list-bullet"
+            variant="outline"
+        />
+        <UButton
+            @click="editor.chain().focus().toggleOrderedList().run()"
+            :class="{ 'is-active': editor.isActive('orderedList') }"
+            icon="i-mdi-format-list-numbered"
+            variant="outline"
+        />
+        <!--      <UButton
+                  @click="editor.chain().focus().toggleCodeBlock().run()"
+                  :class="{ 'is-active': editor.isActive('codeBlock') }"
+              >
+                code block
+              </UButton>
+              <UButton
+                  @click="editor.chain().focus().toggleBlockquote().run()"
+                  :class="{ 'is-active': editor.isActive('blockquote') }"
+              >
+                blockquote
+              </UButton>
+              <UButton @click="editor.chain().focus().setHorizontalRule().run()">
+                horizontal rule
+              </UButton>
+              <UButton @click="editor.chain().focus().setHardBreak().run()">
+                hard break
+              </UButton>
+              <UButton
+                  @click="editor.chain().focus().undo().run()"
+                  :disabled="!editor.can().chain().focus().undo().run()"
+              >
+                undo
+              </UButton>
+              <UButton
+                  @click="editor.chain().focus().redo().run()"
+                  :disabled="!editor.can().chain().focus().redo().run()"
+              >
+                redo
+              </UButton>-->
+      </InputGroup>
+
+    </div>
+
+    <TiptapEditorContent :editor="editor" />
+
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['updateContent'])
+
+const props = defineProps({
+  preloadedContent: {
+    type: String,
+    required:false
+  }
+})
+
+const {preloadedContent} = props
+
+const editor = useEditor({
+  content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
+  extensions: [TiptapStarterKit],
+  onUpdate({editor}) {
+    //console.log(editor.getJSON())
+    //console.log(editor.getHTML())
+    //console.log(editor.getText())
+    emit('updateContent',{json: editor.getJSON(),html: editor.getHTML(), text: editor.getText()})
+  },
+  onCreate({editor}) {
+    editor.commands.setContent(preloadedContent)
+    emit('updateContent',{json: editor.getJSON(),html: editor.getHTML(), text: editor.getText()})
+  }
+});
+
+onBeforeUnmount(() => {
+  unref(editor).destroy();
+});
+</script>
+
+<style scoped>
+.editor {
+  border: 1px solid #69c350;
+  border-radius: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/Toolbar.vue b/frontend/components/Toolbar.vue
new file mode 100644
index 0000000..3f4b716
--- /dev/null
+++ b/frontend/components/Toolbar.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="flex flex-row justify-between">
+    <InputGroup>
+      <slot />
+    </InputGroup>
+    <InputGroup>
+      <slot name="right"/>
+    </InputGroup>
+  </div>
+  <UDivider class="my-3"/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/UserDropdown.vue b/frontend/components/UserDropdown.vue
new file mode 100644
index 0000000..7d15569
--- /dev/null
+++ b/frontend/components/UserDropdown.vue
@@ -0,0 +1,62 @@
+<script setup>
+
+const { isHelpSlideoverOpen } = useDashboard()
+const { isDashboardSearchModalOpen } = useUIState()
+const { metaSymbol } = useShortcuts()
+const user = useSupabaseUser()
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+const supabase = useSupabaseClient()
+const router = useRouter()
+const auth = useAuthStore()
+
+const items = computed(() => [
+  [{
+    slot: 'account',
+    label: '',
+    disabled: true
+  }],  [/*{
+    label: 'Mein Profil',
+    icon: 'i-heroicons-user',
+    to: `/profiles/show/${profileStore.activeProfile.id}`
+  },*/{
+    label: 'Passwort ändern',
+    icon: 'i-heroicons-shield-check',
+    to: `/password-change`
+  },{
+    label: 'Abmelden',
+    icon: 'i-heroicons-arrow-left-on-rectangle',
+    click: async () => {
+      await auth.logout()
+
+    }
+  }]
+])
+</script>
+
+<template>
+  <UDropdown mode="hover" :items="items" :ui="{ width: 'w-full', item: { disabled: 'cursor-text select-text' } }" :popper="{ strategy: 'absolute', placement: 'top' }" class="w-full">
+    <template #default="{ open }">
+      <UButton color="gray" variant="ghost" class="w-full" :label="auth.user.email" :class="[open && 'bg-gray-50 dark:bg-gray-800']">
+<!--        <template #leading>
+          <UAvatar :alt="auth.user.email"  size="xs" />
+        </template>-->
+
+        <template #trailing>
+          <UIcon name="i-heroicons-ellipsis-vertical" class="w-5 h-5 ml-auto" />
+        </template>
+      </UButton>
+    </template>
+
+    <template #account>
+      <div class="text-left">
+        <p>
+          Angemeldet als
+        </p>
+        <p class="truncate font-medium text-gray-900 dark:text-white">
+          {{auth.user.email}}
+        </p>
+      </div>
+    </template>
+  </UDropdown>
+</template>
\ No newline at end of file
diff --git a/frontend/components/columnRenderings/active.vue b/frontend/components/columnRenderings/active.vue
new file mode 100644
index 0000000..40035ce
--- /dev/null
+++ b/frontend/components/columnRenderings/active.vue
@@ -0,0 +1,14 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.active" class="text-primary">Ja</span>
+  <span v-else class="text-rose-600">Nein</span>
+</template>
diff --git a/frontend/components/columnRenderings/address.vue b/frontend/components/columnRenderings/address.vue
new file mode 100644
index 0000000..4747bcd
--- /dev/null
+++ b/frontend/components/columnRenderings/address.vue
@@ -0,0 +1,18 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.infoData.streetNumber">{{props.row.infoData.streetNumber}},</span>
+  <span v-if="props.row.infoData.street">{{props.row.infoData.street}},</span>
+  <span v-if="props.row.infoData.special">{{props.row.infoData.special}},</span>
+  <span v-if="props.row.infoData.zip">{{props.row.infoData.zip}},</span>
+  <span v-if="props.row.infoData.city">{{props.row.infoData.city}}</span>
+
+</template>
diff --git a/frontend/components/columnRenderings/contact.vue b/frontend/components/columnRenderings/contact.vue
new file mode 100644
index 0000000..44c889d
--- /dev/null
+++ b/frontend/components/columnRenderings/contact.vue
@@ -0,0 +1,19 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  },
+  inShow: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <div v-if="props.row.contact">
+    <nuxt-link v-if="props.inShow" :to="`/standardEntity/contacts/show/${props.row.contact.id}`">{{props.row.contact ? props.row.contact.name : ''}}</nuxt-link>
+    <span v-else>{{props.row.contact ? props.row.contact.name : ''}}</span>
+  </div></template>
diff --git a/frontend/components/columnRenderings/created_at.vue b/frontend/components/columnRenderings/created_at.vue
new file mode 100644
index 0000000..8edd716
--- /dev/null
+++ b/frontend/components/columnRenderings/created_at.vue
@@ -0,0 +1,15 @@
+<script setup>
+import dayjs from "dayjs";
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.created_at">{{dayjs(props.row.created_at).format("DD.MM.YYYY HH:mm")}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/customer.vue b/frontend/components/columnRenderings/customer.vue
new file mode 100644
index 0000000..5c6d131
--- /dev/null
+++ b/frontend/components/columnRenderings/customer.vue
@@ -0,0 +1,20 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  },
+  inShow: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <div v-if="props.row.customer">
+    <nuxt-link v-if="props.inShow" :to="`/standardEntity/customers/show/${props.row.customer.id}`">{{props.row.customer ? props.row.customer.name : ''}}</nuxt-link>
+    <span v-else>{{props.row.customer ? props.row.customer.name : ''}}</span>
+  </div>
+</template>
diff --git a/frontend/components/columnRenderings/description.vue b/frontend/components/columnRenderings/description.vue
new file mode 100644
index 0000000..0647bd5
--- /dev/null
+++ b/frontend/components/columnRenderings/description.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <div v-if="props.row.description" v-html="props.row.description.html"/>
+</template>
diff --git a/frontend/components/columnRenderings/driver.vue b/frontend/components/columnRenderings/driver.vue
new file mode 100644
index 0000000..6ab690c
--- /dev/null
+++ b/frontend/components/columnRenderings/driver.vue
@@ -0,0 +1,15 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+
+
+</script>
+
+<template>
+  <span v-if="props.row.driver">{{props.row.driver ? "" : props.row.driver}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/endDate.vue b/frontend/components/columnRenderings/endDate.vue
new file mode 100644
index 0000000..984152e
--- /dev/null
+++ b/frontend/components/columnRenderings/endDate.vue
@@ -0,0 +1,15 @@
+<script setup>
+import dayjs from "dayjs";
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.endDate">{{dayjs(props.row.endDate).format("DD.MM.YYYY")}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/endDateTime.vue b/frontend/components/columnRenderings/endDateTime.vue
new file mode 100644
index 0000000..10ebf50
--- /dev/null
+++ b/frontend/components/columnRenderings/endDateTime.vue
@@ -0,0 +1,15 @@
+<script setup>
+import dayjs from "dayjs";
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.endDate">{{dayjs(props.row.endDate).format("DD.MM.YYYY HH:mm")}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/inventoryitemgroupsWithLoad.vue b/frontend/components/columnRenderings/inventoryitemgroupsWithLoad.vue
new file mode 100644
index 0000000..66e8538
--- /dev/null
+++ b/frontend/components/columnRenderings/inventoryitemgroupsWithLoad.vue
@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+
+const supabase = useSupabaseClient()
+
+
+let inventoryitemgroups = await Promise.all(props.row.inventoryitemgroups.map(async (i) => {
+  return (await supabase.from("inventoryitemgroups").select("id,name").eq("id",i).single()).data.name
+}))
+
+</script>
+
+<template>
+  <div v-if="props.row.inventoryitemgroups">
+    {{props.row.inventoryitemgroups ? inventoryitemgroups.join(", ") : ''}}
+  </div>
+</template>
diff --git a/frontend/components/columnRenderings/inventoryitemsWithLoad.vue b/frontend/components/columnRenderings/inventoryitemsWithLoad.vue
new file mode 100644
index 0000000..3763d78
--- /dev/null
+++ b/frontend/components/columnRenderings/inventoryitemsWithLoad.vue
@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+
+const supabase = useSupabaseClient()
+
+
+let inventoryitems = await Promise.all(props.row.inventoryitems.map(async (i) => {
+  return (await supabase.from("inventoryitems").select("id,name").eq("id",i).single()).data.name
+}))
+
+</script>
+
+<template>
+  <div v-if="props.row.inventoryitems">
+    {{props.row.inventoryitems ? inventoryitems.join(", ") : ''}}
+  </div>
+</template>
diff --git a/frontend/components/columnRenderings/isCompany.vue b/frontend/components/columnRenderings/isCompany.vue
new file mode 100644
index 0000000..f5ab098
--- /dev/null
+++ b/frontend/components/columnRenderings/isCompany.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span>{{props.row.isCompany ? 'Unternehmen' : 'Privat'}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/phase.vue b/frontend/components/columnRenderings/phase.vue
new file mode 100644
index 0000000..20d14bd
--- /dev/null
+++ b/frontend/components/columnRenderings/phase.vue
@@ -0,0 +1,14 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+
+</script>
+
+<template>
+  <span v-if="props.row.phases && props.row.phases.length > 0">{{props.row.phases.find(i => i.active).label}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/plant.vue b/frontend/components/columnRenderings/plant.vue
new file mode 100644
index 0000000..5b9358a
--- /dev/null
+++ b/frontend/components/columnRenderings/plant.vue
@@ -0,0 +1,20 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  },
+  inShow: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <div v-if="props.row.plant">
+    <nuxt-link v-if="props.inShow " :to="`/standardEntity/plants/show/${props.row.plant.id}`">{{props.row.plant ? props.row.plant.name : ''}}</nuxt-link>
+    <span v-else>{{props.row.plant ? props.row.plant.name : ''}}</span>
+  </div>
+</template>
diff --git a/frontend/components/columnRenderings/profile.vue b/frontend/components/columnRenderings/profile.vue
new file mode 100644
index 0000000..8ed131b
--- /dev/null
+++ b/frontend/components/columnRenderings/profile.vue
@@ -0,0 +1,16 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+
+const profileStore = useProfileStore()
+
+</script>
+
+<template>
+  <span v-if="props.row.profile">{{props.row.profile.id ? profileStore.getProfileById(props.row.profile.id).fullName : profileStore.getProfileById(props.row.profile).fullName}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/profiles.vue b/frontend/components/columnRenderings/profiles.vue
new file mode 100644
index 0000000..e3f4e07
--- /dev/null
+++ b/frontend/components/columnRenderings/profiles.vue
@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  },
+  inShow: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const profileStore = useProfileStore()
+
+const profiles = computed(() => props.row.profiles.map(id => profileStore.getProfileById(id).fullName).join(', '))
+
+</script>
+
+<template>
+  <div v-if="props.row.profiles">
+    <div v-if="props.inShow">
+      <nuxt-link v-for="(profileId, index) in props.row.profiles" :to="`/profiles/show/${profileId}`">{{profileStore.getProfileById(profileId).fullName}}{{index < props.row.profiles.length - 1 ? "," : ""}}</nuxt-link>
+    </div>
+    <span v-else>{{props.row.profiles ? profiles : ''}}</span>
+  </div>
+</template>
diff --git a/frontend/components/columnRenderings/project.vue b/frontend/components/columnRenderings/project.vue
new file mode 100644
index 0000000..ec15cb9
--- /dev/null
+++ b/frontend/components/columnRenderings/project.vue
@@ -0,0 +1,19 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  },
+  inShow: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <div v-if="props.row.project">
+    <nuxt-link v-if="props.inShow" :to="`/standardEntity/projects/show/${props.row.project.id}`">{{props.row.project ? props.row.project.name : ''}}</nuxt-link>
+    <span v-else>{{props.row.project ? props.row.project.name : ''}}</span>
+  </div></template>
diff --git a/frontend/components/columnRenderings/projecttype.vue b/frontend/components/columnRenderings/projecttype.vue
new file mode 100644
index 0000000..fb1cd3a
--- /dev/null
+++ b/frontend/components/columnRenderings/projecttype.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span>{{props.row.projecttype ? props.row.projecttype.name : ''}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/purchasePrice.vue b/frontend/components/columnRenderings/purchasePrice.vue
new file mode 100644
index 0000000..8b81b61
--- /dev/null
+++ b/frontend/components/columnRenderings/purchasePrice.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span>{{props.row.purchase_price ? useCurrency(props.row.purchase_price) : ''}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/recurring.vue b/frontend/components/columnRenderings/recurring.vue
new file mode 100644
index 0000000..dcf6f03
--- /dev/null
+++ b/frontend/components/columnRenderings/recurring.vue
@@ -0,0 +1,14 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.recurring">Ja</span>
+  <span v-else>Nein</span>
+</template>
diff --git a/frontend/components/columnRenderings/sellingPrice.vue b/frontend/components/columnRenderings/sellingPrice.vue
new file mode 100644
index 0000000..a11b050
--- /dev/null
+++ b/frontend/components/columnRenderings/sellingPrice.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span>{{props.row.selling_price ? useCurrency(props.row.selling_price) : ''}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/sellingPriceComposedMaterial.vue b/frontend/components/columnRenderings/sellingPriceComposedMaterial.vue
new file mode 100644
index 0000000..1be80c7
--- /dev/null
+++ b/frontend/components/columnRenderings/sellingPriceComposedMaterial.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.sellingPriceComposed">{{ useCurrency(props.row.sellingPriceComposed.material)}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/sellingPriceComposedTotal.vue b/frontend/components/columnRenderings/sellingPriceComposedTotal.vue
new file mode 100644
index 0000000..b61279a
--- /dev/null
+++ b/frontend/components/columnRenderings/sellingPriceComposedTotal.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.sellingPriceComposed">{{ useCurrency(props.row.sellingPriceComposed.total) }}</span>
+</template>
diff --git a/frontend/components/columnRenderings/sellingPriceComposedWorker.vue b/frontend/components/columnRenderings/sellingPriceComposedWorker.vue
new file mode 100644
index 0000000..24f6135
--- /dev/null
+++ b/frontend/components/columnRenderings/sellingPriceComposedWorker.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.sellingPriceComposed">{{ useCurrency(props.row.sellingPriceComposed.worker) }}</span>
+</template>
diff --git a/frontend/components/columnRenderings/sepa.vue b/frontend/components/columnRenderings/sepa.vue
new file mode 100644
index 0000000..7bc955c
--- /dev/null
+++ b/frontend/components/columnRenderings/sepa.vue
@@ -0,0 +1,14 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.hasSEPA">Ja</span>
+  <span v-else>Nein</span>
+</template>
diff --git a/frontend/components/columnRenderings/sepaDate.vue b/frontend/components/columnRenderings/sepaDate.vue
new file mode 100644
index 0000000..b752326
--- /dev/null
+++ b/frontend/components/columnRenderings/sepaDate.vue
@@ -0,0 +1,15 @@
+<script setup>
+import dayjs from "dayjs";
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.sepaDate">{{dayjs(props.row.sepaDate).format("DD.MM.YYYY")}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/serviceCategories.vue b/frontend/components/columnRenderings/serviceCategories.vue
new file mode 100644
index 0000000..8d89a29
--- /dev/null
+++ b/frontend/components/columnRenderings/serviceCategories.vue
@@ -0,0 +1,21 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+
+const servicecategories = ref([])
+
+const setup = async () => {
+  servicecategories.value = await useEntities("servicecategories").select()
+}
+
+setup()
+</script>
+
+<template>
+  <span v-if="props.row.servicecategories && servicecategories.length > 0">{{props.row.servicecategories.map(i => servicecategories.find(x => x.id === i).name).join(", ")}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/signDate.vue b/frontend/components/columnRenderings/signDate.vue
new file mode 100644
index 0000000..e59feb0
--- /dev/null
+++ b/frontend/components/columnRenderings/signDate.vue
@@ -0,0 +1,15 @@
+<script setup>
+import dayjs from "dayjs";
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.signDate">{{dayjs(props.row.signDate).format("DD.MM.YYYY")}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/space.vue b/frontend/components/columnRenderings/space.vue
new file mode 100644
index 0000000..1943972
--- /dev/null
+++ b/frontend/components/columnRenderings/space.vue
@@ -0,0 +1,14 @@
+<script setup>
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.currentSpace">{{props.row.currentSpace.name}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/startDate.vue b/frontend/components/columnRenderings/startDate.vue
new file mode 100644
index 0000000..19db5f4
--- /dev/null
+++ b/frontend/components/columnRenderings/startDate.vue
@@ -0,0 +1,15 @@
+<script setup>
+import dayjs from "dayjs";
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.startDate">{{dayjs(props.row.startDate).format("DD.MM.YYYY")}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/startDateTime.vue b/frontend/components/columnRenderings/startDateTime.vue
new file mode 100644
index 0000000..201b889
--- /dev/null
+++ b/frontend/components/columnRenderings/startDateTime.vue
@@ -0,0 +1,15 @@
+<script setup>
+import dayjs from "dayjs";
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.startDate">{{dayjs(props.row.startDate).format("DD.MM.YYYY HH:mm")}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/unit.vue b/frontend/components/columnRenderings/unit.vue
new file mode 100644
index 0000000..d101920
--- /dev/null
+++ b/frontend/components/columnRenderings/unit.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span>{{props.row.unit ? props.row.unit.name : ''}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/usePlanning.vue b/frontend/components/columnRenderings/usePlanning.vue
new file mode 100644
index 0000000..c13ade1
--- /dev/null
+++ b/frontend/components/columnRenderings/usePlanning.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span>{{props.row.usePlanning ? 'Ja' : 'Nein'}}</span>
+</template>
diff --git a/frontend/components/columnRenderings/vehicle.vue b/frontend/components/columnRenderings/vehicle.vue
new file mode 100644
index 0000000..8a30979
--- /dev/null
+++ b/frontend/components/columnRenderings/vehicle.vue
@@ -0,0 +1,22 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  },
+  inShow: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <div v-if="props.row.vehicle">
+    <nuxt-link v-if="props.inShow" :to="`/standardEntity/vehicles/show/${props.row.vehicle.id}`">
+      {{ props.row.vehicle ? props.row.vehicle.licensePlate : '' }}
+    </nuxt-link>
+    <span v-else>{{ props.row.vehicle ? props.row.vehicle.licensePlate : '' }}</span>
+  </div>
+</template>
diff --git a/frontend/components/columnRenderings/vehiclesWithLoad.vue b/frontend/components/columnRenderings/vehiclesWithLoad.vue
new file mode 100644
index 0000000..c1c695b
--- /dev/null
+++ b/frontend/components/columnRenderings/vehiclesWithLoad.vue
@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+
+const supabase = useSupabaseClient()
+
+
+let vehicles = await Promise.all(props.row.vehicles.map(async (i) => {
+  return (await supabase.from("vehicles").select("id,licensePlate").eq("id",i).single()).data.licensePlate
+}))
+
+</script>
+
+<template>
+  <div v-if="props.row.vehicles">
+    {{props.row.vehicles ? vehicles.join(", ") : ''}}
+  </div>
+</template>
diff --git a/frontend/components/columnRenderings/vendor.vue b/frontend/components/columnRenderings/vendor.vue
new file mode 100644
index 0000000..d6bb60e
--- /dev/null
+++ b/frontend/components/columnRenderings/vendor.vue
@@ -0,0 +1,20 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  },
+  inShow: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <div v-if="props.row.vendor">
+    <nuxt-link v-if="props.inShow" :to="`/standardEntity/vendors/show/${props.row.vendor.id}`">{{props.row.vendor ? props.row.vendor.name : ''}}</nuxt-link>
+    <span v-else>{{props.row.vendor ? props.row.vendor.name : ''}}</span>
+  </div>
+</template>
diff --git a/frontend/components/copyCreatedDocumentModal.vue b/frontend/components/copyCreatedDocumentModal.vue
new file mode 100644
index 0000000..56fe961
--- /dev/null
+++ b/frontend/components/copyCreatedDocumentModal.vue
@@ -0,0 +1,109 @@
+<script setup>
+
+const dataStore = useDataStore()
+const modal = useModal()
+const router = useRouter()
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  type: {
+    type: String,
+    required: true
+  },
+})
+
+
+
+const emit = defineEmits(["updateNeeded","returnData"])
+
+const documentTypeToUse = ref(props.type)
+const optionsToImport = ref({
+  taxType: true,
+  customer: true,
+  letterhead: true,
+  contact: true,
+  deliveryDateType: true,
+  deliveryDate: true,
+  deliveryDateEnd: true,
+  documentDate: false,
+  paymentDays: true,
+  customSurchargePercentage: true,
+  contactPerson: true,
+  plant: true,
+  project:true,
+  description: true,
+  startText: false,
+  rows: true,
+  endText: false,
+})
+
+const mappings = ref({
+  customer: "Kunde",
+  taxType: "Steuertyp",
+  letterhead: "Briefpapier",
+  contact: "Ansprechpartner",
+  deliveryDateType: "Lieferdatumsart",
+  deliveryDate: "Lieferdatum / Lieferzeitraum Start",
+  deliveryDateEnd: "Lieferzeitraum Ende",
+  documentDate: "Belegdatum",
+  paymentDays: "Zahlungsziel in Tagen",
+  customSurchargePercentage: "Individueller Aufschlag",
+  contactPerson: "Ansprechpartner Mitarbeiter",
+  plant: "Objekt",
+  project: "Projekt",
+  description: "Beschreibung",
+  startText: "Einleitung",
+  rows: "Positionen",
+  endText: "Nachbemerkung",
+})
+
+const startImport = () => {
+  router.push(`/createDocument/edit/?createddocument=${props.id}&type=${documentTypeToUse.value}&optionsToImport=${encodeURIComponent(JSON.stringify(optionsToImport.value))}`)
+  modal.close()
+}
+</script>
+
+<template>
+  <UModal :fullscreen="false">
+      <UCard>
+        <template #header>
+          Erstelltes Dokument Kopieren
+        </template>
+
+        <UFormGroup
+            label="Dokumententyp:"
+          class="mb-3"
+        >
+          <USelectMenu
+              :options="Object.keys(dataStore.documentTypesForCreation).map(key => { return { ...dataStore.documentTypesForCreation[key], key}})"
+              value-attribute="key"
+              option-attribute="labelSingle"
+              v-model="documentTypeToUse"
+          >
+
+          </USelectMenu>
+        </UFormGroup>
+        <UCheckbox
+              v-for="key in Object.keys(optionsToImport).filter(i => documentTypeToUse !== props.type ? !['startText','endText'].includes(i) : true)"
+              v-model="optionsToImport[key]"
+            :label="mappings[key]"
+        />
+
+
+        <template #footer>
+          <UButton
+            @click="startImport"
+          >
+            Kopieren
+          </UButton>
+        </template>
+
+      </UCard>
+  </UModal>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/costcentreDisplay.vue b/frontend/components/costcentreDisplay.vue
new file mode 100644
index 0000000..8b3a97b
--- /dev/null
+++ b/frontend/components/costcentreDisplay.vue
@@ -0,0 +1,30 @@
+<script setup>
+
+const supabase = useSupabaseClient()
+const profileStore = useProfileStore()
+
+const props = defineProps({
+  item: {
+    required: true,
+    type: String
+  }
+})
+
+const incomingInvoices = ref({})
+
+const setupPage = async () => {
+  incomingInvoices.value = (await useEntities("incominginvoices").select()).filter(i => i.accounts.find(x => x.costCentre === props.item.id))
+}
+
+setupPage()
+
+</script>
+
+<template>
+  {{props.item}}
+  {{incomingInvoices}}
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/displayBankaccounts.vue b/frontend/components/displayBankaccounts.vue
new file mode 100644
index 0000000..07978a7
--- /dev/null
+++ b/frontend/components/displayBankaccounts.vue
@@ -0,0 +1,54 @@
+<script setup>
+
+import dayjs from "dayjs";
+
+let unallocatedStatements = ref(0)
+let bankaccounts = ref([])
+
+const setupPage = async () => {
+  let bankstatements = (await useEntities("bankstatements").select("*, statementallocations(*)","date",true)).filter(i => !i.archived)
+  unallocatedStatements.value = bankstatements.filter(i => Number(calculateOpenSum(i)) !== 0).length
+  bankaccounts.value = await useEntities("bankaccounts").select()
+}
+
+setupPage()
+
+const calculateOpenSum = (statement) => {
+  let startingAmount = 0
+
+  statement.statementallocations.forEach(item => {
+    startingAmount += item.amount
+  })
+
+  return (statement.amount - startingAmount).toFixed(2)
+}
+</script>
+
+<template>
+  <table>
+
+    <tr>
+      <td colspan="2">Nicht zugewiesene Bankbuchungen:</td>
+      <td>
+        <span v-if="unallocatedStatements > 0" class="text-orange-500 font-bold">{{unallocatedStatements}}</span>
+        <span v-else class="text-primary-500 font-bold">0</span>
+      </td>
+    </tr>
+    <tr v-for="account in bankaccounts.filter(i => !i.expired)">
+      <td>{{ account.name }}:</td>
+      <td>
+        {{dayjs(account.syncedAt).format("DD.MM.YY HH:mm")}}
+      </td>
+      <td>
+        <span v-if="account.balance < 0" class=" text-nowrap text-rose-600 font-bold">{{useCurrency(account.balance)}}</span>
+        <span v-else-if="account.balance > 0" class="text-nowrap text-primary-500 font-bold">{{useCurrency(account.balance)}}</span>
+        <span v-else class="text-nowrap ">{{useCurrency(account.balance)}}</span>
+      </td>
+    </tr>
+  </table>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/displayIncomeAndExpenditure.vue b/frontend/components/displayIncomeAndExpenditure.vue
new file mode 100644
index 0000000..cfd55c2
--- /dev/null
+++ b/frontend/components/displayIncomeAndExpenditure.vue
@@ -0,0 +1,244 @@
+<script setup>
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import dayjs from "dayjs";
+dayjs.extend(customParseFormat)
+
+
+let incomeData = ref({})
+let expenseData = ref({})
+
+const setup = async () => {
+  //let incomeRawData = (await supabase.from("createddocuments").select().eq("tenant",profileStore.currentTenant).eq("state","Gebucht").in('type',['invoices','advanceInvoices','cancellationInvoices'])).data
+  let incomeRawData = (await useEntities("createddocuments").select()).filter(i => i.state === "Gebucht" && ['invoices','advanceInvoices','cancellationInvoices'].includes(i.type))
+
+  let incomeRawFilteredData = incomeRawData.filter(x => x.state === 'Gebucht' && incomeRawData.find(i => i.linkedDocument && i.linkedDocument.id === x.id && i.type === 'cancellationInvoices') && ['invoices','advanceInvoices'].includes(row.type))
+
+
+  //let expenseRawData =(await supabase.from("incominginvoices").select().eq("tenant",profileStore.currentTenant)).data
+  let expenseRawData =(await useEntities("incominginvoices").select())
+  //let withoutInvoiceRawData = (await supabase.from("statementallocations").select().eq("tenant",profileStore.currentTenant).not("account","is",null)).data
+  let withoutInvoiceRawData = (await useEntities("statementallocations").select()).filter(i => i.account)
+
+  let withoutInvoiceRawDataExpenses = []
+  let withoutInvoiceRawDataIncomes = []
+
+  withoutInvoiceRawData.forEach(i => {
+    if(i.amount > 0) {
+      withoutInvoiceRawDataIncomes.push({
+        id: i.id,
+        date: dayjs(i.created_at).format("DD-MM-YY"),
+        amount: Math.abs(i.amount),
+        bs_id: i.bs_id
+      })
+    } else if(i.amount < 0) {
+      withoutInvoiceRawDataExpenses.push({
+        id: i.id,
+        date: dayjs(i.created_at).format("DD-MM-YY"),
+        amount: Math.abs(i.amount),
+        bs_id: i.bs_id
+      })
+    }
+  })
+
+  /*withoutInvoiceRawDataExpenses.forEach(i => {
+    expenseData.value[i.date] ? expenseData.value[i.date] = Number((expenseData.value[i.date] + i.amount).toFixed(2)) : expenseData.value[i.date] = i.amount
+  })
+
+  withoutInvoiceRawDataIncomes.forEach(i => {
+    incomeData.value[i.date] ? incomeData.value[i.date] = Number((incomeData.value[i.date] + i.amount).toFixed(2)) : incomeData.value[i.date] = i.amount
+  })*/
+
+  expenseRawData = expenseRawData.filter(i => i.date).map(i => {
+    let amount = 0
+
+    i.accounts.forEach(a => {
+      amount += a.amountNet
+    })
+
+    amount = Number(amount.toFixed(2))
+
+    return {
+      id: i.id,
+      date: dayjs(i.date).format("DD-MM-YY"),
+      amount
+    }
+
+  })
+
+  expenseRawData.forEach(i => {
+    expenseData.value[i.date] ? expenseData.value[i.date] = Number((expenseData.value[i.date] + i.amount).toFixed(2)) : expenseData.value[i.date] = i.amount
+  })
+
+  let expenseMonths = {
+    "01": 0,
+    "02": 0,
+    "03": 0,
+    "04": 0,
+    "05": 0,
+    "06": 0,
+    "07": 0,
+    "08": 0,
+    "09": 0,
+    "10": 0,
+    "11": 0,
+    "12": 0,
+
+  }
+  Object.keys(expenseMonths).forEach(month => {
+    let dates = Object.keys(expenseData.value).filter(i => i.split("-")[1] === month && i.split("-")[2] === dayjs().format("YY"))
+
+
+
+    dates.forEach(date => {
+      if(expenseMonths[month]){
+        expenseMonths[month] = Number((expenseMonths[month] + expenseData.value[date]).toFixed(2))
+      } else {
+        expenseMonths[month] = expenseData.value[date]
+      }
+    })
+
+  })
+
+  expenseData.value = expenseMonths
+
+
+  incomeRawData = incomeRawData.map(i => {
+    let amount = 0
+
+    i.rows.forEach(r => {
+      if(r.mode !== "pagebreak" && r.mode !== "title" && r.mode !== "text"){
+        amount += r.price * r.quantity * (1 - r.discountPercent/100)
+      }
+    })
+
+    amount = Number(amount.toFixed(2))
+
+    return {
+      id: i.id,
+      date: dayjs(i.documentDate).format("DD-MM-YY"),
+      amount
+    }
+  })
+
+  incomeRawData.forEach(i => {
+    incomeData.value[i.date] ? incomeData.value[i.date] = Number((incomeData.value[i.date] + i.amount).toFixed(2)) : incomeData.value[i.date] = i.amount
+  })
+
+  let incomeMonths = {
+    "01": 0,
+    "02": 0,
+    "03": 0,
+    "04": 0,
+    "05": 0,
+    "06": 0,
+    "07": 0,
+    "08": 0,
+    "09": 0,
+    "10": 0,
+    "11": 0,
+    "12": 0,
+
+  }
+  Object.keys(incomeMonths).forEach(month => {
+    let dates = Object.keys(incomeData.value).filter(i => i.split("-")[1] === month && i.split("-")[2] === dayjs().format("YY"))
+
+    dates.forEach(date => {
+      if(incomeMonths[month]){
+        incomeMonths[month] = Number((incomeMonths[month] + incomeData.value[date]).toFixed(2))
+      } else {
+        incomeMonths[month] = incomeData.value[date]
+      }
+    })
+
+  })
+
+  incomeData.value = incomeMonths
+}
+
+const days = computed(() => {
+  let days = []
+
+  days = Object.keys(incomeData.value)
+
+  let expenseDays = Object.keys(expenseData.value)
+
+  expenseDays.forEach(expenseDay => {
+    if(!days.find(i => i === expenseDay)){
+      days.push(expenseDay)
+    }
+  })
+
+  days = days.sort(function(a, b) {
+    var keyA = dayjs(a, "DD-MM-YY"),
+        keyB = dayjs(b, "DD-MM-YY");
+    // Compare the 2 dates
+    if (keyA.isBefore(keyB,'day')) {
+      return -1;
+    } else if(keyB.isBefore(keyA, 'day')) {
+      return 1
+    } else {
+      return 0;
+    }
+
+  });
+
+
+
+  return days
+})
+
+/*const chartData = computed(() => {
+  return {
+    labels: days.value,
+    datasets: [
+        {
+            label: 'Einnahmen',
+            data: [2, 1, 16, 3, 2],
+            backgroundColor: 'rgba(20, 255, 0, 0.3)',
+            borderColor: 'red',
+            borderWidth: 2,
+        }
+    ]
+  }
+})*/
+
+
+import { Line } from 'vue-chartjs'
+const chartData = computed(() => {
+  return {
+    labels: ["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"],
+    datasets: [
+      {
+        label: 'Ausgaben',
+        backgroundColor: '#f87979',
+        borderColor: '#f87979',
+        data: Object.keys(expenseData.value).sort().map(i => expenseData.value[i]),
+        tension: 0.3,
+      },{
+        label: 'Einnahmen',
+        backgroundColor: '#69c350',
+        borderColor: '#69c350',
+        data: Object.keys(incomeData.value).sort().map(i => incomeData.value[i]),
+        tension: 0.3
+      },
+    ],
+  }
+})
+const chartOptions = ref({
+  responsive: true,
+  maintainAspectRatio: false,
+})
+
+setup()
+</script>
+
+<template>
+  <Line
+      :data="chartData"
+      :options="chartOptions"
+  />
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/displayOpenBalances.vue b/frontend/components/displayOpenBalances.vue
new file mode 100644
index 0000000..c19dfdf
--- /dev/null
+++ b/frontend/components/displayOpenBalances.vue
@@ -0,0 +1,94 @@
+<script setup>
+
+import dayjs from "dayjs";
+
+const profileStore = useProfileStore();
+
+let unpaidInvoicesSum = ref(0)
+let unpaidInvoicesCount = ref(0)
+let unpaidOverdueInvoicesSum = ref(0)
+let unpaidOverdueInvoicesCount = ref(0)
+let draftInvoicesSum = ref(0)
+let draftInvoicesCount = ref(0)
+
+let countPreparedOpenIncomingInvoices = ref(0)
+
+const setupPage = async () => {
+  let items = (await useEntities("createddocuments").select("*, statementallocations(*), customer(id,name), linkedDocument(*)")).filter(i => !i.archived)
+  let documents = items.filter(i => i.type === "invoices" ||i.type === "advanceInvoices")
+
+  let draftDocuments = documents.filter(i => i.state === "Entwurf")
+  let finalizedDocuments = documents.filter(i => i.state === "Gebucht")
+
+  finalizedDocuments = finalizedDocuments.filter(i => i.statementallocations.reduce((n,{amount}) => n + amount, 0).toFixed(2) !== useSum().getCreatedDocumentSum(i, documents).toFixed(2))
+
+  finalizedDocuments = finalizedDocuments.filter(x => (x.type === 'invoices' || x.type === 'advanceInvoices') && x.state === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === x.id))
+
+
+
+  finalizedDocuments.forEach(i => {
+    if(dayjs().subtract(i.paymentDays,"days").isAfter(i.documentDate)) {
+      unpaidOverdueInvoicesSum.value += useSum().getCreatedDocumentSum(i, documents) - i.statementallocations.reduce((n,{amount}) => n + amount, 0)
+      unpaidOverdueInvoicesCount.value += 1
+    } else {
+      unpaidInvoicesSum.value += useSum().getCreatedDocumentSum(i, items) - i.statementallocations.reduce((n,{amount}) => n + amount, 0)
+      unpaidInvoicesCount.value += 1
+    }
+  })
+  //unpaidInvoicesCount.value = finalizedDocuments.length
+
+  draftDocuments.forEach(i => {
+    draftInvoicesSum.value +=  useSum().getCreatedDocumentSum(i, documents) - i.statementallocations.reduce((n,{amount}) => n + amount, 0)
+  })
+  draftInvoicesCount.value = draftDocuments.length
+
+  countPreparedOpenIncomingInvoices.value = (await useEntities("incominginvoices").select("id, state")).filter(i => i.state === "Vorbereitet").length
+
+
+}
+
+setupPage()
+
+</script>
+
+<template>
+  <table>
+    <tr>
+      <td class="break-all">Offene Rechnungen:</td>
+      <td
+          v-if="unpaidInvoicesSum > 0"
+          class="text-orange-500 font-bold text-nowrap"
+      >{{unpaidInvoicesCount}} Stk /<br> {{useCurrency(unpaidInvoicesSum)}}</td>
+      <td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk / 0,00€</td>
+    </tr>
+    <tr>
+      <td class="break-all">Überfällige Rechnungen:</td>
+      <td
+          v-if="unpaidOverdueInvoicesSum !== 0"
+          class="text-rose-600 font-bold text-nowrap"
+      >{{unpaidOverdueInvoicesCount}} Stk /<br> {{useCurrency(unpaidOverdueInvoicesSum)}}</td>
+      <td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk / 0,00€</td>
+    </tr>
+    <tr>
+      <td class="break-all">Angelegte Rechnungsentwürfe:</td>
+      <td
+          v-if="draftInvoicesSum > 0"
+          class="text-orange-500 font-bold text-nowrap"
+      >{{draftInvoicesCount}} Stk /<br> {{useCurrency(draftInvoicesSum)}}</td>
+      <td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk / 0,00€</td>
+    </tr>
+    <tr>
+      <td class="break-all">ToDo Eingangsrechnungsrechnungen:</td>
+      <td
+          v-if="countPreparedOpenIncomingInvoices > 0"
+          class="text-orange-500 font-bold text-nowrap"
+      >{{countPreparedOpenIncomingInvoices}} Stk </td>
+      <td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk</td>
+    </tr>
+  </table>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/displayOpenTasks.vue b/frontend/components/displayOpenTasks.vue
new file mode 100644
index 0000000..e60512e
--- /dev/null
+++ b/frontend/components/displayOpenTasks.vue
@@ -0,0 +1,30 @@
+<script setup>
+
+const openTasks = ref([])
+const router = useRouter()
+const auth = useAuthStore()
+
+const setupPage = async () => {
+  //TODO: BACKEND CHANGE Migrate to auth_users for profile
+  openTasks.value = (await useEntities("tasks").select()).filter(i => !i.archived && i.user_id === auth.user.id)
+}
+
+setupPage()
+
+</script>
+
+<template>
+  <UTable
+      v-if="openTasks.length > 0"
+    :rows="openTasks"
+      :columns="[{key:'name',label:'Name'},{key:'categorie',label:'Kategorie'}]"
+      @select="(i) => router.push(`/standardEntity/tasks/show/${i.id}`)"
+  />
+  <div v-else>
+    <p  class="text-center font-bold">Keine offenen Aufgaben</p>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/displayPinnendLinks.vue b/frontend/components/displayPinnendLinks.vue
new file mode 100644
index 0000000..f33b598
--- /dev/null
+++ b/frontend/components/displayPinnendLinks.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { Browser } from "@capacitor/browser"
+
+const props = defineProps({
+  links: {
+    type: Array,
+    required: true,
+  },
+})
+
+/**
+ * Öffnet externen Link in iOS/Android über InApp Browser.
+ * Öffnet externen Link im Web über window.open.
+ * Interne Links → navigateTo
+ */
+async function openLink(link) {
+  if (link.external) {
+    if (useCapacitor().getIsNative()) {
+      await Browser.open({
+        url: link.to,
+        presentationStyle: "popover",
+      })
+    } else {
+      window.open(link.to, "_blank")
+    }
+  } else {
+    return navigateTo(link.to)
+  }
+}
+</script>
+
+<template>
+  <UDashboardCard
+      v-if="links.length > 0"
+      title="Schnellzugriffe"
+  >
+    <div class="space-y-2">
+
+      <div
+          v-for="(link, index) in links"
+          :key="index"
+          class="
+          p-3 bg-gray-50 dark:bg-gray-900
+          rounded-xl border flex items-center justify-between
+          active:scale-95 transition cursor-pointer
+        "
+          @click="openLink(link)"
+      >
+        <div class="flex items-center gap-3">
+          <UIcon
+              :name="link.icon || 'i-heroicons-link'"
+              class="w-6 h-6 text-primary-500"
+          />
+          <span class="font-medium truncate max-w-[60vw]">
+            {{ link.label }}
+          </span>
+        </div>
+
+        <UIcon
+            name="i-heroicons-chevron-right-20-solid"
+            class="w-5 h-5 text-gray-400"
+        />
+      </div>
+
+    </div>
+  </UDashboardCard>
+</template>
diff --git a/frontend/components/displayProjectsInPhases.vue b/frontend/components/displayProjectsInPhases.vue
new file mode 100644
index 0000000..fb6ddfa
--- /dev/null
+++ b/frontend/components/displayProjectsInPhases.vue
@@ -0,0 +1,43 @@
+<script setup>
+
+const phasesCounter = ref({})
+
+const setupPage = async () => {
+  const projects = (await useEntities("projects").select()).filter(i => !i.archived)
+
+  projects.forEach(project => {
+    if(project.phases && project.phases.length > 0){
+      let activePhase = project.phases.find(p => p.active)
+
+      if(phasesCounter.value[activePhase.label]) {
+        phasesCounter.value[activePhase.label] += 1
+      } else {
+        phasesCounter.value[activePhase.label] = 1
+      }
+
+    } else {
+      if(phasesCounter.value["Keine Phase"]) {
+        phasesCounter.value["Keine Phase"] += 1
+      } else {
+        phasesCounter.value["Keine Phase"] = 1
+      }
+    }
+  })
+}
+
+setupPage()
+
+</script>
+
+<template>
+  <table class="w-full">
+    <tr v-for="label in Object.keys(phasesCounter)">
+      <td>{{label}}</td>
+      <td>{{ phasesCounter[label] }} Stk</td>
+    </tr>
+  </table>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/displayRunningTime.vue b/frontend/components/displayRunningTime.vue
new file mode 100644
index 0000000..e8a431a
--- /dev/null
+++ b/frontend/components/displayRunningTime.vue
@@ -0,0 +1,124 @@
+<script setup>
+import dayjs from "dayjs";
+
+const profileStore = useProfileStore();
+const supabase = useSupabaseClient()
+const toast = useToast()
+
+const runningTimeInfo = ref({})
+
+const projects = ref([])
+const platform = ref("default")
+
+const setupPage = async () => {
+    runningTimeInfo.value = (await supabase.from("times").select().eq("profile", profileStore.activeProfile.id).is("endDate", null).single()).data || {}
+
+    projects.value = (await useSupabaseSelect("projects"))
+
+    if(await useCapacitor().getIsPhone()) {
+      platform.value = "mobile"
+    }
+
+}
+
+setupPage()
+
+/*if(dataStore.workingtimes.find(time => time.profile === profileStore.activeProfile.id && !time.endDate)) {
+  runningTimeInfo.value = dataStore.workingtimes.find(time => time.profile === profileStore.activeProfile.id && !time.end)
+}*/
+
+const startTime = async () => {
+  console.log("started")
+  runningTimeInfo.value = {
+    profile: profileStore.activeProfile.id,
+    startDate: dayjs(),
+    tenant: profileStore.currentTenant,
+    state: platform.value === "mobile" ? "In der App gestartet" : "Im Web gestartet",
+    source: "Dashboard"
+  }
+
+  const {data,error} = await supabase
+      .from("times")
+      .insert([runningTimeInfo.value])
+      .select()
+  if(error) {
+    console.log(error)
+    toast.add({title: "Fehler beim starten der Projektzeit",color:"rose"})
+  } else if(data) {
+    toast.add({title: "Projektzeit erfolgreich gestartet"})
+    runningTimeInfo.value = data[0]
+    //console.log(runningTimeInfo.value)
+  }
+}
+
+const stopStartedTime = async () => {
+  runningTimeInfo.value.endDate = dayjs()
+  runningTimeInfo.value.state = platform.value === "mobile" ? "In der App gestoppt" : "Im Web gestoppt"
+
+  const {error,status} = await supabase
+      .from("times")
+      .update(runningTimeInfo.value)
+      .eq('id',runningTimeInfo.value.id)
+
+  if(error) {
+    console.log(error)
+    let errorId = await useError().logError(`${status} - ${JSON.stringify(error)}`)
+    toast.add({title: errorId ? `Fehler beim stoppen der Projektzeit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Projektzeit`,color:"rose"})
+
+
+  } else {
+    toast.add({title: "Projektzeit erfolgreich gestoppt"})
+    runningTimeInfo.value = {}
+  }
+}
+
+
+</script>
+
+<template>
+  <div v-if="runningTimeInfo.startDate">
+    <p>Start: {{dayjs(runningTimeInfo.startDate).format("HH:mm")}}</p>
+    <p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.startDate),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.startDate),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.startDate),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.startDate),'minutes') + ' min' }}</p>
+
+    <UFormGroup
+        class="mt-2"
+        label="Notizen:"
+    >
+      <UTextarea
+          v-model="runningTimeInfo.notes"
+      />
+    </UFormGroup>
+    <UFormGroup
+        class="mt-2"
+        label="Projekt:"
+    >
+      <USelectMenu
+          v-model="runningTimeInfo.project"
+          :options="projects"
+          searchable
+          :search-attributes="['name','notes','customer']"
+          searchable-placeholder="Suche"
+          value-attribute="id"
+          option-attribute="name"
+      />
+    </UFormGroup>
+    <UButton
+        class="mt-3"
+        @click="stopStartedTime"
+        :disabled="!runningTimeInfo.id"
+    >
+      Stop
+    </UButton>
+  </div>
+  <div v-else>
+    <p>Keine Projektzeit gestartet</p>
+    <UButton
+        class="mt-3"
+      @click="startTime"
+    >Starten</UButton>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/displayRunningWorkingTime.vue b/frontend/components/displayRunningWorkingTime.vue
new file mode 100644
index 0000000..b6f986c
--- /dev/null
+++ b/frontend/components/displayRunningWorkingTime.vue
@@ -0,0 +1,101 @@
+<script setup>
+import dayjs from "dayjs";
+
+const profileStore = useProfileStore();
+const supabase = useSupabaseClient()
+const toast = useToast()
+
+const runningTimeInfo = ref({})
+
+const setupPage = async () => {
+    runningTimeInfo.value = (await supabase.from("workingtimes").select().eq("profile", profileStore.activeProfile.id).is("endDate", null).single()).data || {}
+  console.log(runningTimeInfo.value)
+}
+
+setupPage()
+
+/*if(dataStore.workingtimes.find(time => time.profile === profileStore.activeProfile.id && !time.endDate)) {
+  runningTimeInfo.value = dataStore.workingtimes.find(time => time.profile === profileStore.activeProfile.id && !time.end)
+}*/
+
+const startTime = async () => {
+  console.log("started")
+  runningTimeInfo.value = {
+    profile: profileStore.activeProfile.id,
+    startDate: dayjs(),
+    tenant: profileStore.currentTenant,
+    state: "Im Web gestartet",
+    source: "Dashboard"
+  }
+
+  const {data,error} = await supabase
+      .from("workingtimes")
+      .insert([runningTimeInfo.value])
+      .select()
+  if(error) {
+    console.log(error)
+    toast.add({title: "Fehler beim starten der Zeit",color:"rose"})
+  } else if(data) {
+    toast.add({title: "Anwesenheit erfolgreich gestartet"})
+    runningTimeInfo.value = data[0]
+    console.log(runningTimeInfo.value)
+  }
+}
+
+const stopStartedTime = async () => {
+  runningTimeInfo.value.endDate = dayjs()
+  runningTimeInfo.value.state = "Im Web gestoppt"
+
+  const {error,status} = await supabase
+      .from("workingtimes")
+      .update(runningTimeInfo.value)
+      .eq('id',runningTimeInfo.value.id)
+
+  if(error) {
+    console.log(error)
+    let errorId = await useError().logError(`${status} - ${JSON.stringify(error)}`)
+    toast.add({title: errorId ? `Fehler beim stoppen der Anwesenheit (Fehler ID: ${errorId})` : `Fehler beim stoppen der Anwesenheit`,color:"rose"})
+
+
+  } else {
+    toast.add({title: "Anwesenheit erfolgreich gestoppt"})
+    runningTimeInfo.value = {}
+  }
+}
+
+
+</script>
+
+<template>
+  <div v-if="runningTimeInfo.startDate">
+    <p>Start: {{dayjs(runningTimeInfo.startDate).format("HH:mm")}}</p>
+    <p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.startDate),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.startDate),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.startDate),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.startDate),'minutes') + ' min' }}</p>
+
+    <UFormGroup
+        class="mt-2"
+        label="Notizen:"
+    >
+      <UTextarea
+          v-model="runningTimeInfo.notes"
+      />
+    </UFormGroup>
+    <UButton
+        class="mt-3"
+        @click="stopStartedTime"
+        :disabled="!runningTimeInfo.id"
+    >
+      Stop
+    </UButton>
+  </div>
+  <div v-else>
+    <p>Keine Anwesenheit gestartet</p>
+    <UButton
+        class="mt-3"
+      @click="startTime"
+    >Starten</UButton>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/displayWelcome.vue b/frontend/components/displayWelcome.vue
new file mode 100644
index 0000000..2227479
--- /dev/null
+++ b/frontend/components/displayWelcome.vue
@@ -0,0 +1,17 @@
+<script setup>
+
+const auth = useAuthStore()
+
+
+</script>
+
+<template>
+  <div v-if="auth.activeTenant">
+    <h1 class="font-bold text-xl">Willkommen zurück {{auth.profile.full_name}}</h1>
+    <span>bei {{auth.activeTenantData.name}}</span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/helpRenderings/quantity.vue b/frontend/components/helpRenderings/quantity.vue
new file mode 100644
index 0000000..09b286b
--- /dev/null
+++ b/frontend/components/helpRenderings/quantity.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span>{{props.item.serialNumber ? 'Menge deaktiviert durch Eingabe der Seriennummer' : 'Für Einzelartikel Menge gleich 0'}}</span>
+</template>
diff --git a/frontend/components/materialComposing.vue b/frontend/components/materialComposing.vue
new file mode 100644
index 0000000..201f3ce
--- /dev/null
+++ b/frontend/components/materialComposing.vue
@@ -0,0 +1,138 @@
+<script setup>
+
+import { v4 as uuidv4 } from 'uuid';
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  }
+})
+
+const products = ref([])
+const units = ref([])
+
+const setup = async () => {
+  products.value = await useEntities("products").select()
+  units.value = await useEntities("units").selectSpecial()
+}
+
+setup()
+
+const addProductToMaterialComposition = () => {
+
+  if(!props.item.materialComposition) props.item.materialComposition = []
+
+  props.item.materialComposition.push({
+    id: uuidv4(),
+    unit: 1,
+    quantity: 1,
+    price: 0,
+  })
+  calculateTotalMaterialPrice()
+}
+
+const removeProductFromMaterialComposition = (id) => {
+  props.item.materialComposition = props.item.materialComposition.filter((item) => item.id !== id)
+  calculateTotalMaterialPrice()
+}
+
+const calculateTotalMaterialPrice = () => {
+  let total = 0
+
+  props.item.materialComposition.forEach((item) => {
+    let rowSum = item.quantity * item.price
+    total += rowSum
+  })
+
+  props.item.sellingPriceComposed.material = Number(total.toFixed(2))
+   props.item.sellingPriceComposed.total = Number((props.item.sellingPriceComposed.worker + props.item.sellingPriceComposed.material).toFixed(2))
+}
+
+const setRowData = (row) => {
+  let product = products.value.find(i => i.id === row.product)
+
+  row.unit = product.unit
+  row.price = product.selling_price
+
+  calculateTotalMaterialPrice()
+}
+
+</script>
+
+<template>
+  <UCard class="w-full">
+    <UButton
+        @click="addProductToMaterialComposition"
+    >
+      + Artikel
+    </UButton>
+
+    <table class="w-full mt-3">
+      <tr>
+        <th>Artikel</th>
+        <th>Menge</th>
+        <th>Einheit</th>
+        <th>Verkaufspreis</th>
+      </tr>
+      <tr
+          v-for="product in props.item.materialComposition"
+      >
+        <td>
+          <USelectMenu
+              searchable
+              :search-attributes="['name']"
+            :options="products"
+            value-attribute="id"
+            option-attribute="name"
+            v-model="product.product"
+            :color="product.product ? 'primary' : 'rose'"
+            @change="setRowData(product)"
+          >
+            <template #label>
+              {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
+            </template>
+          </USelectMenu>
+        </td>
+        <td>
+          <UInput
+            type="number"
+            v-model="product.quantity"
+            :step="units.find(i => i.id === product.unit) ? units.find(i => i.id === product.unit).step : 1"
+            @change="calculateTotalMaterialPrice"
+          />
+        </td>
+        <td>
+          <USelectMenu
+            :options="units"
+            value-attribute="id"
+            option-attribute="name"
+            v-model="product.unit"
+          ></USelectMenu>
+        </td>
+        <td>
+          <UInput
+            type="number"
+            v-model="product.price"
+            step="0.01"
+            @change="calculateTotalMaterialPrice"
+          />
+        </td>
+        <td>
+          <UButton
+            icon="i-heroicons-x-mark"
+            @click="removeProductFromMaterialComposition(product.id)"
+            variant="outline"
+            color="rose"
+          />
+        </td>
+      </tr>
+    </table>
+  </UCard>
+</template>
+
+<style scoped>
+td {
+  margin-bottom: 0.5em;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/mobile/FloatingActionButton.vue b/frontend/components/mobile/FloatingActionButton.vue
new file mode 100644
index 0000000..05a3f5d
--- /dev/null
+++ b/frontend/components/mobile/FloatingActionButton.vue
@@ -0,0 +1,66 @@
+<script setup>
+const props = defineProps({
+  label: {
+    type: String,
+    required: false,
+    default: null
+  },
+  icon: {
+    type: String,
+    required: false
+  },
+  variant: {
+    type: String,
+    default: "solid"
+  },
+  color: {
+    type: String,
+    default: "primary"
+  },
+  pos: {
+    type: Number,
+    default: 6 // Abstand von unten in Rem (6 = 1.5rem * 6 = 9rem)
+  }
+})
+
+const emit = defineEmits(["click"])
+</script>
+
+<template>
+  <!-- Wrapper für Position + Animation -->
+  <div
+      class="fixed right-5 z-40 transition-all"
+      :style="{ bottom: `calc(${props.pos}rem + env(safe-area-inset-bottom))` }"
+  >
+    <UButton
+        id="fab"
+        :icon="props.icon"
+        :label="props.label"
+        :variant="props.variant"
+        :color="props.color"
+        @click="emit('click')"
+        class="
+          fab-base
+          shadow-xl
+          hover:shadow-2xl
+          active:scale-95
+          transition
+        "
+    />
+  </div>
+</template>
+
+<style scoped>
+/* FAB Basis */
+.fab-base {
+  @apply rounded-full px-5 py-4 text-lg font-semibold;
+
+  /* Wenn nur ein Icon vorhanden ist → runder Kreis */
+  /* Wenn Label + Icon → Extended FAB */
+}
+
+/* Optional: Auto-Kreisen wenn kein Label */
+#fab:not([label]) {
+  @apply w-14 h-14 p-0 flex items-center justify-center text-2xl;
+}
+</style>
diff --git a/frontend/components/nimbot.vue b/frontend/components/nimbot.vue
new file mode 100644
index 0000000..7ceb36a
--- /dev/null
+++ b/frontend/components/nimbot.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+
+const labelPrinter = useLabelPrinterStore()
+
+
+const { $api } = useNuxtApp()
+
+const labelWidth = ref(50)
+const labelHeight = ref(30)
+const zpl = ref(`^XA
+^FO5,5
+^GB545,325,3^FS
+^CF0,30
+^FO20,20^FDHello from Bluetooth!^FS
+^FO20,100^BY2
+^BXN,10,200
+^FD12345678901234567^FS
+^XZ`)
+
+
+
+async function handlePrint() {
+  const dpmm = 12
+  const res = await $api("/api/print/label", {
+    method: "POST",
+    body: JSON.stringify({
+      zpl: zpl.value,
+      width: labelWidth.value,
+      height: labelHeight.value,
+      dpmm,
+    }),
+  })
+  await labelPrinter.print(res, { density: 5, pages: 1 })
+}
+</script>
+
+<template>
+  <UCard class="p-4">
+    <div class="flex gap-2 mb-2">
+      <UButton @click="labelPrinter.connect('serial')">Connect S </UButton>
+      <UButton @click="labelPrinter.connect('ble')">Connect B</UButton>
+      <UButton color="red" @click="labelPrinter.disconnect">Disconnect</UButton>
+      <UButton color="primary" @click="handlePrint" :disabled="!labelPrinter.connected">Print</UButton>
+    </div>
+
+    {{labelPrinter.info}}
+
+    {{labelPrinter.printProgress}}
+
+    <UFormGroup label="Breite">
+      <UInput v-model="labelWidth"><template #trailing>mm</template></UInput>
+    </UFormGroup>
+    <UFormGroup label="Höhe">
+      <UInput v-model="labelHeight"><template #trailing>mm</template></UInput>
+    </UFormGroup>
+    <UFormGroup label="ZPL">
+      <UTextarea v-model="zpl" rows="6" />
+    </UFormGroup>
+  </UCard>
+</template>
diff --git a/frontend/components/noAutoLoad/BlockEditor.vue b/frontend/components/noAutoLoad/BlockEditor.vue
new file mode 100644
index 0000000..3b42300
--- /dev/null
+++ b/frontend/components/noAutoLoad/BlockEditor.vue
@@ -0,0 +1,64 @@
+<script setup>
+
+const props = defineProps({
+  data: {
+    required: true,
+    type: Object
+  }
+})
+
+const {data} = props
+
+const changesSaved = ref(true)
+
+
+
+
+const default_data = {
+  time: 1660335428612,
+  blocks: [
+    {
+      id: "MnGi61oxdF",
+      type: "header",
+      data: {
+        text: "Willkommen im Dokumentations Editor",
+        level: 1,
+      },
+    }
+
+  ],
+  version: "1.0.0",
+};
+const newProjectDescription = ref(data|| default_data.value);
+
+const saveProjectDescription = async () => {
+  //Update Project Description
+  /*const {data:updateData,error:updateError} = await supabase
+      .from("projects")
+      .update({description: newProjectDescription.value})
+      .eq('id',currentProject.id)
+      .select()
+
+  console.log(updateData)
+  console.log(updateError)*/
+
+
+
+};
+</script>
+
+<template>
+  <UButton
+      :disabled="false/*newProjectDescription.time === currentProject.description.time*/"
+      @click="saveProjectDescription"
+  >
+    Speichern
+  </UButton>
+  <client-only><EditorJsOwn v-model="newProjectDescription" /></client-only>
+
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/noAutoLoad/EditorJsOwn.client.vue b/frontend/components/noAutoLoad/EditorJsOwn.client.vue
new file mode 100644
index 0000000..ca6069b
--- /dev/null
+++ b/frontend/components/noAutoLoad/EditorJsOwn.client.vue
@@ -0,0 +1,53 @@
+<template>
+  <div id="editor"></div>
+</template>
+
+<script setup>
+import EditorJS from "@editorjs/editorjs";
+import Header from "@editorjs/header";
+import List from "@editorjs/list";
+
+import { onMounted } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    default: {},
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+onMounted(() => {
+  const editor = new EditorJS({
+    holder: "editor",
+    minHeight: 0,
+    tools: {
+      header: Header,
+      list: List,
+    },
+    onChange: (api, event) => {
+      api.saver.save().then(async (data) => {
+        emit("update:modelValue", data);
+      });
+    },
+    data: props.modelValue,
+    logLevel: "ERROR",
+  });
+});
+</script>
+
+<style>
+.codex-editor path {
+  stroke: #69c350;
+}
+
+/*.ce-block {
+  margin-bottom: 1em;
+}
+
+.ce-paragraph, .ce-header {
+  outline: 1px solid #69c350 !important;
+  border-radius: 5px;
+  padding: .5em;
+
+}*/
+</style>
\ No newline at end of file
diff --git a/frontend/components/noAutoLoad/displayPresentProfiles.vue b/frontend/components/noAutoLoad/displayPresentProfiles.vue
new file mode 100644
index 0000000..499e47d
--- /dev/null
+++ b/frontend/components/noAutoLoad/displayPresentProfiles.vue
@@ -0,0 +1,24 @@
+<script setup>
+const supabase = useSupabaseClient()
+const profileStore = useProfileStore()
+
+const workingtimes = ref([])
+const setupPage = async () => {
+    workingtimes.value = (await supabase.from("workingtimes").select().eq("tenant",profileStore.currentTenant).is("endDate",null)).data
+}
+
+setupPage()
+</script>
+
+<template>
+  <div v-if="workingtimes.length > 0">
+    <p v-for="time in workingtimes"><UIcon name="i-heroicons-check"/> {{profileStore.getProfileById(time.profile).fullName}}</p>
+  </div>
+  <div v-else>
+    <p>Keine Mitarbeiter anwesend</p>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/components/personalComposing.vue b/frontend/components/personalComposing.vue
new file mode 100644
index 0000000..4873b4d
--- /dev/null
+++ b/frontend/components/personalComposing.vue
@@ -0,0 +1,151 @@
+<script setup>
+
+import { v4 as uuidv4 } from 'uuid';
+
+const supabase = useSupabaseClient()
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  }
+})
+
+const hourrates = ref([])
+const units = ref([])
+
+const setup = async () => {
+  hourrates.value = await useEntities("hourrates").select()
+  units.value = await useEntities("units").selectSpecial()
+}
+
+setup()
+
+const addRowToPersonalComposition = () => {
+
+  if(!props.item.personalComposition) props.item.personalComposition = []
+
+  props.item.personalComposition.push({
+    id: uuidv4(),
+    unit: 6,
+    quantity: 1,
+    price: 0,
+    name: "Standard"
+  })
+  calculateTotalPersonalPrice()
+}
+
+const removeRowFromPersonalComposition = (id) => {
+  props.item.personalComposition = props.item.personalComposition.filter((item) => item.id !== id)
+  calculateTotalPersonalPrice()
+}
+
+const calculateTotalPersonalPrice = () => {
+  let total = 0
+
+  props.item.personalComposition.forEach((item) => {
+    let rowSum = item.quantity * item.price
+    total += rowSum
+  })
+
+  props.item.sellingPriceComposed.worker = Number(total.toFixed(2))
+   props.item.sellingPriceComposed.total = Number((props.item.sellingPriceComposed.worker + props.item.sellingPriceComposed.material).toFixed(2))
+}
+
+const setRowData = (row) => {
+  let hourrate = hourrates.value.find(i => i.id === row.hourrate)
+
+  row.purchasePrice = hourrate.purchasePrice
+  row.price = hourrate.sellingPrice
+
+  calculateTotalPersonalPrice()
+}
+
+</script>
+
+<template>
+  <UCard class="w-full">
+    <UButton
+        @click="addRowToPersonalComposition"
+    >
+      + Stundensatz
+    </UButton>
+
+    <table class="w-full mt-3">
+      <tr>
+        <th>Name</th>
+        <th>Menge</th>
+        <th>Einheit</th>
+        <th>Einkaufpreis</th>
+        <th>Verkaufspreis</th>
+      </tr>
+      <tr
+          v-for="row in props.item.personalComposition"
+      >
+        <td>
+          <USelectMenu
+              searchable
+              :search-attributes="['name']"
+              :options="hourrates"
+              value-attribute="id"
+              option-attribute="name"
+              v-model="row.hourrate"
+              :color="row.hourrate ? 'primary' : 'rose'"
+              @change="setRowData(row)"
+          >
+<!--            <template #label>
+              {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
+            </template>-->
+          </USelectMenu>
+        </td>
+        <td>
+          <UInput
+            type="number"
+            v-model="row.quantity"
+            :step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : 1"
+            @change="calculateTotalPersonalPrice"
+          />
+        </td>
+        <td>
+          <USelectMenu
+            :options="units"
+            disabled
+            value-attribute="id"
+            option-attribute="name"
+            v-model="row.unit"
+          ></USelectMenu>
+        </td>
+        <td>
+          <UInput
+            type="number"
+            v-model="row.purchasePrice"
+            step="0.01"
+            @change="calculateTotalPersonalPrice"
+          />
+        </td>
+        <td>
+          <UInput
+            type="number"
+            v-model="row.price"
+            step="0.01"
+            @change="calculateTotalPersonalPrice"
+          />
+        </td>
+        <td>
+          <UButton
+            icon="i-heroicons-x-mark"
+            @click="removeRowFromPersonalComposition(row.id)"
+            variant="outline"
+            color="rose"
+          />
+        </td>
+      </tr>
+    </table>
+  </UCard>
+</template>
+
+<style scoped>
+td {
+  margin-bottom: 0.5em;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/composables/useCapacitor.js b/frontend/composables/useCapacitor.js
new file mode 100644
index 0000000..1e4c198
--- /dev/null
+++ b/frontend/composables/useCapacitor.js
@@ -0,0 +1,32 @@
+import {Capacitor} from "@capacitor/core";
+import {Device} from "@capacitor/device";
+import {Network} from "@capacitor/network";
+
+const override = false
+
+export const useCapacitor = () => {
+    const getPlatform = () => {
+        return Capacitor.getPlatform()
+    }
+
+    const getDeviceInfo = async () => {
+        return await Device.getInfo()
+    }
+
+    const getIsPhone = async () => {
+        let deviceInfo = await useCapacitor().getDeviceInfo()
+
+        return override || deviceInfo.model.toLowerCase().includes('iphone')
+    }
+
+    const getIsNative = () => {
+        return override || Capacitor.isNativePlatform()
+    }
+
+    const getNetworkStatus = async () => {
+        return await Network.getStatus()
+    }
+
+
+    return {getPlatform, getDeviceInfo, getNetworkStatus, getIsPhone, getIsNative}
+}
\ No newline at end of file
diff --git a/frontend/composables/useCurrency.js b/frontend/composables/useCurrency.js
new file mode 100644
index 0000000..fca9ed3
--- /dev/null
+++ b/frontend/composables/useCurrency.js
@@ -0,0 +1,3 @@
+export const useCurrency = (value,currencyString = " €") => {
+    return `${Number(value).toFixed(2).replace(".",",")} ${currencyString}`.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+}
\ No newline at end of file
diff --git a/frontend/composables/useDashboard.ts b/frontend/composables/useDashboard.ts
new file mode 100644
index 0000000..9f1c4a9
--- /dev/null
+++ b/frontend/composables/useDashboard.ts
@@ -0,0 +1,34 @@
+import { createSharedComposable } from '@vueuse/core'
+
+const _useDashboard = () => {
+    const route = useRoute()
+    const router = useRouter()
+    const isHelpSlideoverOpen = ref(false)
+    const isNotificationsSlideoverOpen = ref(false)
+
+    defineShortcuts({
+        'g-h': () => router.push('/'),
+        'g-a': () => router.push('/standardEntity/tasks'),
+        'g-d': () => router.push('/files'),
+        'g-k': () => router.push('/standardEntity/customers'),
+        'g-l': () => router.push('/standardEntity/vendors'),
+        'g-s': () => router.push('/settings'),
+        'g-p': () => router.push('/standardEntity/projects'),
+        'g-v': () => router.push('/standardEntity/contracts'),
+        'g-o': () => router.push('/standardEntity/plants'),
+        '?': () => isHelpSlideoverOpen.value = !isHelpSlideoverOpen.value,
+        n: () => isNotificationsSlideoverOpen.value = !isNotificationsSlideoverOpen.value
+    })
+
+    watch(() => route.fullPath, () => {
+        isHelpSlideoverOpen.value = false
+        isNotificationsSlideoverOpen.value = false
+    })
+
+    return {
+        isHelpSlideoverOpen,
+        isNotificationsSlideoverOpen
+    }
+}
+
+export const useDashboard = createSharedComposable(_useDashboard)
\ No newline at end of file
diff --git a/frontend/composables/useEntities.ts b/frontend/composables/useEntities.ts
new file mode 100644
index 0000000..edbca08
--- /dev/null
+++ b/frontend/composables/useEntities.ts
@@ -0,0 +1,220 @@
+
+import { useDataStore } from "~/stores/data"
+
+export const useEntities = (
+    relation: string,
+) => {
+
+    const dataStore = useDataStore()
+    const toast = useToast()
+    const router = useRouter()
+
+    const dataType = dataStore.dataTypes[relation]
+
+    const select = async (
+        select: string = "*",
+        sortColumn: string | null = null,
+        ascending: boolean = false,
+        noArchivedFiltering: boolean = false
+    ) => {
+
+        const res = await useNuxtApp().$api(`/api/resource/${relation}`, {
+            method: "GET",
+            params: {
+                select,
+                sort: sortColumn || undefined,
+                asc: ascending
+            }
+        })
+
+        let data = res || []
+
+        if (dataType && dataType.isArchivable && !noArchivedFiltering) {
+            data = data.filter((i: any) => !i.archived)
+        }
+
+        return data
+    }
+
+
+    const selectPaginated = async (options: {
+        select?: string
+        filters?: Record<string, any>
+        sort?: { field: string; direction?: 'asc' | 'desc' }[]
+        page?: number
+        limit?: number
+        includeArchived?: boolean
+        noPagination?: boolean,
+        search?: string,
+        searchColumns?: string[],
+        distinctColumns?: string[],
+    }): Promise<{ data: any[]; meta: any }> => {
+        const {
+            select = '*',
+            filters = {},
+            sort = [],
+            page = 1,
+            limit = 25,
+            includeArchived = false,
+            noPagination = false,
+            search,
+            searchColumns = [],
+            distinctColumns = [],
+        } = options
+
+        const queryParams: Record<string, any> = {
+            select,
+            page,
+            limit,
+            noPagination: noPagination ? 'true' : undefined
+        }
+
+        // --- 🔍 Search-Parameter (optional) ---
+        if (search && search.trim().length > 0) {
+            queryParams.search = search.trim()
+        }
+        if (searchColumns.length > 0) queryParams.searchColumns = searchColumns.join(',')
+        if (distinctColumns.length > 0) queryParams.distinctColumns = distinctColumns.join(',')
+
+
+        // --- Sortierung ---
+        if (sort.length > 0) {
+            queryParams.sort = sort
+                .map(s => `${s.field}:${s.direction || 'asc'}`)
+                .join(',')
+        }
+
+        // --- Filter ---
+        for (const [key, value] of Object.entries(filters)) {
+            if (Array.isArray(value)) {
+                queryParams[`filter[${key}]`] = value.join(',')
+            } else {
+                queryParams[`filter[${key}]`] = value
+            }
+        }
+
+        const response = await useNuxtApp().$api(`/api/resource/${relation}/paginated`, {
+            method: 'GET',
+            params: queryParams
+        })
+
+        if (!response) {
+            return { data: [], meta: null }
+        }
+
+        let data = response.data || []
+        const meta = response.queryConfig || {}
+
+        // --- Optional: Archivierte ausblenden ---
+        if (!includeArchived) {
+            data = data.filter((i: any) => !i.archived)
+        }
+
+        return { data, meta }
+    }
+
+    const selectSpecial = async (
+        select: string = "*",
+        sortColumn: string | null = null,
+        ascending: boolean = false,
+    ) => {
+
+        const res = await useNuxtApp().$api(`/api/resource-special/${relation}`, {
+            method: "GET",
+            params: {
+                select,
+                sort: sortColumn || undefined,
+                asc: ascending
+            }
+        })
+
+        return res || []
+    }
+
+    const selectSingle = async (
+        idToEq: string | number,
+        select: string = "*",
+        withInformation: boolean = true
+    ) => {
+        if (!idToEq) return null
+
+        const res = await useNuxtApp().$api(withInformation ? `/api/resource/${relation}/${idToEq}` : `/api/resource/${relation}/${idToEq}/true`, {
+            method: "GET",
+            params: { select }
+        })
+
+        return res
+    }
+
+    const create = async (
+        payload: Record<string, any>,
+        noRedirect: boolean = false
+    ) => {
+
+
+        const res = await useNuxtApp().$api(`/api/resource/${relation}`, {
+            method: "POST",
+            body: payload
+        })
+
+        toast.add({title: `${dataType.labelSingle} hinzugefügt`})
+        if(dataType.redirect && !noRedirect) {
+            if(dataType.isStandardEntity) {
+                await router.push(dataType.redirectToList ? `/standardEntity/${relation}` : `/standardEntity/${relation}/show/${res.id}`)
+            } else {
+                await router.push(dataType.redirectToList ? `/${relation}` : `/${relation}/show/${res.id}`)
+            }
+        }
+        //modal.close() TODO: Modal Close wenn in Modal
+
+
+        return res
+    }
+
+    const update = async (
+        id: string | number,
+        payload: Record<string, any>,
+        noRedirect: boolean = false
+    ) => {
+        const res = await useNuxtApp().$api(`/api/resource/${relation}/${id}`, {
+            method: "PUT",
+            body: payload
+        })
+
+        toast.add({title: `${dataType.labelSingle} geändert`})
+        if(dataType.redirect && !noRedirect) {
+            if(dataType.isStandardEntity) {
+                await router.push(dataType.redirectToList ? `/standardEntity/${relation}` : `/standardEntity/${relation}/show/${res.id}`)
+            } else {
+                await router.push(dataType.redirectToList ? `/${relation}` : `/${relation}/show/${res.id}`)
+            }
+        }
+        //modal.close() TODO: Modal Close wenn in Modal
+
+
+        return res
+    }
+
+    /**
+     * Soft Delete = archived = true
+     */
+    const archive = async (
+        id: string | number
+    ) => {
+        const res = await useNuxtApp().$api(`/api/resource/${relation}/${id}`, {
+            method: "PUT",
+            body: { archived: true }
+        })
+        navigateTo(dataType.isStandardEntity ? `/standardEntity/${relation}` : `/${relation}`)
+
+        return res
+
+    }
+
+    return {select, create, update, archive, selectSingle, selectSpecial, selectPaginated}
+}
+
+
+
+
+
diff --git a/frontend/composables/useErrorLogging.js b/frontend/composables/useErrorLogging.js
new file mode 100644
index 0000000..298ccd0
--- /dev/null
+++ b/frontend/composables/useErrorLogging.js
@@ -0,0 +1,25 @@
+
+export const useErrorLogging = (resourceType) => {
+    const supabase = useSupabaseClient()
+    const toast = useToast()
+    const profileStore = useProfileStore()
+
+    const logError = async (error) => {
+        let errorData = {
+            message: error,
+            tenant: profileStore.currentTenant,
+            profile: profileStore.activeProfile.id
+        }
+
+        const {data:supabaseData,error:supabaseError} = await supabase.from("errors").insert(errorData).select().single()
+
+        if(supabaseError) {
+            console.error(supabaseError)
+        } else if(supabaseData) {
+            return supabaseData.id
+        }
+
+    }
+
+    return { logError}
+}
diff --git a/frontend/composables/useFiles.ts b/frontend/composables/useFiles.ts
new file mode 100644
index 0000000..7323c8e
--- /dev/null
+++ b/frontend/composables/useFiles.ts
@@ -0,0 +1,142 @@
+
+export const useFiles = () => {
+    const supabase = useSupabaseClient()
+    const toast = useToast()
+
+    const auth = useAuthStore()
+
+    let bucket = "filesdev"
+
+    const uploadFiles = async (fileData, files,tags, upsert) => {
+        const uploadSingleFile = async (file) => {
+            //Create File Entry to Get ID for Folder
+
+            const formData = new FormData()
+
+            formData.append("file", file)
+            formData.append("meta", JSON.stringify(fileData))
+
+            const {fileReturn} = await useNuxtApp().$api("/api/files/upload",{
+                method: "POST",
+                body: formData
+            })
+        }
+
+        if(files.length === 1) {
+            await uploadSingleFile(files[0])
+        } else if( files.length > 1) {
+
+            for(let i = 0; i < files.length; i++){
+                await uploadSingleFile(files[i])
+            }
+
+        }
+    }
+
+    const selectDocuments = async (sortColumn = null, folder = null) => {
+        let data = []
+        data = await useEntities("files").select("*, incominginvoice(*), project(*), vendor(*), customer(*), contract(*), plant(*), createddocument(*), vehicle(*), product(*), profile(*), check(*), inventoryitem(*)")
+
+
+
+        const res =  await useNuxtApp().$api("/api/files/presigned",{
+            method: "POST",
+            body: {
+                ids: data.map(i => i.id)
+            }
+        })
+
+        console.log(res)
+
+        return res.files
+    }
+
+    const selectSomeDocuments = async (documentIds, sortColumn = null, folder = null) => {
+
+        if(documentIds.length === 0) return []
+        const res =  await useNuxtApp().$api("/api/files/presigned",{
+            method: "POST",
+            body: {
+                ids: documentIds
+            }
+        })
+
+        console.log(res)
+
+        return res.files
+
+
+    }
+
+    const selectDocument = async (id) => {
+        let documentIds = [id]
+        if(documentIds.length === 0) return []
+        const res =  await useNuxtApp().$api("/api/files/presigned",{
+            method: "POST",
+            body: {
+                ids: documentIds
+            }
+        })
+
+        console.log(res)
+
+        return res.files[0]
+    }
+
+    const downloadFile = async (id?: string, ids?: string[], returnAsBlob: Boolean = false) => {
+        const url = id ? `/api/files/download/${id}` : `/api/files/download`
+        const body = ids ? { ids } : undefined
+
+        const res:any = await useNuxtApp().$api.raw(url, {
+            method: "POST",
+            body,
+            responseType: "blob", // wichtig!
+        })
+
+        // Dateiname bestimmen
+        let filename = "download"
+
+        if (id) {
+            // Einzeldatei → nimm den letzten Teil des Pfads aus Content-Disposition
+            const contentDisposition = res.headers?.get("content-disposition")
+            if (contentDisposition) {
+                const match = contentDisposition.match(/filename="?([^"]+)"?/)
+                if (match) filename = match[1]
+            }
+        } else {
+            filename = "dateien.zip"
+        }
+
+        // Direkt speichern
+        const blob = res._data as Blob
+
+        if(returnAsBlob) {
+            return blob
+        } else {
+            const link = document.createElement("a")
+            link.href = URL.createObjectURL(blob)
+            link.download = filename
+            link.click()
+            URL.revokeObjectURL(link.href)
+        }
+
+
+
+    }
+
+    const dataURLtoFile = (dataurl:string, filename:string) => {
+        let arr = dataurl.split(","),
+            //@ts-ignore
+            mime = arr[0].match(/:(.*?);/)[1],
+            bstr = atob(arr[arr.length - 1]),
+            n = bstr.length,
+            u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new File([u8arr], filename, {type: mime});
+    }
+
+
+    return {uploadFiles, selectDocuments, selectSomeDocuments, selectDocument, downloadFile, dataURLtoFile}
+}
\ No newline at end of file
diff --git a/frontend/composables/useFormat.ts b/frontend/composables/useFormat.ts
new file mode 100644
index 0000000..6182b99
--- /dev/null
+++ b/frontend/composables/useFormat.ts
@@ -0,0 +1,25 @@
+export const useFormatDuration = (durationInMinutes:number,) => {
+    if (!durationInMinutes || durationInMinutes <= 0) return "00:00"
+
+    const hrs = Math.floor(durationInMinutes / 60)
+    const mins = Math.floor(durationInMinutes % 60)
+
+    return `${String(hrs).padStart(2, "0")}:${String(mins).padStart(2, "0")}`
+}
+
+export const useFormatDurationDays = (start,end) => {
+    const startDate = useNuxtApp().$dayjs(start);
+    const endDate = useNuxtApp().$dayjs(end);
+
+    if(startDate.isBefore(endDate)){
+        // inkl. beider Tage → +1
+        const days = endDate.diff(startDate, "day") + 1;
+
+        return days + " Tag" + (days > 1 ? "e" : "");
+    } else {
+        const days = startDate.diff(endDate, "day") + 1;
+
+        return days + " Tag" + (days > 1 ? "e" : "");
+    }
+
+}
\ No newline at end of file
diff --git a/frontend/composables/useFunctions.js b/frontend/composables/useFunctions.js
new file mode 100644
index 0000000..e475b50
--- /dev/null
+++ b/frontend/composables/useFunctions.js
@@ -0,0 +1,138 @@
+import axios from "axios";
+import dayjs from "dayjs";
+
+const baseURL = /*"http://192.168.1.129:3333"*/ /*"http://localhost:3333"*/ "https://functions.fedeo.io"
+
+export const useFunctions = () => {
+    const supabase = useSupabaseClient()
+
+    const getWorkingTimesEvaluationData = async (user_id, startDate, endDate) => {
+        // Der neue Endpunkt ist /staff/time/evaluation und erwartet die Benutzer-ID als targetUserId Query-Parameter.
+
+        // Wir bauen den Query-String zusammen.
+        const queryParams = new URLSearchParams({
+            from: startDate,
+            to: endDate,
+            targetUserId: user_id, // Die ID wird als targetUserId übergeben
+        });
+
+        // Der neue API-Pfad verwendet nur noch den Basis-Endpunkt.
+        const url = `/api/staff/time/evaluation?${queryParams.toString()}`;
+
+        // Annahme: useNuxtApp().$api führt den GET-Request aus und liefert die Daten zurück.
+        return (await useNuxtApp().$api(url));
+    }
+
+    const useNextNumber = async (numberRange) => {
+
+        return (await useNuxtApp().$api(`/api/functions/usenextnumber/${numberRange}`,)).usedNumber
+
+
+    }
+
+    const useCreateTicket = async (subject,message,url,source) => {
+        const {data:{session:{access_token}}} = await supabase.auth.getSession()
+
+        const {data} = await axios({
+            method: "POST",
+            url: `${baseURL}/functions/createticket`,
+            data: {
+                subject,
+                message,
+                source,
+                url
+            },
+            headers: {
+                Authorization: `Bearer ${access_token}`
+            }
+        })
+
+        return !!data.ticket_created;
+
+    }
+
+    const useBankingGenerateLink = async (institutionId) => {
+        return (await useNuxtApp().$api(`/api/banking/link/${institutionId}`)).link
+    }
+
+    const useCreatePDF = async (data,path,type) => {
+        const returnData = await useNuxtApp().$api(`/api/functions/pdf/${type}`, {
+            method: "POST",
+            body: {
+                data: data,
+                backgroundPath: path,
+            }
+        })
+
+        console.log(returnData)
+
+        return `data:${returnData.mimeType};base64,${returnData.base64}`
+
+    }
+
+    const useZipCheck = async (zip) => {
+        const returnData = await useNuxtApp().$api(`/api/functions/check-zip/${zip}`, {
+            method: "GET",
+        })
+
+        return returnData
+
+    }
+
+
+
+    const useGetInvoiceData = async (file) => {
+        const {data:{session:{access_token}}} = await supabase.auth.getSession()
+
+        const {data} = await axios({
+            method: "POST",
+            url: `${baseURL}/functions/getinvoicedatafromgpt`,
+            data: {
+                file
+            },
+            headers: {
+                Authorization: `Bearer ${access_token}`
+            }
+        })
+
+        console.log(data)
+
+        return data
+
+    }
+
+    const useSendTelegramNotification = async (message) => {
+        const {data:{session:{access_token}}} = await supabase.auth.getSession()
+
+        const {data,error} = await axios({
+            method: "POST",
+            url: `${baseURL}/functions/sendtelegramnotification`,
+            data: {
+                message: message
+            },
+            headers: {
+                Authorization: `Bearer ${access_token}`
+            }
+        })
+
+        if(error){
+
+        } else {
+            return true
+        }
+    }
+
+    const useBankingCheckInstitutions = async (bic) => {
+
+        return await useNuxtApp().$api(`/api/banking/institutions/${bic}`)
+
+    }
+
+    const useBankingListRequisitions = async (reqId) => {
+
+        return await useNuxtApp().$api(`/api/banking/requisitions/${reqId}`)
+
+    }
+
+    return {getWorkingTimesEvaluationData, useNextNumber, useCreateTicket, useBankingGenerateLink, useZipCheck, useBankingCheckInstitutions, useBankingListRequisitions, useCreatePDF,useGetInvoiceData, useSendTelegramNotification}
+}
\ No newline at end of file
diff --git a/frontend/composables/useHelpdesk.ts b/frontend/composables/useHelpdesk.ts
new file mode 100644
index 0000000..d91191c
--- /dev/null
+++ b/frontend/composables/useHelpdesk.ts
@@ -0,0 +1,110 @@
+// composables/useHelpdeskApi.ts
+import { ref } from 'vue'
+import { useNuxtApp } from '#app'
+
+export function useHelpdeskApi() {
+    const { $api } = useNuxtApp()
+    const loading = ref(false)
+    const error = ref<string | null>(null)
+
+    const base = '/api/helpdesk'
+
+    // 🔹 Konversationen abrufen
+    async function getConversations(status?: string) {
+        loading.value = true
+        error.value = null
+        try {
+            const query = status ? `?status=${status}` : ''
+            const data = await $api(`${base}/conversations${query}`)
+            return data
+        } catch (err: any) {
+            error.value = err.message || 'Fehler beim Laden der Konversationen'
+            return []
+        } finally {
+            loading.value = false
+        }
+    }
+
+    // 🔹 Einzelne Konversation
+    async function getConversation(id: string) {
+        try {
+            return await $api(`${base}/conversations/${id}`)
+        } catch (err: any) {
+            error.value = err.message
+            return null
+        }
+    }
+
+    // 🔹 Nachrichten einer Konversation
+    async function getMessages(conversationId: string) {
+        try {
+            return await $api(`${base}/conversations/${conversationId}/messages`)
+        } catch (err: any) {
+            error.value = err.message
+            return []
+        }
+    }
+
+    // 🔹 Neue Nachricht senden
+    async function sendMessage(conversationId: string, text: string) {
+        try {
+            return await $api(`${base}/conversations/${conversationId}/messages`, {
+                method: 'POST',
+                body: { text },
+            })
+        } catch (err: any) {
+            error.value = err.message
+            throw err
+        }
+    }
+
+    async function replyMessage(conversationId: string, text: string) {
+        try {
+            return await $api(`${base}/conversations/${conversationId}/reply`, {
+                method: 'POST',
+                body: { text },
+            })
+        } catch (err: any) {
+            error.value = err.message
+            throw err
+        }
+    }
+
+    // 🔹 Neuen Kontakt (manuell) anlegen
+    async function createContact(payload: { email?: string; phone?: string; display_name?: string }) {
+        try {
+            return await $api(`${base}/contacts`, {
+                method: 'POST',
+                body: payload,
+            })
+        } catch (err: any) {
+            error.value = err.message
+            throw err
+        }
+    }
+
+    // 🔹 Konversation-Status ändern
+    async function updateConversationStatus(conversationId: string, status: string) {
+        try {
+            return await $api(`${base}/conversations/${conversationId}/status`, {
+                method: 'PATCH',
+                body: { status },
+            })
+        } catch (err: any) {
+            error.value = err.message
+            throw err
+        }
+    }
+
+    return {
+        loading,
+        error,
+        getConversations,
+        getConversation,
+        getMessages,
+        sendMessage,
+        createContact,
+        updateConversationStatus,
+        replyMessage,
+    }
+}
diff --git a/frontend/composables/useNumberRange.js b/frontend/composables/useNumberRange.js
new file mode 100644
index 0000000..27131e2
--- /dev/null
+++ b/frontend/composables/useNumberRange.js
@@ -0,0 +1,61 @@
+
+export const useNumberRange = (resourceType) => {
+    const supabase = useSupabaseClient()
+
+    const dataStore = useDataStore()
+    const profileStore = useProfileStore()
+
+    const numberRanges = profileStore.ownTenant.numberRanges
+
+    const numberRange = numberRanges[resourceType]
+
+    const useNextNumber = async () => {
+
+        let nextNumber = numberRange.nextNumber
+
+        let newNumberRanges = numberRanges
+
+        newNumberRanges[resourceType].nextNumber += 1
+
+        const {data,error} = await supabase
+            .from("tenants")
+            .update({numberRanges: newNumberRanges})
+            .eq('id',profileStore.currentTenant)
+
+
+        await profileStore.fetchOwnTenant()
+
+        return (numberRange.prefix ? numberRange.prefix : "") + nextNumber + (numberRange.suffix ? numberRange.suffix : "")
+    }
+
+    return { useNextNumber}
+}
+
+/*export const useNumberRange = (resourceType) => {
+    const supabase = useSupabaseClient()
+
+    const {numberRanges} = storeToRefs(useDataStore())
+    const {fetchNumberRanges} = useDataStore()
+
+    const numberRange = numberRanges.value.find(range => range.resourceType === resourceType)
+
+
+
+
+    const useNextNumber = async () => {
+
+        let nextNumber = numberRange.nextNumber
+
+        const {data,error} = await supabase
+            .from("numberranges")
+            .update({nextNumber: nextNumber + 1})
+            .eq('id',numberRange.id)
+
+        fetchNumberRanges()
+
+        return (numberRange.prefix ? numberRange.prefix : "") + nextNumber + (numberRange.suffix ? numberRange.suffix : "")
+
+    }
+
+    return { useNextNumber}
+}*/
\ No newline at end of file
diff --git a/frontend/composables/usePermission.ts b/frontend/composables/usePermission.ts
new file mode 100644
index 0000000..54376e7
--- /dev/null
+++ b/frontend/composables/usePermission.ts
@@ -0,0 +1,9 @@
+export function usePermission() {
+    const auth = useAuthStore()
+
+    const has = (key: string) => {
+        return auth.hasPermission(key)
+    }
+
+    return { has }
+}
diff --git a/frontend/composables/usePrintLabel.js b/frontend/composables/usePrintLabel.js
new file mode 100644
index 0000000..9ce3245
--- /dev/null
+++ b/frontend/composables/usePrintLabel.js
@@ -0,0 +1,27 @@
+
+import Handlebars from "handlebars";
+
+export const usePrintLabel = async (printServerId,printerName , rawZPL ) => {
+    const supabase = useSupabaseClient()
+    const dataStore = useDataStore()
+    const profileStore = useProfileStore()
+
+    await supabase.from("printJobs").insert({
+        tenant: profileStore.currentTenant,
+        rawContent: rawZPL,
+        printerName: printerName,
+        printServer: printServerId
+    })
+
+
+
+}
+
+export const useGenerateZPL = (rawZPL,data) => {
+    let template = Handlebars.compile(rawZPL)
+
+    return template(data)
+}
+
+
+
diff --git a/frontend/composables/useRole.js b/frontend/composables/useRole.js
new file mode 100644
index 0000000..053fc4f
--- /dev/null
+++ b/frontend/composables/useRole.js
@@ -0,0 +1,309 @@
+
+
+
+
+
+export const useRole = () => {
+    const profileStore = useProfileStore()
+
+    const generalAvailableRights = ref({
+        projects: {
+            label: "Projekte",
+            showToAllUsers: false
+        },
+        "projects-viewAll": {
+            label: "Alle Projekte einsehen",
+            parent: "projects"
+        },
+        "projects-create": {
+            label: "Projekte erstellen",
+            parent: "projects"
+        },
+        contracts: {
+            label: "Verträge",
+            showToAllUsers: false
+        },
+        "contracts-viewAll": {
+            label: "Alle Verträge einsehen",
+            parent: "contracts"
+        },
+        "contracts-create": {
+            label: "Verträge erstellen",
+            parent: "contracts"
+        },
+        plants: {
+            label: "Objekte",
+            showToAllUsers: false
+        },
+        "plants-viewAll": {
+            label: "Alle Objekte einsehen",
+            parent: "plants"
+        },
+        "plants-create": {
+            label: "Objekte erstellen",
+            parent: "plants"
+        },
+        products: {
+            label: "Artikel",
+            showToAllUsers: true
+        },
+        "products-create": {
+            label: "Artikel erstellen",
+            parent: "products"
+        },
+        productcategories: {
+            label: "Artikelkategorie",
+            showToAllUsers: true
+        },
+        "productcategories-create": {
+            label: "Artikelkategorie erstellen",
+            parent: "productcategories"
+        },
+        services: {
+            label: "Leistungen",
+            showToAllUsers: true
+        },
+        "services-create": {
+            label: "Leistungen erstellen",
+            parent: "services"
+        },
+        servicecategories: {
+            label: "Leistungskategorien",
+            showToAllUsers: true
+        },
+        "servicecategories-create": {
+            label: "Leistungskategorien erstellen",
+            parent: "servicecategories"
+        },
+        customers: {
+            label: "Kunden",
+            showToAllUsers: false
+        },
+        "customers-viewAll": {
+            label: "Alle Kunden einsehen",
+            parent: "customers"
+        },
+        "customers-create": {
+            label: "Kunden erstellen",
+            parent: "customers"
+        },
+        contacts: {
+            label: "Kontakte",
+            showToAllUsers: false
+        },
+        "contacts-viewAll": {
+            label: "Alle Kontakte einsehen",
+            parent: "contacts"
+        },
+        "contacts-create": {
+            label: "Kontakte erstellen",
+            parent: "contacts"
+        },
+        vendors: {
+            label: "Lieferanten",
+            showToAllUsers: false
+        },
+        "vendors-viewAll": {
+            label: "Alle Lieferanten einsehen",
+            parent: "vendors"
+        },
+        "vendors-create": {
+            label: "Lieferanten erstellen",
+            parent: "vendors"
+        },
+        checks: {
+            label: "Überprüfungen",
+            showToAllUsers: false
+        },
+        "checks-viewAll": {
+            label: "Alle Überprüfungen einsehen",
+            parent: "checks"
+        },
+        "checks-create": {
+            label: "Überprüfungen erstellen",
+            parent: "checks"
+        },
+        vehicles: {
+            label: "Fahrzeuge",
+            showToAllUsers: false
+        },
+        "vehicles-viewAll": {
+            label: "Alle Fahrzeuge einsehen",
+            parent: "vehicles"
+        },
+        "vehicles-create": {
+            label: "Fahrzeuge erstellen",
+            parent: "vehicles"
+        },
+        inventoryitems: {
+            label: "Inventarartikel",
+            showToAllUsers: false
+        },
+        "inventoryitems-viewAll": {
+            label: "Alle Inventarartikel einsehen",
+            parent: "inventoryitems"
+        },
+        "inventoryitems-create": {
+            label: "Inventarartikel erstellen",
+            parent: "inventoryitems"
+        },
+        inventoryitemgroups: {
+            parent: "inventoryitems",
+            label: "Inventarartikelgruppen",
+            showToAllUsers: false
+        },
+        "inventoryitemgroups-viewAll": {
+            label: "Alle Inventarartikelgruppen einsehen",
+            parent: "inventoryitemgroups"
+        },
+        "inventoryitemgroups-create": {
+            label: "Inventarartikelgruppen erstellen",
+            parent: "inventoryitemgroups"
+        },
+        absencerequests: {
+            label: "Abwesenheiten",
+            showToAllUsers: false
+        },
+        "absencerequests-viewAll": {
+            label: "Alle Abwesenheiten einsehen",
+            parent: "absencerequests"
+        },
+        "absencerequests-create": {
+            label: "Abwesenheiten erstellen",
+            parent: "absencerequests"
+        },
+        events: {
+            label: "Termine",
+            showToAllUsers: false
+        },
+        "events-viewAll": {
+            label: "Alle Termine einsehen",
+            parent: "events"
+        },
+        "events-create": {
+            label: "Termine erstellen",
+            parent: "events"
+        },
+        spaces: {
+            label: "Lagerplätze",
+            showToAllUsers: false
+        },
+        "spaces-viewAll": {
+            label: "Alle Lagerplätze einsehen",
+            parent: "spaces"
+        },
+        "spaces-create": {
+            label: "Lagerplätze erstellen",
+            parent: "spaces"
+        },
+        roles: {
+            label: "Rollen",
+            showToAllUsers: false
+        },
+        "roles-viewAll": {
+            label: "Alle Rollen einsehen",
+            parent: "roles"
+        },
+        "roles-create": {
+            label: "Rollen erstellen",
+            parent: "roles"
+        },
+        tasks: {
+            label: "Aufgaben",
+            showToAllUsers: false
+        },
+        "tasks-viewAll": {
+            label: "Alle Aufgaben einsehen",
+            parent: "tasks"
+        },
+        "tasks-create": {
+            label: "Aufgaben erstellen",
+            parent: "tasks"
+        },
+        costcentres: {
+            label: "Kostenstellen",
+            showToAllUsers: false
+        },
+        "costcentres-viewAll": {
+            label: "Alle Kostenstellen einsehen",
+            parent: "costcentres"
+        },
+        "costcentres-create": {
+            label: "Kostenstellen erstellen",
+            parent: "costcentres"
+        },
+        ownaccounts: {
+            label: "Buchungskonten",
+            showToAllUsers: false
+        },
+        "ownaccounts-viewAll": {
+            label: "Alle Buchungskonten einsehen",
+            parent: "ownaccounts"
+        },
+        "ownaccounts-create": {
+            label: "Buchungskonten erstellen",
+            parent: "ownaccounts"
+        },
+        documentboxes: {
+            label: "Dokuemntenboxen",
+            showToAllUsers: false
+        },
+        "documentboxes-viewAll": {
+            label: "Alle Dokuemntenboxen einsehen",
+            parent: "documentboxesx"
+        },
+        "documentboxes-create": {
+            label: "Dokuemntenboxen erstellen",
+            parent: "documentboxes"
+        },
+        hourrates: {
+            label: "Stundensätze",
+            showToAllUsers: false
+        },
+        "hourrates-viewAll": {
+            label: "Alle Stundensätze einsehen",
+            parent: "hourrates"
+        },
+        "hourrates-create": {
+            label: "Stundensätze erstellen",
+            parent: "hourrates"
+        },
+        "inventory": {
+            label: "Lager",
+        },
+    })
+
+
+    let role = profileStore.activeProfile.role
+
+    const checkRight = (right) => {
+        let rightsToCheck = [right]
+
+
+        //console.log(right.split("-"))
+
+        if(right.split("-").length > 1) {
+            rightsToCheck.push(right.split("-")[0])
+        }
+        //console.log(rightsToCheck)
+
+        let hasAllNeccessaryRights = true
+
+        //console.log(role.rights)
+
+        rightsToCheck.forEach(i => {
+            if(!role.rights.includes(i)){
+                hasAllNeccessaryRights = false
+            }
+        })
+
+        return hasAllNeccessaryRights
+    }
+
+    return {
+        role,
+        generalAvailableRights,
+        checkRight
+    }
+
+}
\ No newline at end of file
diff --git a/frontend/composables/useSearch.js b/frontend/composables/useSearch.js
new file mode 100644
index 0000000..6335c86
--- /dev/null
+++ b/frontend/composables/useSearch.js
@@ -0,0 +1,15 @@
+export const useSearch = (searchString,items) => {
+    if(!searchString) {
+        return items
+    }
+
+    return items.filter(i => JSON.stringify(i).toLowerCase().includes(searchString.toLowerCase()))
+}
+
+export const useListFilter = (searchString,items,showArchived = false) => {
+    if(!searchString) {
+        return items.filter(i => !i.archived)
+    }
+
+    return items.filter(i => JSON.stringify(i).toLowerCase().includes(searchString.toLowerCase()) && !i.archived)
+}
\ No newline at end of file
diff --git a/frontend/composables/useSort.js b/frontend/composables/useSort.js
new file mode 100644
index 0000000..821370c
--- /dev/null
+++ b/frontend/composables/useSort.js
@@ -0,0 +1,18 @@
+export const useSort = (items,column,direction) => {
+
+
+
+
+
+
+
+
+
+
+
+    if(!searchString) {
+        return items
+    }
+
+    return items.filter(i => JSON.stringify(i).toLowerCase().includes(searchString.toLowerCase()))
+}
\ No newline at end of file
diff --git a/frontend/composables/useStaffTime.ts b/frontend/composables/useStaffTime.ts
new file mode 100644
index 0000000..791c0a0
--- /dev/null
+++ b/frontend/composables/useStaffTime.ts
@@ -0,0 +1,119 @@
+import { defineStore } from 'pinia'
+import { useAuthStore } from '~/stores/auth'
+
+export const useStaffTime = () => {
+    const { $api, $dayjs } = useNuxtApp()
+    const auth = useAuthStore()
+
+    // ... (list Funktion bleibt gleich) ...
+    const list = async (filter?: { user_id?: string, from?: string, to?: string }) => {
+        // ... (Code wie zuvor)
+        const from = filter?.from || $dayjs().startOf('month').format('YYYY-MM-DD')
+        const to = filter?.to || $dayjs().endOf('month').format('YYYY-MM-DD')
+        const targetUserId = filter?.user_id || auth.user.id
+        const params = new URLSearchParams({ from, to, targetUserId })
+        try {
+            const spans = await $api(`/api/staff/time/spans?${params.toString()}`)
+            return (spans || []).map((span: any) => {
+                const start = $dayjs(span.startedAt)
+                const end = span.endedAt ? $dayjs(span.endedAt) : $dayjs()
+                return {
+                    id: span.sourceEventIds && span.sourceEventIds.length > 0 ? span.sourceEventIds[0] : null,
+                    eventIds: span.sourceEventIds || [],
+                    state: span.status,
+                    started_at: span.startedAt,
+                    stopped_at: span.endedAt,
+                    duration_minutes: end.diff(start, 'minute'),
+                    user_id: targetUserId,
+                    type: span.type,
+                    description: span.payload?.description || ''
+                }
+            }).sort((a: any, b: any) => $dayjs(b.started_at).valueOf() - $dayjs(a.started_at).valueOf())
+        } catch (error) {
+            console.error("Fehler beim Laden:", error)
+            return []
+        }
+    }
+
+    /**
+     * Startet "jetzt" (Live-Modus).
+     * Kann optional eine Zeit empfangen (für manuelle Korrekturen),
+     * aber wir nutzen dafür besser die createEntry Funktion unten.
+     */
+    const start = async (description = "Arbeitszeit", time?: string) => {
+        await $api('/api/staff/time/event', {
+            method: 'POST',
+            body: {
+                eventtype: 'work_start',
+                eventtime: time || new Date().toISOString(), // 💡 Fix: Zeit akzeptieren
+                payload: { description }
+            }
+        })
+    }
+
+    const stop = async () => {
+        await $api('/api/staff/time/event', { method: 'POST', body: { eventtype: 'work_end', eventtime: new Date().toISOString() } })
+    }
+
+    const submit = async (entry: any) => {
+        const ids = entry.eventIds || (entry.id ? [entry.id] : [entry]);
+        if (!ids || ids.length === 0) return
+        await $api('/api/staff/time/submit', { method: 'POST', body: { eventIds: ids } })
+    }
+
+    const approve = async (entry: any) => {
+        if (!entry?.user_id) return
+        const ids = entry.eventIds || [entry.id];
+        await $api('/api/staff/time/approve', { method: 'POST', body: { eventIds: ids, employeeUserId: entry.user_id } })
+    }
+
+    const reject = async (entry: any, reason = "Abgelehnt") => {
+        if (!entry?.user_id) return
+        const ids = entry.eventIds || [entry.id];
+        await $api('/api/staff/time/reject', { method: 'POST', body: { eventIds: ids, employeeUserId: entry.user_id, reason } })
+    }
+
+    const update = async (entry: any, newData: { start: string, end: string | null, type: string, description: string }) => {
+        if (!entry || !entry.eventIds || entry.eventIds.length === 0) {
+            throw new Error("Bearbeiten fehlgeschlagen: Keine IDs.")
+        }
+        await $api('/api/staff/time/edit', {
+            method: 'POST',
+            body: {
+                originalEventIds: entry.eventIds,
+                newStart: newData.start,
+                newEnd: newData.end,
+                newType: newData.type,
+                description: newData.description,
+                reason: "Manuelle Bearbeitung"
+            }
+        })
+    }
+
+    // 🆕 NEU: Manuellen Eintrag erstellen (Vergangenheit oder Zeitraum)
+    const createEntry = async (data: { start: string, end: string | null, type: string, description: string }) => {
+        // 1. Start Event senden
+        // Wir nutzen den dynamischen Typ (work_start, vacation_start etc.)
+        await $api('/api/staff/time/event', {
+            method: 'POST',
+            body: {
+                eventtype: `${data.type}_start`,
+                eventtime: data.start,
+                payload: { description: data.description }
+            }
+        })
+
+        // 2. End Event senden (falls vorhanden)
+        if (data.end) {
+            await $api('/api/staff/time/event', {
+                method: 'POST',
+                body: {
+                    eventtype: `${data.type}_end`,
+                    eventtime: data.end
+                }
+            })
+        }
+    }
+
+    return { list, start, stop, submit, approve, reject, update, createEntry }
+}
\ No newline at end of file
diff --git a/frontend/composables/useSum.js b/frontend/composables/useSum.js
new file mode 100644
index 0000000..4c11915
--- /dev/null
+++ b/frontend/composables/useSum.js
@@ -0,0 +1,138 @@
+
+export const useSum = () => {
+
+    const supabase = useSupabaseClient()
+
+    const getIncomingInvoiceSum = (invoice) => {
+        let sum = 0
+        invoice.accounts.forEach(account => {
+
+
+            sum += account.amountTax
+            sum += account.amountNet
+
+
+
+        })
+        return sum.toFixed(2)
+    }
+
+    const getCreatedDocumentSum = (createddocument,createddocuments = []) => {
+        let totalNet = 0
+        let total19 = 0
+        let total7 = 0
+
+
+
+
+        createddocument.rows.forEach(row => {
+            if(!['pagebreak','title','text'].includes(row.mode)){
+                let rowPrice = Number(Number(row.quantity) * Number(row.price) * (1 - Number(row.discountPercent) /100) ).toFixed(3)
+                totalNet = totalNet + Number(rowPrice)
+
+                if(row.taxPercent === 19) {
+                    total19 = total19 + Number(rowPrice * 0.19)
+                } else if(row.taxPercent === 7) {
+                    total7 = total7 + Number(rowPrice * 0.07)
+                }
+            }
+        })
+
+
+
+
+        let totalGross = Number(totalNet.toFixed(2)) + Number(total19.toFixed(2)) + Number(total7.toFixed(2))
+
+        let totalGrossAlreadyPaid = 0
+
+
+        createddocument.usedAdvanceInvoices.forEach(advanceInvoiceId => {
+            let advanceInvoice = createddocuments.find(i => i.id === advanceInvoiceId)
+
+            let priceNet = advanceInvoice.rows.find(i => i.advanceInvoiceData).price
+
+            let partSum = priceNet * ((100 + advanceInvoice.rows.find(i => i.advanceInvoiceData).taxPercent) / 100)
+
+            totalGrossAlreadyPaid += partSum
+        })
+
+
+        let sumToPay = totalGross - totalGrossAlreadyPaid
+
+        return Number(sumToPay.toFixed(2))
+    }
+
+    const getCreatedDocumentSumDetailed = (createddocument) => {
+        let totalNet = 0
+        let total19 = 0
+        let total7 = 0
+
+        createddocument.rows.forEach(row => {
+            if(!['pagebreak','title','text'].includes(row.mode)){
+                let rowPrice = Number(Number(row.quantity) * Number(row.price) * (1 - Number(row.discountPercent) /100) ).toFixed(3)
+                totalNet = totalNet + Number(rowPrice)
+
+                if(row.taxPercent === 19) {
+                    total19 = total19 + Number(rowPrice * 0.19)
+                } else if(row.taxPercent === 7) {
+                    total7 = total7 + Number(rowPrice * 0.07)
+                }
+            }
+        })
+
+        //Title Sum
+
+        let titleSums = {}
+        let lastTitle = ""
+
+        createddocument.rows.forEach(row => {
+            if(row.mode === 'title'){
+                titleSums[`${row.pos} - ${row.text}`] = 0
+                lastTitle = `${row.pos} - ${row.text}`
+            } else if(!['pagebreak','text'].includes(row.mode) && lastTitle !== ""){
+                titleSums[lastTitle] = Number(titleSums[lastTitle]) + Number(Number(row.quantity) * Number(row.price) * (1 - Number(row.discountPercent) /100) )
+            }
+        })
+
+
+
+
+        let totalGross = Number(totalNet.toFixed(2)) + Number(total19.toFixed(2)) + Number(total7.toFixed(2))
+
+        let totalGrossAlreadyPaid = 0
+
+        createddocument.usedAdvanceInvoices.forEach(advanceInvoiceId => {
+            let advanceInvoice = createddocuments.value.find(i => i.id === advanceInvoiceId)
+
+            let priceNet = advanceInvoice.rows.find(i => i.advanceInvoiceData).price
+
+            let partSum = priceNet * ((100 + advanceInvoice.rows.find(i => i.advanceInvoiceData).taxPercent) / 100)
+
+            totalGrossAlreadyPaid += partSum
+        })
+
+        console.log(totalGrossAlreadyPaid)
+
+        let sumToPay = totalGross - totalGrossAlreadyPaid
+
+        return {
+            titleSums: titleSums,
+            totalNet: totalNet,
+            total19: total19,
+            total7: total7,
+            totalGross: totalGross,
+            totalGrossAlreadyPaid: totalGrossAlreadyPaid,
+            totalSumToPay: sumToPay
+        }
+    }
+
+    const getIsPaid = (createddocument,createddocuments) => {
+        let amountPaid = 0
+        createddocument.statementallocations.forEach(allocation => amountPaid += allocation.amount)
+
+        return Number(amountPaid.toFixed(2)) === getCreatedDocumentSum(createddocument,createddocuments)
+    }
+
+    return {getIncomingInvoiceSum, getCreatedDocumentSum, getCreatedDocumentSumDetailed, getIsPaid}
+
+}
\ No newline at end of file
diff --git a/frontend/composables/useUsers.ts b/frontend/composables/useUsers.ts
new file mode 100644
index 0000000..ba68874
--- /dev/null
+++ b/frontend/composables/useUsers.ts
@@ -0,0 +1,28 @@
+
+import { useDataStore } from "~/stores/data"
+
+export const useUsers = (
+    id: string | number,
+) => {
+
+    const dataStore = useDataStore()
+    const toast = useToast()
+    const router = useRouter()
+
+    const getProfile = async () => {
+
+
+        const res = await useNuxtApp().$api(`/api/profiles/${id}`, {
+            method: "GET"
+        })
+
+        return res
+    }
+
+    return {getProfile}
+}
+
+
+
+
+
diff --git a/frontend/composables/useZebraPrinter.js b/frontend/composables/useZebraPrinter.js
new file mode 100644
index 0000000..8f1ee9e
--- /dev/null
+++ b/frontend/composables/useZebraPrinter.js
@@ -0,0 +1,25 @@
+import axios from 'axios'
+
+export const useZebraStatus = async (relation,select = '*', sortColumn = null) => {
+    const {data} = await axios({
+        method:"get",
+        url:"http://192.168.2.161/config.html",
+
+    })
+
+    console.log(data)
+}
+
+export const useZebraPstPrnt = async (zpl) => {
+    try {
+        const {data} = await axios({
+            method: "post",
+            url:"http://192.168.2.161/pstprnt",
+            data: zpl
+        })
+
+    } catch (error) {
+        console.log(error)
+    }
+}
+
diff --git a/frontend/docker-compose.yml b/frontend/docker-compose.yml
new file mode 100644
index 0000000..8e31979
--- /dev/null
+++ b/frontend/docker-compose.yml
@@ -0,0 +1,6 @@
+version: "3"
+
+services:
+  web:
+    image: reg.federspiel.software/fedeo/software:beta
+    restart: always
\ No newline at end of file
diff --git a/frontend/error.vue b/frontend/error.vue
new file mode 100644
index 0000000..814280f
--- /dev/null
+++ b/frontend/error.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const props = defineProps({
+  error: Object as () => NuxtError
+})
+</script>
+
+<template>
+  <UCard class="w-1/2 mx-auto mt-10 text-center">
+    <template #header>
+      <div class="text-center">
+        <span class="text-xl text-center font-bold">Es gab ein Problem - {{error.statusCode}}</span>
+      </div>
+    </template>
+    <UColorModeImage
+        light="/Logo.png"
+        dark="/Logo_Dark.png"
+        class="w-3/4 mx-auto "
+    />
+    <UAccordion
+        class="mt-5"
+        :items="[{
+        label: 'Fehlerbeschreibung',
+        icon: 'i-heroicons-information-circle',
+        defaultOpen: false,
+        content: error
+      }]"
+    >
+
+    </UAccordion>
+    <UButton to="/" class="mt-5">Zurück zur Startseite</UButton>
+
+  </UCard>
+</template>
\ No newline at end of file
diff --git a/frontend/ios/.gitignore b/frontend/ios/.gitignore
new file mode 100644
index 0000000..f470299
--- /dev/null
+++ b/frontend/ios/.gitignore
@@ -0,0 +1,13 @@
+App/build
+App/Pods
+App/output
+App/App/public
+DerivedData
+xcuserdata
+
+# Cordova plugins for Capacitor
+capacitor-cordova-ios-plugins
+
+# Generated Config files
+App/App/capacitor.config.json
+App/App/config.xml
diff --git a/frontend/ios/App/App.xcodeproj/project.pbxproj b/frontend/ios/App/App.xcodeproj/project.pbxproj
new file mode 100644
index 0000000..31a573e
--- /dev/null
+++ b/frontend/ios/App/App.xcodeproj/project.pbxproj
@@ -0,0 +1,641 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 77;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		2FAD9763203C412B000D30F8 /* config.xml in Resources */ = {isa = PBXBuildFile; fileRef = 2FAD9762203C412B000D30F8 /* config.xml */; };
+		50379B232058CBB4000EE86E /* capacitor.config.json in Resources */ = {isa = PBXBuildFile; fileRef = 50379B222058CBB4000EE86E /* capacitor.config.json */; };
+		504EC3081FED79650016851F /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 504EC3071FED79650016851F /* AppDelegate.swift */; };
+		504EC30D1FED79650016851F /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30B1FED79650016851F /* Main.storyboard */; };
+		504EC30F1FED79650016851F /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30E1FED79650016851F /* Assets.xcassets */; };
+		504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC3101FED79650016851F /* LaunchScreen.storyboard */; };
+		50B271D11FEDC1A000F3C39B /* public in Resources */ = {isa = PBXBuildFile; fileRef = 50B271D01FEDC1A000F3C39B /* public */; };
+		7E144E961F6CA2C63512098E /* Pods_OneSignalNotificationServiceExtension.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 4DF9D76ED77CB578563C2573 /* Pods_OneSignalNotificationServiceExtension.framework */; };
+		A084ECDBA7D38E1E42DFC39D /* Pods_App.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */; };
+		D5A301A42D970BAC002A22E9 /* OneSignalNotificationServiceExtension.appex in Embed Foundation Extensions */ = {isa = PBXBuildFile; fileRef = D5A3019D2D970BAC002A22E9 /* OneSignalNotificationServiceExtension.appex */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
+/* End PBXBuildFile section */
+
+/* Begin PBXContainerItemProxy section */
+		D5A301A22D970BAC002A22E9 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 504EC2FC1FED79650016851F /* Project object */;
+			proxyType = 1;
+			remoteGlobalIDString = D5A3019C2D970BAC002A22E9;
+			remoteInfo = OneSignalNotificationServiceExtension;
+		};
+/* End PBXContainerItemProxy section */
+
+/* Begin PBXCopyFilesBuildPhase section */
+		D5A301A92D970BAC002A22E9 /* Embed Foundation Extensions */ = {
+			isa = PBXCopyFilesBuildPhase;
+			buildActionMask = 2147483647;
+			dstPath = "";
+			dstSubfolderSpec = 13;
+			files = (
+				D5A301A42D970BAC002A22E9 /* OneSignalNotificationServiceExtension.appex in Embed Foundation Extensions */,
+			);
+			name = "Embed Foundation Extensions";
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXCopyFilesBuildPhase section */
+
+/* Begin PBXFileReference section */
+		2FAD9762203C412B000D30F8 /* config.xml */ = {isa = PBXFileReference; lastKnownFileType = text.xml; path = config.xml; sourceTree = "<group>"; };
+		37F7155EDCE8C061367E30A9 /* Pods-OneSignalNotificationServiceExtension.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-OneSignalNotificationServiceExtension.debug.xcconfig"; path = "Pods/Target Support Files/Pods-OneSignalNotificationServiceExtension/Pods-OneSignalNotificationServiceExtension.debug.xcconfig"; sourceTree = "<group>"; };
+		4DF9D76ED77CB578563C2573 /* Pods_OneSignalNotificationServiceExtension.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_OneSignalNotificationServiceExtension.framework; sourceTree = BUILT_PRODUCTS_DIR; };
+		50379B222058CBB4000EE86E /* capacitor.config.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = capacitor.config.json; sourceTree = "<group>"; };
+		504EC3041FED79650016851F /* App.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = App.app; sourceTree = BUILT_PRODUCTS_DIR; };
+		504EC3071FED79650016851F /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
+		504EC30C1FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
+		504EC30E1FED79650016851F /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
+		504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
+		504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
+		6CB294319AEF8406BACB8AC1 /* Pods-OneSignalNotificationServiceExtension.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-OneSignalNotificationServiceExtension.release.xcconfig"; path = "Pods/Target Support Files/Pods-OneSignalNotificationServiceExtension/Pods-OneSignalNotificationServiceExtension.release.xcconfig"; sourceTree = "<group>"; };
+		AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_App.framework; sourceTree = BUILT_PRODUCTS_DIR; };
+		AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.release.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.release.xcconfig"; sourceTree = "<group>"; };
+		D5A301982D970B67002A22E9 /* App.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = App.entitlements; sourceTree = "<group>"; };
+		D5A3019D2D970BAC002A22E9 /* OneSignalNotificationServiceExtension.appex */ = {isa = PBXFileReference; explicitFileType = "wrapper.app-extension"; includeInIndex = 0; path = OneSignalNotificationServiceExtension.appex; sourceTree = BUILT_PRODUCTS_DIR; };
+		FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.debug.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig"; sourceTree = "<group>"; };
+/* End PBXFileReference section */
+
+/* Begin PBXFileSystemSynchronizedBuildFileExceptionSet section */
+		D5A301A52D970BAC002A22E9 /* Exceptions for "OneSignalNotificationServiceExtension" folder in "OneSignalNotificationServiceExtension" target */ = {
+			isa = PBXFileSystemSynchronizedBuildFileExceptionSet;
+			membershipExceptions = (
+				Info.plist,
+			);
+			target = D5A3019C2D970BAC002A22E9 /* OneSignalNotificationServiceExtension */;
+		};
+/* End PBXFileSystemSynchronizedBuildFileExceptionSet section */
+
+/* Begin PBXFileSystemSynchronizedRootGroup section */
+		D5A3019E2D970BAC002A22E9 /* OneSignalNotificationServiceExtension */ = {
+			isa = PBXFileSystemSynchronizedRootGroup;
+			exceptions = (
+				D5A301A52D970BAC002A22E9 /* Exceptions for "OneSignalNotificationServiceExtension" folder in "OneSignalNotificationServiceExtension" target */,
+			);
+			path = OneSignalNotificationServiceExtension;
+			sourceTree = "<group>";
+		};
+/* End PBXFileSystemSynchronizedRootGroup section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		504EC3011FED79650016851F /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				A084ECDBA7D38E1E42DFC39D /* Pods_App.framework in Frameworks */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		D5A3019A2D970BAC002A22E9 /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				7E144E961F6CA2C63512098E /* Pods_OneSignalNotificationServiceExtension.framework in Frameworks */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		27E2DDA53C4D2A4D1A88CE4A /* Frameworks */ = {
+			isa = PBXGroup;
+			children = (
+				AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */,
+				4DF9D76ED77CB578563C2573 /* Pods_OneSignalNotificationServiceExtension.framework */,
+			);
+			name = Frameworks;
+			sourceTree = "<group>";
+		};
+		504EC2FB1FED79650016851F = {
+			isa = PBXGroup;
+			children = (
+				504EC3061FED79650016851F /* App */,
+				D5A3019E2D970BAC002A22E9 /* OneSignalNotificationServiceExtension */,
+				504EC3051FED79650016851F /* Products */,
+				7F8756D8B27F46E3366F6CEA /* Pods */,
+				27E2DDA53C4D2A4D1A88CE4A /* Frameworks */,
+			);
+			sourceTree = "<group>";
+		};
+		504EC3051FED79650016851F /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				504EC3041FED79650016851F /* App.app */,
+				D5A3019D2D970BAC002A22E9 /* OneSignalNotificationServiceExtension.appex */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		504EC3061FED79650016851F /* App */ = {
+			isa = PBXGroup;
+			children = (
+				D5A301982D970B67002A22E9 /* App.entitlements */,
+				50379B222058CBB4000EE86E /* capacitor.config.json */,
+				504EC3071FED79650016851F /* AppDelegate.swift */,
+				504EC30B1FED79650016851F /* Main.storyboard */,
+				504EC30E1FED79650016851F /* Assets.xcassets */,
+				504EC3101FED79650016851F /* LaunchScreen.storyboard */,
+				504EC3131FED79650016851F /* Info.plist */,
+				2FAD9762203C412B000D30F8 /* config.xml */,
+				50B271D01FEDC1A000F3C39B /* public */,
+			);
+			path = App;
+			sourceTree = "<group>";
+		};
+		7F8756D8B27F46E3366F6CEA /* Pods */ = {
+			isa = PBXGroup;
+			children = (
+				FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */,
+				AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */,
+				37F7155EDCE8C061367E30A9 /* Pods-OneSignalNotificationServiceExtension.debug.xcconfig */,
+				6CB294319AEF8406BACB8AC1 /* Pods-OneSignalNotificationServiceExtension.release.xcconfig */,
+			);
+			name = Pods;
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		504EC3031FED79650016851F /* App */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */;
+			buildPhases = (
+				6634F4EFEBD30273BCE97C65 /* [CP] Check Pods Manifest.lock */,
+				504EC3001FED79650016851F /* Sources */,
+				504EC3011FED79650016851F /* Frameworks */,
+				504EC3021FED79650016851F /* Resources */,
+				9592DBEFFC6D2A0C8D5DEB22 /* [CP] Embed Pods Frameworks */,
+				D5A301A92D970BAC002A22E9 /* Embed Foundation Extensions */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+				D5A301A32D970BAC002A22E9 /* PBXTargetDependency */,
+			);
+			name = App;
+			productName = App;
+			productReference = 504EC3041FED79650016851F /* App.app */;
+			productType = "com.apple.product-type.application";
+		};
+		D5A3019C2D970BAC002A22E9 /* OneSignalNotificationServiceExtension */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = D5A301A62D970BAC002A22E9 /* Build configuration list for PBXNativeTarget "OneSignalNotificationServiceExtension" */;
+			buildPhases = (
+				D76E39AEACB5B9B2BDC681BF /* [CP] Check Pods Manifest.lock */,
+				D5A301992D970BAC002A22E9 /* Sources */,
+				D5A3019A2D970BAC002A22E9 /* Frameworks */,
+				D5A3019B2D970BAC002A22E9 /* Resources */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			fileSystemSynchronizedGroups = (
+				D5A3019E2D970BAC002A22E9 /* OneSignalNotificationServiceExtension */,
+			);
+			name = OneSignalNotificationServiceExtension;
+			productName = OneSignalNotificationServiceExtension;
+			productReference = D5A3019D2D970BAC002A22E9 /* OneSignalNotificationServiceExtension.appex */;
+			productType = "com.apple.product-type.app-extension";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		504EC2FC1FED79650016851F /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastSwiftUpdateCheck = 1620;
+				LastUpgradeCheck = 0920;
+				TargetAttributes = {
+					504EC3031FED79650016851F = {
+						CreatedOnToolsVersion = 9.2;
+						LastSwiftMigration = 1100;
+						ProvisioningStyle = Automatic;
+					};
+					D5A3019C2D970BAC002A22E9 = {
+						CreatedOnToolsVersion = 16.2;
+					};
+				};
+			};
+			buildConfigurationList = 504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */;
+			developmentRegion = en;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+				Base,
+			);
+			mainGroup = 504EC2FB1FED79650016851F;
+			preferredProjectObjectVersion = 77;
+			productRefGroup = 504EC3051FED79650016851F /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				504EC3031FED79650016851F /* App */,
+				D5A3019C2D970BAC002A22E9 /* OneSignalNotificationServiceExtension */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXResourcesBuildPhase section */
+		504EC3021FED79650016851F /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */,
+				50B271D11FEDC1A000F3C39B /* public in Resources */,
+				504EC30F1FED79650016851F /* Assets.xcassets in Resources */,
+				50379B232058CBB4000EE86E /* capacitor.config.json in Resources */,
+				504EC30D1FED79650016851F /* Main.storyboard in Resources */,
+				2FAD9763203C412B000D30F8 /* config.xml in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		D5A3019B2D970BAC002A22E9 /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXShellScriptBuildPhase section */
+		6634F4EFEBD30273BCE97C65 /* [CP] Check Pods Manifest.lock */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-App-checkManifestLockResult.txt",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			showEnvVarsInLog = 0;
+		};
+		9592DBEFFC6D2A0C8D5DEB22 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputFileListPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-App/Pods-App-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
+		D76E39AEACB5B9B2BDC681BF /* [CP] Check Pods Manifest.lock */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-OneSignalNotificationServiceExtension-checkManifestLockResult.txt",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			showEnvVarsInLog = 0;
+		};
+/* End PBXShellScriptBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		504EC3001FED79650016851F /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				504EC3081FED79650016851F /* AppDelegate.swift in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		D5A301992D970BAC002A22E9 /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin PBXTargetDependency section */
+		D5A301A32D970BAC002A22E9 /* PBXTargetDependency */ = {
+			isa = PBXTargetDependency;
+			target = D5A3019C2D970BAC002A22E9 /* OneSignalNotificationServiceExtension */;
+			targetProxy = D5A301A22D970BAC002A22E9 /* PBXContainerItemProxy */;
+		};
+/* End PBXTargetDependency section */
+
+/* Begin PBXVariantGroup section */
+		504EC30B1FED79650016851F /* Main.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				504EC30C1FED79650016851F /* Base */,
+			);
+			name = Main.storyboard;
+			sourceTree = "<group>";
+		};
+		504EC3101FED79650016851F /* LaunchScreen.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				504EC3111FED79650016851F /* Base */,
+			);
+			name = LaunchScreen.storyboard;
+			sourceTree = "<group>";
+		};
+/* End PBXVariantGroup section */
+
+/* Begin XCBuildConfiguration section */
+		504EC3141FED79650016851F /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				CODE_SIGN_IDENTITY = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				ENABLE_TESTABILITY = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_OPTIMIZATION_LEVEL = 0;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				MTL_ENABLE_DEBUG_INFO = YES;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = iphoneos;
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+			};
+			name = Debug;
+		};
+		504EC3151FED79650016851F /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				CODE_SIGN_IDENTITY = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				MTL_ENABLE_DEBUG_INFO = NO;
+				SDKROOT = iphoneos;
+				SWIFT_COMPILATION_MODE = wholemodule;
+				SWIFT_OPTIMIZATION_LEVEL = "-O";
+				VALIDATE_PRODUCT = YES;
+			};
+			name = Release;
+		};
+		504EC3171FED79650016851F /* Debug */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = GMCGQ8KK2P;
+				INFOPLIST_FILE = App/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.6;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				MARKETING_VERSION = 2.0;
+				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
+				PRODUCT_BUNDLE_IDENTIFIER = software.federspiel.fedeo;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Debug;
+		};
+		504EC3181FED79650016851F /* Release */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = GMCGQ8KK2P;
+				INFOPLIST_FILE = App/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.6;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				MARKETING_VERSION = 2.0;
+				PRODUCT_BUNDLE_IDENTIFIER = software.federspiel.fedeo;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Release;
+		};
+		D5A301A72D970BAC002A22E9 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 37F7155EDCE8C061367E30A9 /* Pods-OneSignalNotificationServiceExtension.debug.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_GENERATE_SWIFT_ASSET_SYMBOL_EXTENSIONS = YES;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++20";
+				CLANG_ENABLE_OBJC_WEAK = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;
+				CODE_SIGN_ENTITLEMENTS = OneSignalNotificationServiceExtension/OneSignalNotificationServiceExtension.entitlements;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = GMCGQ8KK2P;
+				ENABLE_USER_SCRIPT_SANDBOXING = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu17;
+				GENERATE_INFOPLIST_FILE = YES;
+				INFOPLIST_FILE = OneSignalNotificationServiceExtension/Info.plist;
+				INFOPLIST_KEY_CFBundleDisplayName = OneSignalNotificationServiceExtension;
+				INFOPLIST_KEY_NSHumanReadableCopyright = "";
+				IPHONEOS_DEPLOYMENT_TARGET = 15.6;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+					"@executable_path/../../Frameworks",
+				);
+				LOCALIZATION_PREFERS_STRING_CATALOGS = YES;
+				MARKETING_VERSION = 1.0;
+				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
+				MTL_FAST_MATH = YES;
+				PRODUCT_BUNDLE_IDENTIFIER = software.federspiel.fedeo.OneSignalNotificationServiceExtension;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SKIP_INSTALL = YES;
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "DEBUG $(inherited)";
+				SWIFT_EMIT_LOC_STRINGS = YES;
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Debug;
+		};
+		D5A301A82D970BAC002A22E9 /* Release */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 6CB294319AEF8406BACB8AC1 /* Pods-OneSignalNotificationServiceExtension.release.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_GENERATE_SWIFT_ASSET_SYMBOL_EXTENSIONS = YES;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++20";
+				CLANG_ENABLE_OBJC_WEAK = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;
+				CODE_SIGN_ENTITLEMENTS = OneSignalNotificationServiceExtension/OneSignalNotificationServiceExtension.entitlements;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = GMCGQ8KK2P;
+				ENABLE_USER_SCRIPT_SANDBOXING = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu17;
+				GENERATE_INFOPLIST_FILE = YES;
+				INFOPLIST_FILE = OneSignalNotificationServiceExtension/Info.plist;
+				INFOPLIST_KEY_CFBundleDisplayName = OneSignalNotificationServiceExtension;
+				INFOPLIST_KEY_NSHumanReadableCopyright = "";
+				IPHONEOS_DEPLOYMENT_TARGET = 15.6;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+					"@executable_path/../../Frameworks",
+				);
+				LOCALIZATION_PREFERS_STRING_CATALOGS = YES;
+				MARKETING_VERSION = 1.0;
+				MTL_FAST_MATH = YES;
+				PRODUCT_BUNDLE_IDENTIFIER = software.federspiel.fedeo.OneSignalNotificationServiceExtension;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SKIP_INSTALL = YES;
+				SWIFT_EMIT_LOC_STRINGS = YES;
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				504EC3141FED79650016851F /* Debug */,
+				504EC3151FED79650016851F /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				504EC3171FED79650016851F /* Debug */,
+				504EC3181FED79650016851F /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		D5A301A62D970BAC002A22E9 /* Build configuration list for PBXNativeTarget "OneSignalNotificationServiceExtension" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				D5A301A72D970BAC002A22E9 /* Debug */,
+				D5A301A82D970BAC002A22E9 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+	};
+	rootObject = 504EC2FC1FED79650016851F /* Project object */;
+}
diff --git a/frontend/ios/App/App.xcworkspace/contents.xcworkspacedata b/frontend/ios/App/App.xcworkspace/contents.xcworkspacedata
new file mode 100644
index 0000000..b301e82
--- /dev/null
+++ b/frontend/ios/App/App.xcworkspace/contents.xcworkspacedata
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Workspace
+   version = "1.0">
+   <FileRef
+      location = "group:App.xcodeproj">
+   </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
+</Workspace>
diff --git a/frontend/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/frontend/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
new file mode 100644
index 0000000..18d9810
--- /dev/null
+++ b/frontend/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>
diff --git a/frontend/ios/App/App/App.entitlements b/frontend/ios/App/App/App.entitlements
new file mode 100644
index 0000000..b3e03fe
--- /dev/null
+++ b/frontend/ios/App/App/App.entitlements
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>aps-environment</key>
+	<string>development</string>
+	<key>com.apple.security.application-groups</key>
+	<array>
+		<string>group.software.federspiel.fedeo.onesignal</string>
+	</array>
+</dict>
+</plist>
diff --git a/frontend/ios/App/App/AppDelegate.swift b/frontend/ios/App/App/AppDelegate.swift
new file mode 100644
index 0000000..c3cd83b
--- /dev/null
+++ b/frontend/ios/App/App/AppDelegate.swift
@@ -0,0 +1,49 @@
+import UIKit
+import Capacitor
+
+@UIApplicationMain
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+    var window: UIWindow?
+
+    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+        // Override point for customization after application launch.
+        return true
+    }
+
+    func applicationWillResignActive(_ application: UIApplication) {
+        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
+        // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
+    }
+
+    func applicationDidEnterBackground(_ application: UIApplication) {
+        // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
+        // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
+    }
+
+    func applicationWillEnterForeground(_ application: UIApplication) {
+        // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
+    }
+
+    func applicationDidBecomeActive(_ application: UIApplication) {
+        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
+    }
+
+    func applicationWillTerminate(_ application: UIApplication) {
+        // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
+    }
+
+    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
+        // Called when the app was launched with a url. Feel free to add additional processing here,
+        // but if you want the App API to support tracking app url opens, make sure to keep this call
+        return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
+    }
+
+    func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+        // Called when the app was launched with an activity, including Universal Links.
+        // Feel free to add additional processing here, but if you want the App API to support
+        // tracking app url opens, make sure to keep this call
+        return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
+    }
+
+}
diff --git a/frontend/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png b/frontend/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png
new file mode 100644
index 0000000..10bff7e
Binary files /dev/null and b/frontend/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png differ
diff --git a/frontend/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json b/frontend/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
new file mode 100644
index 0000000..b1a8483
--- /dev/null
+++ b/frontend/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -0,0 +1,14 @@
+{
+  "images": [
+    {
+      "idiom": "universal",
+      "size": "1024x1024",
+      "filename": "AppIcon-512@2x.png",
+      "platform": "ios"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}
\ No newline at end of file
diff --git a/frontend/ios/App/App/Assets.xcassets/Contents.json b/frontend/ios/App/App/Assets.xcassets/Contents.json
new file mode 100644
index 0000000..da4a164
--- /dev/null
+++ b/frontend/ios/App/App/Assets.xcassets/Contents.json
@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json
new file mode 100644
index 0000000..84a416d
--- /dev/null
+++ b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json
@@ -0,0 +1,56 @@
+{
+  "images": [
+    {
+      "idiom": "universal",
+      "filename": "Default@1x~universal~anyany.png",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "Default@2x~universal~anyany.png",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "Default@3x~universal~anyany.png",
+      "scale": "3x"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "scale": "1x",
+      "filename": "Default@1x~universal~anyany-dark.png"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "scale": "2x",
+      "filename": "Default@2x~universal~anyany-dark.png"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "scale": "3x",
+      "filename": "Default@3x~universal~anyany-dark.png"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "xcode"
+  }
+}
\ No newline at end of file
diff --git a/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@1x~universal~anyany-dark.png b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@1x~universal~anyany-dark.png
new file mode 100644
index 0000000..40c4f81
Binary files /dev/null and b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@1x~universal~anyany-dark.png differ
diff --git a/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@1x~universal~anyany.png b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@1x~universal~anyany.png
new file mode 100644
index 0000000..92401d9
Binary files /dev/null and b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@1x~universal~anyany.png differ
diff --git a/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@2x~universal~anyany-dark.png b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@2x~universal~anyany-dark.png
new file mode 100644
index 0000000..40c4f81
Binary files /dev/null and b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@2x~universal~anyany-dark.png differ
diff --git a/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@2x~universal~anyany.png b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@2x~universal~anyany.png
new file mode 100644
index 0000000..92401d9
Binary files /dev/null and b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@2x~universal~anyany.png differ
diff --git a/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@3x~universal~anyany-dark.png b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@3x~universal~anyany-dark.png
new file mode 100644
index 0000000..40c4f81
Binary files /dev/null and b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@3x~universal~anyany-dark.png differ
diff --git a/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@3x~universal~anyany.png b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@3x~universal~anyany.png
new file mode 100644
index 0000000..92401d9
Binary files /dev/null and b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/Default@3x~universal~anyany.png differ
diff --git a/frontend/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png
new file mode 100644
index 0000000..33ea6c9
Binary files /dev/null and b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png differ
diff --git a/frontend/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png
new file mode 100644
index 0000000..33ea6c9
Binary files /dev/null and b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png differ
diff --git a/frontend/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png
new file mode 100644
index 0000000..33ea6c9
Binary files /dev/null and b/frontend/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png differ
diff --git a/frontend/ios/App/App/Base.lproj/LaunchScreen.storyboard b/frontend/ios/App/App/Base.lproj/LaunchScreen.storyboard
new file mode 100644
index 0000000..e7ae5d7
--- /dev/null
+++ b/frontend/ios/App/App/Base.lproj/LaunchScreen.storyboard
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17132" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17105"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <imageView key="view" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Splash" id="snD-IY-ifK">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                    </imageView>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="53" y="375"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="Splash" width="1366" height="1366"/>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </resources>
+</document>
diff --git a/frontend/ios/App/App/Base.lproj/Main.storyboard b/frontend/ios/App/App/Base.lproj/Main.storyboard
new file mode 100644
index 0000000..b44df7b
--- /dev/null
+++ b/frontend/ios/App/App/Base.lproj/Main.storyboard
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14111" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
+    </dependencies>
+    <scenes>
+        <!--Bridge View Controller-->
+        <scene sceneID="tne-QT-ifu">
+            <objects>
+                <viewController id="BYZ-38-t0r" customClass="CAPBridgeViewController" customModule="Capacitor" sceneMemberID="viewController"/>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
+            </objects>
+        </scene>
+    </scenes>
+</document>
diff --git a/frontend/ios/App/App/Info.plist b/frontend/ios/App/App/Info.plist
new file mode 100644
index 0000000..ee6faae
--- /dev/null
+++ b/frontend/ios/App/App/Info.plist
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>de</string>
+	<key>CFBundleDisplayName</key>
+	<string>FEDEO</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>$(MARKETING_VERSION)</string>
+	<key>CFBundleURLTypes</key>
+	<array>
+		<dict>
+			<key>CFBundleURLSchemes</key>
+			<array>
+				<string>fedeo</string>
+			</array>
+		</dict>
+	</array>
+	<key>CFBundleVersion</key>
+	<string>$(CURRENT_PROJECT_VERSION)</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>NSLocationAlwaysUsageDescription</key>
+	<string>One Signal Notifications</string>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string>One Signal Notifications</string>
+	<key>NSSupportsLiveActivities</key>
+	<true/>
+	<key>NSSupportsLiveActivitiesFrequentUpdates</key>
+	<true/>
+	<key>UIBackgroundModes</key>
+	<array>
+		<string>remote-notification</string>
+	</array>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIMainStoryboardFile</key>
+	<string>Main</string>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<true/>
+	<key>NSAppTransportSecurity</key>
+    <dict>
+        <key>NSAllowsArbitraryLoads</key>
+        <true/>
+    </dict>
+</dict>
+</plist>
diff --git a/frontend/ios/App/OneSignalNotificationServiceExtension/Info.plist b/frontend/ios/App/OneSignalNotificationServiceExtension/Info.plist
new file mode 100644
index 0000000..57421eb
--- /dev/null
+++ b/frontend/ios/App/OneSignalNotificationServiceExtension/Info.plist
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSExtension</key>
+	<dict>
+		<key>NSExtensionPointIdentifier</key>
+		<string>com.apple.usernotifications.service</string>
+		<key>NSExtensionPrincipalClass</key>
+		<string>$(PRODUCT_MODULE_NAME).NotificationService</string>
+	</dict>
+</dict>
+</plist>
diff --git a/frontend/ios/App/OneSignalNotificationServiceExtension/NotificationService.swift b/frontend/ios/App/OneSignalNotificationServiceExtension/NotificationService.swift
new file mode 100644
index 0000000..14c7ff4
--- /dev/null
+++ b/frontend/ios/App/OneSignalNotificationServiceExtension/NotificationService.swift
@@ -0,0 +1,35 @@
+import UserNotifications
+
+import OneSignalExtension
+
+class NotificationService: UNNotificationServiceExtension {
+    
+    var contentHandler: ((UNNotificationContent) -> Void)?
+    var receivedRequest: UNNotificationRequest!
+    var bestAttemptContent: UNMutableNotificationContent?
+    
+    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
+        self.receivedRequest = request
+        self.contentHandler = contentHandler
+        self.bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
+        
+        if let bestAttemptContent = bestAttemptContent {
+            /* DEBUGGING: Uncomment the 2 lines below to check this extension is executing
+                          Note, this extension only runs when mutable-content is set
+                          Setting an attachment or action buttons automatically adds this */
+            // print("Running NotificationServiceExtension")
+            // bestAttemptContent.body = "[Modified] " + bestAttemptContent.body
+            
+            OneSignalExtension.didReceiveNotificationExtensionRequest(self.receivedRequest, with: bestAttemptContent, withContentHandler: self.contentHandler)
+        }
+    }
+    
+    override func serviceExtensionTimeWillExpire() {
+        // Called just before the extension will be terminated by the system.
+        // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
+        if let contentHandler = contentHandler, let bestAttemptContent =  bestAttemptContent {
+            OneSignalExtension.serviceExtensionTimeWillExpireRequest(self.receivedRequest, with: self.bestAttemptContent)
+            contentHandler(bestAttemptContent)
+        }
+    }  
+}
\ No newline at end of file
diff --git a/frontend/ios/App/OneSignalNotificationServiceExtension/OneSignalNotificationServiceExtension.entitlements b/frontend/ios/App/OneSignalNotificationServiceExtension/OneSignalNotificationServiceExtension.entitlements
new file mode 100644
index 0000000..4971b49
--- /dev/null
+++ b/frontend/ios/App/OneSignalNotificationServiceExtension/OneSignalNotificationServiceExtension.entitlements
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>com.apple.security.application-groups</key>
+	<array>
+		<string>group.software.federspiel.fedeo.onesignal</string>
+	</array>
+</dict>
+</plist>
diff --git a/frontend/ios/App/Podfile b/frontend/ios/App/Podfile
new file mode 100644
index 0000000..e0e2f1d
--- /dev/null
+++ b/frontend/ios/App/Podfile
@@ -0,0 +1,41 @@
+require_relative '../../node_modules/@capacitor/ios/scripts/pods_helpers'
+
+platform :ios, '14.0'
+use_frameworks!
+
+# workaround to avoid Xcode caching of Pods that requires
+# Product -> Clean Build Folder after new Cordova plugins installed
+# Requires CocoaPods 1.6 or newer
+install! 'cocoapods', :disable_input_output_paths => true
+
+def capacitor_pods
+  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
+  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
+  pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
+  pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
+  pod 'CapacitorNetwork', :path => '../../node_modules/@capacitor/network'
+  pod 'CapacitorPreferences', :path => '../../node_modules/@capacitor/preferences'
+  pod 'CapacitorPluginSafeArea', :path => '../../node_modules/capacitor-plugin-safe-area'
+  pod 'CordovaPluginsStatic', :path => '../capacitor-cordova-ios-plugins'
+end
+
+target 'App' do
+  capacitor_pods
+  # Add your Pods here
+end
+
+post_install do |installer|
+  installer.pods_project.targets.each do |target|
+    target.build_configurations.each do |config|
+      # iOS Deployment Target erzwingen
+      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '14.0'
+
+      # Alle Warnungen auf inherited setzen, falls Pods Dinge überschreiben
+      config.build_settings['CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER'] = '$(inherited)'
+    end
+  end
+end
+
+target 'OneSignalNotificationServiceExtension' do
+  pod 'OneSignalXCFramework', '>= 5.0', '< 6.0'
+end
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
new file mode 100644
index 0000000..4993db6
--- /dev/null
+++ b/frontend/layouts/default.vue
@@ -0,0 +1,321 @@
+<script setup>
+
+
+import MainNav from "~/components/MainNav.vue";
+import dayjs from "dayjs";
+import {useCapacitor} from "../composables/useCapacitor.js";
+import GlobalMessages from "~/components/GlobalMessages.vue";
+import TenantDropdown from "~/components/TenantDropdown.vue";
+import LabelPrinterButton from "~/components/LabelPrinterButton.vue";
+
+const dataStore = useDataStore()
+const colorMode = useColorMode()
+const { isHelpSlideoverOpen } = useDashboard()
+const router = useRouter()
+const route = useRoute()
+
+const auth = useAuthStore()
+const labelPrinter = useLabelPrinterStore()
+
+
+const month = dayjs().format("MM")
+
+const actions = [
+  {
+    id: 'new-customer',
+    label: 'Kunde hinzufügen',
+    icon: 'i-heroicons-user-group',
+    to: "/customers/create" ,
+  },
+  {
+    id: 'new-vendor',
+    label: 'Lieferant hinzufügen',
+    icon: 'i-heroicons-truck',
+    to: "/vendors/create" ,
+  },
+  {
+    id: 'new-contact',
+    label: 'Ansprechpartner hinzufügen',
+    icon: 'i-heroicons-user-group',
+    to: "/contacts/create" ,
+  },
+  {
+    id: 'new-task',
+    label: 'Aufgabe hinzufügen',
+    icon: 'i-heroicons-rectangle-stack',
+    to: "/tasks/create" ,
+  },
+  {
+    id: 'new-plant',
+    label: 'Objekt hinzufügen',
+    icon: 'i-heroicons-clipboard-document',
+    to: "/plants/create" ,
+  },
+  {
+    id: 'new-product',
+    label: 'Artikel hinzufügen',
+    icon: 'i-heroicons-puzzle-piece',
+    to: "/products/create" ,
+  },
+  {
+    id: 'new-project',
+    label: 'Projekt hinzufügen',
+    icon: 'i-heroicons-clipboard-document-check',
+    to: "/projects/create" ,
+  }
+]
+
+
+const groups = computed(() => [
+    {
+      key: 'actions',
+      commands: actions
+    },{
+      key: "customers",
+      label: "Kunden",
+      commands: dataStore.customers.map(item => { return {id: item.id, label: item.name, to: `/customers/show/${item.id}`}})
+    },{
+      key: "vendors",
+      label: "Lieferanten",
+      commands: dataStore.vendors.map(item => { return {id: item.id, label: item.name, to: `/vendors/show/${item.id}`}})
+    },{
+      key: "contacts",
+      label: "Ansprechpartner",
+      commands: dataStore.contacts.map(item => { return {id: item.id, label: item.fullName, to: `/contacts/show/${item.id}`}})
+    },{
+      key: "products",
+      label: "Artikel",
+      commands: dataStore.products.map(item => { return {id: item.id, label: item.name, to: `/products/show/${item.id}`}})
+    },{
+      key: "tasks",
+      label: "Aufgaben",
+      commands: dataStore.tasks.map(item => { return {id: item.id, label: item.name, to: `/tasks/show/${item.id}`}})
+    },{
+      key: "plants",
+      label: "Objekte",
+      commands: dataStore.plants.map(item => { return {id: item.id, label: item.name, to: `/plants/show/${item.id}`}})
+    },{
+      key: "projects",
+      label: "Projekte",
+      commands: dataStore.projects.map(item => { return {id: item.id, label: item.name, to: `/projects/show/${item.id}`}})
+    }
+    ].filter(Boolean))
+const footerLinks = [
+    /*{
+  label: 'Invite people',
+  icon: 'i-heroicons-plus',
+  to: '/settings/members'
+}, */{
+  label: 'Hilfe & Info',
+  icon: 'i-heroicons-question-mark-circle',
+  click: () => isHelpSlideoverOpen.value = true
+}]
+
+</script>
+
+<template>
+  <div v-if="!auth.loading">
+    <div v-if="auth.activeTenantData?.locked === 'maintenance_tenant'">
+      <UContainer class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+        <UCard class="max-w-lg text-center p-10">
+          <UColorModeImage
+              light="/Logo_Hell_Weihnachten.png"
+              dark="/Logo_Dunkel_Weihnachten.png"
+              class=" mx-auto my-10"
+              v-if="month === '12'"
+          />
+          <UColorModeImage
+              light="/Logo.png"
+              dark="/Logo_Dark.png"
+              class="mx-auto my-10"
+              v-else
+          />
+          <div class="flex justify-center mb-6">
+            <UIcon name="i-heroicons-exclamation-triangle-solid" class="w-16 h-16 text-yellow-500" />
+          </div>
+
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+            Wartungsarbeiten
+          </h1>
+          <p class="text-gray-600 dark:text-gray-300 mb-8">
+            Dieser FEDEO Mandant wird derzeit gewartet. Bitte versuche es in einigen Minuten erneut oder verwende einen anderen Mandanten.
+          </p>
+          <div class="mx-auto text-left flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
+            {{tenant.name}}
+            <UButton
+                :disabled="tenant.locked"
+                @click="auth.switchTenant(tenant.id)"
+            >Wählen</UButton>
+          </div>
+
+
+        </UCard>
+      </UContainer>
+    </div>
+    <div v-else-if="auth.activeTenantData?.locked === 'maintenance'">
+      <UContainer class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+        <UCard class="max-w-lg text-center p-10">
+          <UColorModeImage
+              light="/Logo_Hell_Weihnachten.png"
+              dark="/Logo_Dunkel_Weihnachten.png"
+              class=" mx-auto my-10"
+              v-if="month === '12'"
+          />
+          <UColorModeImage
+              light="/Logo.png"
+              dark="/Logo_Dark.png"
+              class="mx-auto my-10"
+              v-else
+          />
+          <div class="flex justify-center mb-6">
+            <UIcon name="i-heroicons-exclamation-triangle-solid" class="w-16 h-16 text-yellow-500" />
+          </div>
+
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+            Wartungsarbeiten
+          </h1>
+          <p class="text-gray-600 dark:text-gray-300 mb-8">
+            FEDEO wird derzeit gewartet. Bitte versuche es in einigen Minuten erneut.
+          </p>
+
+
+        </UCard>
+      </UContainer>
+    </div>
+    <div v-else-if="auth.activeTenantData?.locked === 'no_subscription'">
+      <UContainer class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+        <UCard class="max-w-lg text-center p-10">
+          <UColorModeImage
+              light="/Logo_Hell_Weihnachten.png"
+              dark="/Logo_Dunkel_Weihnachten.png"
+              class=" mx-auto my-10"
+              v-if="month === '12'"
+          />
+          <UColorModeImage
+              light="/Logo.png"
+              dark="/Logo_Dark.png"
+              class="mx-auto my-10"
+              v-else
+          />
+          <div class="flex justify-center mb-6">
+            <UIcon name="i-heroicons-credit-card" class="w-16 h-16 text-red-600" />
+          </div>
+
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+            Kein Aktives Abonnement für diesen Mandant.
+          </h1>
+          <p class="text-gray-600 dark:text-gray-300 mb-8">
+            Bitte wenden Sie sich an den FEDEO Support um ein Abonnement zu erhalten oder verwenden Sie einen anderen Mandanten.
+          </p>
+          <div class="mx-auto text-left flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
+            {{tenant.name}}
+            <UButton
+                :disabled="tenant.locked"
+                @click="auth.switchTenant(tenant.id)"
+            >Wählen</UButton>
+          </div>
+
+
+        </UCard>
+      </UContainer>
+    </div>
+    <UDashboardLayout class="safearea" v-else  >
+      <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
+        <UDashboardNavbar style="margin-top: env(safe-area-inset-top, 10px) !important;" :class="['!border-transparent']" :ui="{ left: 'flex-1' }">
+          <template #left>
+            <TenantDropdown class="w-full" />
+          </template>
+        </UDashboardNavbar>
+
+        <UDashboardSidebar id="sidebar">
+<!--          <template #header>
+            <UDashboardSearchButton label="Suche..."/>
+          </template>-->
+
+<!--
+                  <GlobalMessages/>
+-->
+
+          <MainNav/>
+
+          <div class="flex-1" />
+
+
+          <template #footer>
+            <div class="flex flex-col gap-3 w-full">
+
+              <LabelPrinterButton/>
+
+              <!-- Footer Links -->
+              <UDashboardSidebarLinks :links="footerLinks" />
+
+              <UDivider class="sticky bottom-0" />
+              <UserDropdown style="margin-bottom: env(safe-area-inset-bottom, 10px) !important;"/>
+            </div>
+          </template>
+        </UDashboardSidebar>
+      </UDashboardPanel>
+
+      <UDashboardPage>
+        <UDashboardPanel grow>
+          <slot />
+        </UDashboardPanel>
+      </UDashboardPage>
+
+
+
+      <HelpSlideover/>
+
+      <!--<NotificationsSlideover />
+
+      <ClientOnly>
+        <LazyUDashboardSearch :groups="groups" hide-color-mode/>
+      </ClientOnly>-->
+    </UDashboardLayout>
+  </div>
+
+  <div
+      v-else
+      class="flex flex-col"
+  >
+    <UColorModeImage
+        light="/Logo_Hell_Weihnachten.png"
+        dark="/Logo_Dunkel_Weihnachten.png"
+        class="w-1/3 mx-auto my-10"
+        v-if="month === '12'"
+    />
+    <UColorModeImage
+      light="/Logo.png"
+      dark="/Logo_Dark.png"
+      class="w-1/3 mx-auto my-10"
+      v-else
+    />
+
+    <div v-if="!auth.activeTenant" class="w-1/2 mx-auto text-center">
+        <!-- Tenant Selection      -->
+        <h3 class="text-center font-bold text-2xl mb-5">Kein Aktiver Mandant. Bitte wählen Sie ein Mandant.</h3>
+        <div class="mx-auto w-1/2 flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
+          <span class="text-left">{{tenant.name}}</span>
+          <UButton
+            @click="auth.switchTenant(tenant.id)"
+          >Wählen</UButton>
+        </div>
+        <UButton
+            variant="outline"
+            color="rose"
+          @click="auth.logout()"
+        >Abmelden</UButton>
+
+
+    </div>
+    <div v-else>
+      <UProgress animation="carousel" class="w-3/4 mx-auto mt-10" />
+    </div>
+
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/layouts/mobile.vue b/frontend/layouts/mobile.vue
new file mode 100644
index 0000000..cb232c1
--- /dev/null
+++ b/frontend/layouts/mobile.vue
@@ -0,0 +1,275 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue"
+
+import dayjs from "dayjs";
+import {useAuthStore} from "~/stores/auth.js";
+
+const route = useRoute()
+const auth = useAuthStore()
+
+const month = dayjs().format("MM")
+
+
+const hideNav = ref(false)
+let lastScrollY = 0
+let scrollElement = null
+let returnTimer = null
+
+const SHOW_DELAY = 1000 // 1 Sekunden
+
+function showNavAfterDelay() {
+  clearTimeout(returnTimer)
+  returnTimer = setTimeout(() => {
+    hideNav.value = false
+  }, SHOW_DELAY)
+}
+
+const handleScroll = () => {
+  const current = scrollElement.scrollTop
+
+  // Runter scrollen -> verstecken
+  if (current > lastScrollY + 10) {
+    hideNav.value = true
+    showNavAfterDelay()
+  }
+
+  // Hoch scrollen -> sofort zeigen
+  if (current < lastScrollY - 10) {
+    hideNav.value = false
+    clearTimeout(returnTimer)
+  }
+
+  lastScrollY = current
+}
+
+onMounted(() => {
+  scrollElement = document.querySelector('.mobile-scroll-area')
+  if (scrollElement) {
+    scrollElement.addEventListener('scroll', handleScroll)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (scrollElement) scrollElement.removeEventListener('scroll', handleScroll)
+  clearTimeout(returnTimer)
+})
+
+
+</script>
+
+<template>
+  <div v-if="!auth.loading">
+    <div v-if="auth.activeTenantData?.locked === 'maintenance_tenant'">
+      <UContainer class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+        <UCard class="max-w-lg text-center p-10">
+          <UColorModeImage
+              light="/Logo_Hell_Weihnachten.png"
+              dark="/Logo_Dunkel_Weihnachten.png"
+              class=" mx-auto my-10"
+              v-if="month === '12'"
+          />
+          <UColorModeImage
+              light="/Logo.png"
+              dark="/Logo_Dark.png"
+              class="mx-auto my-10"
+              v-else
+          />
+          <div class="flex justify-center mb-6">
+            <UIcon name="i-heroicons-exclamation-triangle-solid" class="w-16 h-16 text-yellow-500" />
+          </div>
+
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+            Wartungsarbeiten
+          </h1>
+          <p class="text-gray-600 dark:text-gray-300 mb-8">
+            Dieser FEDEO Mandant wird derzeit gewartet. Bitte versuche es in einigen Minuten erneut oder verwende einen anderen Mandanten.
+          </p>
+          <div class="mx-auto text-left flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
+            {{tenant.name}}
+            <UButton
+                :disabled="tenant.locked"
+                @click="auth.switchTenant(tenant.id)"
+            >Wählen</UButton>
+          </div>
+
+
+        </UCard>
+      </UContainer>
+    </div>
+    <div v-else-if="auth.activeTenantData?.locked === 'maintenance'">
+      <UContainer class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+        <UCard class="max-w-lg text-center p-10">
+          <UColorModeImage
+              light="/Logo_Hell_Weihnachten.png"
+              dark="/Logo_Dunkel_Weihnachten.png"
+              class=" mx-auto my-10"
+              v-if="month === '12'"
+          />
+          <UColorModeImage
+              light="/Logo.png"
+              dark="/Logo_Dark.png"
+              class="mx-auto my-10"
+              v-else
+          />
+          <div class="flex justify-center mb-6">
+            <UIcon name="i-heroicons-exclamation-triangle-solid" class="w-16 h-16 text-yellow-500" />
+          </div>
+
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+            Wartungsarbeiten
+          </h1>
+          <p class="text-gray-600 dark:text-gray-300 mb-8">
+            FEDEO wird derzeit gewartet. Bitte versuche es in einigen Minuten erneut.
+          </p>
+
+
+        </UCard>
+      </UContainer>
+    </div>
+    <div v-else-if="auth.activeTenantData?.locked === 'no_subscription'">
+      <UContainer class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+        <UCard class="max-w-lg text-center p-10">
+          <UColorModeImage
+              light="/Logo_Hell_Weihnachten.png"
+              dark="/Logo_Dunkel_Weihnachten.png"
+              class=" mx-auto my-10"
+              v-if="month === '12'"
+          />
+          <UColorModeImage
+              light="/Logo.png"
+              dark="/Logo_Dark.png"
+              class="mx-auto my-10"
+              v-else
+          />
+          <div class="flex justify-center mb-6">
+            <UIcon name="i-heroicons-credit-card" class="w-16 h-16 text-red-600" />
+          </div>
+
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+            Kein Aktives Abonnement für diesen Mandant.
+          </h1>
+          <p class="text-gray-600 dark:text-gray-300 mb-8">
+            Bitte wenden Sie sich an den FEDEO Support um ein Abonnement zu erhalten oder verwenden Sie einen anderen Mandanten.
+          </p>
+          <div class="mx-auto text-left flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
+            {{tenant.name}}
+            <UButton
+                :disabled="tenant.locked"
+                @click="auth.switchTenant(tenant.id)"
+            >Wählen</UButton>
+          </div>
+
+
+        </UCard>
+      </UContainer>
+    </div>
+    <UDashboardLayout class="safearea" v-else>
+
+      <UDashboardPage style="height: 90vh">
+        <UDashboardPanel grow>
+          <slot />
+        </UDashboardPanel>
+      </UDashboardPage>
+
+      <!-- Modernisierte Mobile Navigation -->
+      <nav
+          :class="[
+    'fixed bottom-0 left-0 right-0 z-50',   // ← bottom-0 hinzugefügt!
+    'h-[70px] bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl',
+    'border-t border-gray-200 dark:border-gray-800',
+    'flex justify-around items-center pt-2 pb-[max(env(safe-area-inset-bottom),0.5rem)]',
+    'transition-transform duration-300 ease-in-out',
+    hideNav ? 'translate-y-full' : 'translate-y-0'
+  ]"
+      >
+        <UButton
+            icon="i-heroicons-home"
+            to="/mobile/"
+            variant="ghost"
+            :color="route.fullPath === '/mobile' ? 'primary' : 'gray'"
+            class="nav-btn"
+        />
+
+        <UButton
+            icon="i-heroicons-clipboard-document-check"
+            to="/standardEntity/tasks"
+            variant="ghost"
+            :color="route.fullPath === '/standardEntity/tasks' ? 'primary' : 'gray'"
+            class="nav-btn"
+        />
+
+        <UButton
+            icon="i-heroicons-rectangle-stack"
+            to="/standardEntity/projects"
+            variant="ghost"
+            :color="route.fullPath === '/standardEntity/projects' ? 'primary' : 'gray'"
+            class="nav-btn"
+        />
+
+        <UButton
+            icon="i-heroicons-bars-4"
+            to="/mobile/menu"
+            variant="ghost"
+            :color="route.fullPath === '/mobile/menu' ? 'primary' : 'gray'"
+            class="nav-btn"
+        />
+      </nav>
+
+
+    </UDashboardLayout>
+  </div>
+
+  <div
+      v-else
+      class="flex flex-col"
+  >
+    <UColorModeImage
+        light="/Logo_Hell_Weihnachten.png"
+        dark="/Logo_Dunkel_Weihnachten.png"
+        class="w-1/3 mx-auto my-10"
+        v-if="month === '12'"
+    />
+    <UColorModeImage
+      light="/Logo.png"
+      dark="/Logo_Dark.png"
+      class="w-1/3 mx-auto my-10"
+      v-else
+    />
+    <div v-if="!auth.activeTenant && auth.tenants?.length > 0 " class="w-full mx-auto text-center">
+      <!-- Tenant Selection      -->
+      <h3 class="text-center font-bold text-2xl mb-5">Kein Aktiver Mandant. <br>Bitte wählen Sie ein Mandant.</h3>
+      <div class="mx-auto w-5/6 flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
+        <span class="text-left">{{tenant.name}}</span>
+        <UButton
+            @click="auth.switchTenant(tenant.id)"
+        >Wählen</UButton>
+      </div>
+      <UButton
+          variant="outline"
+          color="rose"
+          @click="auth.logout()"
+      >Abmelden</UButton>
+
+
+    </div>
+    <div v-else>
+      <UProgress animation="carousel" class="w-3/4 mx-auto mt-10" />Test
+      {{auth.tenants}}
+
+      <UButton
+          variant="outline"
+          color="rose"
+          @click="auth.logout()"
+      >Abmelden</UButton>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+.nav-btn {
+  @apply w-12 h-12 flex justify-center items-center rounded-xl active:scale-95 transition;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/frontend/layouts/notLoggedIn.vue b/frontend/layouts/notLoggedIn.vue
new file mode 100644
index 0000000..0a7444f
--- /dev/null
+++ b/frontend/layouts/notLoggedIn.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+    <slot/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/middleware/auth.global.ts b/frontend/middleware/auth.global.ts
new file mode 100644
index 0000000..c03e09a
--- /dev/null
+++ b/frontend/middleware/auth.global.ts
@@ -0,0 +1,20 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+    const auth = useAuthStore()
+
+    console.log(auth)
+
+    if (auth.loading) return
+
+
+    // Wenn nicht eingeloggt → auf /login (außer er will schon dahin)
+    if (!auth.user && !["/login", "/password-reset"].includes(to.path)) {
+        return navigateTo("/login")
+    }
+
+    // Wenn eingeloggt → von /login auf /dashboard umleiten
+    if (auth.user && !auth.user?.must_change_password &&  to.path === "/login") {
+        return navigateTo("/")
+    } else if(auth.user && auth.user.must_change_password && to.path !== "/password-change") {
+        return navigateTo("/password-change")
+    }
+})
\ No newline at end of file
diff --git a/frontend/middleware/redirectToMobileIndex.ts b/frontend/middleware/redirectToMobileIndex.ts
new file mode 100644
index 0000000..e332a1b
--- /dev/null
+++ b/frontend/middleware/redirectToMobileIndex.ts
@@ -0,0 +1,9 @@
+export default defineNuxtRouteMiddleware(async (to, _from) => {
+    const router = useRouter()
+
+    console.log(useCapacitor().getIsNative())
+
+    if(useCapacitor().getIsNative() && _from.path !== '/mobile') {
+        return router.push('/mobile')
+    }
+})
diff --git a/frontend/numberRanges.json b/frontend/numberRanges.json
new file mode 100644
index 0000000..5f40bd0
--- /dev/null
+++ b/frontend/numberRanges.json
@@ -0,0 +1,42 @@
+{
+  "vendors": {
+    "prefix": "",
+    "suffix": "",
+    "nextNumber": 1000
+  },
+  "customers": {
+    "prefix": "",
+    "suffix": "",
+    "nextNumber": 1000
+  },
+  "products": {
+    "prefix": "AT-",
+    "suffix": "",
+    "nextNumber": 1000
+  },
+  "quotes": {
+    "prefix": "AN-",
+    "suffix": "",
+    "nextNumber": 1000
+  },
+  "confirmationOrders": {
+    "prefix": "AB-",
+    "suffix": "",
+    "nextNumber": 1000
+  },
+  "invoices": {
+    "prefix": "RE-",
+    "suffix": "",
+    "nextNumber": 1000
+  },
+  "spaces": {
+    "prefix": "LP-",
+    "suffix": "",
+    "nextNumber": 1000
+  },
+  "inventoryitems": {
+    "prefix": "IA-",
+    "suffix": "",
+    "nextNumber": 1000
+  }
+}
\ No newline at end of file
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
new file mode 100644
index 0000000..5e9547f
--- /dev/null
+++ b/frontend/nuxt.config.ts
@@ -0,0 +1,70 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+    devtools: {
+        enabled: false,
+        timeline: {
+            enabled: true
+        }
+    },
+
+    modules: ['@pinia/nuxt', '@nuxt/ui', '@nuxtjs/supabase', "nuxt-editorjs", '@nuxtjs/fontaine', 'nuxt-viewport', 'nuxt-tiptap-editor', '@nuxtjs/leaflet', '@vueuse/nuxt'],
+
+    ssr: false,
+
+    imports: {
+        dirs: ['stores']
+    },
+
+    extends: [
+        '@nuxt/ui-pro'
+    ],
+
+    components: [{
+        path: '~/components'
+    }],
+
+    build: {
+        transpile: ['@vuepic/vue-datepicker']
+    },
+
+
+    routeRules: {
+        '/printing': {ssr: false}
+
+    },
+
+    supabase: {
+        key: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InV3cHB2Y3hmbHJjc2lidXpzYmlsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDA5MzgxOTQsImV4cCI6MjAxNjUxNDE5NH0.CkxYSQH0uLfwx9GVUlO6AYMU2FMLAxGMrwEKvyPv7Oo",
+        url: "https://uwppvcxflrcsibuzsbil.supabase.co",
+        redirect: false
+    },
+
+    vite: {
+        optimizeDeps: {
+            include: ["@editorjs/editorjs", "dayjs"],
+        },
+    },
+
+    ui: {
+        icons: ['heroicons', 'mdi', 'simple-icons']
+    },
+
+    colorMode: {
+        preference: 'system'
+    },
+
+
+    tiptap: {
+        prefix: "Tiptap"
+    },
+
+    runtimeConfig: {
+
+        public: {
+            apiBase: '',
+            pdfLicense: ''
+        }
+    },
+
+    compatibilityDate: '2024-12-18'
+})
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..5ea1bbd
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,92 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev --host",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@capacitor/cli": "^7.0.0",
+    "@nuxtjs/leaflet": "^1.2.3",
+    "@nuxtjs/supabase": "^1.1.4",
+    "@vueuse/core": "^14.1.0",
+    "@vueuse/nuxt": "^14.1.0",
+    "nuxt": "^3.14.1592",
+    "nuxt-tiptap-editor": "^1.2.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.2.5"
+  },
+  "dependencies": {
+    "@capacitor/android": "^7.0.0",
+    "@capacitor/browser": "^7.0.2",
+    "@capacitor/core": "^7.0.0",
+    "@capacitor/device": "^7.0.0",
+    "@capacitor/ios": "^7.0.0",
+    "@capacitor/network": "^7.0.0",
+    "@capacitor/preferences": "^7.0.0",
+    "@fullcalendar/core": "^6.1.10",
+    "@fullcalendar/daygrid": "^6.1.10",
+    "@fullcalendar/interaction": "^6.1.10",
+    "@fullcalendar/list": "^6.1.10",
+    "@fullcalendar/resource": "^6.1.10",
+    "@fullcalendar/resource-timeline": "^6.1.10",
+    "@fullcalendar/timegrid": "^6.1.10",
+    "@fullcalendar/vue3": "^6.1.10",
+    "@iconify/json": "^2.2.171",
+    "@mmote/niimbluelib": "^0.0.1-alpha.29",
+    "@nuxt/ui-pro": "^1.6.0",
+    "@nuxtjs/fontaine": "^0.4.1",
+    "@nuxtjs/google-fonts": "^3.1.0",
+    "@nuxtjs/strapi": "^1.9.3",
+    "@pinia/nuxt": "^0.5.1",
+    "@popperjs/core": "^2.11.8",
+    "@sentry/browser": "^9.11.0",
+    "@sentry/integrations": "^7.114.0",
+    "@tiptap/extension-underline": "^2.1.15",
+    "@tiptap/pm": "^2.1.15",
+    "@tiptap/starter-kit": "^2.1.15",
+    "@tiptap/vue-3": "^2.1.15",
+    "@vicons/ionicons5": "^0.12.0",
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
+    "@vue-pdf-viewer/viewer": "^3.0.1",
+    "@vuepic/vue-datepicker": "^7.4.0",
+    "@zip.js/zip.js": "^2.7.32",
+    "array-sort": "^1.0.0",
+    "axios": "^1.6.7",
+    "base64-arraybuffer": "^1.0.2",
+    "buffer": "^6.0.3",
+    "capacitor-plugin-safe-area": "^4.0.0",
+    "chart.js": "^4.4.4",
+    "client-oauth2": "^4.3.3",
+    "date-fns": "^3.6.0",
+    "dayjs": "^1.11.10",
+    "fast-sort": "^3.4.1",
+    "handlebars": "^4.7.8",
+    "image-js": "^1.1.0",
+    "leaflet": "^1.9.4",
+    "license-checker": "^25.0.1",
+    "maplibre-gl": "^4.7.0",
+    "nuxt-editorjs": "^1.0.4",
+    "nuxt-viewport": "^2.0.6",
+    "onesignal-cordova-plugin": "^5.2.14",
+    "papaparse": "^5.4.1",
+    "pdf-lib": "^1.17.1",
+    "pinia": "^2.1.7",
+    "sass": "^1.69.7",
+    "socket.io-client": "^4.7.2",
+    "tailwindcss-safe-area-capacitor": "^0.5.1",
+    "uuid": "^11.0.3",
+    "uuidv4": "^6.2.13",
+    "v-calendar": "^3.1.2",
+    "vue-chartjs": "^5.3.1",
+    "vuedraggable": "^4.1.0",
+    "vuetify": "^3.4.0-beta.1",
+    "zebra-browser-print-wrapper": "^0.1.4",
+    "zod": "^3.25.76",
+    "zpl-renderer-js": "^2.0.2"
+  }
+}
diff --git a/frontend/pages/accounts/index.vue b/frontend/pages/accounts/index.vue
new file mode 100644
index 0000000..1593e1f
--- /dev/null
+++ b/frontend/pages/accounts/index.vue
@@ -0,0 +1,222 @@
+<script setup>
+
+import dayjs from "dayjs";
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  }
+})
+
+const tempStore = useTempStore()
+const router = useRouter()
+
+const items = ref([])
+const dataLoaded = ref(false)
+
+const statementallocations = ref([])
+const incominginvoices = ref([])
+
+const setupPage = async () => {
+  items.value = await useEntities("accounts").selectSpecial()
+
+  statementallocations.value = (await useEntities("statementallocations").select("*, bs_id(*)"))
+  incominginvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)"))
+
+  items.value = await Promise.all(items.value.map(async (i) => {
+    // let renderedAllocationsTemp = await renderedAllocations(i.id)
+    // let saldo = getSaldo(renderedAllocationsTemp)
+
+    return {
+      ...i,
+      // saldo: saldo,
+      // allocations: renderedAllocationsTemp.length,
+    }
+
+  }))
+  dataLoaded.value = true
+
+
+}
+
+const renderedAllocations = async (account) => {
+
+  let statementallocationslocal = statementallocations.value.filter(i => i.account === account)
+  let incominginvoiceslocal = incominginvoices.value.filter(i => i.accounts.find(x => x.account === account))
+
+  let tempstatementallocations = statementallocationslocal.map(i => {
+    return {
+      ...i,
+      type: "statementallocation",
+      date: i.bankstatement.date,
+      partner: i.bankstatement ? (i.bankstatement.debName ? i.bankstatement.debName : (i.bankstatement.credName ? i.bankstatement.credName : '')) : ''
+    }
+  })
+
+
+  let incominginvoicesallocations = []
+
+  incominginvoiceslocal.forEach(i => {
+
+    incominginvoicesallocations.push(...i.accounts.filter(x => x.account === account).map(x => {
+      return {
+        ...x,
+        incominginvoiceid: i.id,
+        type: "incominginvoice",
+        amount: x.amountGross ? x.amountGross : x.amountNet,
+        date: i.date,
+        partner: i.vendor.name,
+        description: i.description,
+        color: i.expense ? "red" : "green",
+        expense: i.expense
+      }
+    }))
+  })
+
+  return [...tempstatementallocations, ... incominginvoicesallocations]
+}
+
+const getSaldo = (allocations) => {
+  let value = 0
+
+  allocations.forEach(i => {
+    if(i.incominginvoiceid) {
+      if(i.expense) {
+        value = value - i.amount
+      } else {
+        value += i.amount
+      }
+    } else {
+      value += i.amount
+    }
+  })
+
+  return value
+}
+
+const templateColumns = [
+  {
+    key: "number",
+    label: "Nummer"
+  },{
+    key: "label",
+    label: "Name"
+  },/*{
+    key: "allocations",
+    label: "Buchungen"
+  },{
+    key: "saldo",
+    label: "Saldo"
+  },*/ {
+    key: "description",
+    label: "Beschreibung"
+  },
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+
+const searchString = ref(tempStore.searchStrings["bankstatements"] ||'')
+
+const clearSearchString = () => {
+  tempStore.clearSearchString("bankstatements")
+  searchString.value = ''
+}
+
+const selectedFilters = ref(['Nur offene anzeigen'])
+
+const filteredRows = computed(() => {
+  let temp = items.value
+
+
+  return useSearch(searchString.value, temp)
+})
+
+setupPage()
+</script>
+
+<template>
+  <UDashboardNavbar title="Buchungskonten" :badge="filteredRows.length">
+    <template #right>
+      <UInput
+          id="searchinput"
+          name="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+          @change="tempStore.modifySearchString('bankstatements',searchString)"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
+      <UButton
+          icon="i-heroicons-x-mark"
+          variant="outline"
+          color="rose"
+          @click="clearSearchString()"
+          v-if="searchString.length > 0"
+      />
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #right>
+<!--      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+          :ui-menu="{ width: 'min-w-max' }"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>-->
+      <USelectMenu
+          icon="i-heroicons-adjustments-horizontal-solid"
+          multiple
+          v-model="selectedFilters"
+          :options="['Nur offene anzeigen']"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
+          :ui-menu="{ width: 'min-w-max' }"
+      >
+        <template #label>
+          Filter
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/accounts/show/${i.id}`)"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+  >
+    <template #allocations-data="{row}">
+        <span v-if="dataLoaded">{{row.allocations ? row.allocations : null}}</span>
+      <USkeleton v-else class="h-4 w-[250px]" />
+
+    </template>
+    <template #saldo-data="{row}">
+      <span v-if="dataLoaded">{{row.allocations ? useCurrency(row.saldo) : null}}</span>
+      <USkeleton v-else class="h-4 w-[250px]" />
+    </template>
+  </UTable>
+
+
+</template>
+
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/accounts/show/[id].vue b/frontend/pages/accounts/show/[id].vue
new file mode 100644
index 0000000..9b7aecd
--- /dev/null
+++ b/frontend/pages/accounts/show/[id].vue
@@ -0,0 +1,170 @@
+<script setup>
+
+import dayjs from "dayjs";
+
+const route = useRoute()
+const router = useRouter()
+
+const itemInfo = ref(null)
+const statementallocations = ref([])
+const incominginvoices = ref([])
+
+const setup = async () => {
+  itemInfo.value = (await useEntities("accounts").selectSpecial("*")).find(i => i.id === Number(route.params.id))
+  statementallocations.value = (await useEntities("statementallocations").select("*, bs_id(*)")).filter(i => i.account === Number(route.params.id))
+  incominginvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)")).filter(i => i.accounts.find(x => x.account === Number(route.params.id)))
+}
+
+setup()
+
+const selectAllocation = (allocation) => {
+  if(allocation.type === "statementallocation") {
+    router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
+  } else if(allocation.type === "incominginvoice") {
+    router.push(`/incominginvoices/show/${allocation.incominginvoiceid}`)
+  }
+}
+
+const renderedAllocations = computed(() => {
+
+  let tempstatementallocations = statementallocations.value.map(i => {
+    return {
+      ...i,
+      type: "statementallocation",
+      date: i.bs_id.date,
+      partner: i.bs_id ? (i.bs_id.debName ? i.bs_id.debName : (i.bs_id.credName ? i.bs_id.credName : '')) : ''
+    }
+  })
+
+
+  let incominginvoicesallocations = []
+
+  incominginvoices.value.forEach(i => {
+
+    incominginvoicesallocations.push(...i.accounts.filter(x => x.account == route.params.id).map(x => {
+      return {
+        ...x,
+        incominginvoiceid: i.id,
+        type: "incominginvoice",
+        amount: x.amountGross ? x.amountGross : x.amountNet,
+        date: i.date,
+        partner: i.vendor.name,
+        description: i.description,
+        color: i.expense ? "red" : "green",
+        expense: i.expense
+      }
+    }))
+  })
+
+  return [...tempstatementallocations, ... incominginvoicesallocations]
+})
+
+const saldo = computed(() => {
+  let value = 0
+
+  renderedAllocations.value.forEach(i => {
+    if(i.incominginvoiceid) {
+      if(i.expense) {
+        value = value - i.amount
+      } else {
+        value += i.amount
+      }
+    } else {
+      value += i.amount
+    }
+  })
+
+  return value
+})
+
+</script>
+
+<template>
+  <UDashboardNavbar>
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.back()/*router.push(`/standardEntity/${type}`)*/"
+      >
+        Zurück
+      </UButton>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/accounts`)"
+      >
+        Übersicht
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="itemInfo"
+          :class="['text-xl','font-medium']"
+      >{{itemInfo ? `Buchungskonto: ${itemInfo.number} - ${itemInfo.label}`: '' }}</h1>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <UTabs :items="[{label: 'Information'},{label: 'Buchungen'}]">
+      <template #item="{item}">
+        <UCard class="mt-5" v-if="item.label === 'Information'">
+          <div class="text-wrap">
+            <table class="w-full" v-if="itemInfo">
+              <tr>
+                <td>Nummer:</td>
+                <td>{{itemInfo.number}}</td>
+              </tr>
+              <tr>
+                <td>Name:</td>
+                <td>{{itemInfo.label}}</td>
+              </tr>
+              <tr>
+                <td>Anzahl:</td>
+                <td>{{renderedAllocations.length}}</td>
+              </tr>
+              <tr>
+                <td>Saldo:</td>
+                <td>{{useCurrency(saldo)}}</td>
+              </tr>
+              <tr>
+                <td>Beschreibung:</td>
+                <td>{{itemInfo.description}}</td>
+              </tr>
+
+            </table>
+          </div>
+        </UCard>
+        <UCard class="mt-5" v-if="item.label === 'Buchungen'">
+          <UTable
+              v-if="statementallocations"
+            :rows="renderedAllocations"
+              :columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]"
+              @select="(i) => selectAllocation(i)"
+              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+          >
+            <template #amount-data="{row}">
+              <span class="text-right text-rose-600" v-if="row.amount < 0 || row.color === 'red'">{{useCurrency(row.amount)}}</span>
+              <span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span>
+              <span v-else>{{useCurrency(row.amount)}}</span>
+            </template>
+            <template #date-data="{row}">
+              {{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
+            </template>
+            <template #description-data="{row}">
+              {{row.description ? row.description : ''}}
+            </template>
+          </UTable>
+        </UCard>
+      </template>
+    </UTabs>
+  </UDashboardPanelContent>
+</template>
+
+<style scoped>
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/pages/banking/index.vue b/frontend/pages/banking/index.vue
new file mode 100644
index 0000000..f815d1d
--- /dev/null
+++ b/frontend/pages/banking/index.vue
@@ -0,0 +1,255 @@
+<script setup>
+import dayjs from "dayjs";
+
+// Zugriff auf $api und Toast Notification
+const { $api } = useNuxtApp()
+const toast = useToast()
+
+defineShortcuts({
+  '/': () => {
+    document.getElementById("searchinput").focus()
+  }
+})
+
+const tempStore = useTempStore()
+const router = useRouter()
+const route = useRoute()
+
+const bankstatements = ref([])
+const bankaccounts = ref([])
+const filterAccount = ref([])
+
+// Status für den Lade-Button
+const isSyncing = ref(false)
+
+const setupPage = async () => {
+  bankstatements.value = (await useEntities("bankstatements").select("*, statementallocations(*)", "date", false))
+  bankaccounts.value = await useEntities("bankaccounts").select()
+  if(bankaccounts.value.length > 0) filterAccount.value = bankaccounts.value
+}
+
+// Funktion für den Bankabruf
+const syncBankStatements = async () => {
+  isSyncing.value = true
+  try {
+    await $api('/api/functions/services/bankstatementsync', { method: 'POST' })
+
+    toast.add({
+      title: 'Erfolg',
+      description: 'Bankdaten wurden erfolgreich synchronisiert.',
+      icon: 'i-heroicons-check-circle',
+      color: 'green'
+    })
+
+    // Wichtig: Daten neu laden, damit die neuen Buchungen direkt sichtbar sind
+    await setupPage()
+  } catch (error) {
+    console.error(error)
+    toast.add({
+      title: 'Fehler',
+      description: 'Beim Abrufen der Bankdaten ist ein Fehler aufgetreten.',
+      icon: 'i-heroicons-exclamation-circle',
+      color: 'red'
+    })
+  } finally {
+    isSyncing.value = false
+  }
+}
+
+const templateColumns = [
+  {
+    key: "account",
+    label: "Konto"
+  },{
+    key: "valueDate",
+    label: "Valuta"
+  },
+  {
+    key: "amount",
+    label: "Betrag"
+  },
+  {
+    key: "openAmount",
+    label: "Offener Betrag"
+  },
+  {
+    key: "partner",
+    label: "Name"
+  },
+  {
+    key: "text",
+    label: "Beschreibung"
+  }
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+
+const searchString = ref(tempStore.searchStrings["bankstatements"] ||'')
+
+const clearSearchString = () => {
+  tempStore.clearSearchString("bankstatements")
+  searchString.value = ''
+}
+
+
+const displayCurrency = (value, currency = "€") => {
+  return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
+}
+
+
+
+const calculateOpenSum = (statement) => {
+  let startingAmount = 0
+
+  statement.statementallocations.forEach(item => {
+    startingAmount += item.amount
+  })
+
+  return (statement.amount - startingAmount).toFixed(2)
+}
+
+const selectedFilters = ref(tempStore.filters?.["banking"]?.["main"] ? tempStore.filters["banking"]["main"] : ['Nur offene anzeigen'])
+
+const filteredRows = computed(() => {
+  let temp = bankstatements.value
+
+  if(route.query.filter) {
+    console.log(route.query.filter)
+    temp = temp.filter(i => JSON.parse(route.query.filter).includes(i.id))
+  } else {
+    if(selectedFilters.value.includes("Nur offene anzeigen")){
+      temp = temp.filter(i => Number(calculateOpenSum(i)) !== 0)
+    }
+
+    if(selectedFilters.value.includes("Nur positive anzeigen")){
+      temp = temp.filter(i => i.amount >= 0)
+    }
+
+    if(selectedFilters.value.includes("Nur negative anzeigen")){
+      temp = temp.filter(i => i.amount < 0)
+    }
+  }
+
+  return useSearch(searchString.value, temp.filter(i => filterAccount.value.find(x => x.id === i.account)))
+})
+
+setupPage()
+</script>
+
+<template>
+  <UDashboardNavbar title="Bankbuchungen" :badge="filteredRows.length">
+    <template #right>
+
+      <UButton
+          label="Bankabruf"
+          icon="i-heroicons-arrow-path"
+          color="primary"
+          variant="solid"
+          :loading="isSyncing"
+          @click="syncBankStatements"
+          class="mr-2"
+      />
+
+      <UInput
+          id="searchinput"
+          name="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+          @change="tempStore.modifySearchString('bankstatements',searchString)"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
+      <UButton
+          icon="i-heroicons-x-mark"
+          variant="outline"
+          color="rose"
+          @click="clearSearchString()"
+          v-if="searchString.length > 0"
+      />
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #left>
+      <USelectMenu
+          :options="bankaccounts"
+          v-model="filterAccount"
+          option-attribute="iban"
+          multiple
+          by="id"
+          :ui-menu="{ width: 'min-w-max' }"
+      >
+        <template #label>
+          Konto
+        </template>
+      </USelectMenu>
+    </template>
+    <template #right>
+      <USelectMenu
+          icon="i-heroicons-adjustments-horizontal-solid"
+          multiple
+          v-model="selectedFilters"
+          :options="['Nur offene anzeigen','Nur positive anzeigen','Nur negative anzeigen']"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
+          :ui-menu="{ width: 'min-w-max' }"
+          @change="tempStore.modifyFilter('banking','main',selectedFilters)"
+      >
+        <template #label>
+          Filter
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/banking/statements/edit/${i.id}`)"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
+  >
+
+    <template #account-data="{row}">
+      {{row.account ? bankaccounts.find(i => i.id === row.account).iban : ""}}
+    </template>
+    <template #valueDate-data="{row}">
+      {{dayjs(row.valueDate).format("DD.MM.YY")}}
+    </template>
+    <template #amount-data="{row}">
+      <span
+          v-if="row.amount >= 0"
+          class="text-primary-500"
+      >{{String(row.amount.toFixed(2)).replace(".",",")}} €</span>
+      <span
+          v-else-if="row.amount < 0"
+          class="text-rose-500"
+      >{{String(row.amount.toFixed(2)).replace(".",",")}} €</span>
+    </template>
+    <template #openAmount-data="{row}">
+      {{displayCurrency(calculateOpenSum(row))}}
+    </template>
+    <template #partner-data="{row}">
+      <span
+          v-if="row.amount < 0"
+      >
+          {{row.credName}}
+      </span>
+      <span
+          v-else-if="row.amount > 0"
+      >
+        {{row.debName}}
+      </span>
+    </template>
+  </UTable>
+  <PageLeaveGuard :when="isSyncing"/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/banking/statements/[mode]/[[id]].vue b/frontend/pages/banking/statements/[mode]/[[id]].vue
new file mode 100644
index 0000000..3298cef
--- /dev/null
+++ b/frontend/pages/banking/statements/[mode]/[[id]].vue
@@ -0,0 +1,876 @@
+<script setup>
+
+import dayjs from "dayjs";
+import {filter} from "vuedraggable/dist/vuedraggable.common.js";
+
+
+
+defineShortcuts({
+  'backspace': () => {
+    router.push("/banking")
+  }
+})
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+const route = useRoute()
+const router = useRouter()
+const mode = ref(route.params.mode || "show")
+
+const itemInfo = ref({statementallocations:[]})
+const oldItemInfo = ref({})
+
+const openDocuments = ref([])
+const allocatedDocuments = ref([])
+const openIncomingInvoices = ref([])
+const allocatedIncomingInvoices = ref([])
+
+const customers = ref([])
+const vendors = ref([])
+
+const createddocuments = ref([])
+const incominginvoices = ref([])
+const accounts = ref([])
+const ownaccounts = ref([])
+
+const loading = ref(true)
+const setup = async () => {
+  loading.value = true
+  if(route.params.id) {
+    itemInfo.value =  await useEntities("bankstatements").selectSingle(route.params.id,"*, statementallocations(*, cd_id(*), ii_id(*))", undefined, undefined, true)
+  }
+  if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
+
+  manualAllocationSum.value = calculateOpenSum.value
+
+  createddocuments.value = (await useEntities("createddocuments").select("*, statementallocations(*), customer(id,name)"))
+  const documents = createddocuments.value.filter(i => i.type === "invoices" ||i.type === "advanceInvoices")
+  incominginvoices.value = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(id,name)")).filter(i => i.state === "Gebucht")
+
+  accounts.value = (await useEntities("accounts").selectSpecial("*","number",true))
+  ownaccounts.value = (await useEntities("ownaccounts").select())
+  customers.value = (await useEntities("customers").select())
+  vendors.value = (await useEntities("vendors").select())
+
+  openDocuments.value = documents.filter(i => i.statementallocations.reduce((n,{amount}) => n + amount, 0).toFixed(2) !== useSum().getCreatedDocumentSum(i,createddocuments.value).toFixed(2))
+  openDocuments.value = openDocuments.value.map(i => {
+
+    return {
+        ...i,
+      docTotal: useSum().getCreatedDocumentSum(i,createddocuments.value),
+      statementTotal: Number(i.statementallocations.reduce((n,{amount}) => n + amount, 0)),
+      openSum: (useSum().getCreatedDocumentSum(i,createddocuments.value) - Number(i.statementallocations.reduce((n,{amount}) => n + amount, 0))).toFixed(2)
+    }
+  })
+
+  console.log(openDocuments.value)
+
+  allocatedDocuments.value = documents.filter(i => i.statementallocations.find(x => x.bankstatement === itemInfo.value.id))
+  allocatedIncomingInvoices.value = incominginvoices.value.filter(i => i.statementallocations.find(x => x.bankstatement === itemInfo.value.id))
+  console.log(allocatedDocuments.value)
+  console.log(allocatedIncomingInvoices.value)
+  openIncomingInvoices.value = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(*)")).filter(i => !i.archived &&  i.statementallocations.reduce((n,{amount}) => n + amount, 0).toFixed(2) !== getInvoiceSum(i,false))
+  //console.log(openIncomingInvoices.value)
+
+  //        return incominginvoices.value.filter(i => bankstatements.value.filter(x => x.assignments.find(y => y.type === 'incomingInvoice' && y.id === i.id)).length === 0)
+
+
+  loading.value = false
+
+}
+
+const displayCurrency = (value, currency = "€") => {
+  return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
+}
+
+const separateIBAN = (input = "")  => {
+  const separates = input.match(/.{1,4}/g)
+  return separates.join(" ")
+}
+
+const getInvoiceSum = (invoice, onlyOpenSum) => {
+  console.log(invoice)
+  let sum = 0
+  invoice.accounts.forEach(account => {
+    sum += account.amountTax
+    sum += account.amountNet
+  })
+  console.log(sum)
+
+  if(onlyOpenSum) sum = sum + Number(invoice.statementallocations.reduce((n,{amount}) => n + amount, 0))
+
+  if(invoice.expense) {
+    return (sum * -1).toFixed(2)
+  } else {
+    return sum.toFixed(2)
+  }
+}
+
+const calculateOpenSum = computed(() => {
+    let startingAmount = 0
+
+    itemInfo.value.statementallocations.forEach(item => {
+      startingAmount += item.amount
+    })
+
+    return (itemInfo.value.amount - startingAmount).toFixed(2)
+})
+
+
+
+const saveAllocations = async () =>  {
+  let allocationsToBeSaved = itemInfo.value.statementallocations.filter(i => !i.id)
+
+  for await (let i of allocationsToBeSaved) {
+    await dataStore.createNewItem("statementallocations", i)
+  }
+
+
+}
+
+const showAccountSelection = ref(false)
+const accountToSave = ref("")
+const ownAccountToSave = ref("")
+const customerAccountToSave = ref("")
+const vendorAccountToSave = ref("")
+
+const selectAccount = (id) => {
+  accountToSave.value = id
+  showAccountSelection.value = false
+}
+
+
+const manualAllocationSum = ref(itemInfo.value.amount || 0)
+const allocationDescription = ref("")
+const showMoreWithoutRecipe = ref(false)
+const showMoreText = ref(false)
+
+const saveAllocation = async (allocation) => {
+  //TODO: BACKEND CHANGE SAVE/REMOVE
+  console.log(allocation)
+
+  const res = await useNuxtApp().$api("/api/banking/statements",{
+    method: "POST",
+    body: {
+      data: allocation
+    }
+  })
+
+  if(res) {
+    await setup()
+    accountToSave.value = null
+    vendorAccountToSave.value = null
+    customerAccountToSave.value = null
+    ownAccountToSave.value = null
+    allocationDescription.value = null
+  }
+
+
+
+}
+
+const removeAllocation = async (allocationId) => {
+  const res = await useNuxtApp().$api(`/api/banking/statements/${allocationId}`,{
+    method: "DELETE"
+  })
+
+  await setup()
+}
+
+const searchString = ref(tempStore.searchStrings["bankstatementsedit"] ||'')
+
+const clearSearchString = () => {
+  searchString.value = ''
+  tempStore.clearSearchString("bankstatementsedit")
+
+}
+
+const filteredDocuments = computed(() => {
+
+
+  return useSearch(searchString.value, openDocuments.value.filter(i => i.state === "Gebucht"))
+
+})
+
+const filteredIncomingInvoices = computed(() => {
+
+
+  return useSearch(searchString.value, openIncomingInvoices.value.filter(i => i.state === "Gebucht"))
+
+})
+
+
+setup()
+
+
+const archiveStatement = async () => {
+
+  let temp = itemInfo.value
+  delete temp.statementallocations
+
+  await useEntities("bankstatements").archive(temp.id)
+}
+
+</script>
+
+<template>
+  <UDashboardNavbar
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.back()/*router.push(`/standardEntity/${type}`)*/"
+      >
+        Zurück
+      </UButton>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/banking`)"
+      >
+        Kontobewegungen
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          :class="['text-xl','font-medium']"
+      >Kontobewegung bearbeiten</h1>
+    </template>
+    <template #badge v-if="itemInfo">
+      <UBadge
+          v-if="itemInfo.incomingInvoice || itemInfo.createdDocument"
+      >
+        Gebucht
+      </UBadge>
+      <UBadge
+          v-else
+          color="red"
+      >
+        Offen
+      </UBadge>
+    </template>
+    <template #right>
+      <ArchiveButton
+          color="rose"
+          variant="outline"
+          type="bankstatements"
+          @confirmed="archiveStatement"
+      />
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardPanelContent
+    class="flex flex-row workingContainer"
+    v-if="!loading"
+  >
+    <div
+      class="mx-auto w-2/5"
+    >
+      <div class="px-2">
+        <UCard
+            v-if="itemInfo"
+        >
+          <template #header>
+            <div class="flex flex-row justify-between">
+              <span
+                  v-if="itemInfo.amount > 0"
+                  class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+              >
+                {{itemInfo.debName}}
+              </span>
+              <span
+                  v-else-if="itemInfo.amount < 0"
+                  class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+              >
+                {{itemInfo.credName}}
+              </span>
+
+
+              <span v-if="itemInfo.amount > 0" class="text-primary-500 font-semibold text-nowrap">{{displayCurrency(itemInfo.amount)}}</span>
+              <span v-else-if="itemInfo.amount < 0" class="text-rose-600 font-semibold text-nowrap">{{displayCurrency(itemInfo.amount)}}</span>
+              <span v-else>{{displayCurrency(itemInfo.amount)}}</span>
+            </div>
+          </template>
+
+          <UAlert
+              v-if="itemInfo.archived"
+              color="rose"
+              variant="outline"
+              :title="`Kontobewegung archiviert`"
+              icon="i-heroicons-archive-box"
+              class="mb-5"
+          />
+
+          <table class="w-full" v-if="itemInfo.id">
+            <tbody>
+            <tr class="flex-row flex justify-between">
+              <td>
+                <span class="font-semibold">Buchungsdatum:</span>
+              </td>
+              <td>
+                {{dayjs(itemInfo.date).format("DD.MM.YYYY")}}
+              </td>
+            </tr>
+            <tr class="flex-row flex justify-between">
+              <td>
+                <span class="font-semibold">Wertstellungsdatum:</span>
+              </td>
+              <td>
+                {{dayjs(itemInfo.valueDate).format("DD.MM.YYYY")}}
+              </td>
+            </tr>
+            <tr class="flex-row flex justify-between text-right">
+              <td>
+                <span class="font-semibold">Partner:</span>
+              </td>
+              <td>
+                <span v-if="itemInfo.debName">{{itemInfo.debName}}</span>
+                <span v-else-if="itemInfo.credName">{{itemInfo.credName}}</span>
+                <span v-else>-</span>
+
+              </td>
+            </tr>
+            <tr class="flex-row flex justify-between">
+              <td>
+                <span class="font-semibold">Partner IBAN:</span>
+              </td>
+              <td>
+                <span v-if="itemInfo.debIban">{{separateIBAN(itemInfo.debIban)}}</span>
+                <span v-else-if="itemInfo.credIban">{{separateIBAN(itemInfo.credIban)}}</span>
+                <span v-else>-</span>
+              </td>
+            </tr>
+            <tr class="flex-row flex justify-between">
+              <td>
+                <span class="font-semibold">Konto:</span>
+              </td>
+              <td>
+<!--
+                {{dataStore.getBankAccountById(itemInfo.account) ? dataStore.getBankAccountById(itemInfo.account).name || separateIBAN(dataStore.getBankAccountById(itemInfo.account).iban) : ""}}
+-->
+              </td>
+            </tr>
+<!--            <tr class="flex-row flex justify-between">
+              <td colspan="2">
+                <span class="font-semibold">Buchungen:</span>
+              </td>
+            </tr>
+            <tr
+                class="flex-row flex justify-between mb-3"
+                v-for="item in itemInfo.statementallocations"
+            >
+
+              <td>
+                &lt;!&ndash;            <span v-if="itemInfo.createdDocument"><nuxt-link :to="`/createDocument/show/${itemInfo.createdDocument}`">{{dataStore.createddocuments.find(i => i.id === itemInfo.createdDocument).documentNumber}}</nuxt-link></span>
+                            <span v-else-if="itemInfo.incomingInvoice"><nuxt-link :to="`/incominInvoices/show/${itemInfo.incomingInvoice}`">{{dataStore.getIncomingInvoiceById(itemInfo.incomingInvoice).reference}}</nuxt-link></span>&ndash;&gt;
+                <span v-if="item.cd_id">
+                {{dataStore.getCreatedDocumentById(item.cd_id).documentNumber}}
+              </span>
+                <span v-else-if="item.ii_id">
+&lt;!&ndash;                {{dataStore.getVendorById(dataStore.getIncomingInvoiceById(item.ii_id).vendor).name}} - {{dataStore.getIncomingInvoiceById(item.ii_id).reference}}&ndash;&gt;
+              </span>
+                <span v-else-if="item.account">
+                Buchungskonto: {{accounts.find(i => i.id === item.account).number}} {{accounts.find(i => i.id === item.account).label}}
+              </span>
+              </td>
+              <td>
+                <UButton
+                    variant="outline"
+                    icon="i-heroicons-arrow-right-end-on-rectangle"
+                    @click="router.push(`/createDocument/show/${item.cd_id}`)"
+                    v-if="item.cd_id"
+                />
+                <UButton
+                    variant="outline"
+                    icon="i-heroicons-arrow-right-end-on-rectangle"
+                    @click="router.push(`/incominginvoices/show/${item.ii_id}`)"
+                    v-else-if="item.ii_id"
+                />
+              </td>
+            </tr>-->
+            <tr class="flex-row flex justify-between">
+              <td colspan="2">
+                <span class="font-semibold">Beschreibung:</span>
+              </td>
+            </tr>
+            <tr>
+              <td colspan="2">
+                <UButton
+                    class="mt-3"
+                    @click="showMoreText = !showMoreText"
+                    variant="outline"
+                >{{ showMoreText ? "Weniger anzeigen" : "Mehr anzeigen" }}</UButton>
+
+
+
+                <p>{{showMoreText ? itemInfo.text : itemInfo.text.substring(0,200)}}</p>
+              </td>
+            </tr>
+            </tbody>
+
+          </table>
+
+        </UCard>
+
+        <UAlert
+            class="mb-3 mt-3"
+            :color="calculateOpenSum != 0 ? 'rose' : 'primary'"
+            variant="outline"
+            :title="calculateOpenSum != 0 ? `${displayCurrency(Math.abs(calculateOpenSum))} von ${displayCurrency(Math.abs(itemInfo.amount))} nicht zugewiesen` : 'Kontobewegung vollständig zugewiesen'"
+        >
+          <template #description>
+            <UProgress
+                :value="Math.abs(itemInfo.amount) - Math.abs(calculateOpenSum)"
+                :max="Math.abs(itemInfo.amount)"
+                :color="calculateOpenSum != 0 ? 'rose' : 'primary'"
+            />
+          </template>
+        </UAlert>
+      </div>
+
+
+      <div class="scrollList mt-3 px-2 pb-3" style="height: 35vh">
+        <UDivider>Vorhandene Buchungen<UBadge v-if="itemInfo.statementallocations.length > 0" variant="outline" class="ml-2">{{itemInfo.statementallocations.length}}</UBadge></UDivider>
+
+        <UCard
+            class="mt-5"
+            v-for="item in itemInfo.statementallocations.filter(i => i.account)"
+        >
+          <template #header>
+            <div class="flex flex-row justify-between">
+              <span>{{accounts.find(i => i.id === item.account).number}} - {{accounts.find(i => i.id === item.account).label}}</span>
+              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
+            </div>
+          </template>
+          <p class="font-bold">Beschreibung:</p>
+          <p>{{item.description}}</p>
+          <UButton
+              icon="i-heroicons-x-mark"
+              variant="outline"
+              color="rose"
+              class="mr-3 mt-3"
+              @click="removeAllocation(item.id)"
+          />
+        </UCard>
+        <UCard
+            class="mt-5"
+            v-for="item in itemInfo.statementallocations.filter(i => i.ownaccount)"
+        >
+          <template #header>
+            <div class="flex flex-row justify-between">
+              <span>{{ownaccounts.find(i => i.id === item.ownaccount).number}} - {{ownaccounts.find(i => i.id === item.ownaccount).name}}</span>
+              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
+            </div>
+          </template>
+          <p class="font-bold">Beschreibung:</p>
+          <p>{{item.description}}</p>
+          <UButton
+              icon="i-heroicons-x-mark"
+              variant="outline"
+              color="rose"
+              class="mr-3 mt-3"
+              @click="removeAllocation(item.id)"
+          />
+        </UCard>
+        <UCard
+            class="mt-5"
+            v-for="item in itemInfo.statementallocations.filter(i => i.customer)"
+        >
+          <template #header>
+            <div class="flex flex-row justify-between">
+              <span>{{customers.find(i => i.id === item.customer).customerNumber}} - {{customers.find(i => i.id === item.customer).name}}</span>
+              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
+            </div>
+          </template>
+          <p class="font-bold">Beschreibung:</p>
+          <p>{{item.description}}</p>
+          <UButton
+              icon="i-heroicons-x-mark"
+              variant="outline"
+              color="rose"
+              class="mr-3 mt-3"
+              @click="removeAllocation(item.id)"
+          />
+        </UCard>
+        <UCard
+            class="mt-5"
+            v-for="item in itemInfo.statementallocations.filter(i => i.vendor)"
+        >
+          <template #header>
+            <div class="flex flex-row justify-between">
+              <span>{{vendors.find(i => i.id === item.vendor).vendorNumber}} - {{vendors.find(i => i.id === item.vendor).name}}</span>
+              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
+            </div>
+          </template>
+          <p class="font-bold">Beschreibung:</p>
+          <p>{{item.description}}</p>
+          <UButton
+              icon="i-heroicons-x-mark"
+              variant="outline"
+              color="rose"
+              class="mr-3 mt-3"
+              @click="removeAllocation(item.id)"
+          />
+        </UCard>
+        <UCard
+            class="mt-5"
+            v-for="item in itemInfo.statementallocations.filter(i => i.incominginvoice)"
+        >
+          <template #header>
+            <div class="flex flex-row justify-between">
+             <span> {{incominginvoices.find(i => i.id === item.incominginvoice).reference}} - {{incominginvoices.find(i => i.id === item.incominginvoice).vendor?.name}}</span>
+              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
+            </div>
+          </template>
+          <p class="font-bold">Beschreibung:</p>
+          <p>{{item.description}}</p>
+          <UButton
+              icon="i-heroicons-x-mark"
+              variant="outline"
+              color="rose"
+              class="mr-3 mt-3"
+              @click="removeAllocation(item.id)"
+          />
+        </UCard>
+        <UCard
+            class="mt-5"
+            v-for="item in itemInfo.statementallocations.filter(i => i.createddocument)"
+        >
+          <template #header>
+            <div class="flex flex-row justify-between">
+              <span v-if="customers.find(i => i.id === createddocuments.find(i => i.id === item.createddocument).customer?.id)">{{createddocuments.find(i => i.id === item.createddocument).documentNumber}} - {{createddocuments.find(i => i.id === item.createddocument).customer?.name}}</span>
+              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
+            </div>
+          </template>
+          <p class="font-bold">Beschreibung:</p>
+          <p>{{item.description}}</p>
+          <UButton
+              icon="i-heroicons-x-mark"
+              variant="outline"
+              color="rose"
+              class="mr-3 mt-3"
+              @click="removeAllocation(item.id)"
+          />
+          <UButton
+              icon="i-heroicons-eye"
+              variant="outline"
+              color="primary"
+              class="mr-3 mt-3"
+              @click="navigateTo(`/createDocument/show/${item.createddocument}`)"
+          />
+        </UCard>
+
+      </div>
+    </div>
+
+    <div class="w-2/5 mx-auto">
+      <div class="px-2">
+        <UDivider class="mt-3">Buchungsdaten</UDivider>
+        <UFormGroup
+            label="Summe:"
+        >
+          <UInput
+              v-model="manualAllocationSum"
+              type="number"
+              step="0.01"
+          >
+            <template #trailing>
+              <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
+            </template>
+          </UInput>
+        </UFormGroup>
+        <UFormGroup
+            label="Beschreibung:"
+            class="mt-3"
+        >
+          <UTextarea
+              v-model="allocationDescription"
+              rows="3"
+          />
+        </UFormGroup>
+
+
+        <UDivider class="my-3">Ohne Beleg buchen</UDivider>
+
+        <UFormGroup
+          label="Buchungskonten"
+          class="mt-3"
+        >
+          <InputGroup class="mt-3 w-full">
+            <USelectMenu
+                class="w-full"
+                :options="accounts"
+                value-attribute="id"
+                option-attribute="label"
+                :ui-menu="{ width: 'min-w-max' }"
+                v-model="accountToSave"
+                searchable
+                :search-attributes="['number','label']"
+            >
+              <template #label>
+                <span v-if="accountToSave">{{accounts.find(i => i.id === accountToSave).number}} - {{accounts.find(i => i.id === accountToSave).label}}</span>
+                <span v-else>Kein Konto ausgewählt</span>
+              </template>
+              <template #option="{option}">
+                {{option.number}} - {{option.label}}
+              </template>
+            </USelectMenu>
+            <UButton
+                @click="showAccountSelection = true"
+                icon="i-heroicons-magnifying-glass"
+                variant="outline"
+            />
+            <UButton
+                variant="outline"
+                icon="i-heroicons-check"
+                :disabled="!accountToSave"
+                @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, account: accountToSave, description: allocationDescription })"
+            />
+            <UButton
+                @click="accountToSave = ''"
+                icon="i-heroicons-x-mark"
+                variant="outline"
+                color="rose"
+            />
+          </InputGroup>
+          <UModal
+              v-model="showAccountSelection"
+          >
+            <UCard>
+              <template #header>
+                <div class="flex items-center justify-between">
+                  <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                    Konto auswählen
+                  </h3>
+                  <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAccountSelection = false" />
+                </div>
+              </template>
+              <UButton
+                  v-for="selectableAccount in accounts"
+                  variant="outline"
+                  class="m-3"
+                  @click="selectAccount(selectableAccount.id)"
+              >
+                {{selectableAccount.label}}
+              </UButton>
+            </UCard>
+
+          </UModal>
+        </UFormGroup>
+        <UButton
+            class="mt-3"
+            @click="showMoreWithoutRecipe = !showMoreWithoutRecipe"
+            variant="outline"
+        >{{ showMoreWithoutRecipe ? "Weniger anzeigen" : "Mehr anzeigen" }}</UButton>
+        <UFormGroup
+            v-if="showMoreWithoutRecipe"
+          label="zusätzliche Buchungskonten"
+          class="mt-3"
+        >
+          <InputGroup class="w-full">
+            <USelectMenu
+                class="w-full"
+                :options="ownaccounts"
+                value-attribute="id"
+                option-attribute="label"
+                :ui-menu="{ width: 'min-w-max' }"
+                v-model="ownAccountToSave"
+                searchable
+                :search-attributes="['number','label']"
+            >
+              <template #label>
+                <span v-if="ownAccountToSave">{{ownaccounts.find(i => i.id === ownAccountToSave).number}} - {{ownaccounts.find(i => i.id === ownAccountToSave).name}}</span>
+                <span v-else>Kein Konto ausgewählt</span>
+              </template>
+              <template #option="{option}">
+                {{option.number}} - {{option.name}}
+              </template>
+            </USelectMenu>
+            <UButton
+                variant="outline"
+                icon="i-heroicons-check"
+                :disabled="!ownAccountToSave"
+                @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, ownaccount: ownAccountToSave, description: allocationDescription })"
+            />
+            <UButton
+                @click="accountToSave = ''"
+                icon="i-heroicons-x-mark"
+                variant="outline"
+                color="rose"
+            />
+          </InputGroup>
+        </UFormGroup>
+        <UFormGroup
+            v-if="showMoreWithoutRecipe"
+          label="Kunden"
+          class="mt-3"
+        >
+          <InputGroup class="w-full">
+            <USelectMenu
+                class="w-full"
+                :options="customers"
+                value-attribute="id"
+                option-attribute="label"
+                :ui-menu="{ width: 'min-w-max' }"
+                v-model="customerAccountToSave"
+                searchable
+                :search-attributes="['number','name']"
+            >
+              <template #label>
+                <span v-if="customerAccountToSave">{{customers.find(i => i.id === customerAccountToSave).customerNumber}} - {{customers.find(i => i.id === customerAccountToSave).name}}</span>
+                <span v-else>Kein Konto ausgewählt</span>
+              </template>
+              <template #option="{option}">
+                {{option.customerNumber}} - {{option.name}}
+              </template>
+            </USelectMenu>
+            <UButton
+                variant="outline"
+                icon="i-heroicons-check"
+                :disabled="!customerAccountToSave"
+                @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, customer: customerAccountToSave, description: allocationDescription })"
+            />
+            <UButton
+                @click="customerAccountToSave = ''"
+                icon="i-heroicons-x-mark"
+                variant="outline"
+                color="rose"
+            />
+          </InputGroup>
+        </UFormGroup>
+        <UFormGroup
+            v-if="showMoreWithoutRecipe"
+          label="Lieferanten"
+          class="mt-3"
+        >
+          <InputGroup class="w-full">
+            <USelectMenu
+                class="w-full"
+                :options="vendors"
+                value-attribute="id"
+                option-attribute="label"
+                :ui-menu="{ width: 'min-w-max' }"
+                v-model="vendorAccountToSave"
+                searchable
+                :search-attributes="['number','name']"
+            >
+              <template #label>
+                <span v-if="vendorAccountToSave">{{vendors.find(i => i.id === vendorAccountToSave).vendorNumber}} - {{vendors.find(i => i.id === vendorAccountToSave).name}}</span>
+                <span v-else>Kein Konto ausgewählt</span>
+              </template>
+              <template #option="{option}">
+                {{option.vendorNumber}} - {{option.name}}
+              </template>
+            </USelectMenu>
+            <UButton
+                variant="outline"
+                icon="i-heroicons-check"
+                :disabled="!vendorAccountToSave"
+                @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, vendor: vendorAccountToSave, description: allocationDescription })"
+            />
+            <UButton
+                @click="vendorAccountToSave = ''"
+                icon="i-heroicons-x-mark"
+                variant="outline"
+                color="rose"
+            />
+          </InputGroup>
+        </UFormGroup>
+
+        <UDivider
+            class="my-3"
+        >
+          Auf Beleg buchen
+        </UDivider>
+        <InputGroup
+            class="mt-3 w-full"
+        >
+          <UInput
+              id="searchinput"
+              v-model="searchString"
+              icon="i-heroicons-funnel"
+              autocomplete="off"
+              placeholder="Suche..."
+              class="hidden lg:block w-full mr-1"
+              @keydown.esc="$event.target.blur()"
+              @change="tempStore.modifySearchString('bankstatementsedit',searchString)"
+          >
+            <template #trailing>
+              <UKbd value="/" />
+            </template>
+          </UInput>
+          <UButton
+              variant="outline"
+              icon="i-heroicons-x-mark"
+              color="rose"
+              @click="clearSearchString"
+          />
+        </InputGroup>
+      </div>
+
+      <div class="scrollList mt-3 px-2" style="height: 40vh;">
+
+        <UCard
+            class="mt-5"
+            v-for="document in filteredDocuments"
+        >
+          <template #header>
+            <div class="flex flex-row justify-between">
+              <span>{{document.customer ? document.customer.name : ""}} - {{document.documentNumber}}</span>
+              <span class="font-semibold text-primary-500 text-nowrap">{{displayCurrency(document.openSum)}}</span>
+            </div>
+          </template>
+          <UButton
+              icon="i-heroicons-check"
+              variant="outline"
+              class="mr-3"
+              v-if="!itemInfo.statementallocations.find(i => i.createddocument === document.id)"
+              @click="saveAllocation({createddocument: document.id, bankstatement: itemInfo.id, amount: Number(Number(document.openSum) < manualAllocationSum ? document.openSum : manualAllocationSum), description: allocationDescription})"
+          />
+
+          <UButton
+              variant="outline"
+              icon="i-heroicons-arrow-right-end-on-rectangle"
+              @click="router.push(`/createDocument/show/${document.id}`)"
+          />
+        </UCard>
+
+        <UCard
+            class="mt-5"
+            v-for="item in filteredIncomingInvoices"
+        >
+          <template #header>
+            <div class="flex flex-row justify-between">
+              <span>{{item.vendor ? item.vendor.name : ''}} - {{item.reference}}</span>
+              <span class="font-semibold text-rose-600 text-nowrap">{{displayCurrency(getInvoiceSum(item,true))}}</span>
+            </div>
+          </template>
+          <UButton
+              icon="i-heroicons-check"
+              variant="outline"
+              class="mr-3"
+              v-if="!itemInfo.statementallocations.find(i => i.incominginvoice === item.id)"
+              @click="saveAllocation({incominginvoice: item.id, bankstatement: itemInfo.id, amount: Number(Math.abs(getInvoiceSum(item,true)) > Math.abs(manualAllocationSum) ? manualAllocationSum : getInvoiceSum(item,true)), description: allocationDescription})"
+          />
+          <UButton
+              variant="outline"
+              icon="i-heroicons-arrow-right-end-on-rectangle"
+              @click="router.push(`/incominginvoices/show/${item.id}`)"
+          />
+
+        </UCard>
+      </div>
+    </div>
+
+  </UDashboardPanelContent>
+</template>
+
+<style scoped>
+.workingContainer {
+  height: 90vh;
+  overflow-y: hidden;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/calendar/[mode].vue b/frontend/pages/calendar/[mode].vue
new file mode 100644
index 0000000..ed17d4b
--- /dev/null
+++ b/frontend/pages/calendar/[mode].vue
@@ -0,0 +1,388 @@
+<script setup>
+import deLocale from "@fullcalendar/core/locales/de";
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid"
+import timeGridPlugin from "@fullcalendar/timegrid"
+import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
+import interactionPlugin from "@fullcalendar/interaction";
+import dayjs from "dayjs";
+
+//TODO BACKEND CHANGE COLOR IN TENANT FOR RENDERING
+
+//Config
+const route = useRoute()
+const router = useRouter()
+const mode = ref(route.params.mode || "grid")
+const dataStore = useDataStore()
+
+const profileStore = useProfileStore()
+
+//Working
+const newEventData = ref({
+  resources: [],
+  resourceId: "",
+  resourceType: "",
+  title: "",
+  type: "Umsetzung",
+  start: "",
+  end: null
+})
+const showNewEventModal = ref(false)
+const showEventModal = ref(false)
+const selectedEvent = ref({})
+const selectedResources = ref([])
+
+const events = ref([])
+const calendarOptionsGrid = computed(() => {
+  return {
+    locale: deLocale,
+    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
+    headerToolbar: {
+      left: 'prev,next today',
+      center: 'title',
+      right: 'dayGridMonth,timeGridWeek,timeGridDay'
+    },
+    initialView: "timeGridWeek",
+    initialEvents: events.value,
+    nowIndicator: true,
+    height: "80vh",
+    selectable: true,
+    weekNumbers: true,
+    select: function (info) {
+      console.log(info)
+
+      router.push(`/standardEntity/events/create/?startDate=${encodeURIComponent(info.startStr)}&endDate=${encodeURIComponent(info.endStr)}`)
+    },
+    eventClick: function (info) {
+      console.log(info.event)
+      if(info.event.extendedProps.entrytype === "absencerequest"){
+        router.push(`/standardEntity/absencerequests/show/${info.event.extendedProps.absencerequestId}`)
+      } else {
+        router.push(`/standardEntity/events/show/${info.event.extendedProps.eventId}`)
+      }
+
+    },
+  }
+})
+
+const calendarOptionsTimeline = ref({
+  schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
+  locale: deLocale,
+  plugins: [resourceTimelinePlugin, interactionPlugin],
+  initialView: "resourceTimeline3Hours",
+
+  headerToolbar: {
+    left: 'prev,next',
+    center: 'title',
+    right: 'resourceTimelineDay,resourceTimeline3Hours,resourceTimelineMonth'
+  },
+  initialEvents: [{
+    title:"Test",
+    resourceId:"F-27",
+    start:"2025-01-01"
+  }],
+  selectable: true,
+  select: function (info) {
+    router.push(`/standardEntity/events/create?startDate=${encodeURIComponent(info.startStr)}&endDate=${encodeURIComponent(info.endStr)}&resources=${encodeURIComponent(JSON.stringify([info.resource.id]))}&source=timeline`)
+  },
+  eventClick: function (info){
+    console.log(info.event)
+    if(info.event.extendedProps.entrytype === "absencerequest"){
+      router.push(`/standardEntity/absencerequests/show/${info.event.extendedProps.absencerequestId}`)
+    } else {
+      router.push(`/standardEntity/events/show/${info.event.extendedProps.eventId}`)
+    }
+  },
+  resourceGroupField: "type",
+  resourceOrder: "-type",
+  resources: [],
+  nowIndicator:true,
+  views: {
+    resourceTimeline3Hours: {
+      type: 'resourceTimeline',
+      duration: {weeks: 1},
+      weekends: false,
+      slotDuration: {hours: 3},
+      slotMinTime: "06:00:00",
+      slotMaxTime: "21:00:00",
+      buttonText: "Woche",
+      visibleRange: function(currentDate) {
+        // Generate a new date for manipulating in the next step
+        var startDate = new Date(currentDate.valueOf());
+        var endDate = new Date(currentDate.valueOf());
+
+        // Adjust the start & end dates, respectively
+
+        console.log(startDate.getDay())
+
+        startDate.setDate(startDate.getDate() - 1); // One day in the past
+        endDate.setDate(endDate.getDate() + 2); // Two days into the future
+
+        return { start: startDate, end: endDate };
+      }
+    }
+  },
+  height: '80vh',
+})
+
+const loaded = ref(false)
+const setupPage = async () => {
+  let tempData = (await useEntities("events").select()).filter(i => !i.archived)
+  let absencerequests = (await useEntities("absencerequests").select("*, profile(*)")).filter(i => !i.archived)
+  let projects = (await useEntities("projects").select( "*")).filter(i => !i.archived)
+  let inventoryitems = (await useEntities("inventoryitems").select()).filter(i => !i.archived)
+  let inventoryitemgroups = (await useEntities("inventoryitemgroups").select()).filter(i => !i.archived)
+  let profiles = (await useEntities("profiles").select()).filter(i => !i.archived)
+  let vehicles = (await useEntities("vehicles").select()).filter(i => !i.archived)
+
+  calendarOptionsGrid.value.initialEvents = [
+    ...tempData.map(event => {
+      let eventColor = profileStore.ownTenant.calendarConfig.eventTypes.find(type => type.label === event.eventtype).color
+
+      let title = ""
+      if (event.name) {
+        title = event.name
+      } else if (event.project) {
+        title = projects.find(i => i.id === event.project) ? projects.find(i => i.id === event.project).name : ""
+      }
+
+      return {
+        ...event,
+        start: event.startDate,
+        end: event.endDate,
+        title: title,
+        borderColor: eventColor,
+        textColor: eventColor,
+        backgroundColor: "black",
+        entrytype: "event",
+        eventId: event.id
+      }
+    }),
+    ...absencerequests.map(absence => {
+      return {
+        id: absence.id,
+        resourceId: absence.user,
+        resourceType: "person",
+        title: `${absence.reason} - ${absence.profile.fullName}`,
+        start: dayjs(absence.startDate).toDate(),
+        end: dayjs(absence.endDate).add(1, 'day').toDate(),
+        allDay: true,
+        absencerequestId: absence.id,
+        entrytype: "absencerequest",
+      }
+    })
+  ]
+
+  calendarOptionsTimeline.value.resources = [
+    ...profiles.filter(i => i.tenant === profileStore.currentTenant).map(profile => {
+      return {
+        type: 'Mitarbeiter',
+        title: profile.fullName,
+        id: `P-${profile.id}`
+      }
+    }),
+    ...vehicles.map(vehicle => {
+      return {
+        type: 'Fahrzeug',
+        title: vehicle.licensePlate,
+        id: `F-${vehicle.id}`
+      }
+    }),
+    ...inventoryitems.filter(i=> i.usePlanning).map(item => {
+      return {
+        type: 'Inventar',
+        title: item.name,
+        id: `I-${item.id}`
+      }
+    }),
+    ...inventoryitemgroups.filter(i=> i.usePlanning).map(item => {
+      return {
+        type: 'Inventargruppen',
+        title: item.name,
+        id: `G-${item.id}`
+      }
+    })
+  ]
+
+/*
+  calendarOptionsTimeline.value.initialEvents = [
+      ...events.value.map(event => {
+        let eventColor = profileStore.ownTenant.calendarConfig.eventTypes.find(type => type.label === event.eventtype).color
+
+        let title = ""
+        if (event.name) {
+          title = event.name
+        } else if (event.project) {
+          projects.find(i => i.id === event.project) ? projects.find(i => i.id === event.project).name : ""
+        }
+
+        let resource = ""
+        let resourceType = ""
+
+
+
+        return {
+          ...event,
+          start: event.startDate,
+          end: event.endDate,
+          title: title,
+          borderColor: eventColor,
+          textColor: eventColor,
+          backgroundColor: "black"
+        }
+      })
+  ]
+*/
+
+  let tempEvents = []
+
+  tempData.forEach(event => {
+    console.log(event)
+    let eventColor = profileStore.ownTenant.calendarConfig.eventTypes.find(type => type.label === event.eventtype).color
+
+    let title = ""
+    if (event.name) {
+      title = event.name
+    } else if (event.project) {
+      projects.find(i => i.id === event.project) ? projects.find(i => i.id === event.project).name : ""
+    }
+
+    let returnData = {
+      title: title,
+      borderColor: eventColor,
+      textColor: "white",
+      backgroundColor: eventColor,
+      start: event.startDate,
+      end: event.endDate,
+      resourceIds: [],
+      entrytype: "event",
+      eventId: event.id
+    }
+
+
+    if(event.profiles.length > 0) {
+      event.profiles.forEach(profile => {
+        returnData.resourceIds.push(`P-${profile}`)
+      })
+    }
+
+    if(event.vehicles.length > 0) {
+      event.vehicles.forEach(vehicle => {
+        returnData.resourceIds.push(`F-${vehicle}`)
+      })
+    }
+
+    if(event.inventoryitems.length > 0) {
+      event.inventoryitems.forEach(inventoryitem => {
+        returnData.resourceIds.push(`I-${inventoryitem}`)
+      })
+    }
+
+    if(event.inventoryitemgroups.length > 0) {
+      event.inventoryitemgroups.forEach(inventoryitemgroup => {
+        returnData.resourceIds.push(`G-${inventoryitemgroup}`)
+      })
+    }
+
+    console.log(returnData)
+
+    tempEvents.push(returnData)
+
+  })
+
+  absencerequests.forEach(absencerequest => {
+    let returnData = {
+      title: `${absencerequest.reason}`,
+      backgroundColor: "red",
+      borderColor: "red",
+      start: absencerequest.startDate,
+      end: absencerequest.endDate,
+      resourceIds: [`P-${absencerequest.profile.id}`],
+      entrytype: "absencerequest",
+      allDay: true,
+      absencerequestId: absencerequest.id
+    }
+
+    tempEvents.push(returnData)
+  })
+
+  console.log(tempEvents)
+
+  calendarOptionsTimeline.value.initialEvents = tempEvents
+
+  console.log(calendarOptionsTimeline.value)
+
+  loaded.value = true
+
+}
+
+setupPage()
+
+
+//Functions
+/*
+const convertResourceIds = () => {
+
+  newEventData.value.resources = selectedResources.value.map(i => {
+    /!*if(i.type !== 'Mitarbeiter') {
+      return {id: Number(i.id.split('-')[1]), type: i.type}
+    } else {
+      return {id: i.id, type: i.type}
+    }*!/
+
+    if((String(i).match(/-/g) || []).length > 1) {
+      return {type: "Mitarbeiter", id: i}
+    } else {
+
+      if(i.split('-')[0] === 'I') {
+        return {id: Number(i.split('-')[1]), type: "Inventar"}
+      } else if(i.split('-')[0] === 'F') {
+        return {id: Number(i.split('-')[1]), type: "Fahrzeug"}
+      }
+    }
+
+
+  })
+}
+*/
+
+
+
+
+//Calendar Config
+
+
+
+</script>
+
+<template>
+    <UDashboardNavbar title="Kalender">
+      <template #center>
+        <h1
+            :class="['text-xl','font-medium']"
+        >Kalender</h1>
+      </template>
+      <template #right>
+
+      </template>
+    </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <div v-if="mode === 'grid' && loaded" class="p-5">
+      <FullCalendar
+          :options="calendarOptionsGrid"
+      />
+    </div>
+    <div v-else-if="mode === 'timeline' && loaded"  class="p-5">
+    <FullCalendar
+        :options="calendarOptionsTimeline"
+    />
+  </div>
+  </UDashboardPanelContent>
+
+
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/createDocument/edit/[[id]].vue b/frontend/pages/createDocument/edit/[[id]].vue
new file mode 100644
index 0000000..5312576
--- /dev/null
+++ b/frontend/pages/createDocument/edit/[[id]].vue
@@ -0,0 +1,3171 @@
+<script setup>
+import dayjs from "dayjs"
+import Handlebars from "handlebars"
+import { v4 as uuidv4 } from 'uuid';
+import {useFunctions} from "~/composables/useFunctions.js";
+import EntityModalButtons from "~/components/EntityModalButtons.vue";
+
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+const route = useRoute()
+const router = useRouter()
+const modal = useModal()
+const auth = useAuthStore()
+
+
+
+
+
+const itemInfo = ref({
+  type: "invoices",
+  taxType: "Standard",
+  customer: null,
+  contact: null,
+  address: {
+    street: null,
+    special: null,
+    zip: null,
+    city: null,
+  },
+  project: null,
+  documentNumber: null,
+  documentNumberTitle: "Rechnungsnummer",
+  documentDate: dayjs(),
+  deliveryDate: dayjs(),
+  deliveryDateEnd: null,
+  deliveryDateType: "Lieferdatum",
+  dateOfPerformance: null,
+  paymentDays: auth.activeTenantData.standardPaymentDays,
+  payment_type: "transfer",
+  customSurchargePercentage: 0,
+  created_by: auth.user.id,
+  title: null,
+  description: null,
+  startText: null,
+  endText: null,
+  rows: [],
+  contactPerson: auth.user.id,
+  contactPersonName: null,
+  contactTel: null,
+  contactEMail: null,
+  serialConfig: {
+    firstExecution: "",
+    intervall: "monatlich",
+    executionUntil: "",
+    active: true,
+    dateDirection: "Rückwirkend",
+  },
+  letterhead: null,
+  agriculture: {},
+  usedAdvanceInvoices: []
+})
+
+console.log(auth.activeTenantData)
+
+const letterheads = ref([])
+const createddocuments = ref([])
+const projects = ref([])
+const plants = ref([])
+const products = ref([])
+const productcategories = ref([])
+const selectedProductcategorie = ref(null)
+const services = ref([])
+const servicecategories = ref([])
+const selectedServicecategorie = ref(null)
+const customers = ref([])
+const contacts = ref([])
+const contracts = ref([])
+const texttemplates = ref([])
+const units = ref([])
+const tenantUsers = ref([])
+
+const setupData = async () => {
+  letterheads.value = (await useEntities("letterheads").select("*")).filter(i => i.documentTypes.length === 0 || i.documentTypes.includes(itemInfo.value.type))
+  createddocuments.value = await useEntities("createddocuments").select("*")
+  projects.value = await useEntities("projects").select("*")
+  plants.value = await useEntities("plants").select("*")
+  services.value = await useEntities("services").select("*")
+  servicecategories.value = await useEntities("servicecategories").select("*")
+  products.value = await useEntities("products").select("*")
+  productcategories.value = await useEntities("productcategories").select("*")
+  customers.value = await useEntities("customers").select("*", "customerNumber")
+  contacts.value = await useEntities("contacts").select("*")
+  contracts.value = await useEntities("contracts").select("*")
+  texttemplates.value = await useEntities("texttemplates").select("*")
+  units.value = await useEntities("units").selectSpecial("*")
+  tenantUsers.value = (await useNuxtApp().$api(`/api/tenant/users`, {
+    method: "GET"
+  })).users
+}
+
+const loaded = ref(false)
+const setupPage = async () => {
+
+  await setupData()
+
+  if (productcategories.value.length > 0) selectedProductcategorie.value = productcategories.value[0].id
+  if (servicecategories.value.length > 0) selectedServicecategorie.value = servicecategories.value[0].id
+
+  if (route.params) {
+    if (route.params.id) {
+      console.log(route.params)
+      itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id,'',false)
+      await setContactPersonData()
+      checkCompatibilityWithInputPrice()
+    }
+
+
+    if (!itemInfo.value.deliveryDateType) itemInfo.value.deliveryDateType = "Lieferdatum"
+
+    if (itemInfo.value.rows.find(i => i.agriculture)) {
+      processDieselPosition()
+    }
+
+  }
+
+  if (route.query) {
+    if (route.query.type) itemInfo.value.type = route.query.type
+
+    if (!itemInfo.value.startText && !itemInfo.value.endText) {
+      setDocumentTypeConfig(true)
+    } else {
+      setDocumentTypeConfig(false)
+    }
+
+    if (route.query.linkedDocuments) {
+
+      console.log(route.query.loadMode)
+
+      if (route.query.loadMode === "deliveryNotes") {
+        let linkedDocuments = (await useEntities("createddocuments").select()).filter(i => JSON.parse(route.query.linkedDocuments).includes(i.id))
+
+        //TODO: Implement Checking for Same Customer, Contact and Project
+
+        itemInfo.value.customer = linkedDocuments[0].customer ? linkedDocuments[0].customer.id : null
+        itemInfo.value.project = linkedDocuments[0].project ? linkedDocuments[0].project.id : null
+        itemInfo.value.contact = linkedDocuments[0].contact ? linkedDocuments[0].contact.id : null
+
+        setCustomerData()
+
+        let firstDate = null
+        let lastDate = null
+
+        linkedDocuments.forEach(doc => {
+          let lastId = 0
+          itemInfo.value.rows.forEach(row => {
+            if (row.id > lastId) lastId = row.id
+          })
+
+          if (dayjs(doc.documentDate).isBefore(firstDate) || !firstDate) firstDate = doc.documentDate
+          if (dayjs(doc.documentDate).isAfter(lastDate) || !lastDate) lastDate = doc.documentDate
+
+          itemInfo.value.rows.push(...[
+            {
+              id: uuidv4(),
+              mode: "title",
+              text: `${doc.title} vom ${dayjs(doc.documentDate).format("DD.MM.YYYY")}`
+            },
+            ...doc.rows
+          ])
+
+        })
+
+        itemInfo.value.deliveryDateType = "Leistungszeitraum"
+        itemInfo.value.deliveryDate = firstDate
+        itemInfo.value.deliveryDateEnd = lastDate
+
+        itemInfo.value.rows.forEach(row => {
+
+          row.discountPercent = 0
+
+          setRowData(row)
+
+        })
+
+        setPosNumbers()
+
+        console.log(linkedDocuments)
+
+        if (linkedDocuments.find(i => i.rows.find(x => x.agriculture.dieselUsage))) {
+          console.log("has diesel")
+
+          //Remove Existing Total Diesel Pos
+          itemInfo.value.rows = itemInfo.value.rows.filter(i => i.key !== "dieselPos")
+          //Remove Existing Total Ad Blue Pos
+          itemInfo.value.rows = itemInfo.value.rows.filter(i => i.key !== "adbluePos")
+
+          //Add Total Title
+          itemInfo.value.rows.push({
+            id: uuidv4(),
+            mode: "title",
+            text: "Allgemein"
+          })
+
+          processDieselPosition()
+        }
+
+      } else if (route.query.loadMode === "finalInvoice") {
+        let linkedDocuments = (await useEntities("createddocuments").select()).filter(i => JSON.parse(route.query.linkedDocuments).includes(i.id))
+
+        //TODO: Implement Checking for Same Customer, Contact and Project
+
+        console.log(linkedDocuments)
+
+        itemInfo.value.customer = linkedDocuments[0].customer
+        itemInfo.value.project = linkedDocuments[0].project
+        itemInfo.value.contact = linkedDocuments[0].contact
+
+        setCustomerData()
+
+        for await (const doc of linkedDocuments.filter(i => i.type === "confirmationOrders")) {
+          let linkedDocument = await useEntities("createddocuments").selectSingle(doc.id)
+
+          itemInfo.value.rows.push({
+            mode: "title",
+            text: linkedDocument.title,
+          })
+
+          itemInfo.value.rows.push(...linkedDocument.rows)
+        }
+
+        for await (const doc of linkedDocuments.filter(i => i.type === "quotes")) {
+          let linkedDocument = await useEntities("createddocuments").selectSingle(doc.id)
+
+          itemInfo.value.rows.push({
+            mode: "title",
+            text: linkedDocument.title,
+          })
+
+          itemInfo.value.rows.push(...linkedDocument.rows)
+        }
+
+        itemInfo.value.rows.push({
+          mode: "title",
+          text: "Abschlagsrechnungen",
+        })
+
+        for await (const doc of linkedDocuments.filter(i => i.type === "advanceInvoices")) {
+          itemInfo.value.rows.push({
+            mode: "free",
+            text: `Abschlagsrechnung ${doc.documentNumber}`,
+            quantity: 1,
+            taxPercent: 19, // TODO TAX PERCENTAGE
+            discountPercent: 0,
+            unit: 10,
+            inputPrice: useSum().getCreatedDocumentSumDetailed(doc).totalNet * -1,
+            linkedEntitys: [
+              {
+                type: "createddocuments",
+                subtype: "advanceInvoices",
+                id: doc.id
+              }
+            ],
+            editDisabled: true
+
+          })
+
+          updateCustomSurcharge()
+
+        }
+
+        setPosNumbers()
+
+
+      }
+
+
+    }
+
+    if (route.query.createddocument) {
+      itemInfo.value.createddocument = route.query.createddocument
+      let linkedDocument = await useEntities("createddocuments").selectSingle(itemInfo.value.createddocument,'',false)
+
+      if (route.query.optionsToImport) {
+        //Import only true
+        let optionsToImport = JSON.parse(route.query.optionsToImport)
+
+        console.log(optionsToImport)
+        console.log(linkedDocument)
+
+        if (optionsToImport.taxType) itemInfo.value.taxType = linkedDocument.taxType
+        if (optionsToImport.customer) itemInfo.value.customer = linkedDocument.customer
+        if (optionsToImport.letterhead) itemInfo.value.letterhead = linkedDocument.letterhead
+        if (optionsToImport.contact) itemInfo.value.contact = linkedDocument.contact
+        if (optionsToImport.deliveryDateType) itemInfo.value.deliveryDateType = linkedDocument.deliveryDateType
+        if (optionsToImport.deliveryDate) itemInfo.value.deliveryDate = linkedDocument.deliveryDate
+        if (optionsToImport.deliveryDateEnd) itemInfo.value.deliveryDateEnd = linkedDocument.deliveryDateEnd
+        if (optionsToImport.documentDate) itemInfo.value.documentDate = linkedDocument.documentDate
+        if (optionsToImport.paymentDays) itemInfo.value.paymentDays = linkedDocument.paymentDays
+        if (optionsToImport.payment_type) itemInfo.value.payment_type = linkedDocument.payment_type
+        if (optionsToImport.customSurchargePercentage) itemInfo.value.customSurchargePercentage = linkedDocument.customSurchargePercentage
+        if (optionsToImport.contactPerson) itemInfo.value.contactPerson = linkedDocument.contactPerson
+        if (optionsToImport.plant) itemInfo.value.plant = linkedDocument.plant
+        if (optionsToImport.project) itemInfo.value.project = linkedDocument.project
+        if (optionsToImport.title) itemInfo.value.title = linkedDocument.title
+        if (optionsToImport.description) itemInfo.value.description = linkedDocument.description
+        if (optionsToImport.startText) itemInfo.value.startText = linkedDocument.startText
+        if (optionsToImport.rows) itemInfo.value.rows = linkedDocument.rows
+        if (optionsToImport.endText) itemInfo.value.endText = linkedDocument.endText
+
+      } else {
+        // Import all
+
+        if (process.dev) console.log(linkedDocument)
+
+        itemInfo.value.taxType = linkedDocument.taxType
+        itemInfo.value.customer = linkedDocument.customer
+        await setCustomerData(null, true)
+        itemInfo.value.letterhead = linkedDocument.letterhead
+        itemInfo.value.contact = linkedDocument.contact
+        itemInfo.value.deliveryDateType = linkedDocument.deliveryDateType
+        itemInfo.value.deliveryDate = linkedDocument.deliveryDate
+        itemInfo.value.deliveryDateEnd = linkedDocument.deliveryDateEnd
+        itemInfo.value.documentDate = linkedDocument.documentDate
+        itemInfo.value.paymentDays = linkedDocument.paymentDays
+        itemInfo.value.payment_type = linkedDocument.payment_type
+        itemInfo.value.customSurchargePercentage = linkedDocument.customSurchargePercentage
+        itemInfo.value.contactPerson = linkedDocument.contactPerson
+        itemInfo.value.plant = linkedDocument.plant
+        itemInfo.value.project = linkedDocument.project
+        itemInfo.value.title = linkedDocument.title
+        itemInfo.value.description = linkedDocument.description
+        itemInfo.value.startText = linkedDocument.startText
+        itemInfo.value.rows = linkedDocument.rows
+        itemInfo.value.endText = linkedDocument.endText
+      }
+
+
+      checkCompatibilityWithInputPrice()
+
+      if (route.query.loadMode === "storno") {
+        itemInfo.value.rows.forEach(row => {
+          row.price = row.price * -1
+        })
+
+        itemInfo.value.documentDate = dayjs()
+
+        itemInfo.value.usedAdvanceInvoices = linkedDocument.usedAdvanceInvoices
+
+
+        itemInfo.value.description = `Stornorechnung zu Rechnung ${linkedDocument.documentNumber} vom ${dayjs(linkedDocument.documentDate).format('DD.MM.YYYY')}`
+
+        itemInfo.value.type = "cancellationInvoices"
+
+        setDocumentTypeConfig(true)
+
+      }
+
+
+    }
+
+    if (route.query.project) {
+      itemInfo.value.project = Number(route.query.project)
+
+      let project = await useEntities("projects").selectSingle(itemInfo.value.project)
+
+      if (!itemInfo.value.description) {
+        itemInfo.value.description = project.customerRef
+      }
+
+
+    }
+
+    if (route.query.plant) {
+      itemInfo.value.plant = Number(route.query.plant)
+    }
+
+    if (route.query.contact) itemInfo.value.contact = Number(route.query.contact)
+    if (route.query.customer) {
+      itemInfo.value.customer = Number(route.query.customer)
+      setCustomerData()
+    }
+  }
+
+
+  loaded.value = true
+
+}
+
+setupPage()
+
+const setDocumentTypeConfig = (withTexts = false) => {
+  if (itemInfo.value.type === "invoices" || itemInfo.value.type === "advanceInvoices" || itemInfo.value.type === "serialInvoices" || itemInfo.value.type === "cancellationInvoices") {
+    itemInfo.value.documentNumberTitle = "Rechnungsnummer"
+    itemInfo.value.title = `Rechnung-Nr. ${itemInfo.value.documentNumber ? itemInfo.value.documentNumber : "XXXX"}`
+  } else if (itemInfo.value.type === "quotes") {
+    itemInfo.value.documentNumberTitle = "Angebotsnummer"
+    itemInfo.value.title = `Angebot-Nr. ${itemInfo.value.documentNumber ? itemInfo.value.documentNumber : "XXXX"}`
+  } else if (itemInfo.value.type === "deliveryNotes") {
+    itemInfo.value.documentNumberTitle = "Lieferscheinnummer"
+    itemInfo.value.title = `Lieferschein-Nr. ${itemInfo.value.documentNumber ? itemInfo.value.documentNumber : "XXXX"}`
+  } else if (itemInfo.value.type === "confirmationOrders") {
+    itemInfo.value.documentNumberTitle = "Auftragsbestätigungsnr."
+    itemInfo.value.title = `Auftragsbestätigung-Nr. ${itemInfo.value.documentNumber ? itemInfo.value.documentNumber : "XXXX"}`
+  }
+
+  if (withTexts) {
+    itemInfo.value.startText = getTextTemplateByType(itemInfo.value.type).find(i => i.default && i.pos === "startText").text
+    itemInfo.value.endText = getTextTemplateByType(itemInfo.value.type).find(i => i.default && i.pos === "endText").text
+    //itemInfo.value.startText = texttemplates.value.find(i => i.documentType === itemInfo.value.type && i.default && i.pos === "startText").text
+    //itemInfo.value.endText = texttemplates.value.find(i => i.documentType === itemInfo.value.type && i.default && i.pos === "endText").text
+  }
+
+  itemInfo.value.letterhead = letterheads.value[0].id
+
+  if (itemInfo.value.type === "advanceInvoices" && !itemInfo.value.rows.find(i => i.text === "Abschlagszahlung")) {
+
+
+    itemInfo.value.rows.push({
+      mode: "free",
+      text: "Abschlagszahlung",
+      quantity: 1,
+      unit: 10,
+      price: 0,
+      taxPercent: 19,
+      discountPercent: 0,
+      advanceInvoiceData: advanceInvoiceData.value
+    })
+
+    setPosNumbers()
+  }
+
+
+}
+
+const setTaxType = () => {
+  if (itemInfo.value.taxType === "19 UStG") {
+    itemInfo.value.rows.forEach(row => {
+      row.taxPercent = 0
+    })
+  } else if (itemInfo.value.taxType === "13b UStG") {
+    itemInfo.value.rows.forEach(row => {
+      row.taxPercent = 0
+    })
+  } else if (itemInfo.value.taxType === "12.3 UStG") {
+    itemInfo.value.rows.forEach(row => {
+      row.taxPercent = 0
+    })
+  }
+}
+
+const setCustomerData = async (customerId, loadOnlyAdress = false) => {
+
+  if (customerId) {
+    itemInfo.value.customer = customerId
+  }
+
+  customers.value = await useEntities("customers").select()
+
+
+  let customer = customers.value.find(i => i.id === itemInfo.value.customer)
+  console.log(customer)
+  itemInfo.value.contact = null
+  if (customer) {
+    itemInfo.value.address.street = customer.infoData.street
+    itemInfo.value.address.zip = customer.infoData.zip
+    itemInfo.value.address.city = customer.infoData.city
+    itemInfo.value.address.special = customer.infoData.special
+
+    if (!loadOnlyAdress && customer.customPaymentDays) itemInfo.value.paymentDays = customer.customPaymentDays
+    if (!loadOnlyAdress && customer.custom_payment_type) itemInfo.value.payment_type = customer.custom_payment_type
+
+    if (!loadOnlyAdress && customer.customSurchargePercentage) {
+      itemInfo.value.customSurchargePercentage = customer.customSurchargePercentage
+      updateCustomSurcharge()
+    }
+
+    if (!loadOnlyAdress && contacts.value.filter(i => i.customer === itemInfo.value.customer).length === 1) {
+      itemInfo.value.contact = contacts.value.filter(i => i.customer === itemInfo.value.customer)[0].id
+    }
+
+  }
+
+
+}
+
+const setContactPersonData = async () => {
+  //console.log(itemInfo.value.contactPerson) //TODO: BACKEND CHANGE Set Profile
+  if(itemInfo.value.created_by) {
+    let  profile = (await useNuxtApp().$api(`/api/user/${itemInfo.value.created_by}`, {
+      method: "GET"
+    })).profile
+
+    itemInfo.value.contactPersonName = profile.full_name
+    itemInfo.value.contactTel = profile.mobile_tel || profile.fixed_tel || ""
+    itemInfo.value.contactEMail = profile.email
+  }
+}
+
+const showAdvanceInvoiceCalcModal = ref(false)
+const advanceInvoiceData = ref({
+  totalSumNet: 0,
+  partPerPecentage: 0,
+  part: 0
+})
+const importPositions = () => {
+  if (itemInfo.value.type === 'advanceInvoices') {
+    if (advanceInvoiceData.value.totalSumNet !== 0 && advanceInvoiceData.value.partPerPecentage !== 0 && advanceInvoiceData.value.part !== 0) {
+      showAdvanceInvoiceCalcModal.value = false
+
+      let lastId = 0
+      itemInfo.value.rows.forEach(row => {
+        if (row.id > lastId) lastId = row.id
+      })
+
+      itemInfo.value.rows.push({
+        id: lastId + 1,
+        mode: "free",
+        text: "Abschlagszahlung",
+        quantity: 1,
+        unit: 10,
+        price: advanceInvoiceData.value.part,
+        taxPercent: 19,
+        discountPercent: 0,
+        advanceInvoiceData: advanceInvoiceData.value
+      })
+      setPosNumbers()
+
+
+    }
+  }
+}
+
+const getRowAmount = (row) => {
+  return String(Number(Number(row.quantity) * Number(row.price) * (1 - Number(row.discountPercent) / 100)).toFixed(2)).replace('.', ',')
+}
+
+const getRowAmountUndiscounted = (row) => {
+  return String(Number(Number(row.quantity) * Number(row.price)).toFixed(2)).replace('.', ',')
+}
+
+const addPosition = (mode) => {
+
+  let lastId = 0
+  itemInfo.value.rows.forEach(row => {
+    if (row.id > lastId) lastId = row.id
+  })
+
+  let taxPercentage = 19
+
+  if (['13b UStG', '19 UStG', '12.3 UStG'].includes(itemInfo.value.taxType)) {
+    taxPercentage = 0
+  }
+
+  if (mode === 'free') {
+    let rowData = {
+      id: uuidv4(),
+      mode: "free",
+      text: "",
+      quantity: 1,
+      unit: 1,
+      inputPrice: 0,
+      price: 0,
+      taxPercent: taxPercentage,
+      discountPercent: 0,
+      linkedEntitys: []
+    }
+
+    itemInfo.value.rows.push({...rowData, ...auth.activeTenantData.extraModules.includes("agriculture") ? {agriculture: {}} : {}})
+
+  } else if (mode === 'normal') {
+    itemInfo.value.rows.push({
+      id: uuidv4(),
+      mode: "normal",
+      quantity: 1,
+      inputPrice: 0,
+      price: 0,
+      taxPercent: taxPercentage,
+      discountPercent: 0,
+      unit: 1,
+      linkedEntitys: []
+    })
+  } else if (mode === 'service') {
+    let rowData = {
+      id: uuidv4(),
+      mode: "service",
+      quantity: 1,
+      inputPrice: 0,
+      price: 0,
+      taxPercent: taxPercentage,
+      discountPercent: 0,
+      unit: 1,
+      linkedEntitys: []
+    }
+
+    //Push Agriculture Holder only if Module is activated
+    itemInfo.value.rows.push({...rowData, ...auth.activeTenantData.extraModules.includes("agriculture") ? {agriculture: {}} : {}})
+  } else if (mode === "pagebreak") {
+    itemInfo.value.rows.push({
+      id: uuidv4(),
+      mode: "pagebreak",
+      linkedEntitys: []
+    })
+  } else if (mode === "title") {
+    itemInfo.value.rows.push({
+      id: uuidv4(),
+      mode: "title",
+      linkedEntitys: []
+    })
+  } else if (mode === "text") {
+    itemInfo.value.rows.push({
+      id: uuidv4(),
+      mode: "text",
+      linkedEntitys: []
+    })
+  }
+
+  setPosNumbers()
+
+
+}
+
+const removePosition = (id) => {
+  itemInfo.value.rows = itemInfo.value.rows.filter(row => row.id !== id)
+  setPosNumbers()
+
+
+}
+
+const findDocumentErrors = computed(() => {
+  let errors = []
+
+  if (itemInfo.value.customer === null) errors.push({message: "Es ist kein Kunde ausgewählt", type: "breaking"})
+  if (itemInfo.value.contact === null) errors.push({message: "Es ist kein Kontakt ausgewählt", type: "info"})
+  if (itemInfo.value.letterhead === null) errors.push({message: "Es ist kein Briefpapier ausgewählt", type: "breaking"})
+  if (itemInfo.value.created_by === null || !itemInfo.value.created_by) errors.push({message: "Es ist kein Mitarbeiter ausgewählt", type: "breaking"})
+  if (itemInfo.value.address.street === null) errors.push({
+    message: "Es ist keine Straße im Adressat angegeben",
+    type: "breaking"
+  })
+  if (itemInfo.value.address.zip === null) errors.push({
+    message: "Es ist keine Postleitzahl im Adressat angegeben",
+    type: "breaking"
+  })
+  if (itemInfo.value.address.city === null) errors.push({
+    message: "Es ist keine Stadt im Adressat angegeben",
+    type: "breaking"
+  })
+
+  if (itemInfo.value.project === null) errors.push({message: "Es ist kein Projekt ausgewählt", type: "info"})
+  if (itemInfo.value.plant === null) errors.push({message: "Es ist kein Objekt ausgewählt", type: "info"})
+  if (itemInfo.value.contract === null) errors.push({message: "Es ist kein Vertrag ausgewählt", type: "info"})
+
+  if (['Lieferzeitraum', 'Leistungszeitraum'].includes(itemInfo.value.deliveryDateType) && itemInfo.value.type !== "serialInvoices") {
+    if (itemInfo.value.deliveryDateEnd === null) errors.push({
+      message: `Es ist kein Enddatum für den ${itemInfo.value.deliveryDateType} angegeben`,
+      type: "breaking"
+    })
+  }
+
+
+  if (itemInfo.value.rows.length === 0) {
+    errors.push({message: "Es sind keine Positionen angegeben", type: "breaking"})
+  } else {
+    itemInfo.value.rows.forEach((row,index) => {
+
+      if (itemInfo.value.type !== "quotes" && row.optional) {
+        errors.push({
+          message: `Position ${row.pos} ist als Optional markiert. Dies wird nur in Angeboten unterstützt.`,
+          type: "breaking"
+        })
+      }
+
+      if (itemInfo.value.type !== "quotes" && row.alternative) {
+        errors.push({
+          message: `Position ${row.pos} ist als Alternativ markiert. Dies wird nur in Angeboten unterstützt.`,
+          type: "breaking"
+        })
+      }
+
+      if (row.mode === "normal" && !row.product) errors.push({
+        message: `In Position ${row.pos} ist kein Artikel ausgewählt`,
+        type: "breaking"
+      })
+      if (row.mode === "service" && !row.service) errors.push({
+        message: `In Position ${row.pos} ist keine Leistung ausgewählt`,
+        type: "breaking"
+      })
+      if (row.mode === "title" && !row.text) errors.push({
+        message: `In Position ${row.pos} ist kein Titel hinterlegt`,
+        type: "breaking"
+      })
+      //if(row.mode === "text" && !row.text) errors.push({message: `In einer Freitext Position ist kein Titel hinterlegt`, type: "breaking"})
+      if (row.mode === "free" && !row.text) errors.push({
+        message: `In einer freien Position ist kein Titel hinterlegt`,
+        type: "breaking"
+      })
+
+      if (["normal", "service", "free"].includes(row.mode)) {
+
+        if (!row.taxPercent && typeof row.taxPercent !== "number" && itemInfo.value.type !== "deliveryNotes") errors.push({
+          message: `In Position ${row.pos} ist kein Steuersatz hinterlegt`,
+          type: "breaking"
+        })
+        if (!row.price && typeof row.price !== "number" && itemInfo.value.type !== "deliveryNotes") errors.push({
+          message: `In Position ${row.pos} ist kein Preis hinterlegt`,
+          type: "breaking"
+        })
+        if (!row.unit) errors.push({message: `In Position ${row.pos} ist keine Einheit hinterlegt`, type: "breaking"})
+
+      }
+
+      if (row.agriculture) {
+        if (row.agriculture.dieselUsage && (!row.agriculture.dieselPrice && typeof row.agriculture.dieselPrice !== "number")) {
+          errors.push({message: `In Position ${row.pos} ist kein Dieselpreis hinterlegt`, type: "breaking"})
+        } else if (row.agriculture.dieselUsage && row.agriculture.dieselPrice === 0) {
+          errors.push({message: `In Position ${row.pos} ist 0,00 € als Dieselpreis hinterlegt`, type: "info"})
+        }
+      }
+
+      if (index === itemInfo.value.rows.length - 1 && row.mode  === "pagebreak") {
+        errors.push({message: `Die letze Position darf kein Seitenumbruch sein`, type: "breaking"})
+      }
+
+    })
+  }
+
+
+  if (itemInfo.value.type === "serialInvoices") {
+    if (!itemInfo.value.serialConfig.intervall) errors.push({
+      message: `Kein Intervall für die Ausführung festgelegt`,
+      type: "breaking"
+    })
+    if (!itemInfo.value.serialConfig.dateDirection) errors.push({
+      message: `Kein Richtung für die Datierung festgelegt`,
+      type: "breaking"
+    })
+    if (!itemInfo.value.serialConfig.firstExecution) errors.push({
+      message: `Kein Datum für die erste Ausführung festgelegt`,
+      type: "breaking"
+    })
+    if (!itemInfo.value.serialConfig.executionUntil) errors.push({
+      message: `Kein Datum für die letzte Ausführung festgelegt`,
+      type: "info"
+    })
+  }
+
+
+  return errors.sort((a) => (a.type === "breaking") ? -1 : 1)
+})
+
+const tabItems = computed(() => {
+  return [
+    {
+      label: "Editor"
+    },
+    {
+      label: "Vorschau",
+      disabled: findDocumentErrors.value.filter(i => i.type === 'breaking').length > 0
+    }
+  ]
+})
+
+const renderCurrency = (value, currency = "€") => {
+  //return Number(value).toFixed(2).replace(".",",") + " " + currency
+  return useCurrency(value, currency)
+}
+
+const documentTotal = computed(() => {
+  let totalNet = 0
+  let total19 = 0
+  let totalNet19 = 0
+  let total7 = 0
+  let totalNet7 = 0
+  let total0 = 0
+  let totalNet0 = 0
+
+  itemInfo.value.rows.filter(i => !i.optional && !i.alternative).forEach(row => {
+    if (!['pagebreak', 'title', 'text'].includes(row.mode)) {
+      let rowPrice = Number(Number(row.quantity) * Number(row.price) * (1 - Number(row.discountPercent) / 100)).toFixed(3)
+      totalNet = totalNet + Number(rowPrice)
+
+      if (row.taxPercent === 19) {
+        total19 = total19 + Number(rowPrice * 0.19)
+        totalNet19 += Number(rowPrice)
+      } else if (row.taxPercent === 7) {
+        total7 = total7 + Number(rowPrice * 0.07)
+        totalNet7 += Number(rowPrice)
+      } else if (row.taxPercent === 0) {
+        totalNet0 += Number(rowPrice)
+      }
+    }
+  })
+
+  //Title Sum
+
+  let titleSums = {}
+  let titleSumsTransfer = {}
+  let lastTitle = ""
+  let transferCounter = 0
+
+  itemInfo.value.rows.forEach(row => {
+    if (row.mode === 'title') {
+      let title = `${row.pos} - ${row.text}`
+      titleSums[title] = 0
+      lastTitle = title
+
+      //Übertrag berechnen
+      titleSumsTransfer[Object.keys(titleSums)[row.pos - 2]] = transferCounter
+
+
+    } else if (!['pagebreak', 'text'].includes(row.mode) && lastTitle !== "" && !row.optional && !row.alternative) {
+      titleSums[lastTitle] = Number(titleSums[lastTitle]) + Number(Number(row.quantity) * Number(row.price) * (1 - Number(row.discountPercent) / 100))
+      transferCounter += Number(Number(row.quantity) * Number(row.price) * (1 - Number(row.discountPercent) / 100))
+      console.log(transferCounter)
+    }
+  })
+
+  console.log(titleSumsTransfer)
+
+
+  let totalGross = Number(totalNet.toFixed(2)) + Number(total19.toFixed(2)) + Number(total7.toFixed(2))
+
+  let totalGrossAlreadyPaid = 0
+
+  itemInfo.value.usedAdvanceInvoices.forEach(advanceInvoiceId => {
+    let advanceInvoice = createddocuments.value.find(i => i.id === advanceInvoiceId)
+
+    let priceNet = advanceInvoice.rows.find(i => i.advanceInvoiceData).price
+
+    let partSum = priceNet * ((100 + advanceInvoice.rows.find(i => i.advanceInvoiceData).taxPercent) / 100)
+
+    totalGrossAlreadyPaid += partSum
+  })
+
+  console.log(totalGrossAlreadyPaid)
+
+  let sumToPay = 0
+
+  if (itemInfo.value.type === "invoices") {
+    sumToPay = totalGross - totalGrossAlreadyPaid
+  } else if (itemInfo.value.type === "cancellationInvoices") {
+    sumToPay = totalGross + totalGrossAlreadyPaid
+
+  }
+
+
+  return {
+    titleSums: titleSums,
+    titleSumsTransfer: titleSumsTransfer,
+    totalNet: totalNet,
+    total19: total19,
+    totalNet19: totalNet19,
+    total7: total7,
+    totalNet7: totalNet7,
+    total0: total0,
+    totalNet0: totalNet0,
+    totalGross: totalGross,
+    totalGrossAlreadyPaid: totalGrossAlreadyPaid,
+    totalSumToPay: sumToPay
+  }
+})
+
+const documentReport = computed(() => {
+
+  let totalProductsPurchasePrice = 0
+  let totalProductsFromServicesPurchasePrice = 0
+  let totalHoursFromServices = {
+    total: 0,
+    totalPurchasePrice: 0,
+    byName: {}
+  }
+  let totalHoursSellingPrice = 0
+
+
+  itemInfo.value.rows.filter(i => !i.optional && !i.alternative).forEach(row => {
+    if (row.product) {
+      let product = products.value.find(i => i.id === row.product)
+
+      totalProductsPurchasePrice += product.purchasePrice * row.quantity
+
+    } else if (row.service) {
+      let service = services.value.find(i => i.id === row.service)
+
+      if (service.materialComposition) {
+        service.materialComposition.forEach(entry => {
+          let productData = products.value.find(i => i.id === entry.product)
+
+          totalProductsFromServicesPurchasePrice += productData.purchasePrice * entry.quantity * row.quantity
+        })
+      }
+
+      if (service.personalComposition) {
+        service.personalComposition.forEach(entry => {
+          totalHoursFromServices.total += entry.quantity * row.quantity
+
+          totalHoursFromServices.totalPurchasePrice += entry.quantity * entry.purchasePrice * row.quantity
+          totalHoursSellingPrice += entry.quantity * entry.price * row.quantity
+
+          if (totalHoursFromServices.byName[entry.name]) {
+            totalHoursFromServices.byName[entry.name] += entry.quantity * row.quantity
+          } else {
+            totalHoursFromServices.byName[entry.name] = entry.quantity * row.quantity
+          }
+
+
+        })
+      } else {
+        //totalHoursSellingPrice += service.sellingPriceComposed.totalWorker * row.quantity
+      }
+
+      //totalProductsPurchasePrice += product.purchasePrice * row.quantity
+
+    }
+  })
+
+  let totalMargin = documentTotal.value.totalNet - totalProductsPurchasePrice - totalProductsFromServicesPurchasePrice - totalHoursFromServices.totalPurchasePrice
+
+
+  return {
+    totalProductsPurchasePrice,
+    totalProductsFromServicesPurchasePrice,
+    totalMargin,
+    totalHoursFromServices,
+    totalHoursSellingPrice,
+  }
+
+})
+
+const processDieselPosition = () => {
+  let agricultureData = {
+    dieselUsageTotal: 0,
+    dieselPriceTotal: 0,
+    adblueUsageTotal: 0,
+    adbluePriceTotal: 0
+  }
+
+  itemInfo.value.rows.forEach(row => {
+    if (row.agriculture && row.agriculture.dieselUsage) {
+      console.log(row.agriculture)
+      agricultureData.dieselUsageTotal += Number(row.agriculture.dieselUsage)
+      agricultureData.dieselPriceTotal += Number(row.agriculture.dieselPrice || 0) * Number(row.agriculture.dieselUsage)
+
+      agricultureData.adblueUsageTotal += Number(row.agriculture.adblueUsage || 0)
+      agricultureData.adbluePriceTotal += Number(row.agriculture.adbluePrice || 0) * Number(row.agriculture.adblueUsage || 0)
+    }
+  })
+  console.log(agricultureData)
+
+  if (agricultureData.dieselUsageTotal !== 0) {
+
+    if (itemInfo.value.rows.find(i => i.key === "dieselPos")) {
+      let existingIndex = itemInfo.value.rows.findIndex(i => i.key === "dieselPos")
+
+      itemInfo.value.rows[existingIndex] = {
+        ...itemInfo.value.rows[existingIndex],
+        price: agricultureData.dieselPriceTotal,
+        text: `${agricultureData.dieselUsageTotal} L Diesel`,
+      }
+
+      let existingAdblueIndex = itemInfo.value.rows.findIndex(i => i.key === "adbluePos")
+
+      itemInfo.value.rows[existingAdblueIndex] = {
+        ...itemInfo.value.rows[existingAdblueIndex],
+        price: agricultureData.adbluePriceTotal,
+        text: `${agricultureData.adblueUsageTotal} L AdBlue`,
+      }
+
+    } else {
+      itemInfo.value.rows.push({
+        mode: "free",
+        text: `${(agricultureData.dieselUsageTotal).toFixed(2).replace(".", ",")} L Diesel`,
+        quantity: 1,
+        unit: 10,
+        price: agricultureData.dieselPriceTotal,
+        taxPercent: 19,
+        discountPercent: 0,
+        key: "dieselPos"
+      })
+
+      itemInfo.value.rows.push({
+        mode: "free",
+        text: `${(agricultureData.adblueUsageTotal).toFixed(2).replace(".", ",")} L AdBlue`,
+        quantity: 1,
+        unit: 10,
+        price: agricultureData.adbluePriceTotal,
+        taxPercent: 19,
+        discountPercent: 0,
+        key: "adbluePos"
+      })
+
+      setPosNumbers()
+    }
+  }
+
+  itemInfo.value.agriculture = {...itemInfo.value.agriculture, ...agricultureData}
+}
+
+const getDocumentData = async () => {
+
+  let customerData = customers.value.find(i => i.id === itemInfo.value.customer)
+  let contactData = contacts.value.find(i => i.id === itemInfo.value.contact)
+  let businessInfo = auth.activeTenantData.businessInfo
+
+  if (auth.activeTenantData.extraModules.includes("agriculture")) {
+    itemInfo.value.rows.forEach(row => {
+      if (row.agriculture && row.agriculture.dieselUsage) {
+        row.agriculture.description = `${row.agriculture.dieselUsage} L Diesel zu ${renderCurrency(row.agriculture.dieselPrice)}/L verbraucht ${row.description ? "\n" + row.description : ""}`
+      }
+    })
+  }
+
+  let rows = itemInfo.value.rows
+
+  if (itemInfo.value.taxType === "13b UStG" || itemInfo.value.taxType === "19 UStG") {
+    rows = rows.map(row => {
+      return {
+        ...row,
+        taxPercent: 0
+      }
+    })
+  }
+
+
+  rows = itemInfo.value.rows.map(row => {
+
+    let unit = units.value.find(i => i.id === row.unit)
+
+    if (!['pagebreak', 'title'].includes(row.mode)) {
+      if (row.agriculture && row.agriculture.description) {
+        console.log("Row has Agri")
+        row.descriptionText = row.agriculture.description
+      } else if (row.description) {
+        console.log("Row has no Agri")
+        row.descriptionText = row.description
+      } else {
+        delete row.descriptionText
+      }
+    }
+
+    if (!['pagebreak', 'title', 'text'].includes(row.mode)) {
+      if (row.mode === 'normal') row.text = products.value.find(i => i.id === row.product).name
+      if (row.mode === 'service') row.text = services.value.find(i => i.id === row.service).name
+
+
+      return {
+        ...row,
+        rowAmount: `${getRowAmount(row)} €`,
+        quantity: String(row.quantity).replace(".", ","),
+        unit: unit.short,
+        pos: String(row.pos),
+        price: `${String(row.price.toFixed(2)).replace(".", ",")} €`,
+        discountText: `(Rabatt: ${row.discountPercent} %)`
+      }
+    } else {
+      return row
+    }
+  })
+
+  //Compile Start & EndText
+  const templateStartText = Handlebars.compile(itemInfo.value.startText);
+  const templateEndText = Handlebars.compile(itemInfo.value.endText);
+
+  const generateContext = (itemInfo, contactData) => {
+    return {
+      lohnkosten: documentReport.value.totalHoursSellingPrice ? useCurrency(documentReport.value.totalHoursSellingPrice) : null,
+      anrede: (contactData && contactData.salutation) || (customerData && customerData.salutation),
+      titel: (contactData && contactData.title) || (customerData && customerData.title),
+      vorname: (contactData && contactData.firstName) || (customerData && customerData.firstname),
+      nachname: (contactData && contactData.lastName) || (customerData && customerData.lastname),
+      kundenname: customerData && customerData.name,
+      zahlungsziel_in_tagen: itemInfo.paymentDays,
+      zahlungsart: itemInfo.payment_type === "transfer" ? "Überweisung" : "Lastschrift",
+      diesel_gesamtverbrauch: (itemInfo.agriculture && itemInfo.agriculture.dieselUsageTotal) && itemInfo.agriculture.dieselUsageTotal
+    }
+  }
+
+  let contactPerson = (await useNuxtApp().$api(`/api/user/${itemInfo.value.created_by}`, {
+    method: "GET"
+  })).profile
+
+  let returnTitleSums = {}
+  if (Object.keys(documentTotal.value.titleSums).length > 0) {
+    Object.keys(documentTotal.value.titleSums).forEach(key => {
+      returnTitleSums[key] = renderCurrency(documentTotal.value.titleSums[key])
+    })
+  }
+
+  let returnTitleSumsTransfer = {}
+  if (Object.keys(documentTotal.value.titleSumsTransfer).length > 0) {
+    Object.keys(documentTotal.value.titleSumsTransfer).forEach(key => {
+      returnTitleSumsTransfer[key] = renderCurrency(documentTotal.value.titleSumsTransfer[key])
+    })
+  }
+
+  console.log(returnTitleSums)
+  console.log(returnTitleSumsTransfer)
+
+
+  const returnData = {
+    type: itemInfo.value.type,
+    taxType: itemInfo.value.taxType,
+    adressLine: `${businessInfo.name}, ${businessInfo.street}, ${businessInfo.zip} ${businessInfo.city}`,
+    /*recipient: {
+      name: customerData.name,
+      contact: contactData ? `${contactData.firstName} ${contactData.lastName}` : "",
+      street: itemInfo.value.address.street || customerData.infoData.street,
+      special: itemInfo.value.address.special || customerData.infoData.special,
+      city: itemInfo.value.address.city || customerData.infoData.city,
+      zip: itemInfo.value.address.zip || customerData.infoData.zip
+    },*/
+    recipient: [
+      customerData.name,
+      ...customerData.nameAddition ? [customerData.nameAddition] : [],
+      ...contactData ? [`${contactData.firstName} ${contactData.lastName}`] : [],
+      itemInfo.value.address.street,
+      ...itemInfo.value.address.special ? [itemInfo.value.address.special] : [],
+      `${itemInfo.value.address.zip} ${itemInfo.value.address.city}`,
+
+    ],
+    /*info: {
+      customerNumber: customerData.customerNumber,
+      documentNumber: itemInfo.value.documentNumber,
+      documentNumberTitle: itemInfo.value.documentNumberTitle,
+      documentDate: dayjs(itemInfo.value.documentDate).format("DD.MM.YYYY"),
+      deliveryDate: dayjs(itemInfo.value.deliveryDate).format("DD.MM.YYYY"),
+      deliveryDateEnd: itemInfo.value.deliveryDateEnd ? dayjs(itemInfo.value.deliveryDateEnd).format("DD.MM.YYYY") : null,
+      deliveryDateType: itemInfo.value.deliveryDateType,
+      contactPerson: contactPerson.fullName,
+      contactTel: contactPerson.fixedTel || contactPerson.mobileTel,
+      contactEMail: contactPerson.email,
+      project: projects.value.find(i => i.id === itemInfo.value.project) ? projects.value.find(i => i.id === itemInfo.value.project).name : null,
+      plant: plants.value.find(i => i.id === itemInfo.value.plant) ? plants.value.find(i => i.id === itemInfo.value.plants).name : null,
+    },*/
+    info: [
+      {
+        label: itemInfo.value.documentNumberTitle,
+        content: itemInfo.value.documentNumber || "XXXX",
+      }, {
+        label: "Kundennummer",
+        content: customerData.customerNumber,
+      }, {
+        label: "Belegdatum",
+        content: itemInfo.value.documentDate ? dayjs(itemInfo.value.documentDate).format("DD.MM.YYYY") : "XXXX",
+      },
+      ...itemInfo.value.deliveryDateType !== "Kein Lieferdatum anzeigen" ? [{
+        label: itemInfo.value.deliveryDateType,
+        content: !['Lieferzeitraum', 'Leistungszeitraum'].includes(itemInfo.value.deliveryDateType) ? (itemInfo.value.deliveryDate ? dayjs(itemInfo.value.deliveryDate).format("DD.MM.YYYY") : "XXXX") : `${itemInfo.value.deliveryDate ? dayjs(itemInfo.value.deliveryDate).format("DD.MM.YYYY") : "XXXX"} - ${itemInfo.value.deliveryDateEnd ? dayjs(itemInfo.value.deliveryDateEnd).format("DD.MM.YYYY") : "XXXX"}`,
+      }] : [],
+      /*{
+        label: itemInfo.value.deliveryDateType,
+        content: !['Lieferzeitraum','Leistungszeitraum'].includes(itemInfo.value.deliveryDateType) ? dayjs(itemInfo.value.deliveryDate).format("DD.MM.YYYY") : `${dayjs(itemInfo.value.deliveryDate).format("DD.MM.YYYY")} - ${dayjs(itemInfo.value.deliveryDateEnd).format("DD.MM.YYYY")}`,
+      },*/
+      {
+        label: "Ansprechpartner",
+        content: contactPerson.full_name,
+      },
+      ...itemInfo.value.contactTel || contactPerson.fixed_tel || contactPerson.mobile_tel ? [{
+        label: "Telefon",
+        content: itemInfo.value.contactTel || contactPerson.fixed_tel || contactPerson.mobile_tel,
+      }] : [],
+      ...contactPerson.email ? [{
+        label: "E-Mail",
+        content: contactPerson.email,
+      }] : [],
+      ...itemInfo.value.plant ? [{
+        label: "Objekt",
+        content: plants.value.find(i => i.id === itemInfo.value.plant).name,
+      }] : [],
+      ...itemInfo.value.project ? [{
+        label: "Projekt",
+        content: projects.value.find(i => i.id === itemInfo.value.project).name
+      }] : [],
+      ...itemInfo.value.contract ? [{
+        label: "Vertrag",
+        content: contracts.value.find(i => i.id === itemInfo.value.contract).contractNumber
+      }] : []
+    ],
+    title: itemInfo.value.title,
+    description: itemInfo.value.description,
+    endText: templateEndText(generateContext(itemInfo.value, contactData)),
+    startText: templateStartText(generateContext(itemInfo.value, contactData)),
+    rows: rows,
+    totalArray: [
+      {
+        label: "Nettobetrag",
+        content: renderCurrency(documentTotal.value.totalNet),
+      },
+      ...rows.find(i => i.taxPercent === 19) && !["13b UStG"].includes(itemInfo.value.taxType) ? [{
+        label: `zzgl. 19% USt auf ${renderCurrency(documentTotal.value.totalNet19)}`,
+        content: renderCurrency(documentTotal.value.total19),
+      }] : [],
+      ...rows.find(i => i.taxPercent === 7) && !["13b UStG"].includes(itemInfo.value.taxType) ? [{
+        label: `zzgl. 7% USt auf ${renderCurrency(documentTotal.value.totalNet7)}`,
+        content: renderCurrency(documentTotal.value.total7),
+      }] : [],
+      ...rows.find(i => i.taxPercent === 0) && !["13b UStG"].includes(itemInfo.value.taxType) ? [{
+        label: `zzgl. 0% USt auf ${renderCurrency(documentTotal.value.totalNet0)}`,
+        content: renderCurrency(documentTotal.value.total0),
+      }] : [],
+      {
+        label: "Gesamtbetrag",
+        content: renderCurrency(documentTotal.value.totalGross),
+      },
+    ],
+    total: {
+      totalNet: renderCurrency(documentTotal.value.totalNet),
+      total19: renderCurrency(documentTotal.value.total19),
+      total0: renderCurrency(documentTotal.value.total0),
+      totalGross: renderCurrency(documentTotal.value.totalGross),
+      totalGrossAlreadyPaid: renderCurrency(documentTotal.value.totalGrossAlreadyPaid),
+      totalSumToPay: renderCurrency(documentTotal.value.totalSumToPay),
+      titleSums: returnTitleSums,
+      titleSumsTransfer: returnTitleSumsTransfer
+    },
+    agriculture: itemInfo.value.agriculture,
+    usedAdvanceInvoices: itemInfo.value.usedAdvanceInvoices.map(i => {
+      return createddocuments.value.find(x => x.id === i)
+    })
+  }
+
+  console.log(returnData)
+
+  return returnData
+}
+
+const showDocument = ref(false)
+const uri = ref("")
+const generateDocument = async () => {
+  showDocument.value = false
+  const path = letterheads.value.find(i => i.id === itemInfo.value.letterhead).path
+
+  uri.value = await useFunctions().useCreatePDF(await getDocumentData(), path, "createdDocument")
+  /*uri.value = await useNuxtApp().$api("/api/functions/createinvoicepdf",{
+    method: "POST",
+    body: {
+      invoiceData: await getDocumentData(),
+      backgroundPath: path
+    }
+  })*/
+
+  showDocument.value = true
+}
+
+const onChangeTab = (index) => {
+  if (index === 1) {
+    generateDocument()
+  }
+}
+
+const setPosNumbers = () => {
+  let mainIndex = 1
+  let subIndex = 1
+  let rows = itemInfo.value.rows.map(row => {
+    if (row.mode === 'title') {
+      row.pos = mainIndex
+      mainIndex += 1
+      subIndex = 1
+    } else if (!['pagebreak', 'title', 'text'].includes(row.mode)) {
+      row.pos = itemInfo.value.rows.filter(i => i.mode === "title").length === 0 ? `${subIndex}` : `${mainIndex - 1}.${subIndex}`
+      subIndex += 1
+    }
+
+    if (!row.id) {
+      row.id = uuidv4()
+    }
+
+    return row
+  })
+}
+
+const saveSerialInvoice = async () => {
+  let createData = {
+    type: itemInfo.value.type,
+    state: 'Erstellt',
+    customer: itemInfo.value.customer,
+    contact: itemInfo.value.contact,
+    contract: itemInfo.value.contract,
+    address: itemInfo.value.address,
+    project: itemInfo.value.project,
+    paymentDays: itemInfo.value.paymentDays,
+    payment_type: itemInfo.value.payment_type,
+    deliveryDateType: "Leistungszeitraum",
+    createdBy: itemInfo.value.createdBy,
+    created_by: itemInfo.value.created_by,
+    title: itemInfo.value.title,
+    description: itemInfo.value.description,
+    startText: itemInfo.value.startText,
+    endText: itemInfo.value.endText,
+    rows: itemInfo.value.rows,
+    contactPerson: itemInfo.value.contactPerson,
+    serialConfig: itemInfo.value.serialConfig,
+    letterhead: itemInfo.value.letterhead,
+    taxType:itemInfo.value.taxType
+  }
+
+  let data = null
+
+  if (route.params.id) {
+    data = await useEntities("createddocuments").update(route.params.id, createData)
+  } else {
+    data = await useEntities("createddocuments").create(createData)
+  }
+
+  await router.push(`/createDocument/edit/${data.id}`)
+}
+
+const saveDocument = async (state, resetup = false) => {
+
+  itemInfo.value.state = state
+
+  if (state !== "Entwurf") {
+    console.log("???")
+
+    let type = ""
+    if (itemInfo.value.type === "advanceInvoices" || itemInfo.value.type === "cancellationInvoices") {
+      type = "invoices"
+    } else {
+      type = itemInfo.value.type
+    }
+
+    try {
+      itemInfo.value.documentNumber = await useFunctions().useNextNumber(type) //data.usedNumber
+
+      setDocumentTypeConfig(false)
+    } catch {
+      console.log("Error Happend")
+    }
+
+
+  }
+
+  if (auth.activeTenantData.extraModules.includes("agriculture")) {
+    itemInfo.value.rows.forEach(row => {
+      if (row.agriculture && row.agriculture.dieselUsage) {
+        row.agriculture.description = `${row.agriculture.dieselUsage} L Diesel zu ${renderCurrency(row.agriculture.dieselPrice)}/L verbraucht ${row.description ? "\n" + row.description : ""}`
+      }
+    })
+  }
+
+  //Check if Agricultural Description is Present
+  itemInfo.value.rows = itemInfo.value.rows.map(row => {
+
+    let descriptionText = ""
+
+    if (row.agriculture && row.agriculture.description) {
+      descriptionText = row.agriculture.description
+    } else {
+      descriptionText = row.description ? row.description : null
+    }
+
+    return {
+      ...row,
+      descriptionText: descriptionText
+    }
+  })
+
+  let createData = {
+    type: itemInfo.value.type,
+    taxType: ['invoices', 'cancellationInvoices', 'advanceInvoices', 'qoutes', 'confirmationOrders'].includes(itemInfo.value.type) ? itemInfo.value.taxType : null,
+    state: itemInfo.value.state || "Entwurf",
+    customer: itemInfo.value.customer,
+    contact: itemInfo.value.contact,
+    contract: itemInfo.value.contract,
+    address: itemInfo.value.address,
+    project: itemInfo.value.project,
+    plant: itemInfo.value.plant,
+    documentNumber: itemInfo.value.documentNumber,
+    documentDate: itemInfo.value.documentDate,
+    deliveryDate: itemInfo.value.deliveryDate,
+    deliveryDateEnd: itemInfo.value.deliveryDateEnd,
+    paymentDays: itemInfo.value.paymentDays,
+    payment_type: itemInfo.value.payment_type,
+    deliveryDateType: itemInfo.value.deliveryDateType,
+    info: {},
+    createdBy: itemInfo.value.createdBy,
+    created_by: itemInfo.value.created_by,
+    title: itemInfo.value.title,
+    description: itemInfo.value.description,
+    startText: itemInfo.value.startText,
+    endText: itemInfo.value.endText,
+    rows: itemInfo.value.rows,
+    contactPerson: itemInfo.value.contactPerson,
+    linkedDocument: itemInfo.value.linkedDocument,
+    agriculture: itemInfo.value.agriculture,
+    letterhead: itemInfo.value.letterhead,
+    usedAdvanceInvoices: itemInfo.value.usedAdvanceInvoices,
+    customSurchargePercentage: itemInfo.value.customSurchargePercentage,
+    report: documentReport.value
+  }
+
+  if (route.params.id) {
+    //await dataStore.updateItem("createddocuments", {...createData, id: itemInfo.value.id})
+    await useEntities("createddocuments").update(itemInfo.value.id, {...createData, id: itemInfo.value.id})
+  } else {
+    const data = await useEntities("createddocuments").create(createData)
+    console.log(data)
+    await router.push(`/createDocument/edit/${data.id}`)
+  }
+
+  if (resetup) await setupPage()
+}
+
+const selectedTab = ref(0)
+
+const closeDocument = async () => {
+
+  if(selectedTab.value === 0) {
+    await generateDocument()
+    selectedTab.value = 1
+  } else {
+    loaded.value = false
+
+    await saveDocument("Gebucht")
+
+    await generateDocument()
+
+    let fileData = {}
+
+    fileData.project = itemInfo.value.project
+    fileData.createddocument = itemInfo.value.id
+
+    let mappedType = itemInfo.value.type
+
+    if (mappedType === "advanceInvoices" || mappedType === "cancellationInvoices") {
+      mappedType = "invoices"
+    }
+
+    const folders = await useEntities("folders").select()
+    console.log(folders)
+    fileData.folder = folders.find(i => i.function === mappedType && i.year === Number(dayjs().format("YYYY"))).id
+
+    const tags = await useEntities("filetags").select()
+    console.log(tags)
+    fileData.type = tags.find(i => i.createdDocumentType === mappedType).id
+
+    function dataURLtoFile(dataurl, filename) {
+      var arr = dataurl.split(","),
+          mime = arr[0].match(/:(.*?);/)[1],
+          bstr = atob(arr[arr.length - 1]),
+          n = bstr.length,
+          u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new File([u8arr], filename, {type: mime});
+    }
+
+    let file = dataURLtoFile(uri.value, `${itemInfo.value.documentNumber}.pdf`)
+
+    await useFiles().uploadFiles(fileData, [file])
+
+    await router.push(`/createDocument/show/${itemInfo.value.id}`)
+  }
+
+
+
+
+}
+
+const getTextTemplateByType = (type, pos) => {
+
+  let finalType = type
+
+  if (type === "serialInvoices") {
+    finalType = "invoices"
+  }
+
+  if (pos) {
+    return texttemplates.value.filter(i => i.documentType === finalType && i.pos === pos)
+  } else {
+    return texttemplates.value.filter(i => i.documentType === finalType)
+  }
+
+
+}
+
+const checkCompatibilityWithInputPrice = () => {
+  itemInfo.value.rows.forEach(row => {
+    if (!row.inputPrice) {
+      row.inputPrice = row.price
+    }
+  })
+}
+
+const updateCustomSurcharge = () => {
+  itemInfo.value.rows.forEach(row => {
+    if (!["pagebreak", "title", "text"].includes(row.mode) /*&& !row.linkedEntitys.find(i => i.type === "createddocuments" && i.subtype === "advanceInvoices")*/) {
+      //setRowData(row)
+
+      row.price = Number((row.inputPrice * (1 + itemInfo.value.customSurchargePercentage / 100)).toFixed(2))
+
+
+    }/* else if(!["pagebreak","title","text"].includes(row.mode) /!*&& row.linkedEntitys.find(i => i.type === "createddocuments" && i.subtype === "advanceInvoices")*!/) {
+      row.price = row.inputPrice
+    }*/
+  })
+}
+
+const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {}) => {
+  console.log("Set Row Data")
+  if (service && service.id) {
+    row.service = service.id
+    services.value = await useEntities("services").select("*")
+  }
+
+  if (product && product.id) {
+    row.product = product.id
+    products.value = await useEntities("products").select("*")
+  }
+
+  if (row.service) {
+    console.log(service)
+    if(service.unit) {
+      row.unit = service.unit
+    } else {
+      let selectedService = services.value.find(i => i.id === row.service)
+      console.log(selectedService)
+      if(selectedService.unit?.id) {
+        row.unit = selectedService.unit.id
+      } else {
+        row.unit = selectedService.unit
+      }
+    }
+
+    //row.unit = service.unit ? service.unit : services.value.find(i => i.id === row.service).unit
+    row.inputPrice = ((service.sellingPriceComposed.total || service.sellingPrice) ? (service.sellingPriceComposed.total || service.sellingPrice) : (services.value.find(i => i.id === row.service).sellingPriceComposed.total || services.value.find(i => i.id === row.service).sellingPrice))
+    row.description = service.description ? service.description : (services.value.find(i => i.id === row.service) ? services.value.find(i => i.id === row.service).description : "")
+
+    if (['13b UStG', '19 UStG'].includes(itemInfo.value.taxType)) {
+      row.taxPercent = 0
+    } else {
+      row.taxPercent = service.taxPercentage ? service.taxPercentage : services.value.find(i => i.id === row.service).taxPercentage
+    }
+  }
+
+  if (row.product) {
+    console.log("Product Detected")
+    row.unit = product.unit ? product.unit : products.value.find(i => i.id === row.product).unit
+    row.inputPrice = (product.selling_price ? product.selling_price : products.value.find(i => i.id === row.product).selling_price)
+    //row.price = Number((row.originalPrice * (1 + itemInfo.value.customSurchargePercentage /100)).toFixed(2))
+    row.description = product.description ? product.description : (products.value.find(i => i.id === row.product) ? products.value.find(i => i.id === row.product).description : "")
+
+    if (['13b UStG', '19 UStG'].includes(itemInfo.value.taxType)) {
+      row.taxPercent = 0
+    } else {
+      row.taxPercent = product.tax_percentage ? product.tax_percentage : products.value.find(i => i.id === row.product).tax_percentage
+    }
+  }
+
+  updateCustomSurcharge()
+}
+
+
+</script>
+
+<template>
+  <UDashboardNavbar>
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.back()/*router.push(`/standardEntity/${type}`)*/"
+      >
+        <!--        {{dataType.label}}-->
+      </UButton>
+    </template>
+    <template #right>
+      <ArchiveButton
+          color="rose"
+          type="createddocuments"
+          v-if="itemInfo.state === 'Entwurf' || itemInfo.type === 'serialInvoices'"
+          variant="outline"
+          @confirmed="useEntities('createddocuments').update(itemInfo.id,{archived: true}),
+                      router.push('/')"
+      />
+      <UButton
+          icon="i-mdi-content-save"
+          @click="saveDocument('Entwurf',true)"
+          v-if="itemInfo.type !== 'serialInvoices' "
+          :disabled="!itemInfo.customer"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          @click="closeDocument"
+          v-if="itemInfo.id && itemInfo.type !== 'serialInvoices'"
+      >
+        {{selectedTab === 0 ? "Vorschau zeigen" : "Fertigstellen"}}
+      </UButton>
+      <UButton
+          icon="i-mdi-content-save"
+          @click="saveSerialInvoice"
+          v-if="itemInfo.type === 'serialInvoices'"
+      >
+        Serienrechnung
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <UTabs class="p-5" :items="tabItems" @change="onChangeTab" v-if="loaded" v-model="selectedTab">
+      <template #item="{item}">
+        <div v-if="item.label === 'Editor'">
+          <UAlert
+              class="my-5"
+              title="Vorhandene Probleme und Informationen:"
+              :color="findDocumentErrors.filter(i => i.type === 'breaking').length > 0 ? 'rose' : 'white'"
+              variant="outline"
+              v-if="findDocumentErrors.length > 0"
+          >
+            <template #description>
+              <ul class="list-disc ml-5">
+                <li v-for="error in findDocumentErrors"
+                    :class="[...error.type === 'breaking' ? ['text-rose-600'] : ['dark:text-white','text-black']]">
+                  {{ error.message }}
+                </li>
+              </ul>
+            </template>
+
+          </UAlert>
+
+
+          <InputGroup>
+            <div class="w-1/3 mr-5">
+              <UFormGroup
+                  label="Dokumenttyp:"
+              >
+                <InputGroup>
+                  <USelectMenu
+                      :options="Object.keys(dataStore.documentTypesForCreation).map(i => {return {label: dataStore.documentTypesForCreation[i].labelSingle, type: i }})"
+                      v-model="itemInfo.type"
+                      value-attribute="type"
+                      option-attribute="label"
+                      @change="setDocumentTypeConfig"
+                      class="flex-auto"
+                  >
+                    <template #label>
+                      {{ dataStore.documentTypesForCreation[itemInfo.type].labelSingle }}
+                    </template>
+                  </USelectMenu>
+                  <!--                  <UButton
+                                        variant="outline"
+                                        v-if="itemInfo.type === 'advanceInvoices'"
+                                        icon="i-heroicons-arrow-down-tray"
+                                        @click="showAdvanceInvoiceCalcModal = true"
+                                    >Auto Positionen</UButton>-->
+                </InputGroup>
+
+                <USlideover
+                    v-model="showAdvanceInvoiceCalcModal"
+                >
+                  <UCard class="h-full">
+                    <template #header>
+                      <UButton @click="importPositions">Übernehmen</UButton>
+                    </template>
+
+                    <UFormGroup
+                        label="Gesamtsumme:"
+                    >
+                      <UInput
+                          type="number"
+                          :step="0.01"
+                          v-model="advanceInvoiceData.totalSumNet"
+                          @focusout="advanceInvoiceData.part = advanceInvoiceData.totalSumNet / 100 * advanceInvoiceData.partPerPecentage"
+                      />
+                    </UFormGroup>
+                    <UFormGroup
+                        label="Prozent:"
+                    >
+                      <UInput
+                          type="number"
+                          :step="0.01"
+                          v-model="advanceInvoiceData.partPerPecentage"
+                          @focusout="advanceInvoiceData.part = advanceInvoiceData.totalSumNet / 100 * advanceInvoiceData.partPerPecentage"
+                      />
+                    </UFormGroup>
+
+                    <UFormGroup
+                        label="Abzurechnender Anteil:"
+                    >
+                      <UInput
+                          type="number"
+                          :step="0.01"
+                          v-model="advanceInvoiceData.part"
+                          @focusout="advanceInvoiceData.partPerPecentage = Number((advanceInvoiceData.part / advanceInvoiceData.totalSumNet * 100).toFixed(2))"
+                      />
+                    </UFormGroup>
+
+
+                  </UCard>
+
+                </USlideover>
+
+              </UFormGroup>
+
+              <UFormGroup
+                  label="Steuertyp:"
+                  v-if="['invoices','advanceInvoices','quotes','confirmationOrders','serialInvoices'].includes(itemInfo.type)"
+              >
+                <USelectMenu
+                    :options="[{key:'Standard', label: 'Standard'},{key:'13b UStG', label: '13b UStG'},{key:'19 UStG', label: '19 UStG Kleinunternehmer'}/*,{key:'12.3 UStG', label: 'PV 0% USt'}*/]"
+                    v-model="itemInfo.taxType"
+                    value-attribute="key"
+                    option-attribute="label"
+                    @change="setTaxType"
+                    class="w-full"
+                ></USelectMenu>
+              </UFormGroup>
+
+              <UFormGroup
+                  label="Briefpapier:"
+              >
+                <USelectMenu
+                    :options="letterheads"
+                    v-model="itemInfo.letterhead"
+                    value-attribute="id"
+                    option-attribute="name"
+                    searchable
+                    searchable-placeholder="Suche..."
+                    :search-attributes="['name']"
+                    class="w-full"
+                    :color="itemInfo.letterhead ? 'primary' : 'rose'"
+                >
+                  <template #label>
+                    {{ itemInfo.letterhead ? letterheads.find(i => i.id === itemInfo.letterhead).name : "Kein Briefpapier gewählt" }}
+                  </template>
+                </USelectMenu>
+              </UFormGroup>
+
+              <UFormGroup
+                  label="Kunde:"
+              >
+                <div class="flex flex-row">
+                  <USelectMenu
+                      :options="customers"
+                      option-attribute="name"
+                      value-attribute="id"
+                      :search-attributes="['name']"
+                      searchable
+                      searchable-placeholder="Suche..."
+                      v-model="itemInfo.customer"
+                      @change="setCustomerData"
+                      class="flex-auto"
+                  >
+                    <template #option="{option}">
+                      {{ option.name }}{{ option.nameAddition }}
+                    </template>
+                    <UButton
+                        :color="itemInfo.customer ? 'primary' : 'rose'"
+                        variant="outline"
+                        class="w-full"
+                    >
+                      {{ customers.find(i => i.id === itemInfo.customer) ? customers.find(i => i.id === itemInfo.customer).name : "Kein Kunde ausgewählt" }}
+
+                      <UIcon name="i-heroicons-chevron-right-20-solid"
+                             class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500"
+                             :class="['transform rotate-90']"/>
+                    </UButton>
+                  </USelectMenu>
+                  <EntityModalButtons
+                      type="customers"
+                      :id="itemInfo.customer"
+                      @return-data="(data) => setCustomerData(data.id)"
+                  />
+                  <!--                  <UButton
+                                        variant="outline"
+                                        class="w-25 ml-2"
+                                        v-if="itemInfo.customer"
+                                        icon="i-heroicons-eye"
+                                        @click="modal.open(StandardEntityModal, {
+                                          id: itemInfo.customer,
+                                          type: 'customers',
+                                          mode: 'show',
+                                        })"
+                                    />
+                                    <UButton
+                                        variant="outline"
+                                        class="w-25 ml-2"
+                                        v-if="itemInfo.customer"
+                                        icon="i-heroicons-pencil-solid"
+                                        @click="modal.open(StandardEntityModal, {
+                                          id: itemInfo.customer,
+                                          type: 'customers',
+                                          mode: 'edit',
+                                          onReturnData(data) {
+                                            setCustomerData()
+                                          }
+                                        })"
+                                    />
+                                    <UButton
+                                        variant="outline"
+                                        class="w-25 ml-2"
+                                        v-if="!itemInfo.customer"
+                                        icon="i-heroicons-plus"
+                                        @click="modal.open(StandardEntityModal, {
+                                          type: 'customers',
+                                          mode: 'create',
+                                          onReturnData(data) {
+                                            setCustomerData(data.id)
+                                          }
+                                        })"
+                                    />-->
+                </div>
+
+
+                <UAlert
+                    v-if="customers.find(i => i.id === itemInfo.customer)"
+                    class="mt-2"
+                    variant="solid"
+                    color="white"
+                    title="Info"
+                >
+                  <template #description>
+                    Kundennr: {{ customers.find(i => i.id === itemInfo.customer).customerNumber }}<br>
+                    Typ: {{ customers.find(i => i.id === itemInfo.customer).isCompany ? 'Firma' : 'Privat' }}<br>
+                    Notizen: <span class="truncate">{{ customers.find(i => i.id === itemInfo.customer).notes }}</span>
+                  </template>
+
+                </UAlert>
+
+              </UFormGroup>
+              <UFormGroup
+                  label="Ansprechpartner:"
+                  v-if="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).isCompany : false "
+              >
+                <InputGroup>
+                  <USelectMenu
+                      :options="contacts.filter(i => i.customer === itemInfo.customer)"
+                      option-attribute="fullName"
+                      value-attribute="id"
+                      :search-attributes="['name']"
+                      searchable
+                      searchable-placeholder="Suche..."
+                      v-model="itemInfo.contact"
+                      class="flex-auto"
+                  >
+                    <UButton
+                        :color="itemInfo.contact ? 'primary' : 'none'"
+                        variant="outline"
+                        class="w-full"
+                        :disabled="!itemInfo.customer"
+                    >
+                      <span
+                          class="truncate">{{ itemInfo.contact ? contacts.find(i => i.id === itemInfo.contact).fullName : "Kein Kontakt ausgewählt" }}</span>
+
+
+                      <UIcon name="i-heroicons-chevron-right-20-solid"
+                             class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500"
+                             :class="['transform rotate-90']"/>
+                    </UButton>
+                    <template #label>
+                      {{ itemInfo.contact ? contacts.find(i => i.id === itemInfo.contact).fullName : "Kein Kontakt ausgewählt" }}
+                    </template>
+                  </USelectMenu>
+                  <!--                  <UButton
+                                        variant="outline"
+                                        v-if="itemInfo.contact"
+                                        icon="i-heroicons-arrow-right-end-on-rectangle"
+                                        @click="router.push(`/standardEntity/contacts/show/${itemInfo.contact}`)"
+                                    >Kontakt</UButton>-->
+                  <EntityModalButtons
+                      type="contacts"
+                      :id="itemInfo.contact"
+                      :create-query="{customer: itemInfo.customer}"
+                      @return-data="(data) => itemInfo.contact = data.id"
+                  />
+                </InputGroup>
+
+              </UFormGroup>
+
+              <UFormGroup
+                  label="Adresse:"
+              >
+                <UInput
+                    v-model="itemInfo.address.street"
+                    :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.street : 'Straße + Hausnummer'"
+                    :color="itemInfo.address.street ? 'primary' : 'rose'"
+                />
+                <UInput
+                    v-model="itemInfo.address.special"
+                    class="mt-3"
+                    :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.special : 'Adresszusatz'"
+                />
+                <InputGroup class="mt-3">
+                  <UInput
+                      class="flex-auto"
+                      v-model="itemInfo.address.zip"
+                      :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.zip : 'PLZ'"
+                      :color="itemInfo.address.zip ? 'primary' : 'rose'"
+                  />
+                  <UInput
+                      class="flex-auto"
+                      v-model="itemInfo.address.city"
+                      :placeholder="itemInfo.customer ? customers.find(i => i.id === itemInfo.customer).infoData.city : 'Ort'"
+                      :color="itemInfo.address.city ? 'primary' : 'rose'"
+                  />
+                </InputGroup>
+              </UFormGroup>
+            </div>
+            <div class="w-2/3">
+              <UFormGroup
+                  :label="itemInfo.documentNumberTitle + ':'"
+                  v-if="itemInfo.type !== 'serialInvoices'"
+              >
+                <UInput
+                    v-model="itemInfo.documentNumber"
+                    placeholder="XXXX"
+                    disabled
+                />
+              </UFormGroup>
+
+              <InputGroup class="w-full">
+                <UFormGroup
+                    class="w-80 mr-1"
+                    label="Lieferdatumsart:"
+                    v-if="itemInfo.type !== 'serialInvoices'"
+                >
+                  <USelectMenu
+                      :options="['Lieferdatum','Lieferzeitraum','Leistungsdatum','Leistungszeitraum','Kein Lieferdatum anzeigen']"
+                      v-model="itemInfo.deliveryDateType"
+                  />
+
+
+                </UFormGroup>
+                <UFormGroup
+                    :label="`${itemInfo.deliveryDateType}${['Lieferzeitraum', 'Leistungszeitraum'].includes(itemInfo.deliveryDateType) ? ' Start' : ''}:`"
+                    v-if="itemInfo.type !== 'serialInvoices' && itemInfo.deliveryDateType !== 'Kein Lieferdatum anzeigen'"
+                    class="mr-1"
+                >
+                  <UPopover :popper="{ placement: 'bottom-start' }">
+                    <UButton
+                        icon="i-heroicons-calendar-days-20-solid"
+                        :label="itemInfo.deliveryDate ? dayjs(itemInfo.deliveryDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+                        variant="outline"
+                        class="mx-auto"
+                    />
+
+                    <template #panel="{ close }">
+                      <LazyDatePicker v-model="itemInfo.deliveryDate" @close="close"/>
+                    </template>
+                  </UPopover>
+
+                </UFormGroup>
+                <UFormGroup
+                    :label="itemInfo.deliveryDateType + ' Ende:'"
+                    v-if="itemInfo.type !== 'serialInvoices' && ['Lieferzeitraum','Leistungszeitraum'].includes(itemInfo.deliveryDateType)"
+                >
+                  <UPopover
+                      :popper="{ placement: 'bottom-start' }">
+                    <UButton
+                        icon="i-heroicons-calendar-days-20-solid"
+                        :label="itemInfo.deliveryDateEnd ? dayjs(itemInfo.deliveryDateEnd).format('DD.MM.YYYY') : 'Datum auswählen'"
+                        variant="outline"
+                        class="mx-auto"
+                    />
+
+                    <template #panel="{ close }">
+                      <LazyDatePicker v-model="itemInfo.deliveryDateEnd" @close="close"/>
+                    </template>
+                  </UPopover>
+                </UFormGroup>
+              </InputGroup>
+
+              <InputGroup class="w-full">
+                <UFormGroup
+                    label="Belegdatum:"
+                    class="mr-1"
+                    v-if="itemInfo.type !== 'serialInvoices'"
+                >
+                  <UPopover :popper="{ placement: 'bottom-start' }">
+                    <UButton
+                        icon="i-heroicons-calendar-days-20-solid"
+                        :label="itemInfo.documentDate ? dayjs(itemInfo.documentDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+                        variant="outline"
+                    />
+
+                    <template #panel="{ close }">
+                      <LazyDatePicker v-model="itemInfo.documentDate" @close="close"/>
+                    </template>
+                  </UPopover>
+                </UFormGroup>
+
+
+                <UFormGroup
+                    class="w-full"
+                    label="Zahlungsziel in Tagen:"
+                >
+                  <UInput
+                      type="number"
+                      v-model="itemInfo.paymentDays"
+                  />
+                </UFormGroup>
+                <UFormGroup
+                    class="w-full"
+                    label="Zahlungsart:"
+                >
+                  <USelectMenu
+                      v-model="itemInfo.payment_type"
+                      value-attribute="key"
+                      option-attribute="label"
+                      :options="[
+                          {
+                            key: 'transfer',
+                            label: 'Überweisung'
+                          },{
+                            key: 'direct-debit',
+                            label: 'SEPA Lastschrift'
+                          }
+                      ]"
+                  >
+                    <template #label>
+                      {{itemInfo.payment_type === 'transfer' ? "Überweisung" : "SEPA-Lastschrift"}}
+                    </template>
+                  </USelectMenu>
+                </UFormGroup>
+                <UFormGroup
+                    class="w-full"
+                    label="Individueller Aufschlag:"
+                >
+                  <UInput
+                      type="number"
+                      v-model="itemInfo.customSurchargePercentage"
+                      @change="updateCustomSurcharge"
+                  >
+                    <template #trailing>
+                      <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
+                    </template>
+                  </UInput>
+                </UFormGroup>
+              </InputGroup>
+              <UFormGroup
+                  label="Mitarbeiter:"
+              >
+                <USelectMenu
+                    :options="tenantUsers"
+                    v-model="itemInfo.created_by"
+                    option-attribute="full_name"
+                    value-attribute="id"
+                    @change="setContactPersonData"
+                />
+              </UFormGroup>
+              <UFormGroup
+                  label="Kontakt Telefon:"
+              >
+                <UInput
+                    v-model="itemInfo.contactTel"
+                />
+              </UFormGroup>
+              <UFormGroup
+                  label="Kontakt E-Mail:"
+              >
+                <UInput
+                    v-model="itemInfo.contactEMail"
+                />
+              </UFormGroup>
+              <UFormGroup
+                  label="Objekt:"
+              >
+                <InputGroup>
+                  <USelectMenu
+                      :options="plants.filter(i => i.customer === itemInfo.customer)"
+                      v-model="itemInfo.plant"
+                      value-attribute="id"
+                      option-attribute="name"
+                      searchable
+                      searchable-placeholder="Suche..."
+                      :search-attributes="['name']"
+                      class="w-full"
+                      :disabled="!itemInfo.customer"
+                  >
+                    <template #label>
+                      {{ plants.find(i => i.id === itemInfo.plant) ? plants.find(i => i.id === itemInfo.plant).name : "Kein Objekt ausgewählt" }}
+                    </template>
+                    <template #option="{option: plant}">
+                      {{ plant.name }}
+                    </template>
+                  </USelectMenu>
+                  <UButton
+                      variant="outline"
+                      color="rose"
+                      v-if="itemInfo.plant"
+                      icon="i-heroicons-x-mark"
+                      @click="itemInfo.plant = null"
+                  />
+                  <EntityModalButtons
+                      type="plants"
+                      :id="itemInfo.plant"
+                      :create-query="{customer: itemInfo.customer}"
+                      @return-data="(data) => itemInfo.plant = data.id"
+                  />
+                </InputGroup>
+
+              </UFormGroup>
+              <UFormGroup
+                  label="Projekt:"
+              >
+                <InputGroup>
+                  <USelectMenu
+                      :options="projects.filter(i => i.customer === itemInfo.customer && (itemInfo.plant ? itemInfo.plant === i.plant : true))"
+                      v-model="itemInfo.project"
+                      value-attribute="id"
+                      option-attribute="name"
+                      searchable
+                      searchable-placeholder="Suche..."
+                      :search-attributes="['name']"
+                      class="w-full"
+                      :disabled="!itemInfo.customer"
+                  >
+                    <template #label>
+                      {{ itemInfo.project ? projects.find(i => i.id === itemInfo.project).name : "Kein Projekt ausgewählt" }}
+                    </template>
+                    <template #option="{option: project}">
+                      {{ customers.find(i => i.id === project.customer) ? customers.find(i => i.id === project.customer).name : "" }}
+                      - {{ project.name }}
+                    </template>
+                  </USelectMenu>
+                  <UButton
+                      variant="outline"
+                      color="rose"
+                      v-if="itemInfo.project"
+                      icon="i-heroicons-x-mark"
+                      @click="itemInfo.project = null"
+                  />
+                  <EntityModalButtons
+                      type="projects"
+                      :id="itemInfo.project"
+                      :create-query="{customer: itemInfo.customer, plant: itemInfo.plant}"
+                      @return-data="(data) => itemInfo.project = data.id"
+                  />
+                </InputGroup>
+
+              </UFormGroup>
+              <UFormGroup
+                  label="Vertrag:"
+              >
+                <InputGroup>
+                  <USelectMenu
+                      :options="contracts.filter(i => i.customer === itemInfo.customer && (itemInfo.plant ? itemInfo.plant === i.plant : true))"
+                      v-model="itemInfo.contract"
+                      value-attribute="id"
+                      option-attribute="name"
+                      searchable
+                      searchable-placeholder="Suche..."
+                      :search-attributes="['contractNumber','name']"
+                      class="w-full"
+                      :disabled="!itemInfo.customer"
+                  >
+                    <template #label>
+                      {{ itemInfo.contract ? contracts.find(i => i.id === itemInfo.contract).name : "Kein Vertrag ausgewählt" }}
+                    </template>
+                    <template #option="{option: contract}">
+                      {{ customers.find(i => i.id === contract.customer) ? customers.find(i => i.id === contract.customer).name : "" }}
+                      - {{ contract.contractNumber }} - {{ contract.name }}
+                    </template>
+                  </USelectMenu>
+                  <UButton
+                      variant="outline"
+                      color="rose"
+                      v-if="itemInfo.contract"
+                      icon="i-heroicons-x-mark"
+                      @click="itemInfo.contract = null"
+                  />
+                  <EntityModalButtons
+                      type="projects"
+                      :id="itemInfo.contract"
+                      :create-query="{customer: itemInfo.customer}"
+                      @return-data="(data) => itemInfo.contract = data.id"
+                  />
+                </InputGroup>
+
+              </UFormGroup>
+
+            </div>
+          </InputGroup>
+
+          <div v-if="itemInfo.type === 'serialInvoices'" class="mb-5">
+            <UDivider class="mt-5 mb-3">
+              Einstellungen für die Serienrechnung
+            </UDivider>
+
+            <div class="flex flex-row">
+              <div class="w-1/3">
+                <UFormGroup
+                    label="Datum erste Ausführung:"
+                >
+                  <UPopover :popper="{ placement: 'bottom-start' }">
+                    <UButton
+                        icon="i-heroicons-calendar-days-20-solid"
+                        :label="itemInfo.serialConfig.firstExecution ? dayjs(itemInfo.serialConfig.firstExecution).format('DD.MM.YYYY') : 'Datum auswählen'"
+                        variant="outline"
+                    />
+
+                    <template #panel="{ close }">
+                      <LazyDatePicker v-model="itemInfo.serialConfig.firstExecution" @close="close"/>
+                    </template>
+                  </UPopover>
+                </UFormGroup>
+                <UFormGroup
+                    label="Datum letzte Ausführung:"
+                >
+                  <UPopover :popper="{ placement: 'bottom-start' }">
+                    <UButton
+                        icon="i-heroicons-calendar-days-20-solid"
+                        :label="itemInfo.serialConfig.executionUntil ? dayjs(itemInfo.serialConfig.executionUntil).format('DD.MM.YYYY') : 'Datum auswählen'"
+                        variant="outline"
+                    />
+
+                    <template #panel="{ close }">
+                      <LazyDatePicker v-model="itemInfo.serialConfig.executionUntil" @close="close"/>
+                    </template>
+                  </UPopover>
+                </UFormGroup>
+                <UCheckbox
+                    v-model="itemInfo.serialConfig.active"
+                    label="Aktiv"
+                    class="mt-3"
+                />
+
+              </div>
+              <div class="w-2/3">
+                <UFormGroup
+                    label="Intervall:"
+                >
+                  <USelectMenu
+                      v-model="itemInfo.serialConfig.intervall"
+                      :options="['wöchentlich','2 - wöchentlich', 'monatlich', 'vierteljährlich','halbjährlich', 'jährlich']"
+                  />
+                </UFormGroup>
+                <UFormGroup
+                    label="Richtung:"
+                >
+                  <USelectMenu
+                      v-model="itemInfo.serialConfig.dateDirection"
+                      :options="['Rückwirkend','Im Voraus']"
+                  />
+                </UFormGroup>
+                <UAlert
+                    title="Anfangs- und Enddatum"
+                    description="Für das Anfangs- und Enddatum werden jeweils der ersten und letzte Tag des ausgewählten Intervalls und der Richtung automatisch ausgewählt"
+                    class="mt-5"
+                />
+
+
+              </div>
+            </div>
+
+          </div>
+
+          <UDivider
+              class="my-3"
+          />
+
+          <UFormGroup
+              label="Titel:"
+          >
+            <UInput v-model="itemInfo.title" disabled/>
+          </UFormGroup>
+          <UFormGroup
+              label="Beschreibung:"
+              class="mt-3"
+          >
+            <UInput v-model="itemInfo.description"/>
+          </UFormGroup>
+
+          <UDivider
+              class="my-3"
+          />
+
+          <UFormGroup
+              label="Vorlage auswählen"
+          >
+            <USelectMenu
+                :options="getTextTemplateByType(itemInfo.type,'startText')"
+                v-model="itemInfo.startText"
+                option-attribute="text"
+                value-attribute="text"
+            >
+              <template #option="{option}">
+                {{ option.name }} - {{ option.text }}
+              </template>
+              <template #label>
+                {{ texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.startText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert" }}
+              </template>
+            </USelectMenu>
+          </UFormGroup>
+
+
+          <UFormGroup
+              label="Einleitung:"
+          >
+            <UTextarea
+                v-model="itemInfo.startText"
+                :rows="6"
+            />
+          </UFormGroup>
+
+
+          <UDivider
+              class="my-3"
+          />
+
+          <table class="w-full" v-if="itemInfo.rows.length > 0">
+            <thead>
+            <tr>
+              <th></th>
+              <th>Pos.</th>
+              <th class="pl-2">Name</th>
+              <th class="pl-2">Menge</th>
+              <th class="pl-2">Einheit</th>
+              <th class="pl-2" v-if="itemInfo.type !== 'deliveryNotes'">Preis</th>
+              <!--                <th class="pl-2" v-if="itemInfo.type !== 'deliveryNotes'">Steuer</th>
+                              <th class="pl-2" v-if="itemInfo.type !== 'deliveryNotes'">Rabatt</th>-->
+              <th class="pl-2"></th>
+              <th class="pl-2" v-if="itemInfo.type !== 'deliveryNotes'">Gesamt</th>
+            </tr>
+            </thead>
+            <draggable
+                v-model="itemInfo.rows"
+                handle=".handle"
+                tag="tbody"
+                itemKey="pos"
+                @end="setPosNumbers"
+            >
+              <template #item="{element: row}">
+                <tr>
+                  <td>
+                    <UIcon
+                        class="handle"
+                        name="i-mdi-menu"
+                        v-if="itemInfo.type !== 'cancellationInvoices'"
+                    />
+                  </td>
+                  <td
+                      v-if="row.mode === 'pagebreak'"
+                      colspan="7"
+                  >
+                    <UDivider/>
+                  </td>
+                  <td
+                      v-if="row.mode === 'text'"
+                      colspan="9"
+                  >
+                    <!--                    <UInput
+                                            v-model="row.text"
+                                            placeholder="Titel"
+                                            maxlength="60"
+                                        />-->
+                    <UTextarea
+                        v-model="row.description"
+                        placeholder="Text"
+                    />
+                  </td>
+                  <td
+                      v-if="!['pagebreak','text'].includes(row.mode)"
+                  >{{ row.pos }}
+                  </td>
+                  <td
+                      class="w-120"
+                      v-if="row.mode === 'free'"
+                  >
+                    <UInput
+                        :disabled="itemInfo.type === 'cancellationInvoices' || row.editDisabled"
+                        v-model="row.text"
+                        placeholder="Name"
+                        class="min-w-40"
+                    />
+                  </td>
+                  <td
+                      class="w-120"
+                      v-else-if="row.mode === 'normal'"
+                  >
+                    <InputGroup class="w-full">
+                      <USelectMenu
+                          :disabled="itemInfo.type === 'cancellationInvoices'"
+                          class="w-60"
+                          :options="products"
+                          :color="row.product ? 'primary' : 'rose'"
+                          option-attribute="name"
+                          value-attribute="id"
+                          searchable
+                          searchable-placeholder="Suche ..."
+                          :search-attributes="['name']"
+                          v-model="row.product"
+                          @change="setRowData(row)"
+                      >
+                        <template #label>
+                          <span class="truncate">{{
+                              products.find(i => i.id === row.product) ? products.find(i => i.id === row.product).name : "Kein Produkt ausgewählt"
+                            }}</span>
+                        </template>
+                      </USelectMenu>
+                      <EntityModalButtons
+                          type="products"
+                          :id="row.product"
+                          @return-data="(data) => setRowData(row,null,data)"
+                      />
+                      <!--                      <UButton
+                                                icon="i-heroicons-magnifying-glass"
+                                                @click="showProductSelectionModal = true"
+                                            />
+                                            <UModal v-model="showProductSelectionModal">
+                                              <UCard>
+                                                <template #header>
+                                                  Artikel Auswählen
+                                                </template>
+
+                                                <InputGroup class="w-full">
+                                                  <UFormGroup label="Artikelkategorie:">
+                                                    <USelectMenu
+                                                        v-if="productcategories.length > 0"
+                                                        :options="[{name: 'Nicht zugeordnet',id:'not set'},...productcategories]"
+                                                        value-attribute="id"
+                                                        option-attribute="name"
+                                                        v-model="selectedProductcategorie"
+                                                    />
+                                                  </UFormGroup>
+                                                </InputGroup>
+                                                <UTable
+                                                    :rows="selectedProductcategorie !== 'not set' ? products.filter(i => i.productcategories.includes(selectedProductcategorie)) : products.filter(i => i.productcategories.length === 0)"
+                                                    :columns="[
+                                                        {key: 'name',label:'Name'},
+                                                        {key: 'manufacturer',label:'Hersteller'},
+                                                        {key: 'articleNumber',label:'Artikelnummer'},
+                                                    ]"
+                                                    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikel anzuzeigen' }"
+                                                    @select=" (i) => {
+                                                     row.product = i.id
+                                                     row.unit = products.find(i => i.id === row.product).unit,
+                                                     row.price = (products.find(i => i.id === row.product).sellingPrice || 0),
+                                                     row.description = products.find(i => i.id === row.product).description
+                                                      showProductSelectionModal = false}"
+                                                >
+
+                                                </UTable>
+                                              </UCard>
+                                            </UModal>-->
+                    </InputGroup>
+
+                  </td>
+                  <td
+                      class="w-120"
+                      v-else-if="row.mode === 'service'"
+                  >
+                    <InputGroup class="w-full">
+                      <USelectMenu
+                          :disabled="itemInfo.type === 'cancellationInvoices'"
+                          class="w-60"
+                          :options="services"
+                          :color="row.service ? 'primary' : 'rose'"
+                          option-attribute="name"
+                          value-attribute="id"
+                          searchable
+                          searchable-placeholder="Suche ..."
+                          :search-attributes="['name']"
+                          v-model="row.service"
+                          @change="setRowData(row)"
+                      >
+                        <template #label>
+                          <span class="truncate">{{
+                              services.find(i => i.id === row.service) ? services.find(i => i.id === row.service).name : "Keine Leistung ausgewählt"
+                            }}</span>
+                        </template>
+                      </USelectMenu>
+                      <EntityModalButtons
+                          type="services"
+                          :id="row.service"
+                          @return-data="(data) => setRowData(row,data,null)"
+                      />
+                      <!--                      <UButton
+                                                icon="i-heroicons-magnifying-glass"
+                                                @click="showServiceSelectionModal = true"
+                                            />
+                                            <UModal v-model="showServiceSelectionModal">
+                                              <UCard>
+                                                <template #header>
+                                                  Leistung Auswählen
+                                                </template>
+
+                                                <InputGroup class="w-full">
+                                                  <UFormGroup label="Leistungskategorie:">
+                                                    <USelectMenu
+                                                        v-if="servicecategories.length > 0"
+                                                        :options="[{name: 'Nicht zugeordnet',id:'not set'},...servicecategories]"
+                                                        value-attribute="id"
+                                                        option-attribute="name"
+                                                        v-model="selectedServicecategorie"
+                                                    />
+                                                  </UFormGroup>
+                                                </InputGroup>
+                                                <UTable
+                                                    :rows="selectedServicecategorie !== 'not set' ? services.filter(i => i.servicecategories.includes(selectedServicecategorie)) : services.filter(i => i.servicecategories.length === 0)"
+                                                    :columns="[
+                                                          {key: 'name',label:'Name'},
+                                                          {key: 'serviceNumber',label:'Leistungsnummer'},
+                                                          {key: 'sellingPrice',label:'Verkaufspreis'},
+                                                      ]"
+                                                    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }"
+                                                    @select=" (i) => {
+                                                       row.service = i.id
+                                                       setRowData(row)
+                                                        showServiceSelectionModal = false}"
+                                                >
+
+                                                </UTable>
+                                              </UCard>
+                                            </UModal>-->
+                    </InputGroup>
+                  </td>
+                  <td
+                      class="w-20"
+                      v-if="!['pagebreak','title','text'].includes(row.mode)"
+                  >
+                    <UInput
+                        v-model="row.quantity"
+                        :disabled="itemInfo.type === 'cancellationInvoices'"
+                        type="number"
+                        :step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : '1' "
+
+                    />
+                  </td>
+                  <td
+                      class="w-40"
+                      v-if="!['pagebreak','title','text'].includes(row.mode)"
+                  >
+                    <USelectMenu
+                        v-model="row.unit"
+                        :disabled="itemInfo.type === 'cancellationInvoices'"
+                        :options="units"
+                        option-attribute="name"
+                        value-attribute="id"
+                    >
+                      <template #label>
+                        {{ units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).name : "Keine Einheit gewählt" }}
+                      </template>
+                    </USelectMenu>
+                  </td>
+                  <td
+                      class="w-40"
+                      v-if="!['pagebreak','title','text'].includes(row.mode) && itemInfo.type !== 'deliveryNotes'"
+                  >
+                    <UInput
+                        v-model="row.inputPrice"
+                        :disabled="itemInfo.type === 'cancellationInvoices'"
+                        type="number"
+                        step="0.001"
+                        @change="updateCustomSurcharge"
+                    >
+                      <template #leading>
+                        <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
+                      </template>
+                      <template #trailing>
+                        <span
+                            v-if="row.price > row.inputPrice"
+                            class="text-primary text-xs">
+                        {{ useCurrency(row.price) }}
+                        </span>
+                        <span
+                            v-else-if="row.price < row.inputPrice"
+                            class="text-rose-600 text-xs">
+                        {{ useCurrency(row.price) }}
+                        </span>
+                        <span
+                            v-else
+                            class="text-gray-500 dark:text-gray-400 text-xs"> </span>
+                      </template>
+                    </UInput>
+                  </td>
+                  <!--                  <td
+                                        class="w-40"
+                                        v-if="!['pagebreak','title','text'].includes(row.mode)&& itemInfo.type !== 'deliveryNotes'"
+
+                                    >
+                                      <USelectMenu
+                                          :options="[19,7,0]"
+                                          v-model="row.taxPercent"
+                                          :disabled="itemInfo.taxType === '13b UStG' || itemInfo.taxType === '19 UStG'"
+                                      >
+                                        <template #option="{option}">
+                                          {{option}} %
+                                        </template>
+                                        <template #label>
+                                          {{row.taxPercent}} %
+                                        </template>
+                                      </USelectMenu>
+
+                                    </td>-->
+                  <!--                  <td
+                                        class="w-40"
+                                        v-if="!['pagebreak','title','text'].includes(row.mode)&& itemInfo.type !== 'deliveryNotes'"
+                                    >
+                                      <UInput
+                                          v-model="row.discountPercent"
+                                          type="number"
+                                          step="0.01"
+                                          placeholder="0"
+                                      >
+                                        <template #trailing>
+                                          <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
+                                        </template>
+                                      </UInput>
+                                    </td>-->
+                  <td
+                      class="w-40"
+                      v-if="!['pagebreak','title','text'].includes(row.mode)"
+                  >
+                    <UButton
+                        :disabled="itemInfo.type === 'cancellationInvoices'"
+                        icon="i-heroicons-pencil-square-16-solid"
+                        @click="row.showEdit = true"
+                    />
+                    <UButton
+                        :disabled="itemInfo.type === 'cancellationInvoices'"
+                        icon="i-mdi-water-drop-outline"
+                        class="ml-3"
+                        v-if="row.agriculture"
+                        @click="row.showEditDiesel = true"
+                    />
+                    <UModal v-model="row.showEdit">
+                      <UCard>
+                        <!--                        <template #header>
+                                                  Zeile bearbeiten
+                                                </template>-->
+                        <template #header>
+                          <div class="flex items-center justify-between">
+                            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                              Zeile bearbeiten
+                            </h3>
+                            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1"
+                                     @click="row.showEdit = false"/>
+                          </div>
+                        </template>
+                        <InputGroup>
+                          <UFormGroup
+                              label="Anzahl:"
+                              class="flex-auto"
+                          >
+                            <UInput
+                                v-model="row.quantity"
+                                type="number"
+                                :step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : '1' "
+
+                            />
+                          </UFormGroup>
+                          <UFormGroup
+                              label="Einheit:"
+                              class="flex-auto"
+                          >
+                            <USelectMenu
+                                v-model="row.unit"
+                                :options="units"
+                                option-attribute="name"
+
+                                value-attribute="id"
+                            >
+                              <template #label>
+                                {{ units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).name : "Keine Einheit gewählt" }}
+                              </template>
+                            </USelectMenu>
+                          </UFormGroup>
+                        </InputGroup>
+
+                        <UFormGroup
+                            label="Einzelpreis:"
+                            v-if="itemInfo.type !== 'deliveryNotes'"
+                        >
+                          <UInput
+                              v-model="row.inputPrice"
+                              type="number"
+                              step="0.001"
+                              @change="updateCustomSurcharge"
+                          >
+                            <template #leading>
+                              <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
+                            </template>
+                            <template #trailing>
+                        <span
+                            v-if="row.price > row.inputPrice"
+                            class="text-primary text-xs">
+                        {{ useCurrency(row.price) }}
+                        </span>
+                              <span
+                                  v-else-if="row.price < row.inputPrice"
+                                  class="text-rose-600 text-xs">
+                        {{ useCurrency(row.price) }}
+                        </span>
+                              <span
+                                  v-else
+                                  class="text-gray-500 dark:text-gray-400 text-xs"> </span>
+                            </template>
+                          </UInput>
+                        </UFormGroup>
+                        <UFormGroup
+                            label="Umsatzsteuer:"
+                            class="mt-3"
+                            v-if="itemInfo.type !== 'deliveryNotes'"
+                        >
+                          <USelectMenu
+                              :options="[19,7,0]"
+                              v-model="row.taxPercent"
+                              :disabled="itemInfo.taxType === '13b UStG' || itemInfo.taxType === '19 UStG'"
+                          >
+                            <template #option="{option}">
+                              {{ option }} %
+                            </template>
+                            <template #label>
+                              {{ row.taxPercent }} %
+                            </template>
+                          </USelectMenu>
+                        </UFormGroup>
+
+                        <UFormGroup
+                            label="Rabatt:"
+                            class="mt-3"
+                            v-if="itemInfo.type !== 'deliveryNotes'"
+                        >
+                          <UInput
+                              v-model="row.discountPercent"
+                              type="number"
+                              step="0.01"
+                              placeholder="0"
+                          >
+                            <template #trailing>
+                              <span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
+                            </template>
+                          </UInput>
+                        </UFormGroup>
+                        <InputGroup class="w-full mt-3">
+                          <UFormGroup
+                              label="Optional:"
+                          >
+                            <UToggle
+                                :disabled="row.alternative"
+                                v-model="row.optional"
+                            />
+                          </UFormGroup>
+                          <UFormGroup
+                              class="ml-3"
+                              label="Alternativ:"
+                          >
+                            <UToggle
+                                :disabled="row.optional"
+                                v-model="row.alternative"
+                            />
+                          </UFormGroup>
+                        </InputGroup>
+
+                        <UAlert
+                            v-if="row.linkedEntitys && row.linkedEntitys.find(i => i.type === 'createddocuments' && i.subtype === 'advanceInvoices')"
+                            title="Berechnung des Individuellen Aufschlags für die Zeile gesperrt"
+                            color="orange"
+                            variant="subtle"
+                            class="my-3"
+                        />
+
+                        Verknüpfungen:
+                        <ul>
+                          <li
+                              v-for="linkedEntity in row.linkedEntitys"
+                          >
+                            - <a
+                              v-if="linkedEntity.subtype === 'advanceInvoices'"
+                              :to="`/createddocuments/show/${linkedEntity.id}`"
+                          >Abschlagsrechnung</a>
+                          </li>
+                        </ul>
+
+                        <UFormGroup
+                            label="Beschreibung:"
+                            class="mt-3"
+                        >
+                          <UTextarea
+                              v-model="row.description"
+                              rows="5"
+                          >
+
+                          </UTextarea>
+                        </UFormGroup>
+
+                        <!--                        <template #footer>
+                                                  <UButton
+                                                      @click="row.showEdit = false"
+                                                  >
+                                                    Speichern
+                                                  </UButton>
+                                                </template>-->
+                      </UCard>
+
+
+                    </UModal>
+                    <UModal v-model="row.showEditDiesel">
+                      <UCard>
+                        <template #header>
+                          Dieselverbrauch bearbeiten
+                        </template>
+                        <UFormGroup
+                            label="Menge Diesel:"
+                        >
+                          <UInput
+                              v-model="row.agriculture.dieselUsage"
+                              @change="row.agriculture.adblueUsage = row.agriculture.dieselUsage * 0.04"
+                              @input="row.agriculture.adblueUsage = row.agriculture.dieselUsage * 0.04"
+                              type="number"
+                              steps="0.01"
+                          >
+                            <template #trailing>
+                              L
+                            </template>
+                          </UInput>
+                        </UFormGroup>
+                        <UFormGroup
+                            label="Preis Diesel:"
+                        >
+                          <UInput
+                              v-model="row.agriculture.dieselPrice"
+                              @change="row.agriculture.adblueUsage = row.agriculture.dieselUsage * 0.04"
+                              type="number"
+                              steps="0.01"
+                          >
+                            <template #trailing>
+                              €/L
+                            </template>
+                          </UInput>
+                        </UFormGroup>
+                        <UFormGroup
+                            label="Menge AdBlue:"
+                        >
+                          <UInput
+                              v-model="row.agriculture.adblueUsage"
+                              type="number"
+                              steps="0.01"
+                          >
+                            <template #trailing>
+                              L
+                            </template>
+                          </UInput>
+                        </UFormGroup>
+                        <UFormGroup
+                            label="Preis AdBlue:"
+                        >
+                          <UInput
+                              v-model="row.agriculture.adbluePrice"
+                              type="number"
+                              steps="0.01"
+                          >
+                            <template #trailing>
+                              €/L
+                            </template>
+                          </UInput>
+                        </UFormGroup>
+                        <template #footer>
+                          <UButton
+                              @click="row.showEditDiesel = false,
+                                      processDieselPosition()"
+                          >
+                            Speichern
+                          </UButton>
+                        </template>
+                      </UCard>
+
+
+                    </UModal>
+                  </td>
+                  <td
+                      v-if="!['pagebreak','title','text'].includes(row.mode) && itemInfo.type !== 'deliveryNotes'"
+                  >
+
+                    <p class="text-right font-bold whitespace-nowrap">
+                      {{ row.optional || row.alternative ? "(" : "" }}
+                      <span v-if="row.discountPercent !== 0" class="line-through mr-2 text-rose-500">
+                        {{ getRowAmountUndiscounted(row) }} €
+                      </span>
+                      {{ getRowAmount(row) }} €
+                      {{ row.optional || row.alternative ? ")" : "" }}
+                    </p>
+                  </td>
+                  <td
+                      v-if="row.mode === 'title'"
+                      colspan="6"
+                  >
+                    <UInput
+                        :disabled="itemInfo.type === 'cancellationInvoices'"
+                        v-model="row.text"
+                        placeholder="Titel"
+                    />
+                  </td>
+                  <td>
+                    <UButton
+                        :disabled="itemInfo.type === 'cancellationInvoices'"
+                        variant="ghost"
+                        color="rose"
+                        icon="i-heroicons-x-mark-16-solid"
+                        @click="removePosition(row.id)"
+                    />
+                  </td>
+                </tr>
+              </template>
+            </draggable>
+          </table>
+          <UAlert
+              v-else
+              title="Keine Positionen hinzugefügt"
+              color="rose"
+              variant="outline"
+              icon="i-heroicons-light-bulb"
+          ></UAlert>
+
+          <InputGroup>
+            <UButton
+                @click="addPosition('service')"
+                class="mt-3"
+                :disabled="['advanceInvoices','cancellationInvoices'].includes(itemInfo.type)"
+            >
+              + Leistung
+            </UButton>
+            <UButton
+                @click="addPosition('normal')"
+                class="mt-3"
+                :disabled="['advanceInvoices','cancellationInvoices'].includes(itemInfo.type)"
+            >
+              + Artikel
+            </UButton>
+            <UButton
+                @click="addPosition('free')"
+                class="mt-3"
+                :disabled="['advanceInvoices','cancellationInvoices'].includes(itemInfo.type)"
+            >
+              + Freie Position
+            </UButton>
+            <UButton
+                @click="addPosition('pagebreak')"
+                class="mt-3"
+                :disabled="['advanceInvoices','cancellationInvoices'].includes(itemInfo.type)"
+            >
+              + Seitenumbruch
+            </UButton>
+            <UButton
+                @click="addPosition('title')"
+                class="mt-3"
+                :disabled="['advanceInvoices','cancellationInvoices'].includes(itemInfo.type)"
+            >
+              + Titel
+            </UButton>
+            <UButton
+                @click="addPosition('text')"
+                class="mt-3"
+                :disabled="['advanceInvoices','cancellationInvoices'].includes(itemInfo.type)"
+            >
+              + Text
+            </UButton>
+          </InputGroup>
+
+          <!--          <UDivider
+                        class="mt-5 mb-3"
+                        v-if="openAdvanceInvoices.length > 0 || itemInfo.usedAdvanceInvoices.length > 0"
+                    >
+                      Noch nicht abgerechnete Abschlagsrechnungen
+                    </UDivider>
+
+                    <div
+                        v-for="advanceInvoice in openAdvanceInvoices"
+                        :key="advanceInvoice.id"
+                        class="flex flex-row justify-between my-2"
+                    >
+                      <span>{{advanceInvoice.documentNumber}}</span>
+                      <span>Summe: {{renderCurrency(advanceInvoice.rows[0].price * (1 + advanceInvoice.rows[0].taxPercent/100))}}</span>
+                      <InputGroup>
+                        <UButton
+                          @click="addAdvanceInvoiceToInvoice(advanceInvoice.id)"
+                          :disabled="itemInfo.usedAdvanceInvoices.includes(advanceInvoice.id)"
+                          class="mr-2"
+                        >
+                          Verwenden
+                        </UButton>
+                        <UButton
+                          @click="itemInfo.usedAdvanceInvoices = itemInfo.usedAdvanceInvoices.filter(i => i !== advanceInvoice.id)"
+                          :disabled="!itemInfo.usedAdvanceInvoices.includes(advanceInvoice.id)"
+                          color="rose"
+                          variant="outline"
+                        >
+                          X
+                        </UButton>
+                      </InputGroup>
+                    </div>-->
+
+          <UDivider class="my-3" v-if="Object.keys(documentTotal.titleSums).length > 0">Überschriften</UDivider>
+
+          <table>
+            <tr v-for="sumKey in Object.keys(documentTotal.titleSums) ">
+              <td>{{ sumKey }}</td>
+              <td>{{ useCurrency(documentTotal.titleSums[sumKey]) }}</td>
+            </tr>
+          </table>
+
+          <UDivider class="my-3" v-if="itemInfo.rows.length > 0">Auswertung & Gesamt</UDivider>
+
+
+          <div class="w-full flex justify-between" v-if="itemInfo.type !== 'deliveryNotes'">
+            <table class="w-1/2" v-if="itemInfo.rows.length > 0">
+              <tr v-if="documentReport.totalProductsPurchasePrice !== 0">
+                <td>Einkaufspreis Artikel Gesamt:</td>
+                <td class="text-right">{{ useCurrency(documentReport.totalProductsPurchasePrice) }}</td>
+              </tr>
+              <tr v-if="documentReport.totalProductsFromServicesPurchasePrice !== 0">
+                <td>Einkaufspreis Artikel aus Leistungen Gesamt:</td>
+                <td class="text-right">{{ useCurrency(documentReport.totalProductsFromServicesPurchasePrice) }}</td>
+              </tr>
+              <tr v-if="documentReport.totalHoursFromServices.totalPurchasePrice !== 0">
+                <td>Einkaufspreis Personal aus Leistungen Gesamt:</td>
+                <td class="text-right">{{ useCurrency(documentReport.totalHoursFromServices.totalPurchasePrice) }}</td>
+              </tr>
+              <tr>
+                <td>Gewinn Gesamt:</td>
+                <td class="text-right">{{ useCurrency(documentReport.totalMargin) }}</td>
+              </tr>
+              <tr v-if="documentReport.totalHoursSellingPrice !== 0">
+                <td>Lohnkosten Verkauf:</td>
+                <td class="text-right">{{ useCurrency(documentReport.totalHoursSellingPrice) }}</td>
+              </tr>
+              <tr v-for="key in Object.keys(documentReport.totalHoursFromServices.byName)">
+                <td>{{ key }}</td>
+                <td class="text-right">{{ documentReport.totalHoursFromServices.byName[key] }} h</td>
+              </tr>
+              <tr v-if="documentReport.totalHoursFromServices.total !== 0">
+                <td>Stunden Gesamt:</td>
+                <td class="text-right">{{ documentReport.totalHoursFromServices.total }} h</td>
+              </tr>
+            </table>
+            <table class="w-1/3 h-full" v-if="itemInfo.rows.length > 0">
+              <tr>
+                <td class="font-bold">Netto:</td>
+                <td class="text-right">{{ renderCurrency(documentTotal.totalNet) }}</td>
+              </tr>
+              <tr v-if="itemInfo.taxType === 'Standard' && itemInfo.rows.find(i => i.taxPercent === 19)">
+                <td class="font-bold">zzgl. 19 % USt auf {{ renderCurrency(documentTotal.totalNet19) }}:</td>
+                <td class="text-right">{{ renderCurrency(documentTotal.total19) }}</td>
+              </tr>
+              <tr v-if="itemInfo.taxType === 'Standard' && itemInfo.rows.find(i => i.taxPercent === 7)">
+                <td class="font-bold">zzgl. 7 % USt auf {{ renderCurrency(documentTotal.totalNet7) }}:</td>
+                <td class="text-right">{{ renderCurrency(documentTotal.total7) }}</td>
+              </tr>
+              <tr v-if="itemInfo.taxType === 'Standard' && itemInfo.rows.find(i => i.taxPercent === 0)">
+                <td class="font-bold">zzgl. 0 % USt auf {{ renderCurrency(documentTotal.totalNet0) }}:</td>
+                <td class="text-right">{{ renderCurrency(documentTotal.total0) }}</td>
+              </tr>
+              <tr>
+                <td class="font-bold">Brutto:</td>
+                <td class="text-right">{{ renderCurrency(documentTotal.totalGross) }}</td>
+              </tr>
+              <tr v-if="documentTotal.totalGrossAlreadyPaid !== 0">
+                <td class="font-bold">Bereits bezahlt:</td>
+                <td class="text-right">{{ renderCurrency(documentTotal.totalGrossAlreadyPaid) }}</td>
+              </tr>
+              <tr v-if="documentTotal.totalGrossAlreadyPaid !== 0">
+                <td class="font-bold">Offene Summe:</td>
+                <td class="text-right">{{ renderCurrency(documentTotal.totalSumToPay) }}</td>
+              </tr>
+            </table>
+          </div>
+
+          <!--          <UDivider
+                        class="my-3"
+                    >Auswertung</UDivider>
+
+                    <div class="w-full flex justify-end">
+                      <table class="w-1/3">
+                        <tr v-if="documentReport.totalProductsPurchasePrice !== 0">
+                          <td>Einkaufspreis Artikel Gesamt:</td>
+                          <td class="text-right">{{useCurrency(documentReport.totalProductsPurchasePrice)}}</td>
+                        </tr>
+                        <tr v-if="documentReport.totalProductsFromServicesPurchasePrice !== 0">
+                          <td>Einkaufspreis Artikel aus Leistungen Gesamt:</td>
+                          <td class="text-right">{{useCurrency(documentReport.totalProductsFromServicesPurchasePrice)}}</td>
+                        </tr>
+                        <tr v-if="documentReport.totalHoursFromServices.totalPurchasePrice !== 0">
+                          <td>Einkaufspreis Personal aus Leistungen Gesamt:</td>
+                          <td class="text-right">{{useCurrency(documentReport.totalHoursFromServices.totalPurchasePrice)}}</td>
+                        </tr>
+                        <tr>
+                          <td>Gewinn Gesamt:</td>
+                          <td class="text-right">{{useCurrency(documentReport.totalMargin)}}</td>
+                        </tr>
+                        <tr v-if="documentReport.totalHoursSellingPrice !== 0">
+                          <td>Lohnkosten Verkauf:</td>
+                          <td class="text-right">{{useCurrency(documentReport.totalHoursSellingPrice)}}</td>
+                        </tr>
+                        <tr v-for="key in Object.keys(documentReport.totalHoursFromServices.byName)">
+                          <td>{{key}}</td>
+                          <td class="text-right">{{documentReport.totalHoursFromServices.byName[key]}} h</td>
+                        </tr>
+                        <tr v-if="documentReport.totalHoursFromServices.total !== 0">
+                          <td>Stunden Gesamt:</td>
+                          <td class="text-right">{{documentReport.totalHoursFromServices.total}} h</td>
+                        </tr>
+                      </table>
+                    </div>-->
+
+
+
+          <UDivider
+              class="my-3"
+          />
+
+          <UFormGroup
+              label="Vorlage auswählen"
+          >
+            <USelectMenu
+                :options="getTextTemplateByType(itemInfo.type,'endText')"
+                v-model="itemInfo.endText"
+                option-attribute="text"
+                value-attribute="text"
+            >
+              <template #option="{option}">
+                {{option.name}} - {{option.text}}
+              </template>
+              <template #label>
+                {{texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)) ? texttemplates.find(i => i.text === itemInfo.endText && (itemInfo.type === "serialInvoices" ? i.documentType === "invoices" : i.documentType === itemInfo.type)).name : "Keine Vorlage ausgewählt oder Vorlage verändert"}}
+              </template>
+            </USelectMenu>
+          </UFormGroup>
+
+          <UFormGroup
+              label="Nachbemerkung:"
+          >
+            <UTextarea
+                v-model="itemInfo.endText"
+                :rows="6"
+            />
+          </UFormGroup>
+        </div>
+        <div v-else-if="item.label === 'Vorschau'">
+          <PDFViewer
+              v-if="showDocument"
+              :uri="uri"
+              location="edit_create_document"
+          />
+        </div>
+      </template>
+    </UTabs>
+    <UProgress animation="carousel" v-else/>
+  </UDashboardPanelContent>
+  <PageLeaveGuard :when="true"/>
+
+
+
+
+</template>
+
+<style scoped>
+
+
+th {
+  text-align: left;
+}
+
+td {
+  padding: .4em;
+}
+
+/*tr:hover {
+  border: 1px solid #69c350;
+}*/
+
+.previewDocumentMobile {
+  aspect-ratio: 1 / 1.414;
+
+}
+
+.previewDocument {
+  height: 80vh;
+
+}
+</style>
\ No newline at end of file
diff --git a/frontend/pages/createDocument/index.vue b/frontend/pages/createDocument/index.vue
new file mode 100644
index 0000000..10378ab
--- /dev/null
+++ b/frontend/pages/createDocument/index.vue
@@ -0,0 +1,355 @@
+<template>
+  <UDashboardNavbar :badge="filteredRows.length" title="Ausgangsbelege">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          autocomplete="off"
+          class="hidden lg:block"
+          icon="i-heroicons-funnel"
+          placeholder="Suche..."
+          @change="tempStore.modifySearchString('createddocuments',searchString)"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/"/>
+        </template>
+      </UInput>
+      <UButton
+          v-if="searchString.length > 0"
+          color="rose"
+          icon="i-heroicons-x-mark"
+          variant="outline"
+          @click="clearSearchString()"
+      />
+      <UButton
+          @click="router.push(`/createDocument/edit`)"
+      >
+        + Ausgangsbeleg
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+
+
+    <template #right>
+<!--      <USelectMenu
+          v-model="selectedColumns"
+          :options="templateColumns"
+          by="key"
+          class="hidden lg:block"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          multiple
+          @change="tempStore.modifyColumns('createddocuments',selectedColumns)"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>-->
+      <USelectMenu
+          v-if="selectableFilters.length > 0"
+          v-model="selectedFilters"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
+          :options="selectableFilters"
+          :ui-menu="{ width: 'min-w-max' }"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          multiple
+      >
+        <template #label>
+          Filter
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+  <UTabs :items="selectedTypes" class="m-3">
+    <template #default="{item}">
+      {{ item.label }}
+      <UBadge
+          class="ml-2"
+          variant="outline"
+      >
+        {{ getRowsForTab(item.key).length }}
+      </UBadge>
+    </template>
+    <template #item="{item}">
+      <div style="height: 80vh; overflow-y: scroll">
+        <UTable
+            :columns="getColumnsForTab(item.key)"
+            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+            :rows="getRowsForTab(item.key)"
+            :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+            class="w-full"
+            @select="selectItem"
+        >
+          <template #type-data="{row}">
+            <span v-if="row.type === 'cancellationInvoices'" class="text-cyan-500">{{
+                dataStore.documentTypesForCreation[row.type].labelSingle
+              }} für {{ filteredRows.find(i => row.createddocument?.id === i.id)?.documentNumber }}</span>
+            <span v-else>{{ dataStore.documentTypesForCreation[row.type].labelSingle }}</span>
+          </template>
+
+          <template #state-data="{row}">
+            <span v-if="row.state === 'Entwurf'" class="text-rose-500">{{ row.state }}</span>
+            <span
+                v-if="row.state === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === row.id)"
+                class="text-primary-500"
+            >
+              {{ row.state }}
+            </span>
+            <span
+                v-else-if="row.state === 'Gebucht' && items.find(i => i.createddocument && i.createddocument.id === row.id && i.type === 'cancellationInvoices') && ['invoices','advanceInvoices'].includes(row.type)"
+                class="text-cyan-500"
+            >
+              Storniert mit {{ items.find(i => i.createddocument && i.createddocument.id === row.id).documentNumber }}
+            </span>
+            <span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{ row.state }}</span>
+          </template>
+
+          <template #partner-data="{row}">
+            <span v-if="row.customer && row.customer.name.length < 21">{{ row.customer ? row.customer.name : "" }}</span>
+            <UTooltip v-else-if="row.customer && row.customer.name.length > 20" :text="row.customer.name">
+              {{ row.customer.name.substring(0, 20) }}...
+            </UTooltip>
+          </template>
+
+          <template #reference-data="{row}">
+            <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.documentNumber }}</span>
+            <span v-else>{{ row.documentNumber }}</span>
+          </template>
+
+          <template #date-data="{row}">
+            <span v-if="row.date">{{ row.date ? dayjs(row.date).format("DD.MM.YY") : '' }}</span>
+            <span v-if="row.documentDate">{{ row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : '' }}</span>
+          </template>
+
+          <template #dueDate-data="{row}">
+             <span
+                 v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)"
+                 :class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' "
+             >
+               {{ row.documentDate ? dayjs(row.documentDate).add(row.paymentDays, 'day').format("DD.MM.YY") : '' }}
+             </span>
+          </template>
+
+          <template #paid-data="{row}">
+            <div
+                v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)">
+              <span v-if="useSum().getIsPaid(row,items)" class="text-primary-500">Bezahlt</span>
+              <span v-else class="text-rose-600">Offen</span>
+            </div>
+          </template>
+
+          <template #amount-data="{row}">
+            <span v-if="row.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items)) }}</span>
+          </template>
+
+          <template #amountOpen-data="{row}">
+            <span
+                v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">
+              {{ displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n, {amount}) => n + amount, 0)) }}
+            </span>
+          </template>
+        </UTable>
+      </div>
+    </template>
+  </UTabs>
+</template>
+
+<script setup>
+import dayjs from "dayjs";
+
+defineShortcuts({
+  '/': () => {
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push('/createDocument/edit')
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      // Zugriff auf das aktuell sichtbare Element basierend auf Tab und Selektion
+      const currentList = getRowsForTab(selectedTypes.value[activeTabIndex.value]?.key || 'drafts')
+
+      // Fallback auf globale Liste falls nötig, aber Logik sollte auf Tab passen
+      if (filteredRows.value[selectedItem.value]) {
+        router.push(`/createDocument/show/${filteredRows.value[selectedItem.value].id}`)
+      }
+    }
+  },
+  'arrowdown': () => {
+    if (selectedItem.value < filteredRows.value.length - 1) {
+      selectedItem.value += 1
+    } else {
+      selectedItem.value = 0
+    }
+  },
+  'arrowup': () => {
+    if (selectedItem.value === 0) {
+      selectedItem.value = filteredRows.value.length - 1
+    } else {
+      selectedItem.value -= 1
+    }
+  }
+})
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+const router = useRouter()
+
+const type = "createddocuments"
+const dataType = dataStore.dataTypes[type]
+
+const items = ref([])
+const selectedItem = ref(0)
+const activeTabIndex = ref(0)
+
+const setupPage = async () => {
+  items.value = (await useEntities("createddocuments").select("*, customer(id,name), statementallocations(id,amount),linkedDocument(*)", "documentNumber", true, true))
+}
+
+setupPage()
+
+const templateColumns = [
+  {key: "reference", label: "Referenz"},
+  {key: 'type', label: "Typ"},
+  {key: 'state', label: "Status"},
+  {key: "amount", label: "Betrag"},
+  {key: 'partner', label: "Kunde"},
+  {key: "date", label: "Datum"},
+  {key: "amountOpen", label: "Offener Betrag"},
+  {key: "paid", label: "Bezahlt"},
+  {key: "dueDate", label: "Fällig"}
+]
+
+// Eigene Spalten für Entwürfe: Referenz raus, Status rein
+const draftColumns = [
+  {key: 'type', label: "Typ"},
+  {key: 'state', label: "Status"}, // Status wieder drin
+  {key: 'partner', label: "Kunde"},
+  {key: "date", label: "Erstellt am"},
+  {key: "amount", label: "Betrag"}
+]
+
+const selectedColumns = ref(tempStore.columns["createddocuments"] ? tempStore.columns["createddocuments"] : templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.find(i => i.key === column.key)))
+
+const getColumnsForTab = (tabKey) => {
+  if (tabKey === 'drafts') {
+    return draftColumns
+  }
+  return columns.value
+}
+
+const templateTypes = [
+  {
+    key: "drafts",
+    label: "Entwürfe"
+  },
+  {
+    key: "invoices",
+    label: "Rechnungen"
+  },
+  /*,{
+    key: "cancellationInvoices",
+    label: "Stornorechnungen"
+  },{
+    key: "advanceInvoices",
+    label: "Abschlagsrechnungen"
+  },*/
+  {
+    key: "quotes",
+    label: "Angebote"
+  }, {
+    key: "deliveryNotes",
+    label: "Lieferscheine"
+  }, {
+    key: "confirmationOrders",
+    label: "Auftragsbestätigungen"
+  }
+]
+const selectedTypes = ref(tempStore.filters["createddocuments"] ? tempStore.filters["createddocuments"] : templateTypes)
+const types = computed(() => {
+  return templateTypes.filter((type) => selectedTypes.value.find(i => i.key === type.key))
+})
+
+const selectItem = (item) => {
+  console.log(item)
+  if (item.state === "Entwurf") {
+    router.push(`/createDocument/edit/${item.id}`)
+  } else if (item.state !== "Entwurf") {
+    router.push(`/createDocument/show/${item.id}`)
+  }
+}
+
+const displayCurrency = (value, currency = "€") => {
+  return `${Number(value).toFixed(2).replace(".", ",")} ${currency}`
+}
+
+const searchString = ref(tempStore.searchStrings['createddocuments'] || '')
+
+const clearSearchString = () => {
+  tempStore.clearSearchString('createddocuments')
+  searchString.value = ''
+}
+const selectableFilters = ref(dataType.filters.map(i => i.name))
+const selectedFilters = ref(dataType.filters.filter(i => i.default).map(i => i.name) || [])
+
+const filteredRows = computed(() => {
+  let tempItems = items.value.filter(i => types.value.find(x => {
+    // 1. Draft Tab Logic
+    if (x.key === 'drafts') return i.state === 'Entwurf'
+
+    // 2. Global Draft Exclusion (drafts shouldn't be in other tabs)
+    if (i.state === 'Entwurf' && x.key !== 'drafts') return false
+
+    // 3. Normal Type Logic
+    if (x.key === 'invoices') return ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type)
+    return x.key === i.type
+  }))
+
+  tempItems = tempItems.filter(i => i.type !== "serialInvoices")
+
+  tempItems = tempItems.map(i => {
+    return {
+      ...i,
+      class: i.archived ? 'bg-red-500/50 dark:bg-red-400/50' : null
+    }
+  })
+
+  if (selectedFilters.value.length > 0) {
+    selectedFilters.value.forEach(filterName => {
+      let filter = dataType.filters.find(i => i.name === filterName)
+      tempItems = tempItems.filter(filter.filterFunction)
+    })
+  }
+
+  tempItems = useSearch(searchString.value, tempItems)
+
+  return useSearch(searchString.value, tempItems.slice().reverse())
+})
+
+const getRowsForTab = (tabKey) => {
+  return filteredRows.value.filter(row => {
+    if (tabKey === 'drafts') {
+      return row.state === 'Entwurf'
+    }
+
+    if (row.state === 'Entwurf') return false
+
+    if (tabKey === 'invoices') {
+      return ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(row.type)
+    }
+    return row.type === tabKey
+  })
+}
+
+const isPaid = (item) => {
+  let amountPaid = 0
+  item.statementallocations.forEach(allocation => amountPaid += allocation.amount)
+  return Number(amountPaid.toFixed(2)) === useSum().getCreatedDocumentSum(item, items.value)
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/pages/createDocument/serialInvoice.vue b/frontend/pages/createDocument/serialInvoice.vue
new file mode 100644
index 0000000..b84c471
--- /dev/null
+++ b/frontend/pages/createDocument/serialInvoice.vue
@@ -0,0 +1,560 @@
+<template>
+  <UDashboardNavbar title="Serienrechnungen" :badge="filteredRows.length">
+    <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
+          icon="i-heroicons-queue-list"
+          color="gray"
+          variant="ghost"
+          label="Ausführungen"
+          @click="openExecutionsSlideover"
+      />
+
+      <UButton
+          icon="i-heroicons-play"
+          color="white"
+          variant="solid"
+          label="Ausführen"
+          @click="openExecutionModal"
+      />
+
+      <UButton
+          @click="router.push(`/createDocument/edit?type=serialInvoices`)"
+      >
+        + Serienrechnung
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedFilters"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="filterOptions"
+          option-attribute="name"
+          value-attribute="name"
+          multiple
+          class="hidden lg:block"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
+          :ui-menu="{ width: 'min-w-max' }"
+      >
+        <template #label>
+          Filter
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+
+  <div v-if="runningExecutions.length > 0" class="p-4 space-y-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
+    <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 flex items-center gap-2">
+      <UIcon name="i-heroicons-arrow-path" class="animate-spin text-primary" />
+      Laufende Ausführungen
+    </h3>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <UCard v-for="exec in runningExecutions" :key="exec.id" :ui="{ body: { padding: 'p-4' } }">
+        <div class="flex justify-between items-start mb-2">
+          <div>
+            <p class="text-sm font-medium">Start: {{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</p>
+          </div>
+          <UBadge color="primary" variant="subtle">Läuft</UBadge>
+        </div>
+
+        <div class="text-xs text-gray-500 flex justify-between mb-3">
+          <span>{{exec.summary}}</span>
+        </div>
+
+        <div class="flex justify-end pt-2 border-t border-gray-100 dark:border-gray-800">
+          <UButton
+              size="xs"
+              color="white"
+              variant="solid"
+              icon="i-heroicons-check"
+              label="Fertigstellen"
+              :loading="finishingId === exec.id"
+              @click="finishExecution(exec.id)"
+          />
+        </div>
+      </UCard>
+    </div>
+  </div>
+
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(row) => router.push(`/createDocument/edit/${row.id}`)"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+  >
+    <template #actions-data="{ row }">
+      <div @click.stop>
+        <UDropdown :items="getActionItems(row)" :popper="{ placement: 'bottom-end' }">
+          <UButton
+              color="gray"
+              variant="ghost"
+              icon="i-heroicons-ellipsis-horizontal-20-solid"
+          />
+        </UDropdown>
+      </div>
+    </template>
+
+    <template #type-data="{row}">
+      {{dataStore.documentTypesForCreation[row.type].labelSingle}}
+    </template>
+    <template #partner-data="{row}">
+      <span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
+
+    </template>
+    <template #amount-data="{row}">
+      {{displayCurrency(calculateDocSum(row))}}
+    </template>
+    <template #serialConfig.active-data="{row}">
+      <span v-if="row.serialConfig.active" class="text-primary">Ja</span>
+      <span v-else class="text-rose-600">Nein</span>
+    </template>
+    <template #contract-data="{row}">
+      <span v-if="row.contract">{{row.contract.contractNumber}} - {{row.contract.name}}</span>
+    </template>
+    <template #serialConfig.intervall-data="{row}">
+      <span v-if="row.serialConfig?.intervall === 'monatlich'">Monatlich</span>
+      <span v-if="row.serialConfig?.intervall === 'vierteljährlich'">Quartalsweise</span>
+    </template>
+    <template #payment_type-data="{row}">
+      <span v-if="row.payment_type === 'transfer'">Überweisung</span>
+      <span v-else-if="row.payment_type === 'direct-debit'">SEPA - Einzug</span>
+    </template>
+  </UTable>
+
+  <UModal v-model="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
+    <UCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Serienrechnungen manuell ausführen
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
+        </div>
+      </template>
+
+      <div class="space-y-4">
+        <UFormGroup label="Ausführungsdatum (Belegdatum)" help="Dieses Datum steuert auch den Leistungszeitraum (z.B. Vormonat bei 'Rückwirkend').">
+          <UInput type="date" v-model="executionDate" />
+        </UFormGroup>
+
+        <UDivider label="Vorlagen auswählen" />
+
+        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+          <UInput
+              v-model="modalSearch"
+              icon="i-heroicons-magnifying-glass"
+              placeholder="Kunde oder Vertrag suchen..."
+              class="w-full sm:w-64"
+              size="sm"
+          />
+
+          <div class="flex items-center gap-2">
+                <span class="text-xs text-gray-500 hidden sm:inline">
+                   {{ filteredExecutionList.length }} sichtbar
+                </span>
+            <UButton
+                size="2xs"
+                color="gray"
+                variant="soft"
+                label="Alle auswählen"
+                @click="selectAllTemplates"
+            />
+            <UButton
+                size="2xs"
+                color="gray"
+                variant="ghost"
+                label="Keine"
+                @click="selectedExecutionRows = []"
+            />
+          </div>
+        </div>
+
+        <div class="max-h-96 overflow-y-auto border border-gray-200 dark:border-gray-800 rounded-md">
+          <UTable
+              v-model="selectedExecutionRows"
+              :rows="filteredExecutionList"
+              :columns="executionColumns"
+              :ui="{ th: { base: 'whitespace-nowrap' } }"
+          >
+            <template #partner-data="{row}">
+              {{row.customer ? row.customer.name : "-"}}
+            </template>
+            <template #amount-data="{row}">
+              {{displayCurrency(calculateDocSum(row))}}
+            </template>
+            <template #serialConfig.intervall-data="{row}">
+              {{ row.serialConfig?.intervall }}
+            </template>
+            <template #contract-data="{row}">
+              {{row.contract?.contractNumber}} - {{row.contract?.name}}
+            </template>
+          </UTable>
+        </div>
+
+        <div class="text-sm text-gray-500">
+          {{ selectedExecutionRows.length }} Vorlage(n) ausgewählt.
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
+          <UButton
+              color="primary"
+              :loading="isExecuting"
+              :disabled="selectedExecutionRows.length === 0"
+              @click="executeSerialInvoices"
+          >
+            Jetzt ausführen
+          </UButton>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+
+  <USlideover v-model="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }">
+    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Alle Ausführungen
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
+        </div>
+      </template>
+
+      <div class="space-y-4 overflow-y-auto h-full p-1">
+        <div v-if="executionsLoading" class="flex justify-center py-4">
+          <UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 w-6 h-6" />
+        </div>
+
+        <div v-else-if="completedExecutions.length === 0" class="text-center text-gray-500 py-8">
+          Keine abgeschlossenen Ausführungen gefunden.
+        </div>
+
+        <div v-for="exec in completedExecutions" :key="exec.id" class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
+          <div class="flex justify-between items-start mb-2">
+            <span class="text-sm font-semibold">{{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</span>
+            <UBadge :color="getStatusColor(exec.status)" variant="subtle" size="xs">
+              {{ getStatusLabel(exec.status) }}
+            </UBadge>
+          </div>
+          <div class="text-xs text-gray-500 grid grid-cols-2 gap-2 mt-2">
+            <div>
+              <UIcon name="i-heroicons-check-circle" class="text-green-500 w-3 h-3 align-text-bottom" />
+              {{exec.summary}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </UCard>
+  </USlideover>
+
+</template>
+
+<script setup>
+import dayjs from "dayjs";
+
+const router = useRouter()
+const { $api } = useNuxtApp()
+const toast = useToast()
+const dataStore = useDataStore()
+
+const items = ref([])
+const selectedItem = ref(0)
+
+// --- Execution State ---
+const showExecutionModal = ref(false)
+const executionDate = ref(dayjs().format('YYYY-MM-DD'))
+const selectedExecutionRows = ref([])
+const isExecuting = ref(false)
+const modalSearch = ref("") // NEU: Suchstring für das Modal
+
+// --- SerialExecutions State ---
+const showExecutionsSlideover = ref(false)
+const executionItems = ref([])
+const executionsLoading = ref(false)
+const finishingId = ref(null)
+
+const setupPage = async () => {
+  items.value = await useEntities("createddocuments").select("*, customer(id,name), contract(id,name, contractNumber)","documentDate",undefined,true)
+  await fetchExecutions()
+}
+
+// --- Logic für Ausführungen ---
+
+const fetchExecutions = async () => {
+  executionsLoading.value = true
+  try {
+    const res = await useEntities("serialexecutions").select("*", "createdAt", true)
+    executionItems.value = res || []
+  } catch (e) {
+    console.error("Fehler beim Laden der serialexecutions", e)
+  } finally {
+    executionsLoading.value = false
+  }
+}
+
+const runningExecutions = computed(() => {
+  return executionItems.value.filter(i => i.status === 'draft')
+})
+
+const completedExecutions = computed(() => {
+  return executionItems.value.filter(i => i.status !== 'running' && i.status !== 'pending' && i.status !== 'draft')
+})
+
+const openExecutionsSlideover = () => {
+  showExecutionsSlideover.value = true
+  fetchExecutions()
+}
+
+const finishExecution = async (executionId) => {
+  if (!executionId) return
+  finishingId.value = executionId
+  try {
+    await $api(`/api/functions/serial/finish/${executionId}`, { method: 'POST' })
+    toast.add({
+      title: 'Ausführung beendet',
+      description: 'Der Prozess wurde erfolgreich als fertig markiert.',
+      icon: 'i-heroicons-check-circle',
+      color: 'green'
+    })
+    await fetchExecutions()
+  } catch (error) {
+    console.error(error)
+    toast.add({
+      title: 'Fehler',
+      description: 'Die Ausführung konnte nicht beendet werden.',
+      icon: 'i-heroicons-exclamation-triangle',
+      color: 'red'
+    })
+  } finally {
+    finishingId.value = null
+  }
+}
+
+const getStatusColor = (status) => {
+  switch (status) {
+    case 'completed': return 'green'
+    case 'error': return 'red'
+    case 'running':
+    case 'draft': return 'primary'
+    default: return 'gray'
+  }
+}
+
+const getStatusLabel = (status) => {
+  switch (status) {
+    case 'completed': return 'Abgeschlossen'
+    case 'error': return 'Fehlerhaft'
+    case 'draft': return 'Gestartet'
+    default: return status
+  }
+}
+
+// --- Bestehende Logik ---
+
+const searchString = ref("")
+
+const filteredRows = computed(() => {
+  let temp = items.value.filter(i => i.type === "serialInvoices").map(i => {
+    return {
+      ...i,
+      class: i.archived ? 'bg-red-500/50 dark:bg-red-400/50' : null
+    }
+  })
+
+  selectedFilters.value.forEach(filterName => {
+    let filter = filterOptions.value.find(i => i.name === filterName)
+    temp = temp.filter(filter.filterFunction)
+  })
+
+  return useSearch(searchString.value, temp.slice().reverse())
+})
+
+// Basis Liste für das Modal (nur Aktive)
+const activeTemplates = computed(() => {
+  return items.value
+      .filter(i => i.type === "serialInvoices" && !!i.serialConfig?.active)
+      .map(i => ({...i}))
+})
+
+// NEU: Gefilterte Liste für das Modal basierend auf der Suche
+const filteredExecutionList = computed(() => {
+  if (!modalSearch.value) return activeTemplates.value
+
+  const term = modalSearch.value.toLowerCase()
+
+  return activeTemplates.value.filter(row => {
+    const customerName = row.customer?.name?.toLowerCase() || ""
+    const contractNum = row.contract?.contractNumber?.toLowerCase() || ""
+    const contractName = row.contract?.name?.toLowerCase() || ""
+
+    return customerName.includes(term) ||
+        contractNum.includes(term) ||
+        contractName.includes(term)
+  })
+})
+
+// NEU: Alle auswählen (nur die aktuell sichtbaren/gefilterten)
+const selectAllTemplates = () => {
+  // WICHTIG: Überschreibt nicht bestehende Auswahl, sondern fügt hinzu oder ersetzt.
+  // Hier ersetzen wir die Auswahl komplett mit dem aktuellen Filterergebnis
+  selectedExecutionRows.value = [...filteredExecutionList.value]
+}
+
+const getActionItems = (row) => {
+  const isActive = row.serialConfig && row.serialConfig.active
+  return [
+    [{
+      label: isActive ? 'Deaktivieren' : 'Aktivieren',
+      icon: isActive ? 'i-heroicons-pause' : 'i-heroicons-play',
+      class: isActive ? 'text-red-500' : 'text-primary',
+      click: () => toggleActiveState(row)
+    }]
+  ]
+}
+
+const toggleActiveState = async (row) => {
+  const newState = !row.serialConfig.active
+  row.serialConfig.active = newState
+  try {
+    await useEntities('createddocuments').update(row.id, {
+      serialConfig: { ...row.serialConfig, active: newState }
+    })
+    toast.add({
+      title: newState ? 'Aktiviert' : 'Deaktiviert',
+      description: `Die Vorlage wurde ${newState ? 'aktiviert' : 'deaktiviert'}.`,
+      icon: 'i-heroicons-check',
+      color: 'green'
+    })
+  } catch (e) {
+    console.error(e)
+    row.serialConfig.active = !newState
+    toast.add({
+      title: 'Fehler',
+      description: 'Status konnte nicht gespeichert werden.',
+      color: 'red'
+    })
+  }
+}
+
+const templateColumns = [
+  { key: 'actions', label: '' },
+  { key: 'serialConfig.active', label: "Aktiv" },
+  { key: "amount", label: "Betrag" },
+  { key: 'partner', label: "Kunde" },
+  { key: 'contract', label: "Vertrag" },
+  { key: 'serialConfig.intervall', label: "Rhythmus" },
+  { key: 'payment_type', label: "Zahlart" }
+]
+
+const executionColumns = [
+  {key: 'partner', label: "Kunde"},
+  {key: 'contract', label: "Vertrag"},
+  {key: 'serialConfig.intervall', label: "Intervall"},
+  {key: "amount", label: "Betrag"},
+]
+
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+const filterOptions = ref([
+  {
+    name: "Archivierte ausblenden",
+    default: true,
+    "filterFunction": function (row) {
+      return !row.archived;
+    }
+  }, {
+    name: "Inaktive ausblenden",
+    "filterFunction": function (row) {
+      return !!row.serialConfig.active;
+    }
+  }
+])
+const selectedFilters = ref(filterOptions.value.filter(i => i.default).map(i => i.name) || [])
+
+const displayCurrency = (value, currency = "€") => {
+  return `${Number(value).toFixed(2).replace(".", ",")} ${currency}`
+}
+
+const calculateDocSum = (row) => {
+  let sum = 0
+  row.rows.forEach(row => {
+    if (row.mode === "normal" || row.mode === "service" || row.mode === "free") {
+      sum += row.quantity * row.price * (1 - row.discountPercent / 100) * (1 + row.taxPercent / 100)
+    }
+  })
+  return sum.toFixed(2)
+}
+
+const openExecutionModal = () => {
+  executionDate.value = dayjs().format('YYYY-MM-DD')
+  selectedExecutionRows.value = []
+  modalSearch.value = "" // Reset Search
+  showExecutionModal.value = true
+}
+
+const executeSerialInvoices = async () => {
+  if (selectedExecutionRows.value.length === 0) return;
+
+  isExecuting.value = true
+
+  try {
+    const payload = {
+      tenantId: dataStore.currentTenantId || items.value[0]?.tenant,
+      executionDate: executionDate.value,
+      templateIds: selectedExecutionRows.value.map(row => row.id)
+    }
+
+    const res = await $api('/api/functions/serial/start', {
+      method: 'POST',
+      body: payload
+    })
+
+    toast.add({
+      title: 'Ausführung gestartet',
+      description: `${res.length} Rechnungen werden im Hintergrund generiert.`,
+      icon: 'i-heroicons-check-circle',
+      color: 'green'
+    })
+
+    showExecutionModal.value = false
+    selectedExecutionRows.value = []
+
+    await fetchExecutions()
+
+  } catch (error) {
+    console.error(error)
+    toast.add({
+      title: 'Fehler',
+      description: 'Die Ausführung konnte nicht gestartet werden.',
+      icon: 'i-heroicons-exclamation-triangle',
+      color: 'red'
+    })
+  } finally {
+    isExecuting.value = false
+  }
+}
+
+setupPage()
+</script>
\ No newline at end of file
diff --git a/frontend/pages/createDocument/show/[id].vue b/frontend/pages/createDocument/show/[id].vue
new file mode 100644
index 0000000..3d91df4
--- /dev/null
+++ b/frontend/pages/createDocument/show/[id].vue
@@ -0,0 +1,153 @@
+<script setup>
+import CopyCreatedDocumentModal from "~/components/copyCreatedDocumentModal.vue";
+
+
+
+defineShortcuts({
+  'backspace': () => {
+    router.push("/createDocument")
+  },
+})
+
+const modal = useModal()
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+const dataStore = useDataStore()
+
+const itemInfo = ref({})
+const linkedDocument =ref({})
+const setupPage = async () => {
+  if(route.params) {
+    if(route.params.id) itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id,"*,files(*),linkedDocument(*), statementallocations(bs_id)")
+
+    console.log(itemInfo.value)
+
+    linkedDocument.value = await useFiles().selectDocument(itemInfo.value.files[0].id)
+  }
+}
+
+setupPage()
+
+const openEmail = () => {
+  if(["invoices","advanceInvoices"].includes(itemInfo.value.type)){
+    router.push(`/email/new?loadDocuments=["${linkedDocument.value.id}"]&bcc=${encodeURIComponent(auth.activeTenantData.standardEmailForInvoices || "")}`)
+  } else {
+    router.push(`/email/new?loadDocuments=["${linkedDocument.value.id}"]`)
+  }
+}
+
+const openBankstatements = () => {
+  if(itemInfo.value.statementallocations.length > 1) {
+    navigateTo(`/banking/?filter=${JSON.stringify(itemInfo.value.statementallocations.map(i => i.bankstatement))}`)
+  } else {
+    navigateTo(`/banking/statements/edit/${itemInfo.value.statementallocations[0].bankstatement}`)
+  }
+}
+</script>
+
+<template>
+  <UDashboardNavbar
+      title="Erstelltes Dokument anzeigen"
+  >
+
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #left>
+      <UButton
+          @click="router.push(`/createDocument/edit/${itemInfo.id}`)"
+          v-if="itemInfo.state === 'Entwurf'"
+      >
+        Bearbeiten
+      </UButton>
+      <!--      <UButton
+                :to="dataStore.documents.find(i => i.createdDocument === itemInfo.id) ? dataStore.documents.find(i => i.createdDocument === itemInfo.id).url : ''"
+                target="_blank"
+            >In neuen Tab anzeigen</UButton>-->
+      <UButton
+          icon="i-heroicons-arrow-right-end-on-rectangle"
+          @click="modal.open(CopyCreatedDocumentModal, {
+              id: itemInfo.id,
+              type: itemInfo.type
+          })"
+          variant="outline"
+      >
+        Kopieren
+      </UButton>
+      <UButton
+          @click="openEmail"
+          icon="i-heroicons-envelope"
+      >
+        E-Mail
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?linkedDocument=${itemInfo.id}&loadMode=storno`)"
+          variant="outline"
+          color="rose"
+          v-if="itemInfo.type === 'invoices' || itemInfo.type === 'advanceInvoices'"
+      >
+        Stornieren
+      </UButton>
+      <UButton
+          v-if="itemInfo.project"
+          @click="router.push(`/standardEntity/projects/show/${itemInfo.project}`)"
+          icon="i-heroicons-link"
+          variant="outline"
+      >
+        Projekt
+      </UButton>
+      <UButton
+          v-if="itemInfo.customer"
+          @click="router.push(`/standardEntity/customers/show/${itemInfo.customer}`)"
+          icon="i-heroicons-link"
+          variant="outline"
+      >
+        Kunde
+      </UButton>
+      <UButton
+          v-if="itemInfo.createddocument"
+          @click="router.push(`/createDocument/show/${itemInfo.createddocument}`)"
+          icon="i-heroicons-link"
+          variant="outline"
+      >
+        {{dataStore.documentTypesForCreation[itemInfo.createddocument.type].labelSingle}} - {{itemInfo.createddocument.documentNumber}}
+      </UButton>
+      <UButton
+          v-for="item in itemInfo.createddocuments"
+          v-if="itemInfo.createddocuments"
+          @click="router.push(`/createDocument/show/${item.id}`)"
+          icon="i-heroicons-link"
+          variant="outline"
+      >
+        {{dataStore.documentTypesForCreation[item.type].labelSingle}} - {{item.documentNumber}}
+      </UButton>
+      <UButton
+          v-if="itemInfo.statementallocations?.length > 0"
+          @click="openBankstatements"
+          icon="i-heroicons-link"
+          variant="outline"
+      >
+        Bankbuchungen
+      </UButton>
+
+    </template>
+  </UDashboardToolbar>
+  <UDashboardPanelContent>
+<!--    <object
+        :data="linkedDocument.url"
+        class="w-full previewDocumentMobile"
+    />-->
+    <PDFViewer v-if="linkedDocument.id" :file-id="linkedDocument.id" location="show_create_document" />
+
+
+
+
+  </UDashboardPanelContent>
+</template>
+
+<style scoped>
+.previewDocumentMobile {
+  aspect-ratio: 1 / 1.414;
+
+}
+</style>
\ No newline at end of file
diff --git a/frontend/pages/createdletters/[mode]/[[id]].vue b/frontend/pages/createdletters/[mode]/[[id]].vue
new file mode 100644
index 0000000..147b7c1
--- /dev/null
+++ b/frontend/pages/createdletters/[mode]/[[id]].vue
@@ -0,0 +1,108 @@
+<script setup>
+import {useFunctions} from "~/composables/useFunctions.js";
+import dayjs from "dayjs";
+
+const profileStore = useProfileStore();
+
+const preloadedContent = ref("")
+const letterheads = ref([])
+const itemInfo = ref({
+  contentHTML: "",
+  contentJSON: {},
+  contentText: ""
+})
+const showDocument = ref(false)
+const uri = ref("")
+
+const setupPage = async () => {
+  letterheads.value = await useSupabaseSelect("letterheads","*")
+
+  preloadedContent.value = `<p></p><p></p><p></p>`
+}
+
+setupPage()
+
+const onChangeTab = (index) => {
+  if(index === 1) {
+    generateDocument()
+  }
+}
+
+const getDocumentData = () => {
+  /*const returnData = {
+    adressLine: `${businessInfo.name}, ${businessInfo.street}, ${businessInfo.zip} ${businessInfo.city}`,
+    recipient: [
+      customerData.name,
+      ... customerData.nameAddition ? [customerData.nameAddition] : [],
+      ... contactData ? [`${contactData.firstName} ${contactData.lastName}`] : [],
+      itemInfo.value.address.street,
+      ... itemInfo.value.address.special ? [itemInfo.value.address.special] : [],
+      `${itemInfo.value.address.zip} ${itemInfo.value.address.city}`,
+
+    ],
+  }*/
+
+  const returnData = {
+    adressLine: `Federspiel Technology UG, Am Schwarzen Brack 14, 26452 Sande`,
+    recipient: [
+      "Federspiel Technology",
+      "UG haftungsbeschränkt",
+      "Florian Federspiel",
+      "Am Schwarzen Brack 14",
+      "Zusatz",
+      "26452 Sande",
+    ],
+    contentJSON: itemInfo.value.contentJSON,
+  }
+
+  return returnData
+}
+
+const generateDocument = async () => {
+  const ownTenant = profileStore.ownTenant
+  const path = letterheads.value[0].path
+
+  uri.value = await useFunctions().useCreateLetterPDF(getDocumentData(), path)
+
+  showDocument.value = true
+}
+
+const contentChanged = (content) => {
+  itemInfo.value.contentHTML = content.html
+  itemInfo.value.contentJSON = content.json
+  itemInfo.value.contentText = content.text
+}
+</script>
+
+<template>
+  <UDashboardNavbar title="Anschreiben bearbeiten"/>
+  {{itemInfo}}
+  <UDashboardPanelContent>
+    <UTabs @change="onChangeTab" :items="[{label: 'Editor'},{label: 'Vorschau'}]">
+      <template #item="{item}">
+        <div v-if="item.label === 'Editor'">
+          <Tiptap
+              class="mt-3"
+              @updateContent="contentChanged"
+              :preloadedContent="preloadedContent"
+          />
+        </div>
+        <div v-else-if="item.label === 'Vorschau'">
+          <object
+              :data="uri"
+              v-if="showDocument"
+              type="application/pdf"
+              class="w-full previewDocumentMobile"
+          />
+        </div>
+      </template>
+    </UTabs>
+  </UDashboardPanelContent>
+
+</template>
+
+<style scoped>
+.previewDocumentMobile {
+  aspect-ratio: 1 / 1.414;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/pages/email/new.vue b/frontend/pages/email/new.vue
new file mode 100644
index 0000000..856c4ce
--- /dev/null
+++ b/frontend/pages/email/new.vue
@@ -0,0 +1,349 @@
+<script setup>
+//TODO: BACKENDCHANGE EMAIL SENDING
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const auth = useAuthStore()
+
+const emailData = ref({
+  to:"",
+  cc:null,
+  bcc: null,
+  subject: "",
+  html: "",
+  text: "",
+  account: "",
+})
+
+const emailAccounts = ref([])
+const preloadedContent = ref("")
+const loadedDocuments = ref([])
+const loaded = ref(false)
+const noAccountsPresent = ref(false)
+const setupPage = async () => {
+  //emailAccounts.value = await useEntities("emailAccounts").select()
+
+  emailAccounts.value = await useNuxtApp().$api("/api/email/accounts")
+
+  if(emailAccounts.value.length === 0) {
+    noAccountsPresent.value = true
+  } else {
+    emailData.value.account = emailAccounts.value[0].id
+
+    preloadedContent.value = `<p></p><p></p><p></p>${auth.profile.email_signature || ""}`
+
+    //Check Query
+    if(route.query.to) emailData.value.to = route.query.to
+    if(route.query.cc) emailData.value.cc = route.query.cc
+    if(route.query.bcc) emailData.value.bcc = route.query.bcc
+    if(route.query.subject) emailData.value.to = route.query.subject
+
+
+    if(route.query.loadDocuments) {
+      console.log(JSON.parse(route.query.loadDocuments))
+      const data = await useFiles().selectSomeDocuments(JSON.parse(route.query.loadDocuments))
+      console.log(data)
+
+      if(data) loadedDocuments.value = data
+
+      loadedDocuments.value = await Promise.all(loadedDocuments.value.map(async doc => {
+
+        const document = await useEntities("createddocuments").selectSingle(doc.createddocument)
+        console.log(document)
+        return {
+          ...doc,
+          createddocument: document
+        }}))
+
+      //console.log(loadedDocuments.value)
+
+      if(loadedDocuments.value.length > 0) {
+        console.log(loadedDocuments.value[0])
+        emailData.value.subject = `${loadedDocuments.value[0].createddocument.title} von ${auth.activeTenantData.businessInfo.name}`
+
+        if(loadedDocuments.value[0].createddocument.contact && loadedDocuments.value[0].createddocument.contact.email) {
+          console.log("Contact")
+          emailData.value.to = loadedDocuments.value[0].createddocument.contact.email
+        } else if(loadedDocuments.value[0].createddocument.customer && loadedDocuments.value[0].createddocument.customer.infoData.invoiceEmail) {
+          emailData.value.to = loadedDocuments.value[0].createddocument.customer.infoData.invoiceEmail
+        } else if(loadedDocuments.value[0].createddocument.customer && loadedDocuments.value[0].createddocument.customer.infoData.email) {
+          emailData.value.to = loadedDocuments.value[0].createddocument.customer.infoData.email
+        }
+      }
+    }
+
+    loaded.value = true
+  }
+
+
+
+
+}
+
+setupPage()
+
+const contentChanged = (content) => {
+  emailData.value.html = content.html
+  emailData.value.text = content.text
+}
+
+const selectedAttachments = ref([])
+const renderAttachments = () => {
+  selectedAttachments.value = Array.from(document.getElementById("inputAttachments").files).map(i => {
+    return {
+      filename: i.name,
+      type: i.type
+    }})
+}
+
+
+
+
+const toBase64 = file => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => resolve(reader.result.split(",")[1]);
+  reader.onerror = reject;
+});
+
+function blobToBase64(blob) {
+  return new Promise((resolve, _) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result.split(",")[1]);
+    reader.readAsDataURL(blob);
+  });
+}
+
+const sendEmail = async () => {
+  loaded.value = false
+
+  let body  = {
+    ...emailData.value,
+    attachments: []
+  }
+
+
+
+
+
+  for await (const file of Array.from(document.getElementById("inputAttachments").files)) {
+    body.attachments.push({
+      filename: file.name,
+      content: await toBase64(file),
+      contentType: file.type,
+      encoding: "base64",
+      contentDisposition: "attachment"
+    })
+  }
+
+  for await (const doc of loadedDocuments.value) {
+
+
+    const res = await useFiles().downloadFile(doc.id, null, true)
+
+    body.attachments.push({
+      filename: doc.path.split("/")[doc.path.split("/").length -1],
+      content: await blobToBase64(res),
+      contentType: res.type,
+      encoding: "base64",
+      contentDisposition: "attachment"
+    })
+  }
+
+  console.log(body)
+
+  const res = await useNuxtApp().$api("/api/email/send",{
+    method: "POST",
+    body: body,
+  })
+
+  console.log(res)
+
+
+  if(!res.success) {
+    toast.add({title: "Fehler beim Absenden der E-Mail", color: "rose"})
+
+  } else {
+    navigateTo("/")
+    toast.add({title: "E-Mail zum Senden eingereiht"})
+  }
+
+  loaded.value = true
+
+}
+
+
+</script>
+
+<template>
+
+  <div v-if="noAccountsPresent" class="mx-auto mt-5 flex flex-col justify-center">
+    <span class="font-bold text-2xl">Keine E-Mail Konten vorhanden</span>
+    <UButton
+      @click="router.push(`/settings/emailAccounts`)"
+      class="mx-auto mt-5"
+    >
+      + E-Mail Konto
+    </UButton>
+  </div>
+  <div v-else>
+    <UProgress animation="carousel" v-if="!loaded" class="mt-5 w-2/3 mx-auto"/>
+
+    <div v-else>
+      <UDashboardNavbar
+          title="Neue E-Mail"
+      >
+        <template #right>
+          <UButton
+              @click="sendEmail"
+              :disabled="!emailData.to || !emailData.subject"
+          >
+            Senden
+          </UButton>
+        </template>
+
+      </UDashboardNavbar>
+
+
+
+
+      <div class="scrollContainer mt-3">
+        <div class="flex-col flex w-full">
+          <UFormGroup
+              label="Absender"
+          >
+            <USelectMenu
+                :options="emailAccounts"
+                option-attribute="email"
+                value-attribute="id"
+                v-model="emailData.account"
+            />
+          </UFormGroup>
+          <UDivider class="my-3"/>
+          <UFormGroup
+              label="Empfänger"
+          >
+            <UInput
+                class="w-full my-1"
+                v-model="emailData.to"
+            />
+          </UFormGroup>
+          <UFormGroup
+              label="Kopie"
+          >
+            <UInput
+                class="w-full my-1"
+                v-model="emailData.cc"
+            />
+          </UFormGroup>
+          <UFormGroup
+              label="Blindkopie"
+          >
+            <UInput
+                class="w-full my-1"
+                placeholder=""
+                v-model="emailData.bcc"
+            />
+          </UFormGroup>
+          <UFormGroup
+              label="Betreff"
+          >
+            <UInput
+                class="w-full my-1"
+                v-model="emailData.subject"
+            />
+          </UFormGroup>
+        </div>
+        <UDivider class="my-3"/>
+        <div id="parentAttachments" class="flex flex-col justify-center mt-3">
+          <span class="font-medium mb-2 text-xl">Anhänge</span>
+          <!--        <UIcon
+                      name="i-heroicons-paper-clip"
+                      class="mx-auto w-10 h-10"
+                  />
+                  <span class="text-center text-2xl">Anhänge hochladen</span>-->
+          <UInput
+              id="inputAttachments"
+              type="file"
+              multiple
+              @change="renderAttachments"
+          />
+          <ul class="mx-5 mt-3">
+            <li
+                class="list-disc"
+                v-for="file in selectedAttachments"
+            > Datei - {{file.filename}}</li>
+            <li
+                class="list-disc"
+                v-for="doc in loadedDocuments"
+            >
+              <span v-if="doc.createddocument">Dokument - {{doc.createddocument.documentNumber}}</span>
+            </li>
+          </ul>
+
+        </div>
+
+        <Tiptap
+            class="mt-3"
+            @updateContent="contentChanged"
+            :preloadedContent="preloadedContent"
+        />
+      </div>
+    </div>
+  </div>
+
+
+
+
+</template>
+
+<style scoped>
+
+#parentAttachments {
+  border: 1px dashed #69c350;
+  border-radius: 10px;
+  padding: 1em;
+}
+
+
+#inputAttachments {
+  /*
+  display: none;
+  */
+  display: inline-block;
+  cursor: pointer;
+  opacity: 100;/*
+  width: 100%;
+  height: 5%;
+  position: relative;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;*/
+}
+
+#inputAttachments::file-selector-button {
+  background-color: white;
+  border: 1px solid #69c350;
+  border-radius: 5px;
+  padding: 5px 10px 5px 10px;
+}
+
+.fileListItem {
+  border: 1px solid #69c350;
+  border-radius: 5px;
+  padding: .5rem;
+}
+
+.scrollContainer {
+  overflow-y: scroll;
+  padding-left: 1em;
+  padding-right: 1em;
+  height: 90vh;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/export/create/sepa.vue b/frontend/pages/export/create/sepa.vue
new file mode 100644
index 0000000..9e17a7a
--- /dev/null
+++ b/frontend/pages/export/create/sepa.vue
@@ -0,0 +1,47 @@
+<script setup>
+
+const createddocuments = ref([])
+const selected = ref([])
+const setup = async () => {
+    createddocuments.value = (await useEntities("createddocuments").select()).filter(i => i.payment_type === "direct-debit")
+    selected.value = createddocuments.value
+}
+
+setup()
+
+const createExport = async () => {
+  //NUMMERN MAPPEN ZU IDS UND AN BACKEND FUNKTION ÜBERGEBEN
+  const ids = selected.value.map((i) => i.id)
+
+  const res = await useNuxtApp().$api("/api/exports/sepa", {
+    method: "POST",
+    body: {
+      idsToExport: ids
+    }
+  })
+
+
+}
+
+
+</script>
+
+<template>
+  <UDashboardNavbar title="SEPA Export erstellen">
+    <template #right>
+      <UButton @click="createExport">
+        Erstellen
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UTable
+      v-if="createddocuments.length > 0"
+      :loading="true"
+      v-model="selected"
+      :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
+      :rows="createddocuments" />
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/export/index.vue b/frontend/pages/export/index.vue
new file mode 100644
index 0000000..b1c99e8
--- /dev/null
+++ b/frontend/pages/export/index.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import dayjs from "dayjs"
+const exports = ref([])
+
+const auth = useAuthStore()
+const toast = useToast()
+const router = useRouter()
+
+const setupPage = async () => {
+  exports.value = await useNuxtApp().$api("/api/exports",{
+    method: "GET"
+  })
+}
+
+setupPage()
+
+function downloadFile(row) {
+  const a = document.createElement("a")
+  a.href = row.url
+  a.download = row.file_path.split("/").pop()
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+}
+
+const showCreateExportModal = ref(false)
+const createExportData = ref({
+  start_date: null,
+  end_date: null,
+  beraternr:null,
+  mandantennr: null
+})
+
+const createExport = async () => {
+  const res = await useNuxtApp().$api("/api/exports/datev",{
+    method: "POST",
+    body: createExportData.value
+  })
+
+  showCreateExportModal.value = false
+
+  if(res.success) {
+    toast.add({title: "Export wird erstellt. Sie erhalten eine Benachrichtigung sobald es soweit ist."})
+  } else {
+    toast.add({title: "Es gab einen Fehler beim erstellen", color: "rose"})
+  }
+
+}
+
+
+</script>
+
+<template>
+  <UDashboardNavbar
+      title="Exporte"
+  >
+    <template #right>
+      <UButton
+          @click="showCreateExportModal = true"
+      >+ DATEV</UButton>
+      <UButton
+          @click="router.push('/export/create/sepa')"
+      >+ SEPA</UButton>
+    </template>
+  </UDashboardNavbar>
+  <UTable
+      :rows="exports"
+      :columns="[
+        {
+          key: 'created_at',
+          label: 'Erstellt am',
+        },{
+          key: 'start_date',
+          label: 'Start',
+        },{
+          key: 'end_date',
+          label: 'Ende',
+        },{
+          key: 'valid_until',
+          label: 'Gültig bis',
+        },{
+          key: 'type',
+          label: 'Typ',
+        },{
+          key: 'download',
+          label: 'Download',
+        },
+    ]"
+  >
+    <template #created_at-data="{row}">
+      {{dayjs(row.created_at).format("DD.MM.YYYY HH:mm")}}
+    </template>
+    <template #start_date-data="{row}">
+      {{dayjs(row.start_date).format("DD.MM.YYYY HH:mm")}}
+    </template>
+    <template #end_date-data="{row}">
+      {{dayjs(row.end_date).format("DD.MM.YYYY HH:mm")}}
+    </template>
+    <template #valid_until-data="{row}">
+      {{dayjs(row.valid_until).format("DD.MM.YYYY HH:mm")}}
+    </template>
+    <template #download-data="{row}">
+      <UButton
+          @click="downloadFile(row)"
+      >
+        Download
+      </UButton>
+    </template>
+  </UTable>
+
+  <UModal v-model="showCreateExportModal">
+    <UCard>
+      <template #header>
+        Export erstellen
+      </template>
+
+      <UFormGroup
+          label="Start:"
+      >
+        <UPopover :popper="{ placement: 'bottom-start' }">
+          <UButton
+              icon="i-heroicons-calendar-days-20-solid"
+              :label="createExportData.start_date ? dayjs(createExportData.start_date).format('DD.MM.YYYY') : 'Datum auswählen'"
+              variant="outline"
+              class="mx-auto"
+          />
+
+          <template #panel="{ close }">
+            <LazyDatePicker v-model="createExportData.start_date" @close="close" />
+          </template>
+        </UPopover>
+      </UFormGroup>
+
+      <UFormGroup
+          label="Ende:"
+      >
+        <UPopover :popper="{ placement: 'bottom-start' }">
+          <UButton
+              icon="i-heroicons-calendar-days-20-solid"
+              :label="createExportData.end_date ? dayjs(createExportData.end_date).format('DD.MM.YYYY') : 'Datum auswählen'"
+              variant="outline"
+              class="mx-auto"
+          />
+
+          <template #panel="{ close }">
+            <LazyDatePicker v-model="createExportData.end_date" @close="close" />
+          </template>
+        </UPopover>
+      </UFormGroup>
+
+      <template #footer>
+        <UButton
+            @click="createExport"
+        >
+          Erstellen
+        </UButton>
+      </template>
+
+    </UCard>
+  </UModal>
+
+</template>
+
+<style scoped>
+
+</style>
diff --git a/frontend/pages/files/index.vue b/frontend/pages/files/index.vue
new file mode 100644
index 0000000..fd8313e
--- /dev/null
+++ b/frontend/pages/files/index.vue
@@ -0,0 +1,535 @@
+<script setup>
+
+
+import {BlobReader, BlobWriter, ZipWriter} from "@zip.js/zip.js";
+import DocumentDisplayModal from "~/components/DocumentDisplayModal.vue";
+import DocumentUploadModal from "~/components/DocumentUploadModal.vue";
+import dayjs from "dayjs";
+import arraySort from "array-sort";
+
+
+
+defineShortcuts({
+  '+': () => {
+    //Hochladen
+    uploadModalOpen.value = true
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      let entry = renderedFileList.value[selectedFileIndex.value]
+
+      if(entry.type === "file") {
+        showFile(entry.id)
+      } else if(createFolderModalOpen.value === false && entry.type === "folder") {
+        changeFolder(currentFolders.value.find(i => i.id === entry.id))
+      } else if(createFolderModalOpen.value === true) {
+        createFolder()
+      }
+
+    }
+  },
+  'arrowdown': () => {
+    if(selectedFileIndex.value < renderedFileList.value.length - 1) {
+      selectedFileIndex.value += 1
+    } else {
+      selectedFileIndex.value = 0
+    }
+  },
+  'arrowup': () => {
+    if(selectedFileIndex.value === 0) {
+      selectedFileIndex.value = renderedFileList.value.length - 1
+    } else {
+      selectedFileIndex.value -= 1
+    }
+  }
+})
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+const router = useRouter()
+const route = useRoute()
+const modal = useModal()
+
+const auth = useAuthStore()
+
+const uploadModalOpen = ref(false)
+const createFolderModalOpen = ref(false)
+const uploadInProgress = ref(false)
+const fileUploadFormData = ref({
+  tags: ["Eingang"],
+  path: "",
+  tenant: auth.activeTenant,
+  folder: null
+})
+
+const files = useFiles()
+
+const displayMode = ref("list")
+const displayModes = ref([{label: 'Liste',key:'list', icon: 'i-heroicons-list-bullet'},{label: 'Kacheln',key:'rectangles', icon: 'i-heroicons-squares-2x2'}])
+
+
+
+const documents = ref([])
+const folders = ref([])
+const filetags = ref([])
+
+const currentFolder = ref(null)
+
+const loadingDocs = ref(false)
+const isDragTarget = ref(false)
+
+const loaded = ref(false)
+
+const setupPage = async () => {
+  folders.value = await useEntities("folders").select()
+
+  documents.value = await files.selectDocuments()
+
+  filetags.value = await useEntities("filetags").select()
+
+  if(route.query) {
+    if(route.query.folder) {
+      currentFolder.value = await useEntities("folders").selectSingle(route.query.folder)
+
+    }
+  }
+
+
+  const dropZone = document.getElementById("drop_zone")
+  dropZone.ondragover = function (event) {
+    modal.open(DocumentUploadModal,{fileData: {folder: currentFolder.value.id, type: currentFolder.value.standardFiletype, typeEnabled: currentFolder.value.standardFiletypeIsOptional}, onUploadFinished: () => {
+      setupPage()
+      }})
+    event.preventDefault()
+  }
+
+  dropZone.ondragleave = function (event) {
+    isDragTarget.value = false
+  }
+
+  dropZone.ondrop = async function (event) {
+    event.preventDefault()
+
+  }
+
+
+  loadingDocs.value = false
+  loaded.value = true
+
+}
+setupPage()
+const currentFolders = computed(() => {
+  if(folders.value.length > 0) {
+
+    let tempFolders = folders.value.filter(i => currentFolder.value ? i.parent === currentFolder.value.id : !i.parent)
+
+    return tempFolders
+  } else return []
+
+})
+
+const breadcrumbLinks = computed(() => {
+
+  if(currentFolder.value) {
+    let parents = []
+
+    const addParent = (parent) => {
+      parents.push(parent)
+      if(parent.parent) {
+        addParent(folders.value.find(i => i.id === parent.parent))
+      }
+    }
+
+    if(currentFolder.value.parent) {
+      addParent(folders.value.find(i => i.id === currentFolder.value.parent))
+    }
+
+    return [{
+      label: "Home",
+      click: () => {
+        changeFolder(null)
+      },
+      icon: "i-heroicons-folder"
+    },
+    ...parents.map(i => {
+      return {
+        label: folders.value.find(x => x.id === i.id).name,
+        click: () => {
+          changeFolder(i)
+        },
+        icon: "i-heroicons-folder"
+      }
+    }).reverse(),
+    {
+      label: currentFolder.value.name,
+      click: () => {
+        changeFolder(currentFolder.value)
+      },
+      icon: "i-heroicons-folder"
+    }]
+
+  } else {
+    return [{
+      label: "Home",
+      click: () => {
+        changeFolder(null)
+      },
+      icon: "i-heroicons-folder"
+    }]
+  }
+})
+
+const filteredDocuments = computed(() => {
+
+  return documents.value.filter(i => currentFolder.value ? i.folder === currentFolder.value.id : !i.folder)
+
+})
+
+const changeFolder = async (newFolder) => {
+  loadingDocs.value = true
+  currentFolder.value = newFolder
+
+  if(newFolder) {
+    fileUploadFormData.value.folder = newFolder.id
+    await router.push(`/files?folder=${newFolder.id}`)
+  } else {
+    fileUploadFormData.value.folder = null
+    await router.push(`/files`)
+  }
+
+  setupPage()
+}
+
+const createFolderData = ref({})
+const createFolder = async () => {
+  const res = await useEntities("folders").create({
+    parent: currentFolder.value ? currentFolder.value.id : undefined,
+    name: createFolderData.value.name,
+  })
+
+  createFolderModalOpen.value = false
+
+  setupPage()
+
+}
+
+const downloadSelected = async () => {
+
+  let files = []
+
+  files = filteredDocuments.value.filter(i => selectedFiles.value[i.id] === true).map(i => i.path)
+
+
+  await useFiles().downloadFile(undefined,Object.keys(selectedFiles.value))
+
+}
+
+const searchString = ref(tempStore.searchStrings["files"] ||'')
+const renderedFileList = computed(() => {
+    let files = filteredDocuments.value.map(i => {
+      return {
+        label: i.path.split("/")[i.path.split("/").length -1],
+        id: i.id,
+        type: "file"
+      }
+    })
+
+    arraySort(files, (a,b) => {
+      let aVal = a.path ? a.path.split("/")[a.path.split("/").length -1] : null
+      let bVal = b.path ? b.path.split("/")[b.path.split("/").length -1] : null
+
+      if(aVal && bVal) {
+        return aVal.localeCompare(bVal)
+      } else if(!aVal && bVal) {
+        return 1
+      } else {
+        return -1
+      }
+    }, {reverse: true})
+
+    if(searchString.value.length > 0) {
+      files = useSearch(searchString.value, files)
+    }
+
+
+    let folders = currentFolders.value.map(i => {
+      return {
+        label: i.name,
+        id: i.id,
+        type: "folder"
+      }
+    })
+
+    arraySort(folders, "label")
+
+    /*folders.sort(function(a, b) {
+
+      // Compare the 2 dates
+      if (a.name < b.name) return -1;
+      if (a.name > b.name) return 1;
+      return 0;
+    });*/
+    return [...folders,...files]
+
+})
+const selectedFileIndex = ref(0)
+
+const showFile = (fileId) => {
+  modal.open(DocumentDisplayModal,{
+    documentData: documents.value.find(i => i.id === fileId),
+    onUpdatedNeeded: setupPage()
+  })
+}
+const selectedFiles = ref({});
+
+const selectAll = () => {
+  if(Object.keys(selectedFiles.value).find(i => selectedFiles.value[i] === true)) {
+    selectedFiles.value = {}
+  } else {
+    selectedFiles.value = Object.fromEntries(filteredDocuments.value.map(i => i.id).map(k => [k,true]))
+
+  }
+}
+
+const clearSearchString = () => {
+  tempStore.clearSearchString("files")
+  searchString.value = ''
+}
+
+
+
+</script>
+
+<template>
+
+  <UDashboardNavbar
+      title="Dateien"
+  >
+    <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()"
+          @change="tempStore.modifySearchString('files',searchString)"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
+      <UButton
+          icon="i-heroicons-x-mark"
+          variant="outline"
+          color="rose"
+          @click="clearSearchString()"
+          v-if="searchString.length > 0"
+      />
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #left>
+      <UBreadcrumb
+          :links="breadcrumbLinks"
+      />
+    </template>
+    <template #right>
+      <USelectMenu
+        :options="displayModes"
+        value-attribute="key"
+        option-attribute="label"
+        v-model="displayMode"
+        :ui-menu="{ width: 'min-w-max'}"
+      >
+        <template #label>
+          <UIcon class="w-5 h-5" :name="displayModes.find(i => i.key === displayMode).icon"/>
+        </template>
+      </USelectMenu>
+
+
+      <UButton
+          :disabled="!currentFolder"
+          @click="modal.open(DocumentUploadModal,{fileData: {folder: currentFolder.id, type: currentFolder.standardFiletype, typeEnabled: currentFolder.standardFiletypeIsOptional}, onUploadFinished: () => {setupPage()}})"
+      >+ Datei</UButton>
+      <UButton
+          @click="createFolderModalOpen = true"
+          variant="outline"
+      >+ Ordner</UButton>
+      <UButton
+          @click="downloadSelected"
+          icon="i-heroicons-cloud-arrow-down"
+          variant="outline"
+          v-if="Object.keys(selectedFiles).find(i => selectedFiles[i] === true)"
+      >Herunterladen</UButton>
+      <UModal v-model="createFolderModalOpen">
+        <UCard :ui="{ body: { base: 'space-y-4' } }">
+          <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Ordner Erstellen
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="createFolderModalOpen = false" />
+          </div>
+        </template>
+
+        <UFormGroup label="Name des Ordners" required>
+          <UInput
+              v-model="createFolderData.name"
+              placeholder="z.B. Rechnungen 2024"
+              autofocus
+          />
+        </UFormGroup>
+
+        <UFormGroup
+            label="Standard Dateityp"
+        >
+          <USelectMenu
+              v-model="createFolderData.standardFiletype"
+              :options="filetags"
+              option-attribute="name"
+              value-attribute="id"
+              searchable
+              searchable-placeholder="Typ suchen..."
+              placeholder="Kein Standard-Typ"
+              clear-search-on-close
+          >
+            <template #label>
+              <span v-if="createFolderData.standardFiletype">
+                {{ filetags.find(t => t.id === createFolderData.standardFiletype)?.name }}
+              </span>
+              <span v-else class="text-gray-400">Kein Typ ausgewählt</span>
+            </template>
+          </USelectMenu>
+        </UFormGroup>
+
+          <div v-if="createFolderData.standardFiletype">
+            <UCheckbox
+                v-model="createFolderData.standardFiletypeIsOptional"
+                name="isOptional"
+                label="Dateityp ist optional"
+                help="Wenn deaktiviert, MUSS der Nutzer beim Upload diesen Typ verwenden."
+            />
+          </div>
+
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton color="gray" variant="ghost" @click="createFolderModalOpen = false">
+                Abbrechen
+              </UButton>
+              <UButton @click="createFolder" :disabled="!createFolderData.name">
+                Erstellen
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </UModal>
+
+    </template>
+  </UDashboardToolbar>
+  <div id="drop_zone" class="h-full scrollList" >
+    <div v-if="loaded">
+      <UDashboardPanelContent>
+        <div v-if="displayMode === 'list'">
+          <table class="w-full">
+            <thead>
+            <tr>
+              <td>
+                <UCheckbox
+                    v-if="renderedFileList.find(i => i.type === 'file')"
+                    @change="selectAll"
+                />
+              </td>
+              <td class="font-bold">Name</td>
+              <td class="font-bold">Erstellt am</td>
+            </tr>
+            </thead>
+            <tr v-for="(entry,index) in renderedFileList">
+              <td>
+                <UCheckbox
+                    v-if="entry.type === 'file'"
+                    v-model="selectedFiles[entry.id]"
+                />
+              </td>
+              <td>
+                <UIcon class="mr-1" :name="entry.type === 'folder' ? 'i-heroicons-folder' : 'i-heroicons-document'"/>
+                <a
+                    style="cursor: pointer"
+                    :class="[...index === selectedFileIndex ? ['text-primary', 'text-xl'] : ['dark:text-white','text-black','text-xl']]"
+                    @click="entry.type === 'folder' ? changeFolder(currentFolders.find(i => i.id === entry.id)) : showFile(entry.id)"
+                >{{entry.label}}</a>
+
+              </td>
+              <td>
+                <span v-if="entry.type === 'file'" class="text-xl">{{dayjs(documents.find(i => i.id === entry.id).createdAt).format("DD.MM.YY HH:mm")}}</span>
+                <span v-if="entry.type === 'folder'" class="text-xl">{{dayjs(currentFolders.find(i => i.id === entry.id).createdAt).format("DD.MM.YY HH:mm")}}</span>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <div v-else-if="displayMode === 'rectangles'">
+          <div class="flex flex-row w-full flex-wrap" v-if="currentFolders.length > 0">
+            <a
+                class="w-1/6 folderIcon flex flex-col p-5 m-2"
+                v-for="folder in currentFolders"
+                @click="changeFolder(folder)"
+            >
+
+              <UIcon
+                  name="i-heroicons-folder"
+                  class="w-20 h-20"
+              />
+              <span class="text-center truncate">{{folder.name}}</span>
+            </a>
+          </div>
+
+          <UDivider class="my-5" v-if="currentFolder">{{currentFolder.name}}</UDivider>
+          <UDivider class="my-5" v-else>Ablage</UDivider>
+
+          <div v-if="!loadingDocs">
+            <DocumentList
+                v-if="filteredDocuments.length > 0"
+                :documents="filteredDocuments"
+                @selectDocument="(info) => console.log(info)"
+            />
+            <UAlert
+                v-else
+                class="mt-5 w-1/2 mx-auto"
+                icon="i-heroicons-light-bulb"
+                title="Keine Dokumente vorhanden"
+                color="primary"
+                variant="outline"
+            />
+          </div>
+          <UProgress
+              animation="carousel"
+              v-else
+              class="w-2/3 my-5 mx-auto"
+          />
+        </div>
+      </UDashboardPanelContent>
+    </div>
+    <UProgress animation="carousel" v-else class="w-5/6 mx-auto mt-5"/>
+
+  </div>
+</template>
+
+<style scoped>
+.folderIcon {
+  border: 1px solid lightgrey;
+  border-radius: 10px;
+  color: dimgrey;
+}
+
+.folderIcon:hover {
+  border: 1px solid #69c350;
+  color: #69c350;
+}
+
+tr:nth-child(odd) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/forms.vue b/frontend/pages/forms.vue
new file mode 100644
index 0000000..96c0baf
--- /dev/null
+++ b/frontend/pages/forms.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/helpdesk/[[id]].vue b/frontend/pages/helpdesk/[[id]].vue
new file mode 100644
index 0000000..6564161
--- /dev/null
+++ b/frontend/pages/helpdesk/[[id]].vue
@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import {ref, onMounted, watch} from 'vue'
+import {format, isToday, formatDistanceToNow} from 'date-fns'
+import {de as deLocale} from 'date-fns/locale'
+
+const {getConversations, getMessages, sendMessage, replyMessage, updateConversationStatus} = useHelpdeskApi()
+
+const conversations = ref<any[]>([])
+const selectedConversation = ref<any>(null)
+const messages = ref<any[]>([])
+const messageText = ref('')
+const filterStatus = ref('')
+const loading = ref(false)
+
+const route = useRoute()
+
+// Referenzen für Scroll + Shortcuts
+const convRefs = ref<Element[]>([])
+
+async function loadConversations() {
+  loading.value = true
+  conversations.value = await getConversations(filterStatus.value)
+
+  if(route.params.id){
+    await selectConversation(conversations.value.find(i => i.id === route.params.id))
+  }
+
+  loading.value = false
+}
+
+async function selectConversation(conv: any) {
+  selectedConversation.value = conv
+  messages.value = await getMessages(conv.id)
+}
+
+async function send() {
+  if (!messageText.value || !selectedConversation.value) return
+  await replyMessage(selectedConversation.value.id, messageText.value)
+  messageText.value = ''
+  messages.value = await getMessages(selectedConversation.value.id)
+}
+
+// Keyboard navigation
+defineShortcuts({
+  arrowdown: () => {
+    const index = conversations.value.findIndex(c => c.id === selectedConversation.value?.id)
+    if (index === -1) selectedConversation.value = conversations.value[0]
+    else if (index < conversations.value.length - 1)
+      selectedConversation.value = conversations.value[index + 1]
+  },
+  arrowup: () => {
+    const index = conversations.value.findIndex(c => c.id === selectedConversation.value?.id)
+    if (index === -1) selectedConversation.value = conversations.value.at(-1)
+    else if (index > 0)
+      selectedConversation.value = conversations.value[index - 1]
+  }
+})
+
+watch(selectedConversation, () => {
+  if (!selectedConversation.value) return
+  const ref = convRefs.value[selectedConversation.value.id]
+  if (ref) ref.scrollIntoView({block: 'nearest'})
+})
+
+onMounted(loadConversations)
+watch(filterStatus, loadConversations)
+
+// Gruppierung nach aufeinanderfolgenden gleichen Autoren
+const groupedMessages = computed(() => {
+  if (!messages.value.length) return []
+
+  const groups: any[] = []
+  let current: any = null
+
+  for (const msg of messages.value) {
+    const authorKey = `${msg.direction}-${msg.author_user_id || msg.author_name || 'anon'}`
+    if (!current || current.key !== authorKey) {
+      current = {
+        key: authorKey,
+        direction: msg.direction,
+        author_name: msg.direction === 'outgoing' ? 'Du' : msg.author_name || 'Kunde',
+        author_avatar: msg.author_avatar || null,
+        messages: [msg],
+        latest_created_at: msg.created_at,
+      }
+      groups.push(current)
+    } else {
+      current.messages.push(msg)
+      current.latest_created_at = msg.created_at
+    }
+  }
+  return groups
+})
+</script>
+
+<template>
+  <UPage>
+    <!-- === NAVBAR === -->
+    <UDashboardNavbar>
+      <template #title>
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-chat-bubble-left-right" class="w-5 h-5 text-primary-600"/>
+          <span class="text-lg font-semibold">Helpdesk</span>
+        </div>
+      </template>
+
+      <template #right>
+        <UButton
+            icon="i-heroicons-arrow-path"
+            color="gray"
+            size="xs"
+            variant="ghost"
+            @click="loadConversations"
+        >
+          Aktualisieren
+        </UButton>
+      </template>
+    </UDashboardNavbar>
+
+    <!-- === TOOLBAR === -->
+    <UDashboardToolbar>
+      <template #left>
+        <USelect
+            v-model="filterStatus"
+            size="sm"
+            :options="[
+            { label: 'Alle', value: '' },
+            { label: 'Offen', value: 'open' },
+            { label: 'In Bearbeitung', value: 'in_progress' },
+            { label: 'Geschlossen', value: 'closed' }
+          ]"
+            placeholder="Status filtern"
+            class="min-w-[180px]"
+        />
+      </template>
+
+      <template #right>
+        <UButton
+            icon="i-heroicons-plus"
+            size="sm"
+            label="Konversation"
+            color="primary"
+            variant="solid"
+            :disabled="true"
+        />
+      </template>
+    </UDashboardToolbar>
+
+    <!-- === CONTENT === -->
+    <div class="flex h-[calc(100vh-150px)] overflow-x-hidden">
+      <!-- 📬 Resizable Sidebar -->
+      <div
+          class="relative flex-shrink-0 border-r border-(--ui-border) bg-(--ui-bg) overflow-y-auto"
+          style="width: 340px; resize: horizontal; min-width: 260px; max-width: 600px;"
+      >
+        <div v-if="loading" class="p-4 space-y-2">
+          <USkeleton v-for="i in 6" :key="i" class="h-14"/>
+        </div>
+
+        <div v-else class="divide-y divide-(--ui-border)">
+          <div
+              v-for="(conv, index) in conversations"
+              :key="conv.id"
+              :ref="el => { convRefs[conv.id] = el as Element }"
+              class="p-4 sm:px-6 text-sm cursor-pointer border-l-2 transition-colors"
+              :class="[
+              selectedConversation && selectedConversation.id === conv.id
+                ? 'border-primary bg-primary/10'
+                : 'border-(--ui-bg) hover:border-primary hover:bg-primary/5'
+            ]"
+              @click="selectConversation(conv)"
+          >
+            <div class="flex items-center justify-between font-medium">
+              <div class="flex items-center gap-2 truncate">
+                {{ conv.helpdesk_contacts?.display_name || 'Unbekannt' }}
+              </div>
+              <span class="text-xs text-gray-500">
+                {{
+                  isToday(new Date(conv.last_message_at || conv.created_at))
+                      ? format(new Date(conv.last_message_at || conv.created_at), 'HH:mm')
+                      : format(new Date(conv.last_message_at || conv.created_at), 'dd MMM')
+                }}
+              </span>
+            </div>
+            <p class="truncate text-sm font-semibold">
+              {{conv.ticket_number}} | {{ conv.subject || 'Ohne Betreff' }}
+            </p>
+            <p class="text-xs text-dimmed line-clamp-1">
+              {{ conv.last_message_preview || '...' }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 💬 Conversation Panel -->
+      <div class="flex-1 flex flex-col overflow-x-hidden" v-if="selectedConversation">
+        <UCard class="relative flex flex-col flex-1 rounded-none border-0 border-l border-(--ui-border)">
+          <template #header>
+            <div class="flex flex-col gap-2">
+              <div class="flex justify-between items-start">
+                <div>
+                  <h2 class="font-semibold truncate text-gray-800 dark:text-gray-200">
+                    {{selectedConversation.ticket_number}} | {{ selectedConversation.subject || 'Ohne Betreff' }}
+                  </h2>
+
+                </div>
+
+                <USelect
+                    v-model="selectedConversation.status"
+                    size="xs"
+                    :options="[
+          { label: 'Offen', value: 'open' },
+          { label: 'In Bearbeitung', value: 'in_progress' },
+          { label: 'Geschlossen', value: 'closed' }
+        ]"
+                    @update:model-value="val => updateConversationStatus(selectedConversation.id, val)"
+                />
+              </div>
+
+              <!-- Kundenzuordnung -->
+              <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
+                <UIcon
+                    :name="selectConversation.customer_id?.isCompany ? 'i-heroicons-building-office-2' : 'i-heroicons-user'"
+                    class="w-4 h-4 text-gray-400"/>
+                <span>
+                  <strong>{{ selectedConversation.customer_id?.name || 'Kein Kunde zugeordnet' }}</strong>
+                </span>
+                <EntityModalButtons
+                  type="customers"
+                  v-if="selectedConversation?.customer_id?.id"
+                  :id="selectedConversation?.customer_id?.id"
+                  :button-edit="false"
+                />
+
+                <template v-if="selectedConversation.contact_person">
+                  <UIcon name="i-heroicons-user" class="w-4 h-4 text-gray-400 ml-3"/>
+                  <span>{{ selectedConversation.contact_person.name }}</span>
+                </template>
+              </div>
+            </div>
+          </template>
+
+          <!-- Nachrichten -->
+          <div class="flex-1 overflow-y-auto space-y-4 p-4 pb-24">
+            <template v-for="(group, gIndex) in groupedMessages" :key="gIndex">
+              <!-- Avatar + Name + Zeit -->
+              <div
+                  class="flex items-center gap-2 mb-1"
+                  :class="group.direction === 'outgoing' ? 'flex-row-reverse text-right' : 'flex-row text-left'"
+              >
+                <span class="text-xs text-gray-500 dark:text-gray-400">
+        {{ group.direction === 'outgoing' ? 'Du' : group.author_name || 'Kunde' }}
+        •
+        {{ formatDistanceToNow(new Date(group.latest_created_at), {addSuffix: true, locale: deLocale}) }}
+      </span>
+              </div>
+
+              <!-- Nachrichten des Autors -->
+              <div class="space-y-1">
+                <div
+                    v-for="msg in group.messages"
+                    :key="msg.id"
+                    class="flex"
+                    :class="group.direction === 'outgoing' ? 'justify-end' : 'justify-start'"
+                >
+                  <div
+                      :class="[
+    'inline-block px-3 py-2 rounded-xl max-w-[80%] text-sm whitespace-pre-wrap break-words',
+    msg.direction === 'outgoing'
+      ? 'bg-primary-500 text-white ml-auto'
+      : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-50'
+  ]"
+                  >
+                    {{ msg.payload.text }}
+
+                    <!-- Gelesen-Indikator (nur outgoing letzte Nachricht) -->
+                    <span
+                        v-if="group.direction === 'outgoing' && msg.id === group.messages.at(-1).id"
+                        class="absolute -bottom-4 right-1 text-[10px] text-gray-400 flex items-center gap-0.5"
+                    >
+            <UIcon
+                v-if="msg.read"
+                name="i-heroicons-check-double-16-solid"
+                class="text-primary-400 w-3 h-3"
+            />
+            <UIcon
+                v-else
+                name="i-heroicons-check-16-solid"
+                class="text-gray-400 w-3 h-3"
+            />
+            <span>{{ msg.read ? 'Gelesen' : 'Gesendet' }}</span>
+          </span>
+                  </div>
+                </div>
+              </div>
+            </template>
+
+            <div v-if="!messages.length" class="text-center text-gray-500 text-sm mt-4">
+              Keine Nachrichten vorhanden
+            </div>
+          </div>
+
+
+          <!-- Nachricht senden (jetzt sticky unten) -->
+          <form class="sticky bottom-0 border-t flex gap-2 p-3 bg-white dark:bg-gray-900" @submit.prevent="send">
+            <UInput
+                v-model="messageText"
+                placeholder="Nachricht eingeben..."
+                class="flex-1"
+                size="sm"
+            />
+            <UButton
+                :disabled="!messageText"
+                size="sm"
+                type="submit"
+                color="primary"
+                label="Senden"
+            />
+          </form>
+        </UCard>
+      </div>
+
+    </div>
+  </UPage>
+</template>
diff --git a/frontend/pages/historyitems/index.vue b/frontend/pages/historyitems/index.vue
new file mode 100644
index 0000000..b44d9dd
--- /dev/null
+++ b/frontend/pages/historyitems/index.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <UDashboardNavbar>
+    <template #center>
+      <h1
+          :class="['text-xl','font-medium']"
+      >Zentrales Logbuch</h1>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <HistoryDisplay/>
+  </UDashboardPanelContent>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/incomingInvoices/[mode]/[id].vue b/frontend/pages/incomingInvoices/[mode]/[id].vue
new file mode 100644
index 0000000..ed07dbf
--- /dev/null
+++ b/frontend/pages/incomingInvoices/[mode]/[id].vue
@@ -0,0 +1,619 @@
+<script setup>
+import InputGroup from "~/components/InputGroup.vue";
+import dayjs from "dayjs";
+import HistoryDisplay from "~/components/HistoryDisplay.vue";
+
+
+
+const dataStore = useDataStore()
+const route = useRoute()
+
+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 costcentres = ref([])
+const vendors = ref([])
+const accounts = ref([])
+
+const mode = ref(route.params.mode)
+
+const setup = async () => {
+  let filetype = (await useEntities("filetags").select()).find(i=> i.incomingDocumentType === "invoices").id
+  console.log(filetype)
+
+  costcentres.value = await useEntities("costcentres").select()
+  vendors.value = await useEntities("vendors").select()
+  accounts.value = await useEntities("accounts").selectSpecial()
+
+  itemInfo.value = await useEntities("incominginvoices").selectSingle(route.params.id, "*, files(*)")
+
+  //TODO: Dirty Fix
+  itemInfo.value.vendor = itemInfo.value.vendor?.id
+
+  await loadFile(itemInfo.value.files[itemInfo.value.files.length-1].id)
+
+  if(itemInfo.value.date && !itemInfo.value.dueDate) itemInfo.value.dueDate = itemInfo.value.date
+
+}
+
+setup()
+
+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 updateIncomingInvoice = async (setBooked = false) => {
+
+  let item = itemInfo.value
+  delete item.files
+
+  if(item.state === "Vorbereitet" && !setBooked) {
+    item.state = "Entwurf"
+  } else if(item.state === "Vorbereitet" && setBooked) {
+    item.state = "Gebucht"
+  } else if(item.state === "Entwurf" && setBooked) {
+    item.state = "Gebucht"
+  } else {
+    item.state = "Entwurf"
+  }
+  const data = await useEntities('incominginvoices').update(itemInfo.value.id,item)
+}
+
+const findIncomingInvoiceErrors = computed(() => {
+  let errors = []
+
+  if(itemInfo.value.vendor === null) errors.push({message: "Es ist kein Lieferant ausgewählt", type: "breaking"})
+  if(itemInfo.value.reference === null || itemInfo.value.reference.length === 0) errors.push({message: "Es ist keine Referenz angegeben", type: "breaking"})
+  if(itemInfo.value.date === null) errors.push({message: "Es ist kein Datum ausgewählt", type: "breaking"})
+  if(itemInfo.value.dueDate === null) errors.push({message: "Es ist kein Fälligkeitsdatum ausgewählt", type: "breaking"})
+  if(itemInfo.value.paymentType === null) errors.push({message: "Es ist keine Zahlart ausgewählt", type: "breaking"})
+  if(itemInfo.value.description === null) errors.push({message: "Es ist keine Beschreibung angegeben", type: "info"})
+
+
+  itemInfo.value.accounts.forEach(account => {
+    if(account.account === null) errors.push({message: "Es ist keine Kategorie ausgewählt", type: "breaking"})
+    if(!accounts.value.find(i => i.id === account.account)) errors.push({message: "Es ist keine Kategorie ausgewählt", type: "breaking"})
+    if(account.amountNet === null) errors.push({message: "Es ist kein Nettobetrag angegeben", type: "breaking"})
+    if(account.taxType === null) errors.push({message: "Es ist kein Steuertyp ausgewählt", type: "breaking"})
+    if(account.costCentre === null) errors.push({message: "Es ist keine Kostenstelle ausgewählt", type: "info"})
+    if(account.taxType === null || account.taxType === "0") errors.push({message: "Es ist keine Steuerart ausgewählt", type: "breaking"})
+
+  })
+
+
+  return errors.sort((a,b) => (a.type === "breaking") ? -1 : 1)
+})
+
+
+</script>
+
+<template>
+  <UDashboardNavbar>
+    <template #left>
+      <UButton
+        icon="i-heroicons-chevron-left"
+        @click="navigateTo(`/incomingInvoices`)"
+        variant="outline"
+      >
+        Eingangsbelege
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          class="text-xl font-medium"
+      >{{`Eingangsbeleg ${mode === 'show' ? 'anzeigen' : 'bearbeiten'}`}}</h1>
+    </template>
+    <template #right>
+      <ArchiveButton
+          color="rose"
+          variant="outline"
+          type="incominginvoices"
+          @confirmed="useEntities('incominginvoices').archive(route.params.id)"
+          v-if="mode !== 'show'"
+      />
+      <UButton
+          @click="updateIncomingInvoice(false)"
+          v-if="mode !== 'show'"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          @click="updateIncomingInvoice(true)"
+          v-if="mode !== 'show'"
+          :disabled="findIncomingInvoiceErrors.filter(i => i.type === 'breaking').length > 0"
+      >
+        Speichern & Buchen
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <div
+        class="flex justify-between mt-5 workingContainer"
+        v-if="loadedFile"
+    >
+      <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">
+        <UAlert
+            class="mb-5"
+            title="Vorhandene Probleme und Informationen:"
+            :color="findIncomingInvoiceErrors.filter(i => i.type === 'breaking').length > 0 ? 'rose' : 'white'"
+            variant="outline"
+            v-if="findIncomingInvoiceErrors.length > 0"
+        >
+          <template #description>
+            <ul class="list-disc ml-5">
+              <li v-for="error in findIncomingInvoiceErrors" :class="[...error.type === 'breaking' ? ['text-rose-600'] : ['dark:text-white','text-black']]">
+                {{error.message}}
+              </li>
+            </ul>
+          </template>
+
+        </UAlert>
+
+        <div class="scrollContainer">
+          <InputGroup class="mb-3">
+            <UButton
+                :variant="itemInfo.expense ? 'solid' : 'outline'"
+                @click="itemInfo.expense = true"
+                :disabled="mode === 'show'"
+            >
+              Ausgabe
+            </UButton>
+            <UButton
+                :variant="!itemInfo.expense ? 'solid' : 'outline'"
+                @click="itemInfo.expense = false"
+                :disabled="mode === 'show'"
+            >
+              Einnahme
+            </UButton>
+          </InputGroup>
+
+          <UFormGroup label="Lieferant:" >
+            <InputGroup>
+              <USelectMenu
+                  :disabled="mode === 'show'"
+                  v-model="itemInfo.vendor"
+                  :options="vendors"
+                  option-attribute="name"
+                  value-attribute="id"
+                  searchable
+                  :search-attributes="['name','vendorNumber']"
+                  class="flex-auto"
+                  searchable-placeholder="Suche..."
+                  :color="!itemInfo.vendor ? 'rose' : 'primary'"
+              >
+                <template #option="{option}">
+                  {{option.vendorNumber}} - {{option.name}}
+                </template>
+                <template #label>
+                  {{vendors.find(vendor => vendor.id === itemInfo.vendor) ? 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"
+                  :button-edit="mode !== 'show'"
+                  :button-create="mode !== 'show'"
+              />
+              <UButton
+                  icon="i-heroicons-x-mark"
+                  variant="outline"
+                  color="rose"
+                  @click="itemInfo.vendor = null"
+                  v-if="itemInfo.vendor && mode !== 'show'"
+              />
+            </InputGroup>
+
+
+          </UFormGroup>
+
+          <UFormGroup
+              class="mt-3"
+              label="Rechnungsreferenz:"
+          >
+            <UInput
+                v-model="itemInfo.reference"
+                :disabled="mode === 'show'"
+            />
+          </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'"
+                    :disabled="mode === 'show'"
+                />
+
+                <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"
+                    :disabled="mode === 'show'"
+                />
+
+                <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"
+                :disabled="mode === 'show'"
+            />
+          </UFormGroup>
+
+          <UFormGroup label="Beschreibung:" >
+            <UTextarea
+                v-model="itemInfo.description"
+                :disabled="mode === 'show'"
+            />
+          </UFormGroup>
+
+          <InputGroup class="my-3">
+            <UButton
+                :variant="!useNetMode ? 'solid' : 'outline'"
+                @click="changeNetMode(false)"
+                :disabled="mode === 'show'"
+            >
+              Brutto
+            </UButton>
+            <UButton
+                :variant="useNetMode ? 'solid' : 'outline'"
+                @click="changeNetMode(true)"
+                :disabled="mode === 'show'"
+            >
+              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
+                  :disabled="mode === 'show'"
+                  :search-attributes="['label','number']"
+                  searchable-placeholder="Suche..."
+                  v-model="item.account"
+                  :color="(item.account && accounts.find(i => i.id === item.account)) ? 'primary' : 'rose'"
+              >
+                <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="w-full mb-3"
+            >
+              <InputGroup class="w-full">
+                <USelectMenu
+                    :options="costcentres"
+                    option-attribute="name"
+                    value-attribute="id"
+                    searchable
+                    :disabled="mode === 'show'"
+                    :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">Fahrzeug - {{option.name}}</span>
+                    <span v-else-if="option.project">Projekt - {{option.name}}</span>
+                    <span v-else-if="option.inventoryitem">Inventarartikel - {{option.name}}</span>
+                    <span v-else>{{option.name}}</span>
+                  </template>
+
+                </USelectMenu>
+                <UButton
+                    variant="outline"
+                    color="rose"
+                    v-if="item.costCentre && mode !== 'show'"
+                    icon="i-heroicons-x-mark"
+                    @click="item.costCentre = null"
+                />
+              </InputGroup>
+            </UFormGroup>
+            <UFormGroup
+                label="Beschreibung"
+                class="w-full mb-3"
+            >
+              <InputGroup class="w-full">
+                <UInput
+                    v-model="item.description"
+                    class="flex-auto"
+                    :disabled="mode === 'show'"
+                ></UInput>
+                <UButton
+                    variant="outline"
+                    color="rose"
+                    v-if="item.description && mode !== 'show'"
+                    icon="i-heroicons-x-mark"
+                    @click="item.description = null"
+                />
+              </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 || mode === 'show'"
+                    @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 || mode === 'show'"
+                    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"
+                    :disabled="mode === 'show'"
+                    :color="item.taxType === null || item.taxType === '0' ? 'rose' : 'primary'"
+                    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"
+                v-if="mode !== 'show'"
+                @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 && mode !== 'show'"
+                class="mt-3"
+                variant="ghost"
+                color="rose"
+                @click="itemInfo.accounts = itemInfo.accounts.filter((account,itemIndex) => itemIndex !== index)"
+            >
+              Position entfernen
+            </UButton>
+
+          </div>
+
+        </div>
+      </div>
+    </div>
+    <UProgress v-else animation="carousel"/>
+  </UDashboardPanelContent>
+
+  <PageLeaveGuard :when="true"/>
+
+
+
+</template>
+
+<style scoped>
+.documentPreview {
+  aspect-ratio: 1 / 1.414;
+  height: 80vh;
+}
+
+
+
+.scrollContainer {
+  overflow-y: scroll;
+  height: 70vh;
+  -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>
\ No newline at end of file
diff --git a/frontend/pages/incomingInvoices/index.vue b/frontend/pages/incomingInvoices/index.vue
new file mode 100644
index 0000000..52e884f
--- /dev/null
+++ b/frontend/pages/incomingInvoices/index.vue
@@ -0,0 +1,294 @@
+<script setup>
+import dayjs from "dayjs"
+import {useSum} from "~/composables/useSum.js";
+
+// Zugriff auf API und Toast
+const { $api } = useNuxtApp()
+const toast = useToast()
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/incomingInvoices/[mode]")
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/incomingInvoices/show/${filteredRows.value[selectedItem.value].id}`)
+    }
+  },
+  'arrowdown': () => {
+    if(selectedItem.value < filteredRows.value.length - 1) {
+      selectedItem.value += 1
+    } else {
+      selectedItem.value = 0
+    }
+  },
+  'arrowup': () => {
+    if(selectedItem.value === 0) {
+      selectedItem.value = filteredRows.value.length - 1
+    } else {
+      selectedItem.value -= 1
+    }
+  }
+})
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+const router = useRouter()
+
+const sum = useSum()
+
+const items = ref([])
+const selectedItem = ref(0)
+const sort = ref({
+  column: 'date',
+  direction: 'desc'
+})
+
+// Status für den Button
+const isPreparing = ref(false)
+
+const type = "incominginvoices"
+const dataType = dataStore.dataTypes[type]
+
+const setupPage = async () => {
+  items.value = await useEntities(type).select("*, vendor(id,name), statementallocations(id,amount)",sort.value.column,sort.value.direction === "asc")
+}
+
+// Funktion zum Vorbereiten der Belege
+const prepareInvoices = async () => {
+  isPreparing.value = true
+  try {
+    await $api('/api/functions/services/prepareincominginvoices', { method: 'POST' })
+
+    toast.add({
+      title: 'Erfolg',
+      description: 'Eingangsbelege wurden vorbereitet.',
+      icon: 'i-heroicons-check-circle',
+      color: 'green'
+    })
+
+    // Liste neu laden
+    await setupPage()
+  } catch (error) {
+    console.error(error)
+    toast.add({
+      title: 'Fehler',
+      description: 'Beim Vorbereiten der Belege ist ein Fehler aufgetreten.',
+      icon: 'i-heroicons-exclamation-circle',
+      color: 'red'
+    })
+  } finally {
+    isPreparing.value = false
+  }
+}
+
+setupPage()
+
+const selectedColumns = ref(tempStore.columns[type] ? tempStore.columns[type] : dataType.templateColumns.filter(i => !i.disabledInTable))
+const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
+
+const selectableFilters = ref(dataType.filters.map(i => i.name))
+const selectedFilters = ref(dataType.filters.filter(i => i.default).map(i => i.name) || [])
+
+const searchString = ref(tempStore.searchStrings[type] ||'')
+
+const clearSearchString = () => {
+  tempStore.clearSearchString(type)
+  searchString.value = ''
+}
+const filteredRows = computed(() => {
+  let tempItems = items.value.map(i => {
+    return {
+      ...i,
+      class: i.archived ? 'bg-red-500/50 dark:bg-red-400/50' : null
+    }
+  })
+
+  if(selectedFilters.value.length > 0) {
+    selectedFilters.value.forEach(filterName => {
+      let filter = dataType.filters.find(i => i.name === filterName)
+      tempItems = tempItems.filter(filter.filterFunction)
+    })
+  }
+
+
+
+  tempItems = useSearch(searchString.value, tempItems)
+
+
+  return [...tempItems.filter(i => i.state === "Vorbereitet"), ...tempItems.filter(i => i.state !== "Vorbereitet")]
+
+
+})
+
+const displayCurrency = (value, currency = "€") => {
+  return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
+}
+const getInvoiceSum = (invoice) => {
+  let sum = 0
+  invoice.accounts.forEach(account => {
+    sum += account.amountTax
+    sum += account.amountNet
+  })
+  return sum.toFixed(2)
+}
+
+const isPaid = (item) => {
+  let amountPaid = 0
+  item.statementallocations.forEach(allocation => amountPaid += allocation.amount)
+  return Math.abs(amountPaid) === Math.abs(Number(getInvoiceSum(item)))
+}
+
+const selectIncomingInvoice = (invoice) => {
+  if(invoice.state === "Vorbereitet" ) {
+    router.push(`/incomingInvoices/edit/${invoice.id}`)
+  } else {
+    router.push(`/incomingInvoices/show/${invoice.id}`)
+  }
+
+
+}
+
+
+
+</script>
+
+<template>
+  <UDashboardNavbar title="Eingangsbelege" :badge="filteredRows.length">
+    <template #right>
+
+      <UButton
+          label="Belege vorbereiten"
+          icon="i-heroicons-sparkles"
+          color="primary"
+          variant="solid"
+          :loading="isPreparing"
+          @click="prepareInvoices"
+          class="mr-2"
+      />
+
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+          @change="tempStore.modifySearchString(type,searchString)"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
+      <UButton
+          icon="i-heroicons-x-mark"
+          variant="outline"
+          color="rose"
+          @click="clearSearchString()"
+          v-if="searchString.length > 0"
+      />
+
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+          multiple
+          class="hidden lg:block"
+          by="key"
+          :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
+          :ui-menu="{ width: 'min-w-max' }"
+          @change="tempStore.modifyColumns(type,selectedColumns)"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+      <USelectMenu
+          v-if="selectableFilters.length > 0"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          multiple
+          v-model="selectedFilters"
+          :options="selectableFilters"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
+          :ui-menu="{ width: 'min-w-max' }"
+      >
+        <template #label>
+          Filter
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+
+  <UTabs
+      class="m-3"
+      :items="[{label: 'In Bearbeitung'},{label: 'Gebucht'}]"
+  >
+    <template #default="{item}">
+      {{item.label}}
+      <UBadge
+          variant="outline"
+          class="ml-2"
+      >
+        {{filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' ).length}}
+      </UBadge>
+    </template>
+    <template #item="{item}">
+      <div style="height: 80dvh; overflow-y: scroll">
+        <UTable
+            v-model:sort="sort"
+            sort-mode="manual"
+            @update:sort="setupPage"
+            :rows="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )"
+            :columns="columns"
+            class="w-full"
+            :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+            @select="(i) => selectIncomingInvoice(i) "
+            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+        >
+          <template #reference-data="{row}">
+            <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.reference}}</span>
+            <span v-else>{{row.reference}}</span>
+          </template>
+          <template #state-data="{row}">
+            <span v-if="row.state === 'Vorbereitet'" class="text-cyan-500">{{row.state}}</span>
+            <span v-else-if="row.state === 'Entwurf'" class="text-red-500">{{row.state}}</span>
+            <span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{row.state}}</span>
+          </template>
+          <template #date-data="{row}">
+            {{dayjs(row.date).format("DD.MM.YYYY")}}
+          </template>
+          <template #vendor-data="{row}">
+            {{row.vendor ? row.vendor.name : ""}}
+          </template>
+          <template #amount-data="{row}">
+            {{displayCurrency(sum.getIncomingInvoiceSum(row))}}
+          </template>
+          <template #dueDate-data="{row}">
+            <span v-if="row.dueDate">{{dayjs(row.dueDate).format("DD.MM.YYYY")}}</span>
+          </template>
+          <template #paid-data="{row}">
+            <span v-if="isPaid(row)" class="text-primary-500">Bezahlt</span>
+            <span v-else class="text-rose-600">Offen</span>
+          </template>
+        </UTable>
+      </div>
+
+    </template>
+  </UTabs>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
new file mode 100644
index 0000000..41cb992
--- /dev/null
+++ b/frontend/pages/index.vue
@@ -0,0 +1,95 @@
+<template>
+  <UDashboardNavbar title="Home">
+    <template #right>
+<!--      <UTooltip text="Notifications" :shortcuts="['N']">
+        <UButton color="gray" variant="ghost" square @click="isNotificationsSlideoverOpen = true">
+          <UChip :show="unreadMessages" color="primary" inset>
+            <UIcon name="i-heroicons-bell" class="w-5 h-5" />
+          </UChip>
+        </UButton>
+      </UTooltip>-->
+    </template>
+  </UDashboardNavbar>
+
+  <UDashboardPanelContent>
+    <div class="mb-5">
+      <UDashboardCard
+          title="Einnahmen und Ausgaben(netto)"
+          class="mt-3"
+      >
+        <display-income-and-expenditure/>
+      </UDashboardCard>
+    </div>
+    <UPageGrid>
+      <UDashboardCard
+          title="Buchhaltung"
+      >
+        <display-open-balances/>
+      </UDashboardCard>
+      <UDashboardCard
+          title="Bank"
+      >
+        <display-bankaccounts/>
+      </UDashboardCard>
+      <UDashboardCard
+          title="Projekte"
+      >
+        <display-projects-in-phases/>
+      </UDashboardCard>
+      <!--<UDashboardCard
+          title="Anwesende"
+      >
+        <display-present-profiles/>
+      </UDashboardCard>
+      <UDashboardCard
+          title="Projektzeiten"
+      >
+        <display-running-time/>
+      </UDashboardCard>
+      <UDashboardCard
+          title="Anwesenheiten"
+      >
+        <display-running-working-time/>
+      </UDashboardCard>-->
+      <UDashboardCard
+          title="Aufgaben"
+      >
+        <display-open-tasks/>
+      </UDashboardCard>
+      <UDashboardCard
+        title="Label Test"
+      >
+        <UButton
+            @click="modal.open(LabelPrintModal, {
+              context: {
+                datamatrix: '1234',
+                text: 'FEDEO TEST'
+              }
+            })"
+            icon="i-heroicons-printer"
+        >
+          Label Drucken
+        </UButton>
+      </UDashboardCard>
+    </UPageGrid>
+  </UDashboardPanelContent>
+</template>
+
+<script setup>
+
+import Nimbot from "~/components/nimbot.vue";
+import LabelPrintModal from "~/components/LabelPrintModal.vue";
+
+definePageMeta({
+  middleware: 'redirect-to-mobile-index'
+})
+
+const modal = useModal();
+
+const { isNotificationsSlideoverOpen } = useDashboard()
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
new file mode 100644
index 0000000..70f0b2a
--- /dev/null
+++ b/frontend/pages/login.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: "notLoggedIn"
+})
+
+const auth = useAuthStore()
+const toast = useToast()
+const router = useRouter()
+
+const platformIsNative = useCapacitor().getIsNative()
+
+
+const doLogin = async (data:any) => {
+  try {
+    await auth.login(data.email, data.password)
+    // Weiterleiten nach erfolgreichem Login
+    toast.add({title:"Einloggen erfolgreich"})
+    if(platformIsNative) {
+      await router.push("/mobile")
+    } else {
+      await router.push("/")
+    }
+  } catch (err: any) {
+    toast.add({title:"Zugangsdaten falsch. Bitte überprüfen Sie Ihre Eingaben",color:"rose"})
+  }
+}
+</script>
+
+<template>
+  <UCard class="max-w-sm w-full mx-auto mt-5" v-if="!platformIsNative">
+
+    <UColorModeImage
+        light="/Logo.png"
+        dark="/Logo_Dark.png"
+    />
+
+    <UAlert
+        title="Achtung"
+      description="Es wurden alle Benutzerkonten zurückgesetzt. Bitte fordert über Passwort vergessen ein neues Passwort an."
+      color="rose"
+        variant="outline"
+        class="my-5"
+    >
+    </UAlert>
+
+    <UAuthForm
+        title="Login"
+        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten."
+        align="bottom"
+        :fields="[{
+            name: 'email',
+            type: 'text',
+            label: 'Email',
+            placeholder: 'Deine E-Mail Adresse'
+          }, {
+            name: 'password',
+            label: 'Passwort',
+            type: 'password',
+            placeholder: 'Dein Passwort'
+          }]"
+        :loading="false"
+        @submit="doLogin"
+        :submit-button="{label: 'Weiter'}"
+        divider="oder"
+    >
+      <template #password-hint>
+        <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
+      </template>
+    </UAuthForm>
+  </UCard>
+  <div v-else class="mt-20 m-2 p-2">
+    <UColorModeImage
+        light="/Logo.png"
+        dark="/Logo_Dark.png"
+    />
+
+    <UAuthForm
+        title="Login"
+        description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu erhalten."
+        align="bottom"
+        :fields="[{
+            name: 'email',
+            type: 'text',
+            label: 'Email',
+            placeholder: 'Deine E-Mail Adresse'
+          }, {
+            name: 'password',
+            label: 'Passwort',
+            type: 'password',
+            placeholder: 'Dein Passwort'
+          }]"
+        :loading="false"
+        @submit="doLogin"
+        :submit-button="{label: 'Weiter'}"
+        divider="oder"
+    >
+      <template #password-hint>
+        <NuxtLink to="/password-reset" class="text-primary font-medium">Passwort vergessen?</NuxtLink>
+      </template>
+    </UAuthForm>
+  </div>
+</template>
\ No newline at end of file
diff --git a/frontend/pages/mobile/index.vue b/frontend/pages/mobile/index.vue
new file mode 100644
index 0000000..71f1c29
--- /dev/null
+++ b/frontend/pages/mobile/index.vue
@@ -0,0 +1,74 @@
+<script setup>
+
+
+definePageMeta({
+  layout: 'mobile'
+})
+
+const auth = useAuthStore()
+
+const pinnedLinks = computed(() => {
+  return (auth.profile?.pinned_on_navigation || [])
+      .map((pin) => {
+        if (pin.type === "external") {
+          return {
+            label: pin.label,
+            to: pin.link,
+            icon: pin.icon,
+            external: true,
+          }
+        } else if (pin.type === "standardEntity") {
+          return {
+            label: pin.label,
+            to: `/standardEntity/${pin.datatype}/show/${pin.id}`,
+            icon: pin.icon,
+            external: false,
+          }
+        }
+      })
+      .filter(Boolean)
+})
+</script>
+
+<template>
+  <UDashboardPanelContent>
+    <UPageGrid>
+      <UDashboardCard>
+        <display-welcome/>
+      </UDashboardCard>
+      <UDashboardCard
+          title="Aufgaben"
+      >
+        <display-open-tasks/>
+      </UDashboardCard>
+      <!--<UDashboardCard
+          title="Anwesenheit"
+      >
+        <display-running-working-time/>
+      </UDashboardCard>
+      <UDashboardCard
+          title="Zeit"
+      >
+        <display-running-time/>
+      </UDashboardCard>
+      <UDashboardCard
+          title="Buchhaltung"
+          v-if="profileStore.ownTenant.features.accounting"
+      >
+        <display-open-balances/>
+      </UDashboardCard>-->
+      <UDashboardCard
+          title="Projekte"
+      >
+        <display-projects-in-phases/>
+      </UDashboardCard>
+      <display-pinnend-links :links="pinnedLinks"/>
+
+    </UPageGrid>
+  </UDashboardPanelContent>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/mobile/menu.vue b/frontend/pages/mobile/menu.vue
new file mode 100644
index 0000000..ee39712
--- /dev/null
+++ b/frontend/pages/mobile/menu.vue
@@ -0,0 +1,81 @@
+<script setup>
+
+definePageMeta({
+  layout: 'mobile',
+})
+
+const auth = useAuthStore()
+
+</script>
+
+<template>
+  <UDashboardPanelContent>
+    <UDivider class="mb-3">Weiteres</UDivider>
+    <UButton
+        class="w-full my-1"
+        to="/staff/time"
+        icon="i-heroicons-clock"
+    >
+      Zeiten
+    </UButton>
+<!--    <UButton
+        class="w-full my-1"
+        to="/standardEntity/absencerequests"
+        icon="i-heroicons-document-text"
+    >
+      Abwesenheiten
+    </UButton>-->
+
+    <UButton
+        class="w-full my-1"
+      to="/standardEntity/customers"
+        icon="i-heroicons-user-group"
+    >
+      Kunden
+    </UButton>
+    <UButton
+        class="w-full my-1"
+        to="/standardEntity/vendors"
+        icon="i-heroicons-truck"
+    >
+      Lieferanten
+    </UButton>
+    <UButton
+        class="w-full my-1"
+        to="/standardEntity/contacts"
+        icon="i-heroicons-user-group"
+    >
+      Ansprechpartner
+    </UButton>
+    <UButton
+        class="w-full my-1"
+        to="/standardEntity/plants"
+        icon="i-heroicons-clipboard-document"
+    >
+      Objekte
+    </UButton>
+    <UButton
+        class="w-full my-1"
+        @click="auth.logout()"
+        color="rose"
+        variant="outline"
+    >
+      Abmelden
+    </UButton>
+
+    <UDivider class="my-5">Unternehmen wechseln</UDivider>
+
+    <div class="w-full flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
+      <span class="text-left">{{tenant.name}}</span>
+      <UButton
+          @click="auth.switchTenant(tenant.id)"
+      >Wechseln</UButton>
+    </div>
+
+
+  </UDashboardPanelContent>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/password-change.vue b/frontend/pages/password-change.vue
new file mode 100644
index 0000000..527a64f
--- /dev/null
+++ b/frontend/pages/password-change.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: "notLoggedIn"
+})
+
+const auth = useAuthStore()
+const toast = useToast()
+
+
+
+
+const doChange = async (data:any) => {
+  try {
+    const res = await useNuxtApp().$api("/api/auth/password/change", {
+      method: "POST",
+      body: {
+        old_password: data.oldPassword,
+        new_password: data.newPassword,
+      }
+    })
+
+    // Weiterleiten nach erfolgreichem Login
+    toast.add({title:"Ändern erfolgreich"})
+    await auth.logout()
+    return navigateTo("/login")
+  } catch (err: any) {
+    toast.add({title:"Es gab ein Problem beim ändern",color:"rose"})
+  }
+}
+</script>
+
+<template>
+  <UCard class="max-w-sm w-full mx-auto mt-5">
+
+    <UColorModeImage
+        light="/Logo.png"
+        dark="/Logo_Dark.png"
+    />
+
+    <UAuthForm
+        title="Passwort zurücksetzen"
+        description="Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten."
+        align="bottom"
+        :fields="[{
+            name: 'oldPassword',
+            label: 'Altes Passwort',
+            type: 'password',
+            placeholder: 'Dein altes Passwort'
+          },{
+            name: 'newPassword',
+            label: 'Neues Passwort',
+            type: 'password',
+            placeholder: 'Dein neues Passwort'
+          }]"
+        :loading="false"
+        @submit="doChange"
+        :submit-button="{label: 'Ändern'}"
+        divider="oder"
+    >
+    </UAuthForm>
+  </UCard>
+</template>
\ No newline at end of file
diff --git a/frontend/pages/password-reset.vue b/frontend/pages/password-reset.vue
new file mode 100644
index 0000000..e0abd34
--- /dev/null
+++ b/frontend/pages/password-reset.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: "notLoggedIn"
+})
+
+const auth = useAuthStore()
+const toast = useToast()
+
+
+
+
+const doReset = async (data:any) => {
+  try {
+    const res = await useNuxtApp().$api("/auth/password/reset", {
+      method: "POST",
+      body: {
+        email: data.email
+      }
+    })
+
+    // Weiterleiten nach erfolgreichem Login
+    toast.add({title:"Zurücksetzen erfolgreich"})
+    return navigateTo("/login")
+  } catch (err: any) {
+    toast.add({title:"Problem beim zurücksetzen",color:"rose"})
+  }
+}
+</script>
+
+<template>
+  <UCard class="max-w-sm w-full mx-auto mt-5">
+
+    <UColorModeImage
+        light="/Logo.png"
+        dark="/Logo_Dark.png"
+    />
+
+    <UAuthForm
+        title="Passwort zurücksetzen"
+        description="Geben Sie Ihre E-Mail ein um ein neues Passwort per E-Mail zu erhalten."
+        align="bottom"
+        :fields="[{
+            name: 'email',
+            type: 'text',
+            label: 'Email',
+            placeholder: 'Deine E-Mail Adresse'
+          }]"
+        :loading="false"
+        @submit="doReset"
+        :submit-button="{label: 'Zurücksetzen'}"
+        divider="oder"
+    >
+    </UAuthForm>
+  </UCard>
+</template>
\ No newline at end of file
diff --git a/frontend/pages/projecttypes/[mode]/[[id]].vue b/frontend/pages/projecttypes/[mode]/[[id]].vue
new file mode 100644
index 0000000..49304b5
--- /dev/null
+++ b/frontend/pages/projecttypes/[mode]/[[id]].vue
@@ -0,0 +1,304 @@
+<script setup>
+
+import { v4 as uuidv4 } from 'uuid';
+
+
+
+defineShortcuts({
+  'backspace': () => {
+    router.push("/projecttypes")
+  },
+  'arrowleft': () => {
+    if(openTab.value > 0){
+      openTab.value -= 1
+    }
+  },
+  'arrowright': () => {
+    if(openTab.value < 3) {
+      openTab.value += 1
+    }
+  },
+})
+
+const openTab = ref(0)
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+
+const mode = ref(route.params.mode || "show")
+const itemInfo = ref({
+  name: "",
+  initialPhases: [{ "key": "f31f6fcb-34d5-41a0-9b8f-6c85062f19be", "icon": "i-heroicons-clipboard-document", "label": "Erstkontakt", "active": true, "quickactions": [] }, { "key": "41995d1f-78fa-448b-b6ea-e206645ffb89", "icon": "i-heroicons-wrench-screwdriver", "label": "Umsetzung", "quickactions": [] }, { "key": "267e78ac-9eab-4736-b9c8-4b94c1724494", "icon": "i-heroicons-document-text", "label": "Rechnungsstellung", "quickactions": [] }, { "key": "038df888-53f2-4985-b08e-776ab82df5d3", "icon": "i-heroicons-check", "label": "Abgeschlossen", "quickactions": [] } ]
+})
+const oldItemInfo = ref({})
+
+const openQuickActionModal = ref(false)
+const selectedKeyForQuickAction = ref("")
+
+const setKeys = () => {
+  itemInfo.value.initialPhases = itemInfo.value.initialPhases.map(i => {
+    return {
+      ...i,
+      key: uuidv4(),
+      quickactions: i.quickactions || []
+    }
+  })
+
+  itemInfo.value.initialPhases[0].active = true
+
+}
+
+const setupPage = async() => {
+
+  if(mode.value === "show" ){
+    itemInfo.value = await useEntities("projecttypes").selectSingle(route.params.id,"*")
+  } else if (mode.value === "edit") {
+    itemInfo.value = await useEntities("projecttypes").selectSingle(route.params.id,"*")
+  }
+
+  if(mode.value === "create") {
+    let query = route.query
+
+
+  }
+  if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
+
+  setKeys()
+}
+
+setupPage()
+
+
+
+const addPhase = () => {
+  itemInfo.value.initialPhases.push({label: '', icon: ''}),
+      setKeys
+}
+
+</script>
+
+<template>
+  <UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Projekt erstellen' : 'Projekt bearbeiten')">
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/projecttypes`)"
+      >
+        Projekttypen
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="itemInfo"
+          class="text-xl font-medium"
+      >{{itemInfo.name ? `Projekttyp: ${itemInfo.name}` : (mode === 'create' ? 'Projekttyp erstellen' : 'Projekttyp bearbeiten')}}</h1>
+    </template>
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="useEntities('projecttypes').update(itemInfo.id, itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="useEntities('projecttypes').create( itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="router.push(itemInfo.id ? `/projecttypes/show/${itemInfo.id}` : `/projecttypes`)"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="router.push(`/projecttypes/edit/${itemInfo.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <UTabs
+        :items="[{label: 'Informationen'}]"
+        v-if="itemInfo.id && mode == 'show'"
+        v-model="openTab"
+    >
+      <template #item="{ item }">
+        <div v-if="item.label === 'Informationen'" class="flex flex-row">
+          <div class="w-1/2 mr-3">
+            <UCard class="mt-5">
+              {{itemInfo}}
+            </UCard>
+          </div>
+          <div class="w-1/2">
+            <UCard class="mt-5">
+              <HistoryDisplay
+                  type="project"
+                  v-if="itemInfo"
+                  :element-id="itemInfo.id"
+                  render-headline
+              />
+            </UCard>
+          </div>
+        </div>
+      </template>
+    </UTabs>
+
+    <UForm v-else-if="mode === 'edit' || mode === 'create'">
+      <UAlert
+          color="rose"
+          variant="outline"
+          class="mb-5"
+          v-if="mode === 'edit'"
+          description="Achtung Änderungen an diesem Projekttypen betreffen nur Projekte die damit neu erstellt werden. Bestehende Projekte bleiben unverändert."
+      />
+
+      <UFormGroup
+          label="Name:"
+      >
+        <UInput
+            v-model="itemInfo.name"
+        />
+      </UFormGroup>
+
+      <UDivider class="mt-5">
+        Initiale Phasen
+      </UDivider>
+      <UButton
+          class="mt-3"
+          @click="addPhase"
+      >
+        + Phase
+      </UButton>
+
+      <table class="mt-3">
+        <thead>
+        <tr>
+          <th></th>
+          <th class="text-left"><span class="ml-2">Name</span></th>
+          <th class="text-left"><span class="ml-2">Icon</span></th>
+          <th class="text-left"><span class="ml-2">Optional</span></th>
+          <th class="text-left"><span class="ml-2">Beschreibung</span></th>
+          <th class="text-left"><span class="ml-2">Schnellaktionen</span></th>
+          <th></th>
+        </tr>
+        </thead>
+        <draggable
+            v-model="itemInfo.initialPhases"
+            handle=".handle"
+            tag="tbody"
+            itemKey="pos"
+            @end="setKeys"
+        >
+
+          <template #item="{element: phase}">
+            <tr>
+              <td>
+                <UIcon
+                    class="handle"
+                    name="i-mdi-menu"
+                />
+              </td>
+              <td>
+                <UInput
+                    class="my-2 ml-2"
+                    v-model="phase.label"
+                    placeholder="Name"
+                />
+              </td>
+              <td>
+                <UInput
+                    class="my-2 ml-2"
+                    v-model="phase.icon"
+                    placeholder="Icon"
+                />
+              </td>
+              <td>
+                <UCheckbox
+                    class="my-2 ml-2"
+                    v-model="phase.optional"
+                />
+              </td>
+              <td>
+                <UInput
+                    class="my-2 ml-2"
+                    v-model="phase.description"
+                    placeholder="Beschreibung"
+                />
+              </td>
+              <td>
+                <UButton
+                    class="my-2 ml-2"
+                    variant="outline"
+                    @click="openQuickActionModal = true,
+                            selectedKeyForQuickAction = phase.key"
+                >+ Schnellaktion</UButton>
+                <UButton
+                    @click="phase.quickactions = phase.quickactions.filter(i => i.label !== button.label)"
+                    v-for="button in phase.quickactions"
+                    class="ml-1"
+                >
+                  {{ button.label }}
+                </UButton>
+
+                <UModal v-model="openQuickActionModal">
+                  <UCard>
+                    <div class="flex items-center justify-between">
+                      <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                        Schnellaktion hinzufügen
+                      </h3>
+                      <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="openQuickActionModal = false" />
+                    </div>
+                    <div class="flex flex-col">
+                      <UButton
+                          class="my-1"
+                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Angebot',link:'/createDocument/edit/?type=quotes'})">Angebot Erstellen</UButton>
+                      <UButton
+                          class="my-1"
+                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Auftrag',link:'/createDocument/edit/?type=confirmationOrders'})">Auftrag Erstellen</UButton>
+                      <UButton
+                          class="my-1"
+                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Lieferschein',link:'/createDocument/edit/?type=deliveryNotes'})">Lieferschein Erstellen</UButton>
+                      <UButton
+                          class="my-1"
+                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Rechnung',link:'/createDocument/edit/?type=invoices'})">Rechnung Erstellen</UButton>
+                      <UButton
+                          class="my-1"
+                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Aufgabe',link:'/tasks/create'})">Aufgabe Erstellen</UButton>
+                      <UButton
+                          class="my-1"
+                          @click="itemInfo.initialPhases[itemInfo.initialPhases.findIndex(i=> i.key === selectedKeyForQuickAction)].quickactions.push({label:'+ Termin',link:'/events/edit'})">Termin Erstellen</UButton>
+
+                    </div>
+
+                  </UCard>
+                </UModal>
+              </td>
+              <td>
+                <UButton
+                    class="my-2 ml-2"
+                    variant="outline"
+                    color="rose"
+                    @click="itemInfo.initialPhases = itemInfo.initialPhases.filter(i => i !== phase)"
+                >X</UButton>
+              </td>
+            </tr>
+          </template>
+        </draggable>
+      </table>
+
+    </UForm>
+  </UDashboardPanelContent>
+
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/projecttypes/index.vue b/frontend/pages/projecttypes/index.vue
new file mode 100644
index 0000000..ce4b141
--- /dev/null
+++ b/frontend/pages/projecttypes/index.vue
@@ -0,0 +1,107 @@
+<script setup>
+
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/projects/create")
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/projecttypes/show/${filteredRows.value[selectedItem.value].id}`)
+    }
+  },
+  'arrowdown': () => {
+    if (selectedItem.value < filteredRows.value.length - 1) {
+      selectedItem.value += 1
+    } else {
+      selectedItem.value = 0
+    }
+  },
+  'arrowup': () => {
+    if (selectedItem.value === 0) {
+      selectedItem.value = filteredRows.value.length - 1
+    } else {
+      selectedItem.value -= 1
+    }
+  }
+})
+
+
+const router = useRouter()
+const tempStore = useTempStore()
+
+const items = ref([])
+const selectedItem = ref(0)
+
+
+const setup = async () => {
+  items.value = await useEntities("projecttypes").select()
+}
+
+setup()
+
+const templateColumns = [
+  {
+    key: "name",
+    label: "Name"
+  },
+
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+const searchString = ref(tempStore.searchStrings["projecttypes"] || '')
+
+const filteredRows = computed(() => {
+  return useListFilter(searchString.value, items.value)
+})
+
+</script>
+
+<template>
+  <UDashboardNavbar title="Projekttypen" :badge="filteredRows.length">
+    <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()"
+          @change="tempStore.modifySearchString('projecttypes',searchString)"
+      >
+        <template #trailing>
+          <UKbd value="/"/>
+        </template>
+      </UInput>
+
+      <UButton @click="router.push(`/projecttypes/create`)">+ Projekttyp</UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/projecttypes/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Projekttypen anzuzeigen' }"
+  >
+    <template #name-data="{row}">
+      <span class="text-primary-500 font-bold" v-if="row === filteredRows[selectedItem]">{{ row.name }}</span>
+      <span v-else>{{ row.name }}</span>
+    </template>
+
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/roles/[mode]/[[id]].vue b/frontend/pages/roles/[mode]/[[id]].vue
new file mode 100644
index 0000000..2ed1e15
--- /dev/null
+++ b/frontend/pages/roles/[mode]/[[id]].vue
@@ -0,0 +1,198 @@
+<script setup>
+import HistoryDisplay from "~/components/HistoryDisplay.vue";
+
+
+
+defineShortcuts({
+  'backspace': () => {
+    router.push("/roles")
+  },
+  'arrowleft': () => {
+    if(openTab.value > 0){
+      openTab.value -= 1
+    }
+  },
+  'arrowright': () => {
+    if(openTab.value < 3) {
+      openTab.value += 1
+    }
+  },
+})
+
+const dataStore = useDataStore()
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const id = ref(route.params.id ? route.params.id : null )
+
+const role = useRole()
+
+//Working
+const mode = ref(route.params.mode || "show")
+const itemInfo = ref({
+    rights: []
+})
+const openTab = ref(0)
+
+//Functions
+const setupPage = async () => {
+  if(mode.value === "show" || mode.value === "edit"){
+    itemInfo.value = await useSupabaseSelectSingle("roles",route.params.id,"*")
+  }
+}
+
+const rightOptions = computed(() => {
+  console.log(Object.keys(useRole().generalAvailableRights.value))
+  return Object.keys(useRole().generalAvailableRights.value).map(i => {
+    return {
+      key: i,
+      label: role.generalAvailableRights.value[i].label
+    }
+  })
+})
+
+const rightList = computed(() => {
+  console.log(rightOptions.value)
+
+  return itemInfo.value.rights.map(i => {
+    if(rightOptions.value.find(x => x.key === i)) {
+      return rightOptions.value.find(x => x.key === i).label
+    } else {
+      return i
+    }
+  }).join(", ")
+})
+
+setupPage()
+</script>
+
+<template>
+  <UDashboardNavbar
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/roles`)"
+      >
+        Artikel
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="itemInfo"
+          class="text-xl font-medium"
+      >{{itemInfo.name ? `Rolle: ${itemInfo.name}` : (mode === 'create' ? 'Rolle erstellen' : 'Rolle bearbeiten')}}</h1>
+    </template>
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('roles',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('roles',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="router.push(itemInfo.id ? `/roles/show/${itemInfo.value.id}` : `/products/`)"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="  router.push(`/roles/edit/${itemInfo.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UTabs
+    :items="[{label: 'Informationen'}]"
+    v-if="mode === 'show' && itemInfo"
+    class="p-5"
+    v-model="openTab"
+  >
+    <template #item="{item}">
+      <div v-if="item.label === 'Informationen'" class="mt-5 flex flex-row">
+        <div class="w-1/2 mr-5">
+          <UCard>
+            <table class="w-full">
+              <tr>
+                <td>Name:</td>
+                <td>{{itemInfo.name}}</td>
+              </tr>
+              <tr>
+                <td>Rechte:</td>
+                <td>{{rightList}}</td>
+              </tr>
+              <tr>
+                <td>Beschreibung:</td>
+                <td>{{itemInfo.description}}</td>
+              </tr>
+            </table>
+          </UCard>
+        </div>
+        <div class="w-1/2">
+          <UCard>
+            <HistoryDisplay
+                type="role"
+                v-if="itemInfo"
+                :element-id="id"
+                render-headline
+            />
+          </UCard>
+        </div>
+      </div>
+    </template>
+  </UTabs>
+  <UForm
+      v-else-if="mode == 'edit' || mode == 'create'"
+      class="p-5"
+  >
+    <UFormGroup
+        label="Name:"
+    >
+      <UInput
+          v-model="itemInfo.name"
+          autofocus
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Rechte:"
+    >
+      <USelectMenu
+          :options="rightOptions"
+          value-attribute="key"
+          option-attribute="label"
+          v-model="itemInfo.rights"
+          multiple
+      >
+      </USelectMenu>
+    </UFormGroup>
+    <UFormGroup
+        label="Beschreibung:"
+    >
+      <UTextarea
+          v-model="itemInfo.description"
+      />
+    </UFormGroup>
+  </UForm>
+</template>
+
+<style scoped>
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/pages/roles/index.vue b/frontend/pages/roles/index.vue
new file mode 100644
index 0000000..d9debf6
--- /dev/null
+++ b/frontend/pages/roles/index.vue
@@ -0,0 +1,22 @@
+<script setup>
+
+
+const items = ref([])
+const setup = async () => {
+    items.value = await useSupabaseSelect("roles","*")
+}
+
+setup()
+
+</script>
+
+<template>
+  <EntityList
+    :items="items"
+    type="roles"
+  />
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/settings/banking/index.vue b/frontend/pages/settings/banking/index.vue
new file mode 100644
index 0000000..d550833
--- /dev/null
+++ b/frontend/pages/settings/banking/index.vue
@@ -0,0 +1,223 @@
+<script setup>
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+const route = useRoute()
+const router = useRouter()
+const url = useRequestURL()
+const supabase = useSupabaseClient()
+const toast = useToast()
+
+const showAddBankRequisition = ref(false)
+const bicBankToAdd = ref("")
+const bankData = ref({})
+const showAlert = ref(false)
+const reqData = ref({})
+
+const bankaccounts = ref([])
+
+const showReqData = ref(false)
+
+const setupPage = async () => {
+  if(route.query.ref) {
+    reqData.value = await useFunctions().useBankingListRequisitions(route.query.ref)
+    if(reqData.value.accounts.length > 0){
+      showReqData.value = true
+    }
+  }
+
+  bankaccounts.value = await useEntities("bankaccounts").select()
+}
+
+const checkBIC = async () => {
+  bankData.value = await useFunctions().useBankingCheckInstitutions(bicBankToAdd.value)
+  showAlert.value = true
+}
+
+const generateLink = async (bankId) => {
+  try {
+
+    const link = await useFunctions().useBankingGenerateLink(bankId || bankData.value.id)
+
+    await navigateTo(link, {
+      open: {
+        target: "_blank"
+      }
+    })
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const addAccount = async (account) => {
+    let accountData = {
+      accountId: account.id,
+      ownerName: account.owner_name,
+      iban: account.iban,
+      tenant: profileStore.currentTenant,
+      bankId: account.institution_id
+    }
+
+    const {data,error} = await supabase.from("bankaccounts").insert(accountData).select()
+    if(error) {
+      toast.add({title: "Es gab einen Fehler bei hinzufügen des Accounts", color:"rose"})
+    } else if(data) {
+      toast.add({title: "Account erfolgreich hinzugefügt"})
+    }
+}
+
+const updateAccount = async (account) => {
+
+    let bankaccountId = bankaccounts.value.find(i => i.iban === account.iban).id
+
+    const res = await useEntities("bankaccounts").update(bankaccountId, {accountId: account.id, expired: false})
+
+    if(!res) {
+      console.log(error)
+      toast.add({title: "Es gab einen Fehler bei aktualisieren des Accounts", color:"rose"})
+    } else {
+      toast.add({title: "Account erfolgreich aktualisiert"})
+      reqData.value = null
+      setupPage()
+    }
+}
+
+setupPage()
+</script>
+
+<template>
+  <UDashboardNavbar title="Bankkonten">
+    <template #right>
+      <UButton
+        @click="showAddBankRequisition = true"
+      >
+        + Bankverbindung
+      </UButton>
+      <USlideover
+        v-model="showAddBankRequisition"
+      >
+        <UCard
+          class="h-full"
+        >
+          <template #header>
+            <p>Bankverbindung hinzufügen</p>
+          </template>
+
+          <UFormGroup
+            label="BIC:"
+            class="flex-auto"
+          >
+            <InputGroup class="w-full">
+              <UInput
+                  v-model="bicBankToAdd"
+                  class="flex-auto"
+                  @keydown.enter="checkBIC"
+              />
+              <UButton
+                @click="checkBIC"
+              >
+                Check
+              </UButton>
+            </InputGroup>
+
+          </UFormGroup>
+          <UAlert
+            v-if="showAlert && bankData.id && bankData.countries.includes('DE')"
+            title="Bank gefunden"
+            icon="i-heroicons-check-circle"
+            color="primary"
+            variant="outline"
+            class="mt-3"
+            :actions="[{ variant: 'solid', color: 'primary', label: 'Verbinden',click: generateLink }]"
+          />
+          <UAlert
+            v-else-if="showAlert && !bankData.id"
+            title="Bank nicht gefunden"
+            icon="i-heroicons-x-circle"
+            color="rose"
+            variant="outline"
+            class="mt-3"
+          />
+
+        </UCard>
+      </USlideover>
+    </template>
+  </UDashboardNavbar>
+
+  <UModal v-model="showReqData">
+    <UCard>
+      <template #header>
+        Verfügbare Bankkonten
+      </template>
+      <div
+          v-for="account in reqData.accounts"
+          class="p-2 m-3 flex justify-between"
+      >
+        {{account.iban}} - {{account.owner_name}}
+
+        <UButton
+            @click="addAccount(account)"
+            v-if="!bankaccounts.find(i => i.iban === account.iban)"
+        >
+          Hinzufügen
+        </UButton>
+        <UButton
+            @click="updateAccount(account)"
+            v-else
+        >
+          Aktualisieren
+        </UButton>
+      </div>
+    </UCard>
+  </UModal>
+
+
+
+<!--  <UButton @click="setupPage">Setup</UButton>
+  <div v-if="route.query.reqId">
+    {{reqData}}
+  </div>-->
+
+  <UTable
+    :rows="bankaccounts"
+    :columns="[
+        {
+          key: 'expired',
+          label: 'Aktiv'
+        },{
+          key: 'iban',
+          label: 'IBAN'
+        },{
+          key: 'bankId',
+          label: 'Bank'
+        },{
+          key: 'ownerName',
+          label: 'Kontoinhaber'
+        },{
+          key: 'balance',
+          label: 'Saldo'
+        },
+    ]"
+  >
+    <template #expired-data="{row}">
+      <span v-if="row.expired" class="text-rose-600">Ausgelaufen</span>
+      <span v-else class="text-primary">Aktiv</span>
+      <UButton
+        v-if="row.expired"
+        variant="outline"
+        class="ml-2"
+        @click="generateLink(row.bankId)"
+      >Aktualisieren</UButton>
+    </template>
+    <template #balance-data="{row}">
+      {{row.balance ? row.balance.toFixed(2).replace(".",",") + ' €' : '-'}}
+    </template>
+    <template #iban-data="{row}">
+      {{row.iban.match(/.{1,5}/g).join(" ")}}
+    </template>
+  </UTable>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/settings/emailaccounts/[mode]/[[id]].vue b/frontend/pages/settings/emailaccounts/[mode]/[[id]].vue
new file mode 100644
index 0000000..de51c82
--- /dev/null
+++ b/frontend/pages/settings/emailaccounts/[mode]/[[id]].vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+
+const route = useRoute()
+const mode = route.params.mode
+
+const itemInfo = ref({})
+
+const setup = async () => {
+  if(mode === "create") {
+
+  } else {
+    itemInfo.value = await useNuxtApp().$api(`/api/email/accounts/${route.params.id}`)
+  }
+}
+setup()
+
+const createAccount = async () => {
+  const res = await useNuxtApp().$api(`/api/email/accounts`, {
+    method: "POST",
+    body: itemInfo.value,
+  })
+
+  if(res.success) {
+    navigateTo("/settings/emailaccounts")
+  }
+}
+
+const saveAccount = async () => {
+  const res = await useNuxtApp().$api(`/api/email/accounts/${route.params.id}`, {
+    method: "POST",
+    body: itemInfo.value,
+  })
+
+  if(res.success) {
+    navigateTo("/settings/emailaccounts")
+  }
+
+}
+
+</script>
+
+<template>
+  <UDashboardNavbar :title="`E-Mail Konto ${mode === 'create' ? 'erstellen' : 'bearbeiten'}`">
+    <template #right>
+      <UButton
+        v-if="mode === 'create'"
+        @click="createAccount"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+        v-if="mode === 'edit'"
+        @click="saveAccount"
+      >
+        Speichern
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UForm class="w-2/3 mx-auto mt-5">
+    <UFormGroup
+      label="E-Mail Adresse"
+    >
+      <UInput
+        v-model="itemInfo.email"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Passwort"
+    >
+      <UInput
+          type="password"
+          v-model="itemInfo.password"
+          placeholder="********"
+      />
+    </UFormGroup>
+
+    <UDivider> IMAP </UDivider>
+
+    <UFormGroup
+        label="IMAP Host"
+    >
+      <UInput
+          v-model="itemInfo.imap_host"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="IMAP Port"
+    >
+      <UInput
+          type="number"
+          v-model="itemInfo.imap_port"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="IMAP SSL"
+    >
+      <UToggle
+          v-model="itemInfo.imap_ssl"
+      />
+    </UFormGroup>
+
+    <UDivider> SMTP </UDivider>
+
+    <UFormGroup
+        label="SMTP Host"
+    >
+      <UInput
+          v-model="itemInfo.smtp_host"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="SMTP Port"
+    >
+      <UInput
+          type="number"
+          v-model="itemInfo.smtp_port"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="SMTP SSL"
+    >
+      <UToggle
+          v-model="itemInfo.smtp_ssl"
+      />
+    </UFormGroup>
+
+  </UForm>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/settings/emailaccounts/index.vue b/frontend/pages/settings/emailaccounts/index.vue
new file mode 100644
index 0000000..98db27a
--- /dev/null
+++ b/frontend/pages/settings/emailaccounts/index.vue
@@ -0,0 +1,99 @@
+<script setup>
+import axios from "axios"
+const supabase = useSupabaseClient()
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+
+const createEMailAddress = ref("")
+const createEMailType = ref("imap")
+const showEmailAddressModal = ref(false)
+
+const items = ref([])
+
+const setupPage = async () => {
+  items.value = await useNuxtApp().$api("/api/email/accounts")
+}
+
+const createAccount = async () => {
+  showEmailAddressModal.value = false
+}
+
+setupPage()
+
+
+const templateColumns = [
+  {
+    key: "email",
+    label: "E-Mail Adresse:"
+  },
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+
+
+</script>
+
+<template>
+  <UModal
+    v-model="showEmailAddressModal"
+  >
+    <UCard>
+      <template #header>
+        E-Mail Adresse
+      </template>
+<!--      <UFormGroup
+        label="E-Mail Adresse:"
+      >
+
+      </UFormGroup>-->
+
+      <UInput
+          v-model="createEMailAddress"
+      />
+<!--      <UFormGroup
+        label="Account Typ:"
+      >
+        <USelectMenu
+          :options="[{key: 'imap',label:'IMAP'}]"
+          option-attribute="label"
+          value-attribute="key"
+          v-model="createEMailType"
+        />
+      </UFormGroup>-->
+      <template #footer>
+        <UButton
+            @click="createAccount"
+        >
+          Erstellen
+        </UButton>
+      </template>
+    </UCard>
+
+  </UModal>
+  <UDashboardNavbar title="E-Mail Konten">
+      <template #right>
+        <UTooltip title="In der Beta nicht verfügbar">
+          <UButton
+              @click="navigateTo('/settings/emailaccounts/create')"
+          >
+            + E-Mail Konto
+          </UButton>
+        </UTooltip>
+
+      </template>
+  </UDashboardNavbar>
+  <UTable
+    :rows="items"
+    :columns="columns"
+    class="w-full"
+    @select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)"
+    :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine E-Mail Konten anzuzeigen' }"
+  >
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/settings/externalDevices.vue b/frontend/pages/settings/externalDevices.vue
new file mode 100644
index 0000000..97298bf
--- /dev/null
+++ b/frontend/pages/settings/externalDevices.vue
@@ -0,0 +1,66 @@
+<script setup>
+import axios from "axios"
+const {ownTenant} = storeToRefs(useDataStore())
+
+
+const setupPrinter = async () => {
+  console.log(ownTenant.value.labelPrinterIp)
+  let printerUri = `http://${ownTenant.value.labelPrinterIp}/pstprnt`
+  labelPrinterURI.value = printerUri
+  console.log(printerUri)
+}
+
+
+/*const printLabel = async () => {
+  axios
+      .post(labelPrinterURI.value, `^XA^FO10,20^BCN,100^FD${}^XZ` )
+      .then(console.log)
+      .catch(console.log)
+
+
+}*/
+
+
+
+const labelPrinterURI = ref("")
+
+</script>
+
+<template>
+  <UPage>
+    <UCard>
+      <template #header>
+        Etikettendrucker
+      </template>
+
+      <UFormGroup
+        label="IP-Adresse:"
+      >
+        <UInput
+          v-model="labelPrinterURI"
+        />
+      </UFormGroup>
+
+      <UButton
+        @click="setupPrinter"
+      >
+        Drucker Setup
+      </UButton>
+      <UButton
+        @click="printLabel"
+      >
+        Druck
+      </UButton>
+
+    </UCard>
+<!--    <UCard>
+      <template #header>
+        A4 Drucker
+      </template>
+    </UCard>-->
+  </UPage>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/settings/index.vue b/frontend/pages/settings/index.vue
new file mode 100644
index 0000000..150108c
--- /dev/null
+++ b/frontend/pages/settings/index.vue
@@ -0,0 +1,89 @@
+<script setup>
+
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+const router = useRouter()
+
+const items = [{
+  label: 'Profil',
+},{
+  label: 'Projekte',
+  content: 'This is the content shown for Tab1'
+}, {
+  label: 'E-Mail',
+  content: 'And, this is the content for Tab2'
+}, {
+  label: 'Dokumente'
+}]
+
+const colorMode = useColorMode()
+const isLight = computed({
+  get() {
+    return colorMode.value !== 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+
+
+</script>
+
+<template>
+  <UDashboardNavbar title="Einstellungen">
+
+  </UDashboardNavbar>
+  <UTabs
+      :items="items"
+      class="h-100 p-5"
+  >
+    <template #item="{item}">
+      <UCard class="mt-5">
+        <div v-if="item.label === 'Profil'">
+
+          <UDivider
+              class="my-3"
+              label="Profil"
+          />
+
+          <InputGroup>
+            <UButton
+                :icon="!isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+                color="white"
+                variant="outline"
+                aria-label="Theme"
+                @click="isLight = !isLight"
+            />
+          </InputGroup>
+
+        </div>
+        <div v-else-if="item.label === 'Projekte'">
+          <UDivider
+            label="Phasenvorlagen"
+          />
+        </div>
+        <div v-else-if="item.label === 'Dokumente'">
+          <UDivider
+              label="Tags"
+              class="mb-3"
+          />
+          <InputGroup>
+            <UBadge
+                v-for="tag in profileStore.ownTenant.tags.documents"
+            >
+              {{tag}}
+            </UBadge>
+          </InputGroup>
+
+
+          {{profileStore.ownTenant.tags}}
+        </div>
+      </UCard>
+
+    </template>
+  </UTabs>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/settings/numberRanges.vue b/frontend/pages/settings/numberRanges.vue
new file mode 100644
index 0000000..c1819a1
--- /dev/null
+++ b/frontend/pages/settings/numberRanges.vue
@@ -0,0 +1,112 @@
+<script setup>
+const auth = useAuthStore()
+
+const resources = {
+  customers: {
+    label: "Kunden"
+  },
+  vendors: {
+    label: "Lieferanten"
+  },
+  products: {
+    label: "Artikel"
+  },
+  spaces: {
+    label: "Lagerplätze"
+  },
+  invoices: {
+    label: "Rechnungen"
+  },
+  quotes: {
+    label: "Angebote"
+  },
+  inventoryitems: {
+    label: "Inventarartikel"
+  },
+  projects: {
+    label: "Projekte"
+  },
+  confirmationOrders: {
+    label: "Auftragsbestätigungen"
+  },
+  deliveryNotes: {
+    label: "Lieferscheine"
+  },
+  costcentres: {
+    label: "Kostenstellen"
+  }
+}
+
+const numberRanges = ref(auth.activeTenantData.numberRanges)
+
+const updateNumberRanges = async (range) => {
+
+  const res = await useNuxtApp().$api(`/api/tenant/numberrange/${range}`,{
+    method: "PUT",
+    body: {
+      numberRange: numberRanges.value[range]
+    }
+  })
+
+  console.log(res)
+
+}
+
+
+</script>
+
+<template>
+  <UDashboardNavbar
+      title="Nummernkreise bearbeiten"
+  >
+
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <UAlert
+        title="Änderungen an diesen Werten betreffen nur neu Erstellte Einträge."
+        color="rose"
+        variant="outline"
+        icon="i-heroicons-exclamation-triangle"
+    />
+  </UDashboardToolbar>
+
+  <table
+      class="m-3"
+  >
+    <tr class="text-left">
+      <th>Typ</th>
+      <th>Prefix</th>
+      <th>Nächste Nummer</th>
+      <th>Suffix</th>
+    </tr>
+    <tr
+        v-for="key in Object.keys(resources)"
+    >
+      <td>{{resources[key].label}}</td>
+      <td>
+        <UInput
+            v-model="numberRanges[key].prefix"
+            @change="updateNumberRanges(key)"
+        />
+      </td>
+      <td>
+        <UInput
+            v-model="numberRanges[key].nextNumber"
+            @change="updateNumberRanges(key)"
+            type="number"
+            step="1"
+        />
+      </td>
+      <td>
+        <UInput
+            v-model="numberRanges[key].suffix"
+            @change="updateNumberRanges(key)"
+        />
+      </td>
+    </tr>
+  </table>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/frontend/pages/settings/ownfields.vue b/frontend/pages/settings/ownfields.vue
new file mode 100644
index 0000000..857233d
--- /dev/null
+++ b/frontend/pages/settings/ownfields.vue
@@ -0,0 +1,23 @@
+<script setup>
+
+const dataStore = useDataStore()
+
+const setupPage = async () => {
+  console.log()
+}
+
+
+
+</script>
+
+<template>
+  <UDashboardNavbar
+    title="Eigene Felder"
+  >
+
+  </UDashboardNavbar>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/settings/tenant.vue b/frontend/pages/settings/tenant.vue
new file mode 100644
index 0000000..2295e35
--- /dev/null
+++ b/frontend/pages/settings/tenant.vue
@@ -0,0 +1,169 @@
+<script setup>
+
+const auth = useAuthStore()
+
+const itemInfo = ref({
+  features: {},
+  businessInfo: {},
+  projectTypes: []
+})
+
+const setupPage = async () => {
+  itemInfo.value = auth.activeTenantData
+  console.log(itemInfo.value)
+}
+
+const features = ref(auth.activeTenantData.features)
+const businessInfo = ref(auth.activeTenantData.businessInfo)
+
+const updateTenant = async (newData) => {
+
+  const res = await useNuxtApp().$api(`/api/tenant/other/${auth.activeTenant}`, {
+    method: "PUT",
+    body: {
+      data: newData,
+    }
+  })
+}
+
+setupPage()
+</script>
+
+<template>
+  <UDashboardNavbar title="Firmeneinstellungen">
+
+  </UDashboardNavbar>
+  <UTabs
+      class="p-5"
+      :items="[
+        {
+          label: 'Dokubox'
+        },{
+          label: 'Rechnung & Kontakt'
+        }
+    ]"
+  >
+    <template #item="{item}">
+      <div v-if="item.label === 'Dokubox'">
+        <UAlert
+            class="mt-5"
+            title="DOKUBOX"
+        >
+          <template #description>
+            <p>Die Dokubox ist eine E-Mail Inbox um deine Anhänge direkt als Dokumente zu importieren. Leite Deine E-Mails einfach an die folgende E-Mail Adresse weiter, diese ist für dein Unternehmen einzigartig. Die E-Mails werden dann alle 5 min abgerufen.</p>
+            <br><br>
+            <a
+                v-if="itemInfo.id"
+                :href="`mailto:${itemInfo.dokuboxkey}@fedeo-dokubox.de`"
+            >
+              {{itemInfo.dokuboxkey}}@fedeo-dokubox.de
+            </a>
+          </template>
+        </UAlert>
+
+      </div>
+      <div v-if="item.label === 'Rechnung & Kontakt'">
+        <UCard class="mt-5">
+          <UForm class="w-1/2">
+            <UFormGroup
+                label="Firmenname:"
+            >
+              <UInput v-model="businessInfo.name"/>
+            </UFormGroup>
+            <UFormGroup
+                label="Straße + Hausnummer:"
+            >
+              <UInput v-model="businessInfo.street"/>
+            </UFormGroup>
+            <UFormGroup
+                label="PLZ + Ort"
+                class="w-full"
+            >
+              <InputGroup class="w-full">
+                <UInput v-model="businessInfo.zip"/>
+                <UInput v-model="businessInfo.city" class="flex-auto"/>
+              </InputGroup>
+            </UFormGroup>
+            <UButton
+                class="mt-3"
+                @click="updateTenant({businessInfo: businessInfo})"
+            >
+              Speichern
+            </UButton>
+          </UForm>
+        </UCard>
+
+      </div>
+      <div v-else-if="item.label === 'Funktionen'">
+        <UCard class="mt-5">
+          <UAlert
+              title="Funktionen ausblenden"
+              description="Nur Funktionen mit gesetztem Haken sind im Unternehmen verfügbar. Diese Einstellungen gelten für alle Mitarbeiter und sind unabhängig von Berechtigungen."
+              color="rose"
+              variant="outline"
+              class="mb-5"
+          />
+          <UCheckbox
+              label="Kalendar"
+              v-model="features.calendar"
+              @change="updateTenant({features: features})"
+          />
+          <UCheckbox
+              label="Kontakte"
+              v-model="features.contacts"
+              @change="updateTenant({features: features})"
+          />
+          <UCheckbox
+              label="Plantafel"
+              v-model="features.planningBoard"
+              @change="updateTenant({features: features})"
+          />
+          <UCheckbox
+              label="Zeiterfassung"
+              v-model="features.timeTracking"
+              @change="updateTenant({features: features})"
+          />
+          <UCheckbox
+              label="Anwesenheiten"
+              v-model="features.workingTimeTracking"
+              @change="updateTenant({features: features})"
+          />
+          <UCheckbox
+              label="Lager"
+              v-model="features.inventory"
+              @change="updateTenant({features: features})"
+          />
+          <UCheckbox
+              label="Fahrzeuge"
+              v-model="features.vehicles"
+              @change="updateTenant({features: features})"
+          />
+          <UCheckbox
+              label="Buchhaltung"
+              v-model="features.accounting"
+              @change="updateTenant({features: features})"
+          />
+          <UCheckbox
+              label="Projekte"
+              v-model="features.projects"
+              @change="updateTenant({features: features})"
+          />
+          <UCheckbox
+              label="Verträge"
+              v-model="features.contracts"
+              @change="updateTenant({features: features})"
+          />
+          <UCheckbox
+              label="Objekte"
+              v-model="features.objects"
+              @change="updateTenant({features: features})"
+          />
+        </UCard>
+      </div>
+    </template>
+  </UTabs>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/frontend/pages/settings/texttemplates.vue b/frontend/pages/settings/texttemplates.vue
new file mode 100644
index 0000000..7850478
--- /dev/null
+++ b/frontend/pages/settings/texttemplates.vue
@@ -0,0 +1,220 @@
+<script setup>
+const dataStore = useDataStore()
+
+defineShortcuts({
+  '+': () => {
+    editTemplateModalOpen.value = true
+  }
+})
+
+const editTemplateModalOpen = ref(false)
+const itemInfo = ref({})
+const texttemplates = ref([])
+const loading = ref(true)
+
+const setup = async () => {
+  texttemplates.value = (await useEntities("texttemplates").select()).filter(i => !i.archived)
+  loading.value = false
+}
+
+setup()
+
+const expand = ref({
+  openedRows: [],
+  row: {}
+})
+
+
+</script>
+
+<template>
+  <UDashboardNavbar
+      title="Text Vorlagen"
+  >
+    <template #right>
+      <UButton
+          @click="editTemplateModalOpen = true, itemInfo = {}"
+      >
+        + Erstellen
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <UCard class="mx-5">
+      <template #header>
+        Variablen
+      </template>
+      <table>
+        <tr>
+          <th class="text-left">Variable</th>
+          <th class="text-left">Beschreibung</th>
+        </tr>
+        <tr>
+          <td>vorname</td>
+          <td>Vorname</td>
+        </tr>
+        <tr>
+          <td>nachname</td>
+          <td>Nachname</td>
+        </tr>
+        <tr>
+          <td>zahlungsziel_in_tagen</td>
+          <td>Zahlungsziel in Tagen</td>
+        </tr>
+        <tr>
+          <td>lohnkosten</td>
+          <td>Lohnkosten Verkauf</td>
+        </tr>
+        <tr>
+          <td>titel</td>
+          <td>Titel</td>
+        </tr>
+        <tr>
+          <td>anrede</td>
+          <td>Anrede</td>
+        </tr>
+      </table>
+
+    </UCard>
+
+    <UTable
+        class="mt-3"
+        :rows="texttemplates"
+        :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
+        :loading="loading"
+        v-model:expand="expand" :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Textvorlagen anzuzeigen' }"
+        :columns="[{key:'name',label:'Name'},{key:'documentType',label:'Dokumententyp'},{key:'default',label:'Standard'},{key:'pos',label:'Position'}]"
+    >
+      <template #documentType-data="{row}">
+        {{dataStore.documentTypesForCreation[row.documentType].label}}
+      </template>
+      <template #default-data="{row}">
+        {{row.default ? "Ja" : "Nein"}}
+      </template>
+      <template #pos-data="{row}">
+        <span v-if="row.pos === 'startText'">Einleitung</span>
+        <span v-else-if="row.pos === 'endText'">Endtext</span>
+      </template>
+      <template #expand="{ row }">
+        <div class="p-4">
+          <p class="text-2xl">{{dataStore.documentTypesForCreation[row.documentType].label}}</p>
+          <p class="text-xl mt-3">{{row.pos === 'startText' ? 'Einleitung' : 'Ende'}}</p>
+          <p class="text-justify mt-3">{{row.text}}</p>
+          <UButton
+              class="mt-3 mr-3"
+              @click="itemInfo = row;
+             editTemplateModalOpen = true"
+              variant="outline"
+          >Bearbeiten</UButton>
+          <ButtonWithConfirm
+              color="rose"
+              variant="outline"
+              @confirmed="dataStore.updateItem('texttemplates',{id: row.id,archived: true}),
+                      setup"
+          >
+            <template #button>
+              Archivieren
+            </template>
+            <template #header>
+              <span class="text-md dark:text-whitetext-black font-bold">Archivieren bestätigen</span>
+            </template>
+            Möchten Sie diesen Ausgangsbeleg wirklich archivieren?
+          </ButtonWithConfirm>
+        </div>
+      </template>
+    </UTable>
+
+
+    <!--    <div class="w-3/4 mx-auto mt-5">
+          <UCard
+              v-for="template in dataStore.texttemplates"
+              class="mb-3"
+          >
+            <p class="text-2xl">{{dataStore.documentTypesForCreation[template.documentType].label}}</p>
+            <p class="text-xl">{{template.pos === 'startText' ? 'Einleitung' : 'Ende'}}</p>
+            <p class="text-justify">{{template.text}}</p>
+            <UButton
+                @click="itemInfo = template;
+                 editTemplateModalOpen = true"
+              icon="i-heroicons-pencil-solid"
+              variant="outline"
+            />
+          </UCard>
+        </div>-->
+  </UDashboardPanelContent>
+
+  <UModal
+      v-model="editTemplateModalOpen"
+  >
+    <UCard class="h-full">
+      <template #header>
+        {{itemInfo.id ? 'Vorlage bearbeiten' : 'Vorlage erstellen'}}
+      </template>
+
+      <UForm class="h-full">
+
+        <UFormGroup
+            label="Name:"
+        >
+          <UInput
+              v-model="itemInfo.name"
+          />
+        </UFormGroup>
+        <UFormGroup
+            label="Dokumententyp:"
+        >
+
+          <USelectMenu
+              :options="Object.keys(dataStore.documentTypesForCreation).filter(i => i !== 'serialInvoices').map(i => {
+              return {
+                label: dataStore.documentTypesForCreation[i].label,
+                key: i
+              }
+            })"
+              option-attribute="label"
+              value-attribute="key"
+              v-model="itemInfo.documentType"
+          />
+        </UFormGroup>
+        <UFormGroup
+            label="Position:"
+        >
+          <USelectMenu
+              :options="[{label:'Einleitung',key: 'startText'},{label:'Ende',key: 'endText'}]"
+              option-attribute="label"
+              value-attribute="key"
+              v-model="itemInfo.pos"
+          />
+        </UFormGroup>
+        <UFormGroup
+            label="Text:"
+        >
+          <UTextarea
+              v-model="itemInfo.text"
+          />
+        </UFormGroup>
+      </UForm>
+
+<!-- TODO: Update und Create      -->
+      <template #footer>
+        <UButton
+            @click="dataStore.createNewItem('texttemplates',itemInfo);
+                  editTemplateModalOpen = false"
+            v-if="!itemInfo.id"
+        >Erstellen</UButton>
+        <UButton
+            @click="dataStore.updateItem('texttemplates',itemInfo);
+                  editTemplateModalOpen = false"
+            v-if="itemInfo.id"
+        >Speichern</UButton>
+      </template>
+    </UCard>
+  </UModal>
+
+
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/staff/profiles/[id].vue b/frontend/pages/staff/profiles/[id].vue
new file mode 100644
index 0000000..508f94c
--- /dev/null
+++ b/frontend/pages/staff/profiles/[id].vue
@@ -0,0 +1,318 @@
+<script setup lang="ts">
+
+const route = useRoute()
+const toast = useToast()
+const { $api } = useNuxtApp()
+
+const id = route.params.id as string
+const profile = ref<any>(null)
+const pending = ref(true)
+const saving = ref(false)
+
+/** Profil laden **/
+async function fetchProfile() {
+  pending.value = true
+  try {
+    profile.value = await $api(`/api/profiles/${id}`)
+    ensureWorkingHoursStructure()
+  } catch (err: any) {
+    console.error('[fetchProfile]', err)
+    toast.add({
+      title: 'Fehler beim Laden',
+      description: err?.data?.error || err?.message || 'Unbekannter Fehler',
+      color: 'red'
+    })
+  } finally {
+    pending.value = false
+  }
+}
+
+/** Profil speichern **/
+async function saveProfile() {
+  if (saving.value) return
+  saving.value = true
+
+  try {
+    await $api(`/api/profiles/${id}`, {
+      method: 'PUT',
+      body: profile.value
+    })
+    toast.add({ title: 'Profil gespeichert', color: 'green' })
+    fetchProfile()
+  } catch (err: any) {
+    console.error('[saveProfile]', err)
+    toast.add({
+      title: 'Fehler beim Speichern',
+      description: err?.data?.error || err?.message || 'Unbekannter Fehler',
+      color: 'red'
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+const weekdays = [
+  { key: '1', label: 'Montag' },
+  { key: '2', label: 'Dienstag' },
+  { key: '3', label: 'Mittwoch' },
+  { key: '4', label: 'Donnerstag' },
+  { key: '5', label: 'Freitag' },
+  { key: '6', label: 'Samstag' },
+  { key: '7', label: 'Sonntag' }
+]
+
+const bundeslaender = [
+  { code: 'DE-BW', name: 'Baden-Württemberg' },
+  { code: 'DE-BY', name: 'Bayern' },
+  { code: 'DE-BE', name: 'Berlin' },
+  { code: 'DE-BB', name: 'Brandenburg' },
+  { code: 'DE-HB', name: 'Bremen' },
+  { code: 'DE-HH', name: 'Hamburg' },
+  { code: 'DE-HE', name: 'Hessen' },
+  { code: 'DE-MV', name: 'Mecklenburg-Vorpommern' },
+  { code: 'DE-NI', name: 'Niedersachsen' },
+  { code: 'DE-NW', name: 'Nordrhein-Westfalen' },
+  { code: 'DE-RP', name: 'Rheinland-Pfalz' },
+  { code: 'DE-SL', name: 'Saarland' },
+  { code: 'DE-SN', name: 'Sachsen' },
+  { code: 'DE-ST', name: 'Sachsen-Anhalt' },
+  { code: 'DE-SH', name: 'Schleswig-Holstein' },
+  { code: 'DE-TH', name: 'Thüringen' }
+]
+
+
+// Sicherstellen, dass das JSON-Feld existiert
+function ensureWorkingHoursStructure() {
+  if (!profile.value.weekly_regular_working_hours) {
+    profile.value.weekly_regular_working_hours = {}
+  }
+  for (const { key } of weekdays) {
+    if (profile.value.weekly_regular_working_hours[key] == null) {
+      profile.value.weekly_regular_working_hours[key] = 0
+    }
+  }
+}
+
+function recalculateWeeklyHours() {
+  if (!profile.value?.weekly_regular_working_hours) return
+
+  const total = Object.values(profile.value.weekly_regular_working_hours).reduce(
+      (sum: number, val: any) => {
+        const num = parseFloat(val)
+        return sum + (isNaN(num) ? 0 : num)
+      },
+      0
+  )
+
+  profile.value.weekly_working_hours = Number(total.toFixed(2))
+}
+
+const checkZip = async () => {
+  const zipData = await useFunctions().useZipCheck(profile.value.address_zip)
+  profile.value.address_city = zipData.short
+  profile.value.state_code = zipData.state_code
+}
+
+onMounted(fetchProfile)
+
+</script>
+
+<template>
+  <!-- Haupt-Navigation -->
+  <UDashboardNavbar title="Mitarbeiter">
+    <template #left>
+      <UButton
+        color="primary"
+        variant="outline"
+        @click="navigateTo(`/staff/profiles`)"
+        icon="i-heroicons-chevron-left"
+
+      >
+        Mitarbeiter
+      </UButton>
+    </template>
+    <template #center>
+      <h1 class="text-xl font-medium truncate">
+        Mitarbeiter bearbeiten: {{ profile?.full_name || '' }}
+      </h1>
+    </template>
+  </UDashboardNavbar>
+
+  <!-- Toolbar -->
+  <UDashboardToolbar>
+    <template #right>
+      <UButton
+          icon="i-mdi-content-save"
+          color="primary"
+          :loading="saving"
+          @click="saveProfile"
+      >
+        Speichern
+      </UButton>
+    </template>
+  </UDashboardToolbar>
+
+  <!-- Inhalt -->
+  <UDashboardPanelContent>
+    <UCard v-if="!pending && profile">
+      <div class="flex items-center gap-4 mb-6">
+        <UAvatar size="xl" :alt="profile.full_name" />
+        <div>
+          <h2 class="text-xl font-semibold text-gray-900">{{ profile.full_name }}</h2>
+          <p class="text-sm text-gray-500">{{ profile.employee_number || '–' }}</p>
+        </div>
+      </div>
+
+      <UDivider label="Persönliche Daten" />
+
+      <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+        <UFormGroup label="Vorname">
+          <UInput v-model="profile.first_name" />
+        </UFormGroup>
+
+        <UFormGroup label="Nachname">
+          <UInput v-model="profile.last_name" />
+        </UFormGroup>
+
+        <UFormGroup label="E-Mail">
+          <UInput v-model="profile.email" />
+        </UFormGroup>
+
+        <UFormGroup label="Telefon (Mobil)">
+          <UInput v-model="profile.mobile_tel" />
+        </UFormGroup>
+
+        <UFormGroup label="Telefon (Festnetz)">
+          <UInput v-model="profile.fixed_tel" />
+        </UFormGroup>
+
+        <UFormGroup label="Geburtstag">
+          <UInput type="date" v-model="profile.birthday" />
+        </UFormGroup>
+      </UForm>
+    </UCard>
+    <UCard v-if="!pending && profile" class="mt-3">
+      <UDivider label="Vertragsinformationen" />
+
+      <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+        <UFormGroup label="Vertragsart">
+          <UInput v-model="profile.contract_type"/>
+        </UFormGroup>
+
+        <UFormGroup label="Status">
+          <UInput v-model="profile.status"/>
+        </UFormGroup>
+
+        <UFormGroup label="Position">
+          <UInput v-model="profile.position"/>
+        </UFormGroup>
+
+        <UFormGroup label="Qualifikation">
+          <UInput v-model="profile.qualification"/>
+        </UFormGroup>
+
+        <UFormGroup label="Eintrittsdatum">
+          <UInput type="date" v-model="profile.entry_date" />
+        </UFormGroup>
+
+        <UFormGroup label="Wöchentliche Arbeitszeit (Std)">
+          <UInput type="number" v-model="profile.weekly_working_hours" />
+        </UFormGroup>
+
+        <UFormGroup label="Bezahlte Urlaubstage (Jahr)">
+          <UInput type="number" v-model="profile.annual_paid_leave_days" />
+        </UFormGroup>
+        <UFormGroup label="Aktiv">
+          <div class="flex items-center gap-3">
+            <UToggle v-model="profile.active" color="primary" />
+            <span class="text-sm text-gray-600">
+        </span>
+          </div>
+        </UFormGroup>
+      </UForm>
+
+    </UCard>
+
+    <UCard v-if="!pending && profile" class="mt-3">
+      <UDivider label="Adresse & Standort" />
+
+      <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+        <UFormGroup label="Straße und Hausnummer">
+          <UInput v-model="profile.address_street"/>
+        </UFormGroup>
+
+        <UFormGroup label="PLZ">
+          <UInput type="text" v-model="profile.address_zip" @focusout="checkZip"/>
+        </UFormGroup>
+
+        <UFormGroup label="Ort">
+          <UInput v-model="profile.address_city"/>
+        </UFormGroup>
+
+        <UFormGroup label="Bundesland">
+          <USelectMenu
+              v-model="profile.state_code"
+              :options="bundeslaender"
+              value-attribute="code"
+              option-attribute="name"
+              placeholder="Bundesland auswählen"
+          />
+        </UFormGroup>
+      </UForm>
+    </UCard>
+
+
+    <UCard v-if="!pending && profile" class="mt-3">
+      <UDivider label="Wöchentliche Arbeitsstunden" />
+
+      <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div
+            v-for="day in weekdays"
+            :key="day.key"
+            :class="[...profile.weekly_regular_working_hours[day.key] === 0 ? ['bg-gray-100'] : ['bg-gray-100','border-green-400'], 'flex items-center justify-between border rounded-lg p-3 bg-gray-50']"
+        >
+          <span class="font-medium text-gray-700">{{ day.label }}</span>
+          <div class="flex items-center gap-2">
+            <UInput
+                type="number"
+                size="sm"
+                min="0"
+                max="24"
+                step="0.25"
+                v-model.number="profile.weekly_regular_working_hours[day.key]"
+                placeholder="0"
+                class="w-24"
+                @change="recalculateWeeklyHours"
+            />
+            <span class="text-gray-400 text-sm">Std</span>
+          </div>
+        </div>
+      </div>
+    </UCard>
+
+    <UCard v-if="!pending && profile" class="mt-3">
+      <UDivider label="Sonstiges" />
+      <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+        <UFormGroup label="Kleidergröße (Oberteil)">
+          <UInput v-model="profile.clothing_size_top" />
+        </UFormGroup>
+
+        <UFormGroup label="Kleidergröße (Hose)">
+          <UInput v-model="profile.clothing_size_bottom" />
+        </UFormGroup>
+
+        <UFormGroup label="Schuhgröße">
+          <UInput v-model="profile.clothing_size_shoe" />
+        </UFormGroup>
+
+        <UFormGroup label="Token-ID">
+          <UInput v-model="profile.token_id" />
+        </UFormGroup>
+      </UForm>
+    </UCard>
+
+    <USkeleton v-if="pending" height="300px" />
+  </UDashboardPanelContent>
+</template>
+
+
diff --git a/frontend/pages/staff/profiles/index.vue b/frontend/pages/staff/profiles/index.vue
new file mode 100644
index 0000000..51a2690
--- /dev/null
+++ b/frontend/pages/staff/profiles/index.vue
@@ -0,0 +1,52 @@
+<script setup>
+  const router = useRouter()
+
+  const items = ref([])
+
+  const setupPage = async () => {
+    items.value = (await useNuxtApp().$api("/api/tenant/users")).users
+    items.value = items.value.map(i => i.profile)
+  }
+
+  setupPage()
+
+  const templateColumns = [
+    {
+      key: 'employee_number',
+      label: "MA-Nummer",
+    },{
+      key: 'full_name',
+      label: "Name",
+    },{
+      key: "email",
+      label: "E-Mail",
+    }
+  ]
+  const selectedColumns = ref(templateColumns)
+  const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+</script>
+
+<template>
+  <UDashboardNavbar title="Benutzer Einstellungen">
+      <template #right>
+        <UButton
+          @click="router.push(`/profiles/create`)"
+          disabled
+        >
+          + Mitarbeiter
+        </UButton>
+      </template>
+  </UDashboardNavbar>
+  <UTable
+    :rows="items"
+    :columns="columns"
+    @select="(i) => navigateTo(`/staff/profiles/${i.id}`)"
+  >
+
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/staff/time/[id]/evaluate.vue b/frontend/pages/staff/time/[id]/evaluate.vue
new file mode 100644
index 0000000..8f75226
--- /dev/null
+++ b/frontend/pages/staff/time/[id]/evaluate.vue
@@ -0,0 +1,482 @@
+<script setup lang="ts">
+const { $dayjs } = useNuxtApp()
+const router = useRouter()
+const route = useRoute()
+const auth = useAuthStore()
+const toast = useToast()
+
+// 🔹 State
+const workingTimeInfo = ref<{
+  userId: string;
+  spans: any[]; // Neue Struktur für die Detailansicht/Tabelle
+  summary: {
+    sumWorkingMinutesSubmitted: number;
+    sumWorkingMinutesApproved: number;
+    sumWorkingMinutesRecreationDays: number;
+    sumRecreationDays: number;
+    sumWorkingMinutesVacationDays: number;
+    sumVacationDays: number;
+    sumWorkingMinutesSickDays: number;
+    sumSickDays: number;
+    timeSpanWorkingMinutes: number;
+    saldoApproved: number;
+    saldoSubmitted: number;
+  } | null; // Neue Struktur für die Zusammenfassung
+} | null>(null)
+
+const platformIsNative = ref(useCapacitor().getIsNative())
+
+const selectedPresetRange = ref("Dieser Monat bis heute")
+const selectedStartDay = ref("")
+const selectedEndDay = ref("")
+const openTab = ref(0)
+
+const showDocument = ref(false)
+const uri = ref("")
+const itemInfo = ref({})
+
+const profile = ref(null)
+
+// 💡 Die ID des Benutzers, dessen Daten wir abrufen (aus der Route)
+const evaluatedUserId = computed(() => route.params.id as string)
+
+/**
+ * Konvertiert Minuten in das Format HH:MM h
+ */
+function formatMinutesToHHMM(minutes = 0) {
+  const h = Math.floor(minutes / 60)
+  const m = Math.floor(minutes % 60)
+  return `${h}:${String(m).padStart(2, "0")} h`
+}
+
+/**
+ * Berechnet die Dauer zwischen startedAt und endedAt in Minuten.
+ */
+function calculateDurationMinutes(start: string, end: string): number {
+  const startTime = $dayjs(start);
+  const endTime = $dayjs(end);
+  return endTime.diff(startTime, 'minute');
+}
+
+/**
+ * Formatiert die Dauer (in Minuten) in HH:MM h
+ */
+function formatSpanDuration(start: string, end: string): string {
+  const minutes = calculateDurationMinutes(start, end);
+  return formatMinutesToHHMM(minutes);
+}
+
+
+// 📅 Zeitraumumschaltung
+function changeRange() {
+  const rangeMap = {
+    "Diese Woche": { selector: "isoWeek", subtract: 0 },
+    "Dieser Monat": { selector: "M", subtract: 0 },
+    "Dieser Monat bis heute": { selector: "M", subtract: 0 },
+    "Dieses Jahr": { selector: "y", subtract: 0 },
+    "Letzte Woche": { selector: "isoWeek", subtract: 1 },
+    "Letzter Monat": { selector: "M", subtract: 1 },
+    "Letztes Jahr": { selector: "y", subtract: 1 }
+  }
+
+  const { selector, subtract } = rangeMap[selectedPresetRange.value] || { selector: "M", subtract: 0 }
+
+  selectedStartDay.value = $dayjs()
+      .subtract(subtract, selector === "isoWeek" ? "week" : selector)
+      .startOf(selector)
+      .format("YYYY-MM-DD")
+
+  selectedEndDay.value =
+      selectedPresetRange.value === "Dieser Monat bis heute"
+          ? $dayjs().format("YYYY-MM-DD")
+          : $dayjs()
+              .subtract(subtract, selector === "isoWeek" ? "week" : selector)
+              .endOf(selector)
+              .format("YYYY-MM-DD")
+
+  loadWorkingTimeInfo()
+}
+
+// 📊 Daten laden (Initialisierung)
+async function setupPage() {
+  await changeRange()
+
+  // Lade das Profil des Benutzers, der ausgewertet wird (route.params.id)
+  try {
+    const response = await useNuxtApp().$api(`/api/tenant/profiles`);
+    // Findet das Profil des Benutzers, dessen ID in der Route steht
+    profile.value = response.data.find(i => i.user_id === evaluatedUserId.value);
+  } catch (error) {
+    console.error("Fehler beim Laden des Profils:", error);
+  }
+
+  console.log(profile.value)
+  setPageLayout(platformIsNative.value ? 'mobile' : 'default')
+}
+
+// 💡 ANGEPASST: Ruft den neuen Endpunkt ab und speichert das gesamte Payload-Objekt
+async function loadWorkingTimeInfo() {
+
+  // Erstellt Query-Parameter für den neuen Backend-Endpunkt
+  const queryParams = new URLSearchParams({
+    from: selectedStartDay.value,
+    to: selectedEndDay.value,
+    targetUserId: evaluatedUserId.value,
+  });
+
+  const url = `/api/staff/time/evaluation?${queryParams.toString()}`;
+
+  // Führt den GET-Request zum neuen Endpunkt aus und speichert das gesamte Payload-Objekt { userId, spans, summary }
+  const data = await useNuxtApp().$api(url);
+
+  workingTimeInfo.value = data;
+
+  openTab.value = 0
+}
+
+// 📄 PDF generieren
+// Frontend (index.vue)
+async function generateDocument() {
+  if (!workingTimeInfo.value || !workingTimeInfo.value.summary) return;
+
+  const path = (await useEntities("letterheads").select("*"))[0].path
+
+  uri.value = await useFunctions().useCreatePDF({
+    full_name: profile.value.full_name,
+    employee_number: profile.value.employee_number || "-",
+
+    // Wir übergeben das summary-Objekt flach (für Header-Daten)
+    ...workingTimeInfo.value.summary,
+
+    // UND wir müssen die Spans explizit übergeben, damit die Tabelle generiert werden kann
+    spans: workingTimeInfo.value.spans
+  }, path, "timesheet")
+
+  showDocument.value = true
+}
+
+const fileSaved = ref(false)
+
+// 💾 Datei speichern
+async function saveFile() {
+  try {
+    let fileData = {
+      auth_profile: profile.value.id,
+      tenant: auth.activeTenant
+    }
+
+    let file = useFiles().dataURLtoFile(uri.value, `${profile.value.full_name}-${$dayjs(selectedStartDay.value).format("YYYY-MM-DD")}-${$dayjs(selectedEndDay.value).format("YYYY-MM-DD")}.pdf`)
+
+    await useFiles().uploadFiles(fileData, [file])
+
+    toast.add({title:"Auswertung erfolgreich gespeichert"})
+    fileSaved.value = true
+  } catch (error) {
+    toast.add({title:"Fehler beim Speichern der Auswertung", color: "rose"})
+  }
+}
+
+async function onTabChange(index: number) {
+  if (index === 1) await generateDocument()
+}
+
+// Initialisierung
+await setupPage()
+</script>
+
+<template>
+  <template v-if="!platformIsNative">
+    <UDashboardNavbar :ui="{ center: 'flex items-stretch gap-1.5 min-w-0' }">
+      <template #left>
+        <UButton
+            icon="i-heroicons-chevron-left"
+            variant="outline"
+            @click="router.push('/staff/time')"
+        >
+          Anwesenheiten
+        </UButton>
+      </template>
+
+      <template #center>
+        <h1 class="text-xl font-medium truncate">
+          Auswertung Anwesenheiten: {{ profile?.full_name || '' }}
+        </h1>
+      </template>
+    </UDashboardNavbar>
+
+    <UDashboardToolbar>
+      <template #left>
+        <UFormGroup label="Zeitraum:">
+          <USelectMenu
+              :options="[
+            'Dieser Monat bis heute',
+            'Diese Woche',
+            'Dieser Monat',
+            'Dieses Jahr',
+            'Letzte Woche',
+            'Letzter Monat',
+            'Letztes Jahr'
+          ]"
+              v-model="selectedPresetRange"
+              @change="changeRange"
+          />
+        </UFormGroup>
+
+        <UFormGroup label="Start:">
+          <UPopover :popper="{ placement: 'bottom-start' }">
+            <UButton
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="selectedStartDay ? $dayjs(selectedStartDay).format('DD.MM.YYYY') : 'Datum wählen'"
+            />
+            <template #panel="{ close }">
+              <LazyDatePicker v-model="selectedStartDay" @close="loadWorkingTimeInfo" />
+            </template>
+          </UPopover>
+        </UFormGroup>
+
+        <UFormGroup label="Ende:">
+          <UPopover :popper="{ placement: 'bottom-start' }">
+            <UButton
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="selectedEndDay ? $dayjs(selectedEndDay).format('DD.MM.YYYY') : 'Datum wählen'"
+            />
+            <template #panel="{ close }">
+              <LazyDatePicker v-model="selectedEndDay" @close="loadWorkingTimeInfo" />
+            </template>
+          </UPopover>
+        </UFormGroup>
+      </template>
+      <template #right>
+        <UTooltip
+            :text="fileSaved ? 'Bericht bereits gespeichert' : 'Bericht speichern'"
+            v-if="openTab === 1 && uri"
+        >
+          <UButton
+              icon="i-mdi-content-save"
+              :disabled="fileSaved"
+              @click="saveFile"
+          >Bericht</UButton>
+        </UTooltip>
+
+      </template>
+    </UDashboardToolbar>
+
+    <UDashboardPanelContent>
+      <UTabs
+          :items="[{ label: 'Information' }, { label: 'Bericht' }]"
+          v-model="openTab"
+          @change="onTabChange"
+      >
+        <template #item="{ item }">
+          <div v-if="item.label === 'Information'">
+
+            <UCard v-if="workingTimeInfo && workingTimeInfo.summary" class="my-5">
+              <template #header>
+                <h3 class="text-base font-semibold">Zusammenfassung</h3>
+              </template>
+              <div class="grid grid-cols-2 gap-3 text-sm">
+                <p>Eingereicht: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesSubmitted) }}</b></p>
+                <p>Genehmigt: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesApproved) }}</b></p>
+                <p>Feiertagsausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesRecreationDays) }}</b> / {{ workingTimeInfo.summary.sumRecreationDays }} Tage</p>
+                <p>Urlaubs-/Berufsschulausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesVacationDays) }}</b> / {{ workingTimeInfo.summary.sumVacationDays }} Tage</p>
+                <p>Krankheitsausgleich: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesSickDays) }}</b> / {{ workingTimeInfo.summary.sumSickDays }} Tage</p>
+                <p>Soll-Stunden: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.timeSpanWorkingMinutes) }}</b></p>
+
+                <p class="col-span-2">
+                  Inoffizielles Saldo: <b>{{ (workingTimeInfo.summary.saldoSubmitted >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.summary.saldoSubmitted)) }}</b>
+                </p>
+                <p class="col-span-2">
+                  Saldo: <b>{{ (workingTimeInfo.summary.saldoApproved >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.summary.saldoApproved)) }}</b>
+                </p>
+              </div>
+            </UCard>
+
+            <UDashboardPanel>
+              <UTable
+                  v-if="workingTimeInfo"
+                  :rows="workingTimeInfo.spans"
+                  :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Anwesenheiten' }"
+                  :columns="[
+                { key: 'status', label: 'Status' },
+                { key: 'startedAt', label: 'Start' },
+                { key: 'endedAt', label: 'Ende' },
+                { key: 'duration', label: 'Dauer' },
+                { key: 'type', label: 'Typ' }
+              ]"
+                  @select="(row) => router.push(`/workingtimes/edit/${row.sourceEventIds[0]}`)"
+              >
+                <template #status-data="{row}">
+                  <span v-if="row.status === 'approved'" class="text-primary-500">Genehmigt</span>
+                  <span v-else-if="row.status === 'submitted'" class="text-cyan-500">Eingereicht</span>
+                  <span v-else-if="row.status === 'factual'" class="text-gray-500">Faktisch</span>
+                  <span v-else-if="row.status === 'draft'" class="text-red-500">Entwurf</span>
+                  <span v-else>{{ row.status }}</span>
+                </template>
+
+                <template #startedAt-data="{ row }">
+                  {{ $dayjs(row.startedAt).format('HH:mm DD.MM.YY') }} Uhr
+                </template>
+
+                <template #endedAt-data="{ row }">
+                  {{ $dayjs(row.endedAt).format('HH:mm DD.MM.YY') }} Uhr
+                </template>
+
+                <template #duration-data="{ row }">
+                  {{ formatSpanDuration(row.startedAt, row.endedAt) }}
+                </template>
+
+                <template #type-data="{ row }">
+                  {{ row.type.charAt(0).toUpperCase() + row.type.slice(1).replace('_', ' ') }}
+                </template>
+              </UTable>
+            </UDashboardPanel>
+          </div>
+
+          <div v-else-if="item.label === 'Bericht'">
+            <PDFViewer
+                v-if="showDocument"
+                :uri="uri"
+                location="show_time_evaluation"
+            />
+          </div>
+        </template>
+      </UTabs>
+    </UDashboardPanelContent>
+  </template>
+
+  <template v-else>
+
+    <UDashboardNavbar title="Auswertung">
+      <template #toggle><div></div></template>
+      <template #left>
+        <UButton
+            icon="i-heroicons-chevron-left"
+            variant="ghost"
+            @click="router.push('/staff/time')"
+        />
+      </template>
+    </UDashboardNavbar>
+
+    <div class="p-4 space-y-4 border-b bg-white dark:bg-gray-900">
+      <USelectMenu
+          v-model="selectedPresetRange"
+          :options="[
+          'Dieser Monat bis heute',
+          'Diese Woche',
+          'Dieser Monat',
+          'Dieses Jahr',
+          'Letzte Woche',
+          'Letzter Monat',
+          'Letztes Jahr'
+        ]"
+          @change="changeRange"
+          placeholder="Zeitraum wählen"
+          class="w-full"
+      />
+
+      <div class="grid grid-cols-2 gap-3">
+        <div>
+          <p class="text-xs text-gray-500 mb-1">Start</p>
+          <UPopover :popper="{ placement: 'bottom-start' }">
+            <UButton
+                icon="i-heroicons-calendar"
+                class="w-full"
+                :label="$dayjs(selectedStartDay).format('DD.MM.YYYY')"
+            />
+            <template #panel>
+              <LazyDatePicker v-model="selectedStartDay" @close="loadWorkingTimeInfo" />
+            </template>
+          </UPopover>
+        </div>
+
+        <div>
+          <p class="text-xs text-gray-500 mb-1">Ende</p>
+          <UPopover :popper="{ placement: 'bottom-start' }">
+            <UButton
+                icon="i-heroicons-calendar"
+                class="w-full"
+                :label="$dayjs(selectedEndDay).format('DD.MM.YYYY')"
+            />
+            <template #panel>
+              <LazyDatePicker v-model="selectedEndDay" @close="loadWorkingTimeInfo" />
+            </template>
+          </UPopover>
+        </div>
+      </div>
+    </div>
+
+    <UTabs
+        :items="[{ label: 'Information' }, { label: 'Bericht' }]"
+        v-model="openTab"
+        @change="onTabChange"
+        class="mt-3 mx-3"
+    >
+      <template #item="{ item }">
+
+        <div v-if="item.label === 'Information'" class="space-y-4">
+
+          <UCard v-if="workingTimeInfo && workingTimeInfo.summary" class="mt-3">
+            <template #header>
+              <h3 class="text-base font-semibold">Zusammenfassung</h3>
+            </template>
+
+            <div class="space-y-2 text-sm">
+              <p>Eingereicht: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesSubmitted) }}</b></p>
+              <p>Genehmigt: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesApproved) }}</b></p>
+
+              <p>
+                Feiertagsausgleich:
+                <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesRecreationDays) }}</b>
+                / {{ workingTimeInfo.summary.sumRecreationDays }} Tage
+              </p>
+
+              <p>
+                Urlaubs-/Berufsschule:
+                <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesVacationDays) }}</b>
+                / {{ workingTimeInfo.summary.sumVacationDays }} Tage
+              </p>
+
+              <p>
+                Krankheitsausgleich:
+                <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.sumWorkingMinutesSickDays) }}</b>
+                / {{ workingTimeInfo.summary.sumSickDays }} Tage
+              </p>
+
+              <p>Soll: <b>{{ formatMinutesToHHMM(workingTimeInfo.summary.timeSpanWorkingMinutes) }}</b></p>
+
+              <p>
+                Inoffizielles Saldo:
+                <b>{{ (workingTimeInfo.summary.saldoSubmitted >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.summary.saldoSubmitted)) }}</b>
+              </p>
+
+              <p>
+                Saldo:
+                <b>{{ (workingTimeInfo.summary.saldoApproved >= 0 ? '+' : '-') + formatMinutesToHHMM(Math.abs(workingTimeInfo.summary.saldoApproved)) }}</b>
+              </p>
+            </div>
+          </UCard>
+        </div>
+
+        <div v-else-if="item.label === 'Bericht'">
+          <UButton
+              v-if="uri && !fileSaved"
+              icon="i-mdi-content-save"
+              color="primary"
+              class="w-full mb-3"
+              @click="saveFile"
+          >
+            Bericht speichern
+          </UButton>
+
+          <PDFViewer
+              v-if="showDocument"
+              :uri="uri"
+              location="show_time_evaluation"
+          />
+        </div>
+      </template>
+    </UTabs>
+  </template>
+
+
+</template>
\ No newline at end of file
diff --git a/frontend/pages/staff/time/index.vue b/frontend/pages/staff/time/index.vue
new file mode 100644
index 0000000..a546533
--- /dev/null
+++ b/frontend/pages/staff/time/index.vue
@@ -0,0 +1,473 @@
+<script setup>
+import { useStaffTime } from '~/composables/useStaffTime'
+import { useAuthStore } from '~/stores/auth'
+import FloatingActionButton from "~/components/mobile/FloatingActionButton.vue";
+
+definePageMeta({
+  layout: "default",
+})
+
+const { list, start, stop, submit, approve, reject } = useStaffTime()
+const auth = useAuthStore()
+const router = useRouter()
+const toast = useToast()
+const { $dayjs } = useNuxtApp()
+
+// MOBILE DETECTION
+const platformIsNative = useCapacitor().getIsNative()
+
+// STATE
+const loading = ref(false)
+const view = ref('list') // 'list' | 'timeline'
+
+// MODAL STATES
+const showEditModal = ref(false)
+const entryToEdit = ref(null)
+
+const showRejectModal = ref(false)
+const entryToReject = ref(null)
+const rejectReason = ref("")
+
+// FILTER & USER
+const users = ref([])
+const selectedUser = ref(auth.user.id)
+const canViewAll = computed(() => auth.permissions.includes('staff.time.read_all'))
+
+// DATA
+const entries = ref([])
+const active = computed(() => entries.value.find(e => !e.stopped_at))
+const isViewingSelf = computed(() => selectedUser.value === auth.user.id)
+
+// GROUPING
+const groupedEntries = computed(() => {
+  const groups = {}
+  entries.value.forEach(entry => {
+    const dateKey = $dayjs(entry.started_at).format('YYYY-MM-DD')
+    if (!groups[dateKey]) groups[dateKey] = []
+    groups[dateKey].push(entry)
+  })
+  return groups
+})
+
+// CONFIG
+const typeLabel = {
+  work: "Arbeitszeit",
+  vacation: "Urlaub",
+  sick: "Krankheit",
+  holiday: "Feiertag",
+  other: "Sonstiges"
+}
+
+const typeColor = {
+  work: "gray",
+  vacation: "yellow",
+  sick: "rose",
+  holiday: "blue",
+  other: "gray"
+}
+
+// ACTIONS
+async function loadUsers() {
+  if (!canViewAll.value) return
+  const res = (await useNuxtApp().$api("/api/tenant/profiles")).data
+  users.value = res
+}
+
+async function load() {
+  if (!selectedUser.value) return
+  entries.value = await list({ user_id: selectedUser.value })
+}
+
+async function handleStart() {
+  if (!isViewingSelf.value) return
+  loading.value = true
+  await start("Arbeitszeit gestartet")
+  await load()
+  loading.value = false
+}
+
+async function handleStop() {
+  if (!active.value) return
+  loading.value = true
+  await stop(active.value.id)
+  await load()
+  loading.value = false
+}
+
+function handleEdit(entry) {
+  entryToEdit.value = entry
+  showEditModal.value = true
+}
+
+async function handleSubmit(entry) {
+  loading.value = true
+  await submit(entry)
+  await load()
+  loading.value = false
+  toast.add({ title: 'Zeit eingereicht', color: 'green' })
+}
+
+async function handleApprove(entry) {
+  loading.value = true
+  await approve(entry)
+  await load()
+  loading.value = false
+  toast.add({ title: 'Zeit genehmigt', color: 'green' })
+}
+
+function openRejectModal(entry) {
+  entryToReject.value = entry
+  rejectReason.value = ""
+  showRejectModal.value = true
+}
+
+async function confirmReject() {
+  if (!entryToReject.value) return
+  loading.value = true
+  try {
+    await reject(entryToReject.value, rejectReason.value || "Vom Administrator abgelehnt")
+    toast.add({ title: 'Zeit abgelehnt', color: 'green' })
+    showRejectModal.value = false
+    await load()
+  } catch (e) {
+    toast.add({ title: 'Fehler beim Ablehnen', description: e.message, color: 'red' })
+  } finally {
+    loading.value = false
+    entryToReject.value = null
+  }
+}
+
+watch(selectedUser, () => { load() })
+
+onMounted(async () => {
+  await loadUsers()
+  await load()
+  setPageLayout(platformIsNative ? 'mobile' : 'default')
+})
+</script>
+
+<template>
+  <template v-if="!platformIsNative">
+    <UDashboardNavbar title="Zeiterfassung" :badge="entries.length" />
+
+    <UDashboardToolbar>
+      <template #left>
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-2 border-r pr-4 mr-2">
+            <UIcon name="i-heroicons-clock" class="w-5 h-5" :class="active ? 'text-primary-500 animate-pulse' : 'text-gray-400'" />
+            <div class="flex flex-col">
+              <span class="text-xs text-gray-500 uppercase font-bold">Status</span>
+              <span v-if="active" class="text-sm font-medium text-primary-600">
+                 Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
+               </span>
+              <span v-else class="text-sm text-gray-600">Nicht aktiv</span>
+            </div>
+          </div>
+
+          <div v-if="canViewAll" class="flex items-center gap-2">
+            <USelectMenu
+                v-model="selectedUser"
+                :options="users.map(u => ({ label: u.full_name || u.email, value: u.user_id }))"
+                placeholder="Benutzer auswählen"
+                value-attribute="value"
+                option-attribute="label"
+                class="min-w-[220px]"
+                :clearable="false"
+            />
+            <UTooltip text="Anwesenheiten auswerten">
+              <UButton
+                  :disabled="!selectedUser"
+                  color="gray"
+                  icon="i-heroicons-chart-bar"
+                  variant="ghost"
+                  @click="router.push(`/staff/time/${selectedUser}/evaluate`)"
+              />
+            </UTooltip>
+          </div>
+        </div>
+      </template>
+
+      <template #right>
+        <div class="flex gap-2 items-center">
+          <div class="flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1 mr-2">
+            <UTooltip text="Listenansicht">
+              <UButton
+                  size="xs"
+                  :color="view === 'list' ? 'white' : 'gray'"
+                  variant="ghost"
+                  icon="i-heroicons-table-cells"
+                  @click="view = 'list'"
+              />
+            </UTooltip>
+            <UTooltip text="Zeitstrahl">
+              <UButton
+                  size="xs"
+                  :color="view === 'timeline' ? 'white' : 'gray'"
+                  variant="ghost"
+                  icon="i-heroicons-list-bullet"
+                  @click="view = 'timeline'"
+              />
+            </UTooltip>
+          </div>
+
+          <template v-if="isViewingSelf">
+            <UButton v-if="active" color="red" icon="i-heroicons-stop" :loading="loading" label="Stoppen" @click="handleStop" />
+            <UButton v-else color="green" icon="i-heroicons-play" :loading="loading" label="Starten" @click="handleStart" />
+          </template>
+          <template v-else-if="active && canViewAll">
+            <UButton color="red" variant="soft" icon="i-heroicons-stop" :loading="loading" label="Mitarbeiter stoppen" @click="handleStop" />
+          </template>
+
+          <UButton color="gray" variant="solid" icon="i-heroicons-plus" label="Erfassen" @click="() => { entryToEdit = null; showEditModal = true }" />
+        </div>
+      </template>
+    </UDashboardToolbar>
+
+    <UDashboardPanelContent class="p-0 sm:p-4">
+
+      <UCard v-if="view === 'list'" :ui="{ body: { padding: 'p-0 sm:p-0' } }">
+        <UTable
+            :rows="entries"
+            :columns="[
+              { key: 'actions', label: 'Aktionen', class: 'w-32' },
+              { key: 'state', label: 'Status' },
+              { key: 'started_at', label: 'Start' },
+              { key: 'stopped_at', label: 'Ende' },
+              { key: 'duration_minutes', label: 'Dauer' },
+              { key: 'type', label: 'Typ' },
+              { key: 'description', label: 'Beschreibung' },
+            ]"
+            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Zeiten anzuzeigen' }"
+        >
+          <template #state-data="{ row }">
+            <UBadge v-if="row.state === 'approved'" color="green" variant="subtle">Genehmigt</UBadge>
+            <UBadge v-else-if="row.state === 'submitted'" color="cyan" variant="subtle">Eingereicht</UBadge>
+            <UBadge v-else-if="row.state === 'rejected'" color="red" variant="subtle">Abgelehnt</UBadge>
+            <UBadge v-else color="gray" variant="subtle">Entwurf</UBadge>
+          </template>
+          <template #type-data="{ row }">
+            <UBadge :color="typeColor[row.type] || 'gray'" variant="soft">{{ typeLabel[row.type] || row.type }}</UBadge>
+          </template>
+          <template #started_at-data="{ row }">
+            <span v-if="['vacation','sick'].includes(row.type)">{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY") }}</span>
+            <span v-else>{{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}</span>
+          </template>
+          <template #stopped_at-data="{ row }">
+            <span v-if="!row.stopped_at" class="text-primary-500 font-medium animate-pulse">läuft...</span>
+            <span v-else-if="['vacation','sick'].includes(row.type)">{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY") }}</span>
+            <span v-else>{{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY HH:mm") }}</span>
+          </template>
+          <template #duration_minutes-data="{ row }">
+            {{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : "-" }}
+          </template>
+          <template #actions-data="{ row }">
+            <div class="flex items-center gap-1">
+              <UTooltip text="Einreichen" v-if="(row.state === 'draft' || row.state === 'factual') && row.stopped_at">
+                <UButton size="xs" color="cyan" variant="ghost" icon="i-heroicons-paper-airplane" @click="handleSubmit(row)" :loading="loading" />
+              </UTooltip>
+              <UTooltip text="Genehmigen" v-if="row.state === 'submitted' && canViewAll">
+                <UButton size="xs" color="green" variant="ghost" icon="i-heroicons-check" @click="handleApprove(row)" :loading="loading" />
+              </UTooltip>
+              <UTooltip text="Ablehnen" v-if="(row.state === 'submitted' || row.state === 'approved') && canViewAll">
+                <UButton size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark" @click="openRejectModal(row)" :loading="loading" />
+              </UTooltip>
+              <UTooltip text="Bearbeiten" v-if="['draft', 'factual', 'submitted'].includes(row.state)">
+                <UButton size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="handleEdit(row)" />
+              </UTooltip>
+            </div>
+          </template>
+          <template #description-data="{ row }">
+            <span v-if="row.type === 'vacation'">{{row.vacation_reason}}</span>
+            <span v-else-if="row.type === 'sick'">{{row.sick_reason}}</span>
+            <span v-else>{{row.description}}</span>
+          </template>
+        </UTable>
+      </UCard>
+
+      <div v-else class="max-w-5xl mx-auto pb-20">
+
+        <div v-for="(group, date) in groupedEntries" :key="date" class="relative group/date">
+
+          <div class="sticky top-0 z-10 bg-white dark:bg-gray-900 py-4 mb-4 border-b border-gray-200 dark:border-gray-800 flex items-center gap-3">
+            <div class="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
+            <h3 class="text-lg font-bold text-gray-800 dark:text-gray-100 capitalize">
+              {{ useNuxtApp().$dayjs(date).format('dddd, DD. MMMM') }}
+            </h3>
+            <span class="text-xs text-gray-500 font-normal mt-0.5">
+                {{ group.length }} Einträge
+             </span>
+          </div>
+
+          <div class="absolute left-[5px] top-14 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700 group-last/date:bottom-auto group-last/date:h-full"></div>
+
+          <div class="space-y-6 pb-8">
+            <div v-for="entry in group" :key="entry.id" class="relative pl-8">
+
+              <div
+                  class="absolute left-0 top-6 w-3 h-3 rounded-full border-2 border-white dark:border-gray-900 shadow-sm z-0"
+                  :class="{
+                  'bg-green-500 ring-4 ring-green-100 dark:ring-green-900/30': !entry.stopped_at,
+                  'bg-gray-400': entry.stopped_at && entry.type === 'work',
+                  'bg-yellow-400': entry.type === 'vacation',
+                  'bg-red-400': entry.type === 'sick'
+                }"
+              ></div>
+
+              <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
+
+                <div class="flex flex-wrap justify-between items-center p-4 border-b border-gray-100 dark:border-gray-700 bg-gray-50/30 dark:bg-gray-800">
+                  <div class="flex items-center gap-3">
+                    <div class="font-mono text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+                      {{ useNuxtApp().$dayjs(entry.started_at).format('HH:mm') }}
+                      <span class="text-gray-400 text-sm">bis</span>
+                      <span v-if="entry.stopped_at">{{ useNuxtApp().$dayjs(entry.stopped_at).format('HH:mm') }}</span>
+                      <span v-else class="text-primary-500 animate-pulse text-sm uppercase font-bold tracking-wider">Läuft</span>
+                    </div>
+
+                    <UBadge :color="typeColor[entry.type]" variant="soft" size="xs">{{ typeLabel[entry.type] }}</UBadge>
+                  </div>
+
+                  <div class="flex items-center gap-2">
+                      <span v-if="entry.duration_minutes" class="text-sm font-medium text-gray-600 dark:text-gray-300">
+                        {{ useFormatDuration(entry.duration_minutes) }}
+                      </span>
+
+                    <UBadge v-if="entry.state === 'approved'" color="green" size="xs" variant="solid">Genehmigt</UBadge>
+                    <UBadge v-else-if="entry.state === 'submitted'" color="cyan" size="xs" variant="solid">Eingereicht</UBadge>
+                    <UBadge v-else-if="entry.state === 'rejected'" color="red" size="xs" variant="solid">Abgelehnt</UBadge>
+                    <UBadge v-else color="gray" size="xs" variant="subtle">Entwurf</UBadge>
+                  </div>
+                </div>
+
+                <div class="p-4">
+                  <p class="text-gray-700 dark:text-gray-300 text-sm whitespace-pre-wrap">
+                    {{ entry.description || 'Keine Beschreibung angegeben.' }}
+                  </p>
+                  <p v-if="entry.type === 'vacation'" class="text-sm text-gray-500 italic mt-1">
+                    Grund: {{ entry.vacation_reason }}
+                  </p>
+                </div>
+
+                <div class="bg-gray-50 dark:bg-gray-900/30 px-4 py-2 flex justify-end gap-2 border-t border-gray-100 dark:border-gray-700">
+                  <UButton
+                      v-if="(entry.state === 'draft' || entry.state === 'factual') && entry.stopped_at"
+                      size="xs" color="cyan" variant="solid" icon="i-heroicons-paper-airplane" label="Einreichen"
+                      @click="handleSubmit(entry)" :loading="loading"
+                  />
+
+                  <UButton
+                      v-if="entry.state === 'submitted' && canViewAll"
+                      size="xs" color="green" variant="solid" icon="i-heroicons-check" label="Genehmigen"
+                      @click="handleApprove(entry)" :loading="loading"
+                  />
+
+                  <UButton
+                      v-if="(entry.state === 'submitted' || entry.state === 'approved') && canViewAll"
+                      size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark" label="Ablehnen"
+                      @click="openRejectModal(entry)" :loading="loading"
+                  />
+
+                  <UButton
+                      v-if="['draft', 'factual', 'submitted'].includes(entry.state)"
+                      size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" label="Bearbeiten"
+                      @click="handleEdit(entry)"
+                  />
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="entries.length === 0" class="flex flex-col items-center justify-center py-20 text-gray-400">
+          <UIcon name="i-heroicons-calendar" class="w-12 h-12 mb-2 opacity-50" />
+          <p>Keine Einträge im gewählten Zeitraum.</p>
+        </div>
+
+      </div>
+    </UDashboardPanelContent>
+  </template>
+
+  <template v-else>
+    <UDashboardNavbar title="Zeiterfassung" />
+    <div class="relative flex flex-col h-[100dvh] overflow-hidden">
+      <div v-if="isViewingSelf" class="p-4 bg-white dark:bg-gray-900 border-b sticky top-0 z-20 shadow-sm">
+        <UCard class="p-3">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-gray-500 text-sm">Aktive Zeit</p>
+              <p v-if="active" class="text-primary-600 font-semibold animate-pulse">
+                Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
+              </p>
+              <p v-else class="text-gray-600">Keine aktive Zeit</p>
+            </div>
+            <div class="flex gap-2">
+              <template v-if="isViewingSelf">
+                <UButton v-if="active" color="red" icon="i-heroicons-stop" :loading="loading" @click="handleStop" />
+                <UButton v-else color="green" icon="i-heroicons-play" :loading="loading" @click="handleStart" />
+              </template>
+            </div>
+          </div>
+        </UCard>
+      </div>
+      <div class="px-3 mt-3">
+        <UButton color="gray" icon="i-heroicons-chart-bar" label="Auswertung" class="w-full" variant="soft" @click="router.push(`/staff/time/${selectedUser}/evaluate`)" />
+      </div>
+      <UDashboardPanelContent class="flex-1 overflow-y-auto p-3 space-y-4 pb-24">
+        <UCard v-for="row in entries" :key="row.id" class="p-4 border rounded-xl" @click="handleEdit(row)">
+          <div class="flex justify-between items-center">
+            <div class="font-semibold flex items-center gap-2">
+              <span class="truncate max-w-[150px]">{{ row.description || 'Keine Beschreibung' }}</span>
+              <UBadge :color="typeColor[row.type]" class="text-xs">{{ typeLabel[row.type] }}</UBadge>
+            </div>
+            <UBadge v-if="row.state === 'approved'" color="green">Genehmigt</UBadge>
+            <UBadge v-else-if="row.state === 'submitted'" color="cyan">Eingereicht</UBadge>
+            <UBadge v-else-if="row.state === 'rejected'" color="red">Abgelehnt</UBadge>
+            <UBadge v-else color="gray">Entwurf</UBadge>
+          </div>
+          <p class="text-sm text-gray-500 mt-1">Start: {{ useNuxtApp().$dayjs(row.started_at).format('DD.MM.YY HH:mm') }}</p>
+          <p class="text-sm text-gray-500">Ende: <span v-if="row.stopped_at">{{ useNuxtApp().$dayjs(row.stopped_at).format('DD.MM.YY HH:mm') }}</span></p>
+          <div class="flex gap-2 mt-3 justify-end">
+            <UButton v-if="(row.state === 'draft' || row.state === 'factual') && row.stopped_at" color="cyan" size="sm" icon="i-heroicons-paper-airplane" label="Einreichen" variant="soft" @click.stop="handleSubmit(row)" :loading="loading" />
+            <UButton v-if="row.state === 'submitted' && canViewAll" color="green" size="sm" icon="i-heroicons-check" label="Genehmigen" variant="soft" @click.stop="handleApprove(row)" :loading="loading" />
+          </div>
+        </UCard>
+      </UDashboardPanelContent>
+      <FloatingActionButton icon="i-heroicons-plus" class="!fixed bottom-6 right-6 z-50" color="primary" @click="() => { entryToEdit = null; showEditModal = true }" />
+    </div>
+  </template>
+
+  <StaffTimeEntryModal
+      v-model="showEditModal"
+      :entry="entryToEdit"
+      @saved="load"
+      :default-user-id="selectedUser"
+  />
+
+  <UModal v-model="showRejectModal">
+    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Zeiteintrag ablehnen
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showRejectModal = false" />
+        </div>
+      </template>
+      <div class="space-y-4">
+        <p class="text-sm text-gray-500">
+          Der Eintrag wird als "Rejected" markiert und nicht mehr zur Arbeitszeit gezählt.
+        </p>
+        <UFormGroup label="Grund (optional)" name="reason">
+          <UTextarea v-model="rejectReason" placeholder="Falsche Buchung, Doppelt, etc." autofocus />
+        </UFormGroup>
+      </div>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton color="gray" variant="soft" @click="showRejectModal = false">Abbrechen</UButton>
+          <UButton color="red" :loading="loading" @click="confirmReject">Bestätigen</UButton>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+</template>
\ No newline at end of file
diff --git a/frontend/pages/standardEntity/[type]/[mode]/[[id]].vue b/frontend/pages/standardEntity/[type]/[mode]/[[id]].vue
new file mode 100644
index 0000000..0bf2688
--- /dev/null
+++ b/frontend/pages/standardEntity/[type]/[mode]/[[id]].vue
@@ -0,0 +1,94 @@
+<script setup>
+import {setPageLayout} from "#app";
+import {useCapacitor} from "~/composables/useCapacitor.js";
+
+
+const route = useRoute()
+const dataStore = useDataStore()
+const api = useNuxtApp().$api
+
+
+const type = route.params.type
+const platform = await useCapacitor().getIsNative() ? "mobile" : "default"
+
+
+const dataType = dataStore.dataTypes[route.params.type]
+
+const loaded = ref(false)
+const mode = ref("list")
+const items = ref([])
+const item = ref({})
+
+
+const setupPage = async (sort_column = null, sort_direction = null) => {
+  loaded.value = false
+  setPageLayout(platform)
+
+
+
+  if (route.params.mode) mode.value = route.params.mode
+
+  if (mode.value === "show") {
+    //Load Data for Show
+    item.value = await useEntities(type).selectSingle(route.params.id, "*", true)
+  } else if (mode.value === "edit") {
+    //Load Data for Edit
+    item.value = JSON.stringify(await useEntities(type).selectSingle(route.params.id,"*",false))
+
+    console.log(item.value)
+
+  } else if (mode.value === "create") {
+    //Load Data for Create
+    item.value = JSON.stringify({})
+    console.log(item.value)
+  } else if (mode.value === "list") {
+    //Load Data for List
+    //items.value = await useEntities(type).select(dataType.supabaseSelectWithInformation, sort_column || dataType.supabaseSortColumn, sort_direction === "asc", true)
+    items.value = await useEntities(type).select({
+      filters: {},
+      sort: [],
+      page:1
+    })
+  }
+
+  loaded.value = true
+}
+
+setupPage()
+
+</script>
+
+<template>
+  <EntityShow
+      v-if="loaded && mode === 'show'"
+      :type="route.params.type"
+      :item="item"
+      @updateNeeded="setupPage"
+      :key="item"
+      :platform="platform"
+  />
+  <EntityEdit
+      v-else-if="loaded && (mode === 'edit' || mode === 'create')"
+      :type="route.params.type"
+      :item="item"
+      :mode="mode"
+      :platform="platform"
+  />
+  <EntityList
+      :loading="!loaded"
+      v-else-if="mode === 'list'"
+      :type="type"
+      :items="items"
+      :platform="platform"
+      @sort="(i) => setupPage(i.sort_column, i.sort_direction)"
+  />
+  <UProgress
+      v-else
+      animation="carousel"
+      class="p-5 mt-10"
+  />
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/standardEntity/[type]/index.vue b/frontend/pages/standardEntity/[type]/index.vue
new file mode 100644
index 0000000..cb7d29b
--- /dev/null
+++ b/frontend/pages/standardEntity/[type]/index.vue
@@ -0,0 +1,627 @@
+<script setup>
+import {useTempStore} from "~/stores/temp.js";
+import FloatingActionButton from "~/components/mobile/FloatingActionButton.vue";
+import EntityTable from "~/components/EntityTable.vue";
+import EntityTableMobile from "~/components/EntityTableMobile.vue";
+import {setPageLayout} from "#app";
+
+const { has } = usePermission()
+
+const platformIsNative = useCapacitor().getIsNative()
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push(`/standardEntity/${type}/create`)
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/standardEntity/${type}/show/${items.value[selectedItem.value].id}`)
+    }
+  },
+  'arrowdown': () => {
+    if(selectedItem.value < items.value.length - 1) {
+      selectedItem.value += 1
+    } else {
+      selectedItem.value = 0
+    }
+  },
+  'arrowup': () => {
+    if(selectedItem.value === 0) {
+      selectedItem.value = items.value.length - 1
+    } else {
+      selectedItem.value -= 1
+    }
+  }
+})
+
+const router = useRouter()
+const route = useRoute()
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+
+//VARS
+const type = route.params.type
+
+const dataType = dataStore.dataTypes[type]
+
+const selectedColumns = ref(tempStore.columns[type] ? tempStore.columns[type] : dataType.templateColumns.filter(i => !i.disabledInTable))
+const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
+
+const searchString = ref(tempStore.searchStrings[type] ||'')
+
+const items = ref([])
+const itemsMeta = ref({})
+const selectedItem = ref(0)
+const loading = ref(true)
+const initialSetupDone = ref(false)
+const pageLimit = ref(15)
+const page = ref(tempStore.pages[type] || 1)
+
+const sort = ref({
+  column: dataType.supabaseSortColumn || "created_at",
+  direction: 'desc'
+})
+
+const columnsToFilter = ref({})
+
+const showMobileFilter = ref(false)
+
+
+//Functions
+
+function resetMobileFilters() {
+  if (!itemsMeta.value?.distinctValues) return
+
+  Object.keys(itemsMeta.value.distinctValues).forEach(key => {
+    columnsToFilter.value[key] = [...itemsMeta.value.distinctValues[key]]
+  })
+
+  showMobileFilter.value = false
+  setupPage()
+}
+
+function applyMobileFilters() {
+  Object.keys(columnsToFilter.value).forEach(key => {
+    tempStore.modifyFilter(type, key, columnsToFilter.value[key])
+  })
+
+  showMobileFilter.value = false
+  setupPage()
+}
+
+const clearSearchString = () => {
+  tempStore.clearSearchString(type)
+  searchString.value = ''
+  setupPage()
+}
+
+const performSearch = async () => {
+  tempStore.modifySearchString(type,searchString)
+  changePage(1,true)
+  setupPage()
+}
+
+const changePage = (number, noSetup = false) => {
+  page.value = number
+  tempStore.modifyPages(type, number)
+  if(!noSetup) setupPage()
+}
+
+
+
+const changeSort = (column) => {
+  if(sort.value.column === column) {
+    sort.value.direction = sort.value.direction === 'desc' ? 'asc' : 'desc'
+  } else {
+    sort.value.direction = "asc"
+    sort.value.column = column
+  }
+
+  changePage(1)
+}
+
+const isFiltered = computed(() => {
+  if (!itemsMeta.value?.distinctValues) return false
+
+  return Object.keys(columnsToFilter.value).some(key => {
+    const allValues = itemsMeta.value.distinctValues[key]
+    const selected = columnsToFilter.value[key]
+    if (!allValues || !selected) return false
+    return selected.length !== allValues.length
+  })
+})
+
+//SETUP
+
+const setupPage = async () => {
+  loading.value = true
+  setPageLayout(platformIsNative ? "mobile" : "default")
+
+
+  const filters = {
+    archived:false
+  }
+
+  Object.keys(columnsToFilter.value).forEach((column) => {
+    if(columnsToFilter.value[column].length !== itemsMeta.value.distinctValues[column].length) {
+      filters[column] = columnsToFilter.value[column]
+    }
+  })
+
+
+  const {data,meta} = await useEntities(type).selectPaginated({
+    select: dataType.supabaseSelectWithInformation || "*",
+    filters: filters,
+    sort: [{field: sort.value.column, direction: sort.value.direction}],
+    page: page.value,
+    limit: pageLimit.value,
+    search: searchString.value,
+    searchColumns: columns.value.map((i) => i.key),
+    distinctColumns: dataType.templateColumns.filter(i => i.distinct).map(i => i.key),
+  })
+
+  items.value = data
+  itemsMeta.value = meta
+  if(!initialSetupDone.value){
+    Object.keys(tempStore.filters[type] || {}).forEach((column) => {
+      columnsToFilter.value[column] = tempStore.filters[type][column]
+    })
+
+    Object.keys(itemsMeta.value.distinctValues).filter(i => !Object.keys(tempStore.filters[type] || {}).includes(i)).forEach(distinctValue => {
+      columnsToFilter.value[distinctValue] = itemsMeta.value.distinctValues[distinctValue]
+    })
+  }
+
+
+  loading.value = false
+  initialSetupDone.value = true
+
+}
+
+setupPage()
+
+const handleFilterChange = async (action,column) => {
+  if(action === 'reset') {
+    columnsToFilter.value[column] = itemsMeta.value.distinctValues[column]
+  } else if(action === 'change') {
+    tempStore.modifyFilter(type,column,columnsToFilter.value[column])
+  }
+  setupPage()
+}
+
+
+
+</script>
+
+<template>
+  <UDashboardNavbar :title="dataType.label" :badge="itemsMeta.total">
+    <template #toggle>
+      <div v-if="platformIsNative"></div>
+    </template>
+    <template #right v-if="!platformIsNative">
+      <UTooltip :text="`${dataType.label} durchsuchen`">
+        <UInput
+            id="searchinput"
+            v-model="searchString"
+            icon="i-heroicons-funnel"
+            autocomplete="off"
+            placeholder="Suche..."
+            class="hidden lg:block"
+            @keydown.esc="$event.target.blur()"
+            @keyup="performSearch"
+            @change="performSearch"
+        >
+          <template #trailing>
+            <UKbd value="/" />
+          </template>
+        </UInput>
+      </UTooltip>
+      <UTooltip text="Suche löschen" v-if="searchString.length > 0">
+        <UButton
+            icon="i-heroicons-x-mark"
+            variant="outline"
+            color="rose"
+            @click="clearSearchString()"
+
+        />
+      </UTooltip>
+
+
+      <UTooltip :text="`${dataType.labelSingle} erstellen`">
+        <UButton
+            v-if="platform !== 'mobile' && has(`${type}-create`)/*&& useRole().checkRight(`${type}-create`)*/"
+            @click="router.push(`/standardEntity/${type}/create`)"
+            class="ml-3"
+        >+ {{dataType.labelSingle}}</UButton>
+      </UTooltip>
+
+    </template>
+  </UDashboardNavbar>
+
+
+  <UDashboardToolbar v-if="!platformIsNative">
+    <template #left>
+      <UTooltip :text="`${dataType.label} pro Seite`">
+        <USelectMenu
+            :options="[{value:10},{value:15, disabled: itemsMeta.total < 15},{value:25, disabled: itemsMeta.total < 25},{value:50, disabled: itemsMeta.total < 50},{value:100, disabled: itemsMeta.total < 100},{value:250, disabled: itemsMeta.total < 250}]"
+            v-model="pageLimit"
+            value-attribute="value"
+            option-attribute="value"
+            @change="setupPage"
+        />
+      </UTooltip>
+      <UPagination
+          v-if="initialSetupDone && items.length > 0"
+          :disabled="loading"
+          v-model="page"
+          :page-count="pageLimit"
+          :total="itemsMeta.total"
+          @update:modelValue="(i) => changePage(i)"
+          show-first
+          show-last
+          :first-button="{ icon: 'i-heroicons-chevron-double-left', color: 'gray' }"
+          :last-button="{ icon: 'i-heroicons-chevron-double-right', trailing: true, color: 'gray' }"
+      />
+
+    </template>
+
+    <template #right>
+      <UTooltip text="Angezeigte Spalten auswählen">
+        <USelectMenu
+            v-model="selectedColumns"
+            icon="i-heroicons-adjustments-horizontal-solid"
+            :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
+            multiple
+            class="hidden lg:block"
+            by="key"
+            :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
+            :ui-menu="{ width: 'min-w-max' }"
+            @change="tempStore.modifyColumns(type,selectedColumns)"
+        >
+          <template #label>
+            Spalten
+          </template>
+        </USelectMenu>
+      </UTooltip>
+    </template>
+  </UDashboardToolbar>
+
+  <div v-if="!platformIsNative">
+    <UTable
+        :loading="loading"
+        :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
+        sort-mode="manual"
+        v-model:sort="sort"
+        @update:sort="setupPage"
+        v-if="dataType && columns && items.length > 0  && !loading"
+        :rows="items"
+        :columns="columns"
+        class="w-full"
+        style="height: 85dvh"
+        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+        @select="(i) => router.push(`/standardEntity/${type}/show/${i.id}`) "
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
+    >
+      <template
+          v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
+          v-slot:[`${column.key}-header`]="{row}">
+        <InputGroup>
+          <UTooltip v-if="column.sortable">
+            <UButton
+                variant="outline"
+                @click="changeSort(column.key)"
+                :color="sort.column === column.key ? 'primary' : 'white'"
+                :icon="sort.column === column.key ? (sort.direction === 'asc' ? 'i-heroicons-arrow-up' : 'i-heroicons-arrow-down') : 'i-heroicons-arrows-up-down'"
+            >
+
+            </UButton>
+          </UTooltip>
+          <UTooltip
+              v-if="column.distinct"
+              :text="!columnsToFilter[column.key]?.length > 0 ? `Keine Einträge für ${column.label} verfügbar`  : `${column.label} Spalte nach Einträgen filtern`"
+          >
+            <USelectMenu
+                :options="itemsMeta?.distinctValues?.[column.key]"
+                v-model="columnsToFilter[column.key]"
+                multiple
+                @change="handleFilterChange('change', column.key)"
+                searchable
+                searchable-placeholder="Suche..."
+                :search-attributes="[column.key]"
+                :ui-menu="{ width: 'min-w-max' }"
+                clear-search-on-close
+            >
+
+              <template #empty>
+                Keine Einträge in der Spalte {{column.label}}
+              </template>
+              <template #default="{open}">
+                <UButton
+                    :disabled="!columnsToFilter[column.key]?.length > 0"
+                    :variant="columnsToFilter[column.key]?.length !== itemsMeta.distinctValues?.[column.key]?.length ? 'outline' : 'solid'"
+                    :color="columnsToFilter[column.key]?.length !== itemsMeta.distinctValues?.[column.key]?.length ? 'primary' : 'white'"
+                >
+                  <span class="truncate">{{ column.label }}</span>
+
+                  <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="[open && 'transform rotate-90']" />
+                </UButton>
+              </template>
+
+
+            </USelectMenu>
+          </UTooltip>
+          <UButton
+              variant="solid"
+              color="white"
+              v-else
+              class="mr-2 truncate"
+          >{{column.label}}</UButton>
+
+
+          <UTooltip
+              text="Filter zurücksetzen"
+              v-if="columnsToFilter[column.key]?.length !== itemsMeta.distinctValues?.[column.key]?.length && column.distinct"
+          >
+            <UButton
+                @click="handleFilterChange('reset',column.key)"
+                variant="outline"
+                color="rose"
+            >
+              X
+            </UButton>
+          </UTooltip>
+
+
+        </InputGroup>
+
+      </template>
+      <template #name-data="{row}">
+      <span
+          v-if="row.id === items[selectedItem].id"
+          class="text-primary-500 font-bold">
+        <UTooltip
+            :text="row.name"
+        >
+          {{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}}
+        </UTooltip>      </span>
+        <span v-else>
+        <UTooltip
+            :text="row.name"
+        >
+          {{dataType.templateColumns.find(i => i.key === "name").maxLength ? (row.name.length > dataType.templateColumns.find(i => i.key === "name").maxLength ? `${row.name.substring(0,dataType.templateColumns.find(i => i.key === "name").maxLength)}...` : row.name ) : row.name}}
+        </UTooltip>
+      </span>
+      </template>
+      <template #fullName-data="{row}">
+      <span
+          v-if="row.id === items[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.fullName}}
+      </span>
+        <span v-else>
+        {{row.fullName}}
+      </span>
+      </template>
+      <template #licensePlate-data="{row}">
+      <span
+          v-if="row.id === items[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.licensePlate}}
+      </span>
+        <span v-else>
+        {{row.licensePlate}}
+      </span>
+      </template>
+      <template
+          v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
+          v-slot:[`${column.key}-data`]="{row}">
+        <component v-if="column.component" :is="column.component" :row="row"></component>
+        <span v-else-if="row[column.key]">
+        <UTooltip :text="row[column.key]">
+        {{row[column.key] ? `${column.maxLength ? (row[column.key].length > column.maxLength ? `${row[column.key].substring(0,column.maxLength)}...` : row[column.key]) : row[column.key]} ${column.unit ? column.unit : ''}`: ''}}
+      </UTooltip>
+      </span>
+
+      </template>
+    </UTable>
+    <UCard
+        class="w-1/3 mx-auto mt-10"
+        v-else-if="!loading"
+    >
+      <div
+          class="flex flex-col text-center"
+      >
+        <UIcon
+            class="mx-auto w-10 h-10 mb-5"
+            name="i-heroicons-circle-stack-20-solid"/>
+        <span class="font-bold">Keine {{dataType.label}} anzuzeigen</span>
+
+      </div>
+
+
+    </UCard>
+    <UProgress v-else animation="carousel" class="w-3/4 mx-auto mt-5"></UProgress>
+  </div>
+  <div v-else class="relative flex flex-col h-[calc(100dvh-80px)]">
+
+    <!-- Mobile Searchbar (sticky top) -->
+    <div class="p-2 bg-white dark:bg-gray-900 border-b sticky top-0 z-20">
+      <InputGroup>
+        <UInput
+            v-model="searchString"
+            icon="i-heroicons-magnifying-glass"
+            placeholder="Suche..."
+            @keyup="performSearch"
+            @change="performSearch"
+            class="w-full"
+        />
+        <UButton
+            v-if="searchString.length > 0"
+            icon="i-heroicons-x-mark"
+            variant="ghost"
+            color="rose"
+            @click="clearSearchString()"
+
+        />
+        <UButton
+            icon="i-heroicons-funnel"
+            variant="ghost"
+            :color="isFiltered ? 'primary' : 'gray'"
+            @click="showMobileFilter = true"
+        />
+      </InputGroup>
+
+    </div>
+
+    <!-- Scroll Area -->
+    <UDashboardPanelContent class="flex-1 overflow-y-auto px-2 py-3 space-y-3 pb-[calc(8vh+env(safe-area-inset-bottom))] mobile-scroll-area">
+
+      <UCard
+          v-for="item in items"
+          :key="item.id"
+          class="p-4 rounded-xl shadow-sm border cursor-pointer active:scale-[0.98] transition"
+          @click="router.push(`/standardEntity/${type}/show/${item.id}`)"
+      >
+        <div class="flex items-center justify-between mb-1">
+          <p class="text-base font-semibold truncate text-primary-600">
+            {{
+              dataType.templateColumns.find(i => i.title)?.key
+                  ? item[dataType.templateColumns.find(i => i.title).key]
+                  : null
+            }}
+          </p>
+
+          <UIcon
+              name="i-heroicons-chevron-right-20-solid"
+              class="text-gray-400 w-5 h-5 flex-shrink-0"
+          />
+        </div>
+
+        <p class="text-sm text-gray-500 truncate">
+          {{ dataType.numberRangeHolder ? item[dataType.numberRangeHolder] : null }}
+        </p>
+
+        <div
+            v-for="secondInfo in dataType.templateColumns.filter(i => i.secondInfo)"
+            :key="secondInfo.key"
+            class="text-sm text-gray-400 truncate"
+        >
+          {{
+            (secondInfo.secondInfoKey && item[secondInfo.key])
+                ? item[secondInfo.key][secondInfo.secondInfoKey]
+                : item[secondInfo.key]
+          }}
+        </div>
+      </UCard>
+
+      <div
+          v-if="!loading && items.length > 0"
+          class="p-4 bg-white dark:bg-gray-900 border-t flex items-center justify-center mt-4 rounded-xl"
+      >
+        <UPagination
+            v-if="initialSetupDone && items.length > 0"
+            :disabled="loading"
+            v-model="page"
+            :page-count="pageLimit"
+            :total="itemsMeta.total"
+            @update:modelValue="(i) => changePage(i)"
+            show-first
+            show-last
+            :first-button="{ icon: 'i-heroicons-chevron-double-left', color: 'gray' }"
+            :last-button="{ icon: 'i-heroicons-chevron-double-right', trailing: true, color: 'gray' }"
+        />
+      </div>
+
+      <!-- Empty -->
+      <UCard
+          v-if="!loading && items.length === 0"
+          class="mx-auto mt-10 p-6 text-center"
+      >
+        <UIcon name="i-heroicons-circle-stack-20-solid" class="mx-auto w-10 h-10 mb-3"/>
+        <p class="font-bold">Keine {{ dataType.label }} gefunden</p>
+      </UCard>
+
+      <div v-if="loading" class="mt-5">
+        <UProgress animation="carousel" class="w-3/4 mx-auto"></UProgress>
+      </div>
+
+    </UDashboardPanelContent>
+    <!-- Mobile Filter Slideover -->
+    <USlideover
+        v-model="showMobileFilter"
+        side="bottom"
+        :ui="{ width: '100%', height: 'auto', maxHeight: '90vh' }"
+        class="pb-[env(safe-area-inset-bottom)]"
+    >
+      <!-- Header -->
+      <div class="p-4 border-b flex items-center justify-between flex-shrink-0">
+        <h2 class="text-xl font-bold">Filter</h2>
+        <UButton
+            icon="i-heroicons-x-mark"
+            variant="ghost"
+            @click="showMobileFilter = false"
+        />
+      </div>
+
+      <!-- Scrollable content -->
+      <div class="flex-1 overflow-y-auto p-4 space-y-6">
+
+        <div
+            v-for="column in dataType.templateColumns.filter(c => c.distinct)"
+            :key="column.key"
+            class="space-y-2"
+        >
+          <p class="font-semibold">{{ column.label }}</p>
+
+          <USelectMenu
+              v-model="columnsToFilter[column.key]"
+              :options="itemsMeta?.distinctValues?.[column.key]"
+              multiple
+              searchable
+              :search-attributes="[column.key]"
+              placeholder="Auswählen…"
+              :ui-menu="{ width: '100%' }"
+          />
+        </div>
+
+      </div>
+
+      <!-- Footer FIXED in card -->
+      <div
+          class="
+        flex justify-between gap-3
+        px-4 py-4 border-t flex-shrink-0
+        bg-white dark:bg-gray-900
+        rounded-b-2xl
+      "
+      >
+        <UButton
+            color="rose"
+            variant="outline"
+            class="flex-1"
+            @click="resetMobileFilters"
+        >
+          Zurücksetzen
+        </UButton>
+
+        <UButton
+            color="primary"
+            class="flex-1"
+            @click="applyMobileFilters"
+        >
+          Anwenden
+        </UButton>
+      </div>
+    </USlideover>
+
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/support/[id].vue b/frontend/pages/support/[id].vue
new file mode 100644
index 0000000..4d8941e
--- /dev/null
+++ b/frontend/pages/support/[id].vue
@@ -0,0 +1,146 @@
+<script setup>
+
+import {useFunctions} from "~/composables/useFunctions.js";
+import dayjs from "dayjs";
+
+const supabase = useSupabaseClient()
+const profileStore = useProfileStore()
+const toast = useToast()
+const auth = useAuthStore()
+
+const itemInfo = ref({})
+const loaded = ref(false)
+
+const setup = async () => {
+  itemInfo.value = await useEntities("tickets").selectSingle(useRoute().params.id,"*, ticketmessages(*), created_by(*)")
+  loaded.value = true
+}
+
+setup()
+
+const messageContent = ref("")
+
+const addMessage = async () => {
+  const res = await useEntities("ticketmessages").create({
+    auth_user: auth.user.user_id,
+    content: messageContent.value,
+    ticket: itemInfo.value.id,
+    internal: false,
+    type: "Nachricht"
+  })
+}
+
+
+
+</script>
+
+<template>
+  <UDashboardNavbar title="Support Ticket">
+    <template #badge>
+      <UBadge
+        variant="outline"
+        v-if="itemInfo.status === 'Offen'"
+        color="yellow"
+      >{{itemInfo.status}}</UBadge>
+      <UBadge
+        variant="outline"
+        v-if="itemInfo.status === 'Geschlossen'"
+        color="primary"
+      >{{itemInfo.status}}</UBadge>
+    </template>
+    <template #center>
+      {{itemInfo.title}}
+    </template>
+    <template #right>
+<!--      <UButton
+        v-if="profileStore.currentTenant === 5"
+        variant="outline"
+        @click="closeTicket"
+      >
+        Ticket Schließen
+      </UButton>
+      <UButton
+        v-if="profileStore.currentTenant === 5"
+        variant="outline"
+        @click="showAddEntryModal = true"
+      >
+        + Eintrag
+      </UButton>
+      <UModal v-model="showAddEntryModal">
+        <UCard>
+          <template #header>
+            Eintrag hinzufügen
+          </template>
+
+          <UFormGroup
+            label="Intern:"
+          >
+            <UToggle
+              v-model="addEntryData.internal"
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="Typ:"
+          >
+            <USelectMenu
+              v-model="addEntryData.type"
+              :options="['Nachricht','Notiz','Anruf','Externe Kommunikation']"
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="Inhalt:"
+          >
+            <UTextarea
+              v-model="addEntryData.content"
+            />
+          </UFormGroup>
+
+          <template #footer>
+            <UButton
+              @click="addEntry"
+            >
+              Erstellen
+            </UButton>
+          </template>
+        </UCard>
+      </UModal>-->
+    </template>
+  </UDashboardNavbar>
+  <UDashboardPanelContent v-if="loaded">
+
+    <UAlert
+        v-for="item in itemInfo.ticketmessages.filter(i => !i.internal)"
+        :title="`${item.type}`"
+        class="mb-3"
+        :color="item.profile.tenant === 5 ? 'primary' : 'white'"
+        variant="outline"
+    >
+      <template #description>
+        <p>{{item.content}}</p>
+        <p class="mt-1 text-gray-600 dark:text-gray-400">{{dayjs(item.created_at).format("DD.MM.YYYY HH:mm")}}</p>
+      </template>
+    </UAlert>
+
+    <InputGroup>
+      <UTextarea
+        class="w-full mr-2"
+        placeholder="Neue Nachricht senden"
+        v-model="messageContent"
+      />
+      <UButton
+        @click="addMessage"
+      >
+        Senden
+      </UButton>
+    </InputGroup>
+
+  </UDashboardPanelContent>
+  <UProgress animation="carousel" v-else class="w-3/4 mx-auto"/>
+
+
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/support/create.vue b/frontend/pages/support/create.vue
new file mode 100644
index 0000000..5d9d570
--- /dev/null
+++ b/frontend/pages/support/create.vue
@@ -0,0 +1,62 @@
+<script setup>
+
+const router = useRouter()
+
+const itemInfo = ref({})
+const auth = useAuthStore()
+
+
+const createTicket = async () => {
+
+  const ticketRes = await useEntities("tickets").create({
+    title: itemInfo.value.title,
+  })
+
+  console.log(ticketRes)
+
+  const ticketMsgRes = await useEntities("ticketmessages").create({
+    ticket: ticketRes.id,
+    created_by: auth.user.user_id,
+    content: itemInfo.value.content,
+    internal: false
+  })
+
+  await router.push(`/support/${ticketRes.id}`)
+
+
+
+}
+
+</script>
+
+<template>
+  <UDashboardNavbar title="Neues Ticket erstellen">
+    <template #right>
+      <UButton
+        @click="createTicket"
+      >
+        Erstellen
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UForm class="w-2/3 mx-auto mt-5">
+    <UFormGroup
+      label="Titel:"
+    >
+      <UInput
+        v-model="itemInfo.title"
+      />
+    </UFormGroup>
+    <UFormGroup
+      label="Nachricht:"
+    >
+      <UTextarea
+        v-model="itemInfo.content"
+      />
+    </UFormGroup>
+  </UForm>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/support/index.vue b/frontend/pages/support/index.vue
new file mode 100644
index 0000000..d5671c5
--- /dev/null
+++ b/frontend/pages/support/index.vue
@@ -0,0 +1,110 @@
+<script setup>
+import dayjs from "dayjs";
+const profileStore = useProfileStore()
+const router = useRouter()
+
+const tickets = ref([])
+const tenants = ref([])
+
+const showClosedTickets = ref(false)
+const selectedTenant = ref(null)
+
+const setup = async () => {
+  /*if(profileStore.currentTenant === 5) {
+    tickets.value = (await supabase.from("tickets").select("*,created_by(*), ticketmessages(*), tenant(*)").order("created_at", {ascending: false})).data
+  } else {
+    tickets.value = (await supabase.from("tickets").select("*,created_by(*), ticketmessages(*)").eq("tenant",profileStore.currentTenant).order("created_at", {ascending: false})).data
+  }
+
+  if(profileStore.currentTenant === 5) {
+    tenants.value = (await supabase.from("tenants").select().order("id")).data
+  }*/
+  tickets.value = await useEntities("tickets").select("*,created_by(*), ticketmessages(*)", "created_at", false)
+
+
+
+}
+
+setup()
+
+const filteredRows = computed(() => {
+  let items = tickets.value
+
+  if(!showClosedTickets.value) {
+    items = items.filter(i => i.status !== "Geschlossen")
+  }
+
+  if(selectedTenant.value) {
+    console.log(selectedTenant.value)
+    console.log(items)
+    console.log(items.filter(i => i.tenant.id === selectedTenant.value))
+    items = items.filter(i => i.tenant.id === selectedTenant.value)
+  }
+
+  return items
+
+})
+
+</script>
+
+<template>
+  <UDashboardNavbar
+    title="Support Tickets"
+    :badge="filteredRows.length"
+  >
+    <template #right>
+      <UButton
+        @click="router.push('/support/create')"
+      >
+        + Ticket
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #left>
+      <UCheckbox
+        label="Geschlossene Tickets anzeigen"
+        v-model="showClosedTickets"
+      />
+      <USelectMenu
+          v-if="profileStore.currentTenant === 5"
+        :ui-menu="{ width: 'min-w-max' }"
+        :options="tenants"
+        option-attribute="name"
+        value-attribute="id"
+        v-model="selectedTenant"
+      >
+        <template #label>
+          {{selectedTenant ? tenants.find(i => i.id === selectedTenant).name : "Nicht nach Tenant filtern"}}
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+  <UTable
+    :rows="filteredRows"
+    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine Tickets anzuzeigen` }"
+    @select="(i) => router.push(`/support/${i.id}`)"
+    :columns="[{key:'created_at',label:'Datum'}, ...profileStore.currentTenant === 5 ? [{key:'tenant',label:'Tenant'}] : [],{key:'status',label:'Status'},{key:'title',label:'Titel'},{key:'created_by',label:'Ersteller'},{key:'ticketmessages',label:'Nachrichten'}]"
+  >
+    <template #tenant-data="{ row }">
+     {{row.tenant.name}}
+    </template>
+    <template #status-data="{ row }">
+     <span v-if="row.status === 'Offen'" class="text-yellow-500">Offen</span>
+     <span v-else-if="row.status === 'Geschlossen'" class="text-primary">Geschlossen</span>
+    </template>
+    <template #created_by-data="{ row }">
+     {{row.created_by.fullName}}
+    </template>
+    <template #created_at-data="{ row }">
+     {{dayjs(row.created_at).format('DD.MM.YYYY HH:mm')}}
+    </template>
+    <template #ticketmessages-data="{ row }">
+     {{row.ticketmessages.length}}
+    </template>
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/test.vue b/frontend/pages/test.vue
new file mode 100644
index 0000000..a39d54e
--- /dev/null
+++ b/frontend/pages/test.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+async function handleSingle() {
+  await useFiles().downloadFile("f60e8466-7136-4492-ad94-a60603bc3c38") // Einzel-Download
+}
+
+async function handleMulti() {
+  await useFiles().downloadFile(undefined, ["f60e8466-7136-4492-ad94-a60603bc3c38", "f60e8466-7136-4492-ad94-a60603bc3c38"]) // Multi-Download ZIP
+}
+</script>
+
+<template>
+  <button @click="handleSingle">Einzeldatei</button>
+  <button @click="handleMulti">Mehrere als ZIP</button>
+</template>
\ No newline at end of file
diff --git a/frontend/pages/times/index.vue b/frontend/pages/times/index.vue
new file mode 100644
index 0000000..be4249a
--- /dev/null
+++ b/frontend/pages/times/index.vue
@@ -0,0 +1,503 @@
+<script setup>
+import dayjs from "dayjs";
+import VueDatePicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import {setPageLayout} from "#app";
+
+
+
+
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+const supabase = useSupabaseClient()
+const user = useSupabaseUser()
+const toast = useToast()
+
+
+const timeTypes = profileStore.ownTenant.timeConfig.timeTypes
+const timeInfo = ref({
+  profile: "",
+  startDate: "",
+  endDate: null,
+  notes: null,
+  project: null,
+  type: null
+})
+
+const filterUser = ref(profileStore.activeProfile.id || "")
+
+const times = ref([])
+const runningTimeInfo = ref({})
+const showConfigTimeModal = ref(false)
+const configTimeMode = ref("create")
+
+const platform = ref("default")
+
+const projects = ref([])
+
+const setup = async () => {
+  times.value = await useSupabaseSelect("times","*, profile(*), project(id, name)")
+  projects.value = await useSupabaseSelect("projects","*")
+
+  if(await useCapacitor().getIsPhone()) {
+    platform.value = "mobile"
+    setPageLayout("mobile")
+  }
+
+  runningTimeInfo.value = (await supabase
+      .from("times")
+      .select()
+      .eq("tenant", profileStore.currentTenant)
+      .eq("profile", profileStore.activeProfile.id)
+      .is("endDate",null)
+      .single()).data
+
+}
+
+setup()
+
+const filteredRows = computed(() => {
+
+  //let times = times.value
+
+  /*if(dataStore.hasRight('viewTimes')) {
+    if(filterUser.value !== "") {
+      times = times.filter(i => i.user === filterUser.value)
+    }
+  } else if(dataStore.hasRight('viewOwnTimes')) {
+    times = times.filter(i => i.user === user.value.id)
+  } else {
+    times  = []
+  }*/
+
+  return times.value
+
+})
+
+
+
+const itemInfo = ref({
+  user: "",
+  notes: null,
+  project: null,
+  type: null,
+  state: "Entwurf"
+})
+
+
+const columns = [
+  {
+    key:"state",
+    label: "Status",
+  },
+  {
+    key: "user",
+    label: "Benutzer",
+  },
+  {
+    key:"startDate",
+    label:"Start",
+  },
+  {
+    key: "endDate",
+    label: "Ende",
+  },
+  {
+    key:"type",
+    label:"Typ",
+  },
+  {
+    key: "project",
+    label: "Projekt",
+  },
+  {
+    key: "notes",
+    label: "Notizen",
+  }
+]
+
+
+
+
+
+const startTime = async () => {
+  console.log("started")
+  timeInfo.value.profile = profileStore.activeProfile.id
+  timeInfo.value.startDate = dayjs()
+  timeInfo.value.tenant = profileStore.currentTenant
+
+  const {data,error} = await supabase
+      .from("times")
+      .insert([timeInfo.value])
+      .select()
+
+  if(error) {
+    console.log(error)
+    toast.add({title: "Fehler beim starten der Zeit",color:"rose"})
+  } else if(data) {
+    toast.add({title: "Zeit erfolgreich gestartet"})
+    runningTimeInfo.value = data[0]
+  }
+
+}
+
+const stopStartedTime = async () => {
+  runningTimeInfo.value.endDate = dayjs()
+  runningTimeInfo.value.state = "Im Web gestoppt"
+
+
+  const {data,error} = await supabase
+      .from("times")
+      .update(runningTimeInfo.value)
+      .eq('id',runningTimeInfo.value.id)
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else {
+    toast.add({title: "Zeit erfolgreich gestoppt"})
+    runningTimeInfo.value = null
+    setup()
+  }
+}
+
+const createTime = async () => {
+  const {data,error} = await supabase
+      .from("times")
+      .insert({...itemInfo.value, tenant: profileStore.currentTenant})
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else if(data) {
+    itemInfo.value = {}
+    toast.add({title: "Zeit erfolgreich erstellt"})
+    showConfigTimeModal.value = false
+    setup()
+  }
+}
+
+const openTime = (row) => {
+  itemInfo.value = row
+
+  itemInfo.value.project = itemInfo.value.project.id
+  itemInfo.value.profile = itemInfo.value.profile.id
+
+  showConfigTimeModal.value = true
+  configTimeMode.value = "edit"
+
+
+}
+
+const updateTime = async () => {
+  let data = itemInfo.value
+
+  data.profile = data.profile.id
+  data.project = data.project.id
+
+  const {error} = await supabase
+      .from("times")
+      .update(data)
+      .eq('id',itemInfo.value.id)
+
+  if(error) {
+    console.log(error)
+  }
+
+  toast.add({title: "Zeit erfolgreich gespeichert"})
+  showConfigTimeModal.value = false
+  setup()
+}
+
+const format = (date) => {
+  let dateFormat = dayjs(date).format("DD.MM.YY HH:mm")
+
+  return `${dateFormat}`;
+}
+
+/*const getDuration = (time) => {
+  const dez = dayjs(time.end).diff(time.start,'hour',true).toFixed(2)
+  const hours = Math.floor(dez)
+  const minutes = Math.floor((dez - hours) * 60)
+  return {
+    dezimal: dez,
+    hours: hours,
+    minutes: minutes,
+    composed: `${hours}:${minutes}`
+  }
+}*/
+
+const setState = async (newState) => {
+  itemInfo.value.state = newState
+  await updateTime()
+}
+
+const getSecondInfo = (item) => {
+  let returnArray = []
+
+  if(item.type) returnArray.push(item.type)
+  if(item.project) returnArray.push(item.project.name)
+  if(item.notes) returnArray.push(item.notes)
+
+  return returnArray
+}
+
+</script>
+
+<template>
+  <UDashboardNavbar title="Projektzeiten">
+    <template #toggle>
+      <div v-if="platform === 'mobile'"></div>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #left>
+      <UButton
+          @click="startTime"
+          :disabled="runningTimeInfo "
+      >
+        Start
+      </UButton>
+      <UButton
+          @click="stopStartedTime"
+          :disabled="!runningTimeInfo"
+      >
+        Stop
+      </UButton>
+      <UButton
+          v-if="platform !== 'mobile'"
+          @click="configTimeMode = 'create'; itemInfo = {startDate: new Date(), endDate: new Date()}; showConfigTimeModal = true"
+      >
+        Erstellen
+      </UButton>
+      <USelectMenu
+          v-if="platform !== 'mobile'"
+          :options="profileStore.profiles"
+          option-attribute="fullName"
+          value-attribute="id"
+          v-model="filterUser"
+      >
+        <template #label>
+          {{profileStore.getProfileById(filterUser) ? profileStore.getProfileById(filterUser).fullName : "Kein Benutzer ausgewählt"}}
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+  <div v-if="runningTimeInfo" class="m-3">
+
+    Start: {{dayjs(runningTimeInfo.startDate).format("DD.MM.YY HH:mm")}}
+
+    <UFormGroup
+        label="Notizen:"
+    >
+      <UTextarea
+          v-model="runningTimeInfo.notes"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Projekt:"
+    >
+      <USelectMenu
+          :options="dataStore.projects"
+          option-attribute="name"
+          value-attribute="id"
+          v-model="runningTimeInfo.project"
+      >
+        <template #label>
+          {{ dataStore.projects.find(project => project.id === runningTimeInfo.project) ? dataStore.projects.find(project => project.id === runningTimeInfo.project).name : "Projekt auswählen" }}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+
+
+    <UFormGroup
+        label="Kategorie:"
+    >
+      <USelectMenu
+          v-model="runningTimeInfo.type"
+          :options="timeTypes"
+          option-attribute="label"
+          value-attribute="label"
+      >
+        <template #label>
+          {{runningTimeInfo.type ? runningTimeInfo.type : "Kategorie auswählen"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+  </div>
+
+  <UModal
+      v-model="showConfigTimeModal"
+  >
+    <UCard>
+      <template #header>
+        Projektzeit {{configTimeMode === 'create' ?  "erstellen" : "bearbeiten"}}
+      </template>
+      <UFormGroup
+          label="Start:"
+      >
+        <UPopover :popper="{ placement: 'bottom-start' }">
+          <UButton
+              icon="i-heroicons-calendar-days-20-solid"
+              :label="itemInfo.startDate ? dayjs(itemInfo.startDate).format('DD.MM.YYYY HH:mm') : 'Datum auswählen'"
+              variant="outline"
+          />
+
+          <template #panel="{ close }">
+            <LazyDatePicker v-model="itemInfo.startDate" @close="close" mode="dateTime" />
+          </template>
+        </UPopover>
+      </UFormGroup>
+      <UFormGroup
+          label="Ende:"
+      >
+        <UPopover :popper="{ placement: 'bottom-start' }">
+          <UButton
+              icon="i-heroicons-calendar-days-20-solid"
+              :label="itemInfo.endDate ? dayjs(itemInfo.endDate).format('DD.MM.YYYY HH:mm') : 'Datum auswählen'"
+              variant="outline"
+          />
+
+          <template #panel="{ close }">
+            <LazyDatePicker v-model="itemInfo.endDate" @close="close" mode="dateTime" />
+          </template>
+        </UPopover>
+      </UFormGroup>
+      <UFormGroup
+          label="Benutzer:"
+      >
+        <USelectMenu
+            :options="profileStore.profiles"
+            v-model="itemInfo.profile"
+            option-attribute="fullName"
+            value-attribute="id"
+        >
+          <template #label>
+            {{profileStore.profiles.find(profile => profile.id === itemInfo.profile) ? profileStore.profiles.find(profile => profile.id === itemInfo.profile).fullName : "Benutzer auswählen"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+      <UFormGroup
+          label="Projekt:"
+      >
+        <USelectMenu
+            :options="projects"
+            v-model="itemInfo.project"
+            option-attribute="name"
+            value-attribute="id"
+            searchable
+            searchable-placeholder="Suche..."
+            :search-attributes="['name']"
+        >
+          <template #label>
+            {{dataStore.projects.find(project => project.id === itemInfo.project) ? dataStore.projects.find(project => project.id === itemInfo.project).name : "Projekt auswählen"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+      <UFormGroup
+          label="Typ:"
+      >
+        <USelectMenu
+            v-model="itemInfo.type"
+            :options="timeTypes"
+            option-attribute="label"
+            value-attribute="label"
+        >
+          <template #label>
+            {{itemInfo.type ? itemInfo.type : "Kategorie auswählen"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+      <UFormGroup
+          label="Notizen:"
+      >
+        <UTextarea
+            v-model="itemInfo.notes"
+        />
+      </UFormGroup>
+
+
+      <template #footer>
+        <InputGroup>
+          <UButton
+              @click="createTime"
+              v-if="configTimeMode === 'create'"
+          >
+            Erstellen
+          </UButton>
+          <UButton
+              @click="updateTime"
+              v-else-if="configTimeMode === 'edit'"
+          >
+            Speichern
+          </UButton>
+          <UButton
+              @click="setState('Eingereicht')"
+              v-if="itemInfo.state === 'Entwurf'"
+          >
+            Einreichen
+          </UButton>
+        </InputGroup>
+
+      </template>
+    </UCard>
+  </UModal>
+
+  <UDashboardPanelContent class="w-full" v-if="platform === 'mobile'">
+    <a
+        v-for="item in filteredRows"
+        class="my-1"
+    >
+      <p class="truncate text-left text-primary text-xl">{{dayjs(item.startDate).format("DD.MM.YYYY HH:mm")}} - {{dayjs(item.endDate).format("HH:mm")}}</p>
+      <p class="text-sm">
+        <span v-for="(i,index) in getSecondInfo(item)">
+          {{i}}{{index < getSecondInfo(item).length - 1 ? " - " : ""}}
+        </span>
+
+      </p>
+    </a>
+  </UDashboardPanelContent>
+
+
+  <UTable
+      v-else
+      class="mt-3"
+      :columns="columns"
+      :rows="filteredRows"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+      @select="(row) => openTime(row)"
+  >
+    <template #state-data="{row}">
+                <span
+                    v-if="row.state === 'Entwurf'"
+                    class="text-rose-500"
+                >{{row.state}}</span>
+      <span
+          v-if="row.state === 'Eingereicht'"
+          class="text-cyan-500"
+      >{{row.state}}</span>
+      <span
+          v-if="row.state === 'Bestätigt'"
+          class="text-primary-500"
+      >{{row.state}}</span>
+    </template>
+    <template #user-data="{row}">
+      {{row.profile ? row.profile.fullName : "" }}
+    </template>
+
+    <template #startDate-data="{row}">
+      {{dayjs(row.startDate).format("DD.MM.YY HH:mm")}}
+    </template>
+    <template #endDate-data="{row}">
+      {{dayjs(row.endDate).format("DD.MM.YY HH:mm")}}
+    </template>
+    <template #project-data="{row}">
+      {{row.project ? row.project.name : "" }}
+    </template>
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/pages/workflows/[token].vue b/frontend/pages/workflows/[token].vue
new file mode 100644
index 0000000..80b1697
--- /dev/null
+++ b/frontend/pages/workflows/[token].vue
@@ -0,0 +1,121 @@
+<script setup>
+definePageMeta({
+  layout: 'blank', // Kein Menü, keine Sidebar
+  middleware: [], // Keine Auth-Checks durch Nuxt
+  auth: false     // Falls du das nuxt-auth Modul nutzt
+})
+
+const route = useRoute()
+const token = route.params.token
+const { $api } = useNuxtApp() // Dein Fetch-Wrapper
+const toast = useToast()
+
+// States
+const status = ref('loading') // loading, pin_required, ready, error, success
+const pin = ref('')
+const context = ref(null)
+const errorMsg = ref('')
+
+// Daten laden
+const loadContext = async () => {
+  status.value = 'loading'
+  errorMsg.value = ''
+
+  try {
+    const headers = {}
+    if (pin.value) headers['x-public-pin'] = pin.value
+
+    // Abruf an dein Fastify Backend
+    // Pfad evtl. anpassen, wenn du Proxy nutzt
+    const res = await $fetch(`http://localhost:3100/workflows/context/${token}`, { headers })
+
+    context.value = res
+    status.value = 'ready'
+  } catch (err) {
+    if (err.statusCode === 401) {
+      status.value = 'pin_required' // PIN nötig (aber noch keine eingegeben)
+    } else if (err.statusCode === 403) {
+      status.value = 'pin_required'
+      errorMsg.value = 'Falsche PIN'
+      pin.value = ''
+    } else {
+      status.value = 'error'
+      errorMsg.value = 'Link ungültig oder abgelaufen.'
+    }
+  }
+}
+
+// Initialer Aufruf
+onMounted(() => {
+  loadContext()
+})
+
+const handlePinSubmit = () => {
+  if (pin.value.length >= 4) loadContext()
+}
+
+const handleFormSuccess = () => {
+  status.value = 'success'
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4 font-sans">
+
+    <div v-if="status === 'loading'" class="text-center">
+      <UIcon name="i-heroicons-arrow-path" class="w-10 h-10 animate-spin text-primary-500 mx-auto" />
+      <p class="mt-4 text-gray-500">Lade Formular...</p>
+    </div>
+
+    <UCard v-else-if="status === 'error'" class="w-full max-w-md border-red-200">
+      <div class="text-center text-red-600 space-y-2">
+        <UIcon name="i-heroicons-exclamation-circle" class="w-12 h-12 mx-auto" />
+        <h3 class="font-bold text-lg">Fehler</h3>
+        <p>{{ errorMsg }}</p>
+      </div>
+    </UCard>
+
+    <UCard v-else-if="status === 'pin_required'" class="w-full max-w-sm shadow-xl">
+      <div class="text-center mb-6">
+        <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
+          <UIcon name="i-heroicons-lock-closed" class="w-6 h-6 text-primary-600" />
+        </div>
+        <h2 class="text-xl font-bold text-gray-900">Geschützter Bereich</h2>
+        <p class="text-sm text-gray-500">Bitte PIN eingeben</p>
+      </div>
+
+      <form @submit.prevent="handlePinSubmit" class="space-y-4">
+        <UInput
+            v-model="pin"
+            type="password"
+            placeholder="PIN"
+            input-class="text-center text-lg tracking-widest"
+            autofocus
+            icon="i-heroicons-key"
+        />
+        <div v-if="errorMsg" class="text-red-500 text-xs text-center font-medium">{{ errorMsg }}</div>
+        <UButton type="submit" block label="Entsperren" size="lg" />
+      </form>
+    </UCard>
+
+    <UCard v-else-if="status === 'success'" class="w-full max-w-md text-center py-10">
+      <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+        <UIcon name="i-heroicons-check" class="w-8 h-8 text-green-600" />
+      </div>
+      <h2 class="text-2xl font-bold text-gray-900 mb-2">Gespeichert!</h2>
+      <p class="text-gray-500 mb-6">Die Daten wurden erfolgreich übertragen.</p>
+      <UButton variant="outline" @click="() => window.location.reload()">Neuen Eintrag erfassen</UButton>
+    </UCard>
+
+    <div v-else-if="status === 'ready'" class="w-full max-w-lg">
+      <PublicDynamicForm
+          v-if="context && token"
+          :context="context"
+          :token="token"
+          :pin="pin"
+          @success="handleFormSuccess"
+      />
+    </div>
+
+  </div>
+</template>
\ No newline at end of file
diff --git a/frontend/plugins/api.ts b/frontend/plugins/api.ts
new file mode 100644
index 0000000..62fca69
--- /dev/null
+++ b/frontend/plugins/api.ts
@@ -0,0 +1,35 @@
+import {Preferences} from "@capacitor/preferences";
+
+export default defineNuxtPlugin(() => {
+    const config = useRuntimeConfig()
+
+    const api = $fetch.create({
+        baseURL: config.public.apiBase,
+        credentials: "include",
+        async onRequest({options}) {
+            // Token aus Cookie holen
+            let token: string | null | undefined = ""
+            if (useCapacitor().getIsNative()) {
+                const {value} = await Preferences.get({key: 'token'});
+                token = value
+            } else {
+                token = useCookie("token").value
+            }
+
+
+            // Falls im Request explizit ein anderer JWT übergeben wird → diesen verwenden
+            if (options.context && (options.context as any).jwt) {
+                token = (options.context as any).jwt
+            }
+
+            if (token) {
+                options.headers = {
+                    ...options.headers,
+                    Authorization: `Bearer ${token}`,
+                }
+            }
+        }
+    })
+
+    return { provide: { api } }
+})
\ No newline at end of file
diff --git a/frontend/plugins/auth-init.client.ts b/frontend/plugins/auth-init.client.ts
new file mode 100644
index 0000000..6eedbe0
--- /dev/null
+++ b/frontend/plugins/auth-init.client.ts
@@ -0,0 +1,9 @@
+export default defineNuxtPlugin(async () => {
+    const auth = useAuthStore()
+
+    console.log("Auth init")
+
+    await auth.initStore()
+
+
+})
\ No newline at end of file
diff --git a/frontend/plugins/chartjs.ts b/frontend/plugins/chartjs.ts
new file mode 100644
index 0000000..328257c
--- /dev/null
+++ b/frontend/plugins/chartjs.ts
@@ -0,0 +1,4 @@
+import { Chart, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement } from 'chart.js'
+export default defineNuxtPlugin(() => {
+    Chart.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement)
+})
\ No newline at end of file
diff --git a/frontend/plugins/dayjs.ts b/frontend/plugins/dayjs.ts
new file mode 100644
index 0000000..723c115
--- /dev/null
+++ b/frontend/plugins/dayjs.ts
@@ -0,0 +1,14 @@
+import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import 'dayjs/locale/de'
+
+dayjs.extend(duration)
+dayjs.extend(relativeTime)
+dayjs.extend(localizedFormat)
+dayjs.locale('de')
+
+export default defineNuxtPlugin(() => {
+    return { provide: { dayjs } }
+})
\ No newline at end of file
diff --git a/frontend/plugins/vue-draggable.client.js b/frontend/plugins/vue-draggable.client.js
new file mode 100644
index 0000000..583fcf3
--- /dev/null
+++ b/frontend/plugins/vue-draggable.client.js
@@ -0,0 +1,5 @@
+import draggable from 'vuedraggable'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.component('draggable', draggable);
+})
\ No newline at end of file
diff --git a/frontend/public/Briefpapier.pdf b/frontend/public/Briefpapier.pdf
new file mode 100644
index 0000000..647cec4
Binary files /dev/null and b/frontend/public/Briefpapier.pdf differ
diff --git a/frontend/public/Logo.png b/frontend/public/Logo.png
new file mode 100644
index 0000000..b44de7f
Binary files /dev/null and b/frontend/public/Logo.png differ
diff --git a/frontend/public/Logo_Dark.png b/frontend/public/Logo_Dark.png
new file mode 100644
index 0000000..24b06a4
Binary files /dev/null and b/frontend/public/Logo_Dark.png differ
diff --git a/frontend/public/Logo_Dunkel_Weihnachten.png b/frontend/public/Logo_Dunkel_Weihnachten.png
new file mode 100644
index 0000000..4ba2ed1
Binary files /dev/null and b/frontend/public/Logo_Dunkel_Weihnachten.png differ
diff --git a/frontend/public/Logo_Hell_Weihnachten.png b/frontend/public/Logo_Hell_Weihnachten.png
new file mode 100644
index 0000000..cec1351
Binary files /dev/null and b/frontend/public/Logo_Hell_Weihnachten.png differ
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
new file mode 100644
index 0000000..057922d
Binary files /dev/null and b/frontend/public/favicon.ico differ
diff --git a/frontend/public/icon.png b/frontend/public/icon.png
new file mode 100644
index 0000000..afcf808
Binary files /dev/null and b/frontend/public/icon.png differ
diff --git a/frontend/public/spaces.svg b/frontend/public/spaces.svg
new file mode 100644
index 0000000..ddb3ad9
--- /dev/null
+++ b/frontend/public/spaces.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" zoomAndPan="magnify" viewBox="0 0 375 374.999991" height="500" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/></defs><g fill="#ffffff" fill-opacity="1"><g transform="translate(106.647191, 199.675084)"><g><path d="M 15.15625 -28.28125 C 16.726562 -28.28125 18.28125 -28.097656 19.8125 -27.734375 C 21.351562 -27.378906 22.5 -27.023438 23.25 -26.671875 L 24.375 -26.140625 L 21.265625 -19.921875 C 19.117188 -21.066406 17.082031 -21.640625 15.15625 -21.640625 C 14.082031 -21.640625 13.320312 -21.519531 12.875 -21.28125 C 12.4375 -21.050781 12.21875 -20.617188 12.21875 -19.984375 C 12.21875 -19.835938 12.234375 -19.691406 12.265625 -19.546875 C 12.296875 -19.410156 12.363281 -19.28125 12.46875 -19.15625 C 12.582031 -19.03125 12.679688 -18.921875 12.765625 -18.828125 C 12.859375 -18.734375 13.007812 -18.632812 13.21875 -18.53125 C 13.4375 -18.425781 13.609375 -18.347656 13.734375 -18.296875 C 13.859375 -18.242188 14.0625 -18.160156 14.34375 -18.046875 C 14.632812 -17.941406 14.851562 -17.863281 15 -17.8125 C 15.144531 -17.757812 15.382812 -17.675781 15.71875 -17.5625 C 16.0625 -17.457031 16.320312 -17.390625 16.5 -17.359375 C 17.601562 -17.035156 18.566406 -16.675781 19.390625 -16.28125 C 20.210938 -15.882812 21.078125 -15.347656 21.984375 -14.671875 C 22.898438 -13.992188 23.609375 -13.132812 24.109375 -12.09375 C 24.609375 -11.0625 24.859375 -9.882812 24.859375 -8.5625 C 24.859375 -2.320312 20.519531 0.796875 11.84375 0.796875 C 9.875 0.796875 8.003906 0.492188 6.234375 -0.109375 C 4.472656 -0.710938 3.195312 -1.316406 2.40625 -1.921875 L 1.234375 -2.890625 L 5.09375 -9.375 C 5.375 -9.125 5.742188 -8.828125 6.203125 -8.484375 C 6.671875 -8.148438 7.507812 -7.6875 8.71875 -7.09375 C 9.9375 -6.507812 10.992188 -6.21875 11.890625 -6.21875 C 13.859375 -6.21875 14.84375 -6.875 14.84375 -8.1875 C 14.84375 -8.800781 14.59375 -9.273438 14.09375 -9.609375 C 13.59375 -9.953125 12.742188 -10.335938 11.546875 -10.765625 C 10.347656 -11.191406 9.410156 -11.582031 8.734375 -11.9375 C 7.015625 -12.832031 5.65625 -13.84375 4.65625 -14.96875 C 3.65625 -16.09375 3.15625 -17.582031 3.15625 -19.4375 C 3.15625 -22.226562 4.234375 -24.398438 6.390625 -25.953125 C 8.554688 -27.503906 11.476562 -28.28125 15.15625 -28.28125 Z M 15.15625 -28.28125 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(128.442193, 199.675084)"><g><path d="M 31.484375 -24.078125 C 34.054688 -21.273438 35.34375 -17.835938 35.34375 -13.765625 C 35.34375 -9.691406 34.054688 -6.242188 31.484375 -3.421875 C 28.921875 -0.609375 25.65625 0.796875 21.6875 0.796875 C 18.050781 0.796875 15.050781 -0.34375 12.6875 -2.625 L 12.6875 13.921875 L 3.21875 13.921875 L 3.21875 -27.484375 L 12.59375 -27.484375 L 12.59375 -24.375 L 12.6875 -24.375 C 15.050781 -26.976562 18.050781 -28.28125 21.6875 -28.28125 C 25.65625 -28.28125 28.921875 -26.878906 31.484375 -24.078125 Z M 23.421875 -9.09375 C 24.660156 -10.3125 25.28125 -11.867188 25.28125 -13.765625 C 25.28125 -15.660156 24.691406 -17.203125 23.515625 -18.390625 C 22.335938 -19.585938 20.785156 -20.1875 18.859375 -20.1875 C 16.992188 -20.1875 15.460938 -19.578125 14.265625 -18.359375 C 13.078125 -17.148438 12.484375 -15.617188 12.484375 -13.765625 C 12.484375 -11.867188 13.097656 -10.3125 14.328125 -9.09375 C 15.554688 -7.882812 17.066406 -7.28125 18.859375 -7.28125 C 20.671875 -7.28125 22.191406 -7.882812 23.421875 -9.09375 Z M 23.421875 -9.09375 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(160.465938, 199.675084)"><g><path d="M 5.078125 -3.40625 C 2.515625 -6.207031 1.234375 -9.640625 1.234375 -13.703125 C 1.234375 -17.773438 2.515625 -21.222656 5.078125 -24.046875 C 7.648438 -26.867188 10.921875 -28.28125 14.890625 -28.28125 C 18.535156 -28.28125 21.535156 -27.140625 23.890625 -24.859375 L 23.890625 -27.484375 L 33.375 -27.484375 L 33.375 0 L 24 0 L 24 -3.109375 L 23.890625 -3.109375 C 21.535156 -0.503906 18.535156 0.796875 14.890625 0.796875 C 10.921875 0.796875 7.648438 -0.601562 5.078125 -3.40625 Z M 13.140625 -18.359375 C 11.910156 -17.148438 11.296875 -15.597656 11.296875 -13.703125 C 11.296875 -11.816406 11.882812 -10.273438 13.0625 -9.078125 C 14.25 -7.878906 15.804688 -7.28125 17.734375 -7.28125 C 19.585938 -7.28125 21.113281 -7.882812 22.3125 -9.09375 C 23.507812 -10.3125 24.109375 -11.851562 24.109375 -13.71875 C 24.109375 -15.601562 23.488281 -17.148438 22.25 -18.359375 C 21.019531 -19.578125 19.515625 -20.1875 17.734375 -20.1875 C 15.910156 -20.1875 14.378906 -19.578125 13.140625 -18.359375 Z M 13.140625 -18.359375 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(192.489683, 199.675084)"><g><path d="M 17.84375 -20.515625 C 16.050781 -20.515625 14.507812 -19.851562 13.21875 -18.53125 C 11.9375 -17.207031 11.296875 -15.617188 11.296875 -13.765625 C 11.296875 -11.867188 11.9375 -10.257812 13.21875 -8.9375 C 14.507812 -7.625 16.050781 -6.96875 17.84375 -6.96875 C 18.695312 -6.96875 19.503906 -7.070312 20.265625 -7.28125 C 21.035156 -7.5 21.597656 -7.710938 21.953125 -7.921875 L 22.4375 -8.25 L 25.65625 -1.65625 C 25.40625 -1.476562 25.054688 -1.253906 24.609375 -0.984375 C 24.160156 -0.722656 23.140625 -0.363281 21.546875 0.09375 C 19.960938 0.5625 18.257812 0.796875 16.4375 0.796875 C 12.40625 0.796875 8.863281 -0.617188 5.8125 -3.453125 C 2.757812 -6.296875 1.234375 -9.695312 1.234375 -13.65625 C 1.234375 -17.65625 2.757812 -21.09375 5.8125 -23.96875 C 8.863281 -26.84375 12.40625 -28.28125 16.4375 -28.28125 C 18.257812 -28.28125 19.9375 -28.066406 21.46875 -27.640625 C 23.007812 -27.210938 24.101562 -26.785156 24.75 -26.359375 L 25.65625 -25.703125 L 22.4375 -19.234375 C 21.257812 -20.085938 19.726562 -20.515625 17.84375 -20.515625 Z M 17.84375 -20.515625 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(214.231131, 199.675084)"><g><path d="M 31.015625 -12.421875 L 11.09375 -12.421875 C 11.09375 -10.492188 11.71875 -9.066406 12.96875 -8.140625 C 14.21875 -7.210938 15.570312 -6.75 17.03125 -6.75 C 18.570312 -6.75 19.785156 -6.953125 20.671875 -7.359375 C 21.566406 -7.773438 22.585938 -8.585938 23.734375 -9.796875 L 30.578125 -6.375 C 27.722656 -1.59375 22.976562 0.796875 16.34375 0.796875 C 12.195312 0.796875 8.640625 -0.617188 5.671875 -3.453125 C 2.710938 -6.296875 1.234375 -9.71875 1.234375 -13.71875 C 1.234375 -17.71875 2.710938 -21.144531 5.671875 -24 C 8.640625 -26.851562 12.195312 -28.28125 16.34375 -28.28125 C 20.695312 -28.28125 24.238281 -27.019531 26.96875 -24.5 C 29.695312 -21.988281 31.0625 -18.394531 31.0625 -13.71875 C 31.0625 -13.070312 31.046875 -12.640625 31.015625 -12.421875 Z M 11.359375 -17.671875 L 21.796875 -17.671875 C 21.585938 -19.097656 21.023438 -20.195312 20.109375 -20.96875 C 19.203125 -21.738281 18.035156 -22.125 16.609375 -22.125 C 15.035156 -22.125 13.785156 -21.710938 12.859375 -20.890625 C 11.929688 -20.066406 11.429688 -18.992188 11.359375 -17.671875 Z M 11.359375 -17.671875 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(241.970582, 199.675084)"><g><path d="M 15.15625 -28.28125 C 16.726562 -28.28125 18.28125 -28.097656 19.8125 -27.734375 C 21.351562 -27.378906 22.5 -27.023438 23.25 -26.671875 L 24.375 -26.140625 L 21.265625 -19.921875 C 19.117188 -21.066406 17.082031 -21.640625 15.15625 -21.640625 C 14.082031 -21.640625 13.320312 -21.519531 12.875 -21.28125 C 12.4375 -21.050781 12.21875 -20.617188 12.21875 -19.984375 C 12.21875 -19.835938 12.234375 -19.691406 12.265625 -19.546875 C 12.296875 -19.410156 12.363281 -19.28125 12.46875 -19.15625 C 12.582031 -19.03125 12.679688 -18.921875 12.765625 -18.828125 C 12.859375 -18.734375 13.007812 -18.632812 13.21875 -18.53125 C 13.4375 -18.425781 13.609375 -18.347656 13.734375 -18.296875 C 13.859375 -18.242188 14.0625 -18.160156 14.34375 -18.046875 C 14.632812 -17.941406 14.851562 -17.863281 15 -17.8125 C 15.144531 -17.757812 15.382812 -17.675781 15.71875 -17.5625 C 16.0625 -17.457031 16.320312 -17.390625 16.5 -17.359375 C 17.601562 -17.035156 18.566406 -16.675781 19.390625 -16.28125 C 20.210938 -15.882812 21.078125 -15.347656 21.984375 -14.671875 C 22.898438 -13.992188 23.609375 -13.132812 24.109375 -12.09375 C 24.609375 -11.0625 24.859375 -9.882812 24.859375 -8.5625 C 24.859375 -2.320312 20.519531 0.796875 11.84375 0.796875 C 9.875 0.796875 8.003906 0.492188 6.234375 -0.109375 C 4.472656 -0.710938 3.195312 -1.316406 2.40625 -1.921875 L 1.234375 -2.890625 L 5.09375 -9.375 C 5.375 -9.125 5.742188 -8.828125 6.203125 -8.484375 C 6.671875 -8.148438 7.507812 -7.6875 8.71875 -7.09375 C 9.9375 -6.507812 10.992188 -6.21875 11.890625 -6.21875 C 13.859375 -6.21875 14.84375 -6.875 14.84375 -8.1875 C 14.84375 -8.800781 14.59375 -9.273438 14.09375 -9.609375 C 13.59375 -9.953125 12.742188 -10.335938 11.546875 -10.765625 C 10.347656 -11.191406 9.410156 -11.582031 8.734375 -11.9375 C 7.015625 -12.832031 5.65625 -13.84375 4.65625 -14.96875 C 3.65625 -16.09375 3.15625 -17.582031 3.15625 -19.4375 C 3.15625 -22.226562 4.234375 -24.398438 6.390625 -25.953125 C 8.554688 -27.503906 11.476562 -28.28125 15.15625 -28.28125 Z M 15.15625 -28.28125 "/></g></g></g><path stroke-linecap="butt" transform="matrix(0.75, 0, 0, 0.75, 90.574247, 228.073139)" fill="none" stroke-linejoin="miter" d="M -0.0000370697 5.001439 L 84.43226 5.001439 " stroke="#69c350" stroke-width="10" stroke-opacity="1" stroke-miterlimit="4"/><path stroke-linecap="butt" transform="matrix(0, 0.75, -0.75, 0, 98.070394, 171.479446)" fill="none" stroke-linejoin="miter" d="M 0.00136321 5.000109 L 82.46491 5.000109 " stroke="#69c350" stroke-width="10" stroke-opacity="1" stroke-miterlimit="4"/><path stroke-linecap="butt" transform="matrix(-0.75, 0, 0, -0.75, 283.487477, 146.919146)" fill="none" stroke-linejoin="miter" d="M -0.00107222 5.00157 L 84.431225 5.00157 " stroke="#69c350" stroke-width="10" stroke-opacity="1" stroke-miterlimit="4"/><path stroke-linecap="butt" transform="matrix(0, -0.75, 0.75, 0, 275.991344, 203.512837)" fill="none" stroke-linejoin="miter" d="M 0.00149105 5.001125 L 82.465038 5.001125 " stroke="#69c350" stroke-width="10" stroke-opacity="1" stroke-miterlimit="4"/></svg>
\ No newline at end of file
diff --git a/frontend/public/spaces_hell.svg b/frontend/public/spaces_hell.svg
new file mode 100644
index 0000000..17286fa
--- /dev/null
+++ b/frontend/public/spaces_hell.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" zoomAndPan="magnify" viewBox="0 0 375 374.999991" height="500" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/></defs><g fill="#000000" fill-opacity="1"><g transform="translate(106.647191, 199.675084)"><g><path d="M 15.15625 -28.28125 C 16.726562 -28.28125 18.28125 -28.097656 19.8125 -27.734375 C 21.351562 -27.378906 22.5 -27.023438 23.25 -26.671875 L 24.375 -26.140625 L 21.265625 -19.921875 C 19.117188 -21.066406 17.082031 -21.640625 15.15625 -21.640625 C 14.082031 -21.640625 13.320312 -21.519531 12.875 -21.28125 C 12.4375 -21.050781 12.21875 -20.617188 12.21875 -19.984375 C 12.21875 -19.835938 12.234375 -19.691406 12.265625 -19.546875 C 12.296875 -19.410156 12.363281 -19.28125 12.46875 -19.15625 C 12.582031 -19.03125 12.679688 -18.921875 12.765625 -18.828125 C 12.859375 -18.734375 13.007812 -18.632812 13.21875 -18.53125 C 13.4375 -18.425781 13.609375 -18.347656 13.734375 -18.296875 C 13.859375 -18.242188 14.0625 -18.160156 14.34375 -18.046875 C 14.632812 -17.941406 14.851562 -17.863281 15 -17.8125 C 15.144531 -17.757812 15.382812 -17.675781 15.71875 -17.5625 C 16.0625 -17.457031 16.320312 -17.390625 16.5 -17.359375 C 17.601562 -17.035156 18.566406 -16.675781 19.390625 -16.28125 C 20.210938 -15.882812 21.078125 -15.347656 21.984375 -14.671875 C 22.898438 -13.992188 23.609375 -13.132812 24.109375 -12.09375 C 24.609375 -11.0625 24.859375 -9.882812 24.859375 -8.5625 C 24.859375 -2.320312 20.519531 0.796875 11.84375 0.796875 C 9.875 0.796875 8.003906 0.492188 6.234375 -0.109375 C 4.472656 -0.710938 3.195312 -1.316406 2.40625 -1.921875 L 1.234375 -2.890625 L 5.09375 -9.375 C 5.375 -9.125 5.742188 -8.828125 6.203125 -8.484375 C 6.671875 -8.148438 7.507812 -7.6875 8.71875 -7.09375 C 9.9375 -6.507812 10.992188 -6.21875 11.890625 -6.21875 C 13.859375 -6.21875 14.84375 -6.875 14.84375 -8.1875 C 14.84375 -8.800781 14.59375 -9.273438 14.09375 -9.609375 C 13.59375 -9.953125 12.742188 -10.335938 11.546875 -10.765625 C 10.347656 -11.191406 9.410156 -11.582031 8.734375 -11.9375 C 7.015625 -12.832031 5.65625 -13.84375 4.65625 -14.96875 C 3.65625 -16.09375 3.15625 -17.582031 3.15625 -19.4375 C 3.15625 -22.226562 4.234375 -24.398438 6.390625 -25.953125 C 8.554688 -27.503906 11.476562 -28.28125 15.15625 -28.28125 Z M 15.15625 -28.28125 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(128.442193, 199.675084)"><g><path d="M 31.484375 -24.078125 C 34.054688 -21.273438 35.34375 -17.835938 35.34375 -13.765625 C 35.34375 -9.691406 34.054688 -6.242188 31.484375 -3.421875 C 28.921875 -0.609375 25.65625 0.796875 21.6875 0.796875 C 18.050781 0.796875 15.050781 -0.34375 12.6875 -2.625 L 12.6875 13.921875 L 3.21875 13.921875 L 3.21875 -27.484375 L 12.59375 -27.484375 L 12.59375 -24.375 L 12.6875 -24.375 C 15.050781 -26.976562 18.050781 -28.28125 21.6875 -28.28125 C 25.65625 -28.28125 28.921875 -26.878906 31.484375 -24.078125 Z M 23.421875 -9.09375 C 24.660156 -10.3125 25.28125 -11.867188 25.28125 -13.765625 C 25.28125 -15.660156 24.691406 -17.203125 23.515625 -18.390625 C 22.335938 -19.585938 20.785156 -20.1875 18.859375 -20.1875 C 16.992188 -20.1875 15.460938 -19.578125 14.265625 -18.359375 C 13.078125 -17.148438 12.484375 -15.617188 12.484375 -13.765625 C 12.484375 -11.867188 13.097656 -10.3125 14.328125 -9.09375 C 15.554688 -7.882812 17.066406 -7.28125 18.859375 -7.28125 C 20.671875 -7.28125 22.191406 -7.882812 23.421875 -9.09375 Z M 23.421875 -9.09375 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(160.465938, 199.675084)"><g><path d="M 5.078125 -3.40625 C 2.515625 -6.207031 1.234375 -9.640625 1.234375 -13.703125 C 1.234375 -17.773438 2.515625 -21.222656 5.078125 -24.046875 C 7.648438 -26.867188 10.921875 -28.28125 14.890625 -28.28125 C 18.535156 -28.28125 21.535156 -27.140625 23.890625 -24.859375 L 23.890625 -27.484375 L 33.375 -27.484375 L 33.375 0 L 24 0 L 24 -3.109375 L 23.890625 -3.109375 C 21.535156 -0.503906 18.535156 0.796875 14.890625 0.796875 C 10.921875 0.796875 7.648438 -0.601562 5.078125 -3.40625 Z M 13.140625 -18.359375 C 11.910156 -17.148438 11.296875 -15.597656 11.296875 -13.703125 C 11.296875 -11.816406 11.882812 -10.273438 13.0625 -9.078125 C 14.25 -7.878906 15.804688 -7.28125 17.734375 -7.28125 C 19.585938 -7.28125 21.113281 -7.882812 22.3125 -9.09375 C 23.507812 -10.3125 24.109375 -11.851562 24.109375 -13.71875 C 24.109375 -15.601562 23.488281 -17.148438 22.25 -18.359375 C 21.019531 -19.578125 19.515625 -20.1875 17.734375 -20.1875 C 15.910156 -20.1875 14.378906 -19.578125 13.140625 -18.359375 Z M 13.140625 -18.359375 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(192.489683, 199.675084)"><g><path d="M 17.84375 -20.515625 C 16.050781 -20.515625 14.507812 -19.851562 13.21875 -18.53125 C 11.9375 -17.207031 11.296875 -15.617188 11.296875 -13.765625 C 11.296875 -11.867188 11.9375 -10.257812 13.21875 -8.9375 C 14.507812 -7.625 16.050781 -6.96875 17.84375 -6.96875 C 18.695312 -6.96875 19.503906 -7.070312 20.265625 -7.28125 C 21.035156 -7.5 21.597656 -7.710938 21.953125 -7.921875 L 22.4375 -8.25 L 25.65625 -1.65625 C 25.40625 -1.476562 25.054688 -1.253906 24.609375 -0.984375 C 24.160156 -0.722656 23.140625 -0.363281 21.546875 0.09375 C 19.960938 0.5625 18.257812 0.796875 16.4375 0.796875 C 12.40625 0.796875 8.863281 -0.617188 5.8125 -3.453125 C 2.757812 -6.296875 1.234375 -9.695312 1.234375 -13.65625 C 1.234375 -17.65625 2.757812 -21.09375 5.8125 -23.96875 C 8.863281 -26.84375 12.40625 -28.28125 16.4375 -28.28125 C 18.257812 -28.28125 19.9375 -28.066406 21.46875 -27.640625 C 23.007812 -27.210938 24.101562 -26.785156 24.75 -26.359375 L 25.65625 -25.703125 L 22.4375 -19.234375 C 21.257812 -20.085938 19.726562 -20.515625 17.84375 -20.515625 Z M 17.84375 -20.515625 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(214.231131, 199.675084)"><g><path d="M 31.015625 -12.421875 L 11.09375 -12.421875 C 11.09375 -10.492188 11.71875 -9.066406 12.96875 -8.140625 C 14.21875 -7.210938 15.570312 -6.75 17.03125 -6.75 C 18.570312 -6.75 19.785156 -6.953125 20.671875 -7.359375 C 21.566406 -7.773438 22.585938 -8.585938 23.734375 -9.796875 L 30.578125 -6.375 C 27.722656 -1.59375 22.976562 0.796875 16.34375 0.796875 C 12.195312 0.796875 8.640625 -0.617188 5.671875 -3.453125 C 2.710938 -6.296875 1.234375 -9.71875 1.234375 -13.71875 C 1.234375 -17.71875 2.710938 -21.144531 5.671875 -24 C 8.640625 -26.851562 12.195312 -28.28125 16.34375 -28.28125 C 20.695312 -28.28125 24.238281 -27.019531 26.96875 -24.5 C 29.695312 -21.988281 31.0625 -18.394531 31.0625 -13.71875 C 31.0625 -13.070312 31.046875 -12.640625 31.015625 -12.421875 Z M 11.359375 -17.671875 L 21.796875 -17.671875 C 21.585938 -19.097656 21.023438 -20.195312 20.109375 -20.96875 C 19.203125 -21.738281 18.035156 -22.125 16.609375 -22.125 C 15.035156 -22.125 13.785156 -21.710938 12.859375 -20.890625 C 11.929688 -20.066406 11.429688 -18.992188 11.359375 -17.671875 Z M 11.359375 -17.671875 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(241.970582, 199.675084)"><g><path d="M 15.15625 -28.28125 C 16.726562 -28.28125 18.28125 -28.097656 19.8125 -27.734375 C 21.351562 -27.378906 22.5 -27.023438 23.25 -26.671875 L 24.375 -26.140625 L 21.265625 -19.921875 C 19.117188 -21.066406 17.082031 -21.640625 15.15625 -21.640625 C 14.082031 -21.640625 13.320312 -21.519531 12.875 -21.28125 C 12.4375 -21.050781 12.21875 -20.617188 12.21875 -19.984375 C 12.21875 -19.835938 12.234375 -19.691406 12.265625 -19.546875 C 12.296875 -19.410156 12.363281 -19.28125 12.46875 -19.15625 C 12.582031 -19.03125 12.679688 -18.921875 12.765625 -18.828125 C 12.859375 -18.734375 13.007812 -18.632812 13.21875 -18.53125 C 13.4375 -18.425781 13.609375 -18.347656 13.734375 -18.296875 C 13.859375 -18.242188 14.0625 -18.160156 14.34375 -18.046875 C 14.632812 -17.941406 14.851562 -17.863281 15 -17.8125 C 15.144531 -17.757812 15.382812 -17.675781 15.71875 -17.5625 C 16.0625 -17.457031 16.320312 -17.390625 16.5 -17.359375 C 17.601562 -17.035156 18.566406 -16.675781 19.390625 -16.28125 C 20.210938 -15.882812 21.078125 -15.347656 21.984375 -14.671875 C 22.898438 -13.992188 23.609375 -13.132812 24.109375 -12.09375 C 24.609375 -11.0625 24.859375 -9.882812 24.859375 -8.5625 C 24.859375 -2.320312 20.519531 0.796875 11.84375 0.796875 C 9.875 0.796875 8.003906 0.492188 6.234375 -0.109375 C 4.472656 -0.710938 3.195312 -1.316406 2.40625 -1.921875 L 1.234375 -2.890625 L 5.09375 -9.375 C 5.375 -9.125 5.742188 -8.828125 6.203125 -8.484375 C 6.671875 -8.148438 7.507812 -7.6875 8.71875 -7.09375 C 9.9375 -6.507812 10.992188 -6.21875 11.890625 -6.21875 C 13.859375 -6.21875 14.84375 -6.875 14.84375 -8.1875 C 14.84375 -8.800781 14.59375 -9.273438 14.09375 -9.609375 C 13.59375 -9.953125 12.742188 -10.335938 11.546875 -10.765625 C 10.347656 -11.191406 9.410156 -11.582031 8.734375 -11.9375 C 7.015625 -12.832031 5.65625 -13.84375 4.65625 -14.96875 C 3.65625 -16.09375 3.15625 -17.582031 3.15625 -19.4375 C 3.15625 -22.226562 4.234375 -24.398438 6.390625 -25.953125 C 8.554688 -27.503906 11.476562 -28.28125 15.15625 -28.28125 Z M 15.15625 -28.28125 "/></g></g></g><path stroke-linecap="butt" transform="matrix(0.75, 0, 0, 0.75, 90.574247, 228.073139)" fill="none" stroke-linejoin="miter" d="M -0.0000370697 5.001439 L 84.43226 5.001439 " stroke="#69c350" stroke-width="10" stroke-opacity="1" stroke-miterlimit="4"/><path stroke-linecap="butt" transform="matrix(0, 0.75, -0.75, 0, 98.070394, 171.479446)" fill="none" stroke-linejoin="miter" d="M 0.00136321 5.000109 L 82.46491 5.000109 " stroke="#69c350" stroke-width="10" stroke-opacity="1" stroke-miterlimit="4"/><path stroke-linecap="butt" transform="matrix(-0.75, 0, 0, -0.75, 283.487477, 146.919146)" fill="none" stroke-linejoin="miter" d="M -0.00107222 5.00157 L 84.431225 5.00157 " stroke="#69c350" stroke-width="10" stroke-opacity="1" stroke-miterlimit="4"/><path stroke-linecap="butt" transform="matrix(0, -0.75, 0.75, 0, 275.991344, 203.512837)" fill="none" stroke-linejoin="miter" d="M 0.00149105 5.001125 L 82.465038 5.001125 " stroke="#69c350" stroke-width="10" stroke-opacity="1" stroke-miterlimit="4"/></svg>
\ No newline at end of file
diff --git a/frontend/public/umami.js b/frontend/public/umami.js
new file mode 100644
index 0000000..68b2b83
--- /dev/null
+++ b/frontend/public/umami.js
@@ -0,0 +1 @@
+!function(){"use strict";(t=>{const{screen:{width:e,height:a},navigator:{language:r},location:n,localStorage:i,document:c,history:o}=t,{hostname:s,href:u}=n,{currentScript:l,referrer:d}=c;if(!l)return;const f="data-",m=l.getAttribute.bind(l),h=m(f+"website-id"),p=m(f+"host-url"),g=m(f+"tag"),y="false"!==m(f+"auto-track"),b="true"===m(f+"exclude-search"),v=m(f+"domains")||"",S=v.split(",").map((t=>t.trim())),w=`${(p||""||l.src.split("/").slice(0,-1).join("/")).replace(/\/$/,"")}/api/send`,N=`${e}x${a}`,T=/data-umami-event-([\w-_]+)/,A=f+"umami-event",x=300,O=t=>{if(t){try{const e=decodeURI(t);if(e!==t)return e}catch(e){return t}return encodeURI(t)}},U=t=>{try{const{pathname:e,search:a}=new URL(t);t=e+a}catch(t){}return b?t.split("?")[0]:t},j=()=>({website:h,hostname:s,screen:N,language:r,title:O(q),url:O(D),referrer:O(_),tag:g||void 0}),k=(t,e,a)=>{a&&(_=D,D=U(a.toString()),D!==_&&setTimeout(I,x))},E=()=>!h||i&&i.getItem("umami.disabled")||v&&!S.includes(s),L=async(t,e="event")=>{if(E())return;const a={"Content-Type":"application/json"};void 0!==R&&(a["x-umami-cache"]=R);try{const r=await fetch(w,{method:"POST",body:JSON.stringify({type:e,payload:t}),headers:a}),n=await r.text();return R=n}catch(t){}},$=()=>{B||(I(),(()=>{const t=(t,e,a)=>{const r=t[e];return(...e)=>(a.apply(null,e),r.apply(t,e))};o.pushState=t(o,"pushState",k),o.replaceState=t(o,"replaceState",k)})(),(()=>{const t=new MutationObserver((([t])=>{q=t&&t.target?t.target.text:void 0})),e=c.querySelector("head > title");e&&t.observe(e,{subtree:!0,characterData:!0,childList:!0})})(),c.addEventListener("click",(async t=>{const e=t=>["BUTTON","A"].includes(t),a=async t=>{const e=t.getAttribute.bind(t),a=e(A);if(a){const r={};return t.getAttributeNames().forEach((t=>{const a=t.match(T);a&&(r[a[1]]=e(t))})),I(a,r)}},r=t.target,i=e(r.tagName)?r:((t,a)=>{let r=t;for(let t=0;t<a;t++){if(e(r.tagName))return r;if(r=r.parentElement,!r)return null}})(r,10);if(!i)return a(r);{const{href:e,target:r}=i,c=i.getAttribute(A);if(c)if("A"===i.tagName){const o="_blank"===r||t.ctrlKey||t.shiftKey||t.metaKey||t.button&&1===t.button;if(c&&e)return o||t.preventDefault(),a(i).then((()=>{o||(n.href=e)}))}else if("BUTTON"===i.tagName)return a(i)}}),!0),B=!0)},I=(t,e)=>L("string"==typeof t?{...j(),name:t,data:"object"==typeof e?e:void 0}:"object"==typeof t?t:"function"==typeof t?t(j()):j()),K=t=>L({...j(),data:t},"identify");t.umami||(t.umami={track:I,identify:K});let R,B,D=U(u),_=d!==s?d:"",q=c.title;y&&!E()&&("complete"===c.readyState?$():c.addEventListener("readystatechange",$,!0))})(window)}();
diff --git a/frontend/stores/auth.ts b/frontend/stores/auth.ts
new file mode 100644
index 0000000..f01f5ca
--- /dev/null
+++ b/frontend/stores/auth.ts
@@ -0,0 +1,168 @@
+import { defineStore } from "pinia"
+import router from "#app/plugins/router";
+import {Preferences} from "@capacitor/preferences";
+
+export const useAuthStore = defineStore("auth", {
+    state: () => ({
+        user: null as null | { user_id: string; email: string; tenant_id?: string; role?: string },
+        profile: null as null | any,
+        tenants: [] as { tenant_id: string; role: string; tenants: { id: string; name: string } }[],
+        permissions: [] as string[],
+        activeTenant: null as any,
+        activeTenantData: null as any,
+        loading: true as boolean,
+        notLoggedIn: true,
+    }),
+
+    actions: {
+        async persist(token) {
+            if(useCapacitor().getIsNative()) {
+                console.log("On Native")
+                await Preferences.set({
+                    key:"token",
+                    value: token,
+                })
+                useCookie("token").value = token // persistieren
+
+            } else {
+                console.log("On Web")
+                useCookie("token").value = token // persistieren
+
+            }
+        },
+
+        async initStore() {
+            console.log("Auth initStore")
+            await this.fetchMe()
+
+            if(this.activeTenant > 0) {
+                this.loading = false
+                if(useCapacitor().getIsNative()) {
+                    navigateTo("/mobile")
+                } else {
+                    navigateTo("/")
+                }
+            }
+        },
+
+        async init(token=null) {
+            console.log("Auth init")
+            await this.fetchMe(token)
+
+            const tempStore = useTempStore()
+
+            if(this.profile.temp_config) tempStore.setStoredTempConfig(this.profile.temp_config)
+            if(this.activeTenant > 0) {
+                this.loading = false
+                if(useCapacitor().getIsNative()) {
+                    navigateTo("/mobile")
+                } else {
+                    navigateTo("/")
+                }
+            }
+        },
+
+        async login(email: string, password: string) {
+            try {
+                console.log("Auth login")
+                const { token } = await useNuxtApp().$api("/auth/login", {
+                    method: "POST",
+                    body: { email, password }
+                })
+                console.log("Token: " + token)
+                await this.fetchMe(token)
+            } catch (e) {
+                console.log("login error:" + e)
+            }
+
+        },
+
+        async logout() {
+            console.log("Auth logout")
+            try {
+                await useNuxtApp().$api("/auth/logout", { method: "POST" })
+            } catch (e) {
+                console.error("Logout fehlgeschlagen:", e)
+            }
+            this.user = null
+            this.permissions = []
+            this.profile = null
+            this.activeTenant = null
+            this.tenants = []
+            if(useCapacitor().getIsNative()) {
+                await Preferences.remove({ key: 'token' });
+                useCookie("token").value = null
+            } else {
+                useCookie("token").value = null
+            }
+
+            navigateTo("/login")
+        },
+
+        async fetchMe(jwt= null) {
+            console.log("Auth fetchMe")
+            const tempStore = useTempStore()
+
+            try {
+                const me = await useNuxtApp().$api("/api/me", {
+                    headers: { Authorization: `Bearer ${jwt}`,
+                        context: {
+                            jwt
+                        }}
+                })
+                console.log(me)
+                this.user = me.user
+                this.permissions = me.permissions
+                this.tenants = me.tenants
+
+                this.tenants.sort(function (a, b) {
+                    if (a.id < b.id)  return -1
+                    if (a.id > b.id)  return 1
+                })
+
+                this.profile = me.profile
+
+                if(this.profile.temp_config) tempStore.setStoredTempConfig(this.profile.temp_config)
+
+                if(me.activeTenant > 0) {
+                    this.activeTenant = me.activeTenant
+                    this.activeTenantData = me.tenants.find(i => i.id === me.activeTenant)
+
+                } else {
+
+                }
+
+
+            } catch (err: any) {
+                if (err?.response?.status === 401) this.logout()
+            }
+        },
+
+        async switchTenant(tenant_id: string) {
+            console.log("Auth switchTenant")
+            this.loading = true
+            const res = await useNuxtApp().$api("/api/tenant/switch", {
+                method: "POST",
+                body: { tenant_id }
+            })
+            console.log(res)
+
+            const {token} = res
+
+            if(useCapacitor().getIsNative()) {
+                await Preferences.set({
+                    key:"token",
+                    value: token,
+                })
+            } else {
+                useCookie("token").value = token // persistieren
+
+            }
+            await this.init(token)
+        },
+
+        hasPermission(key: string) {
+            return this.permissions.includes(key)
+        }
+    }
+})
\ No newline at end of file
diff --git a/frontend/stores/data.js b/frontend/stores/data.js
new file mode 100644
index 0000000..a28952b
--- /dev/null
+++ b/frontend/stores/data.js
@@ -0,0 +1,2639 @@
+import {defineStore} from 'pinia'
+import dayjs from "dayjs"
+//import {typeOf} from "uri-js/dist/esnext/util";
+import {useNumberRange} from "~/composables/useNumberRange.js";
+
+
+import projecttype from "~/components/columnRenderings/projecttype.vue"
+import customer from "~/components/columnRenderings/customer.vue"
+import contact from "~/components/columnRenderings/contact.vue"
+import plant from "~/components/columnRenderings/plant.vue"
+import vendor from "~/components/columnRenderings/vendor.vue"
+import active from "~/components/columnRenderings/active.vue"
+import sellingPrice from "~/components/columnRenderings/sellingPrice.vue";
+import unit from "~/components/columnRenderings/unit.vue";
+import isCompany from "~/components/columnRenderings/isCompany.vue"
+import address from "~/components/columnRenderings/address.vue"
+import sepa from "~/components/columnRenderings/sepa.vue"
+import recurring from "~/components/columnRenderings/recurring.vue"
+import description from "~/components/columnRenderings/description.vue"
+import purchasePrice from "~/components/columnRenderings/purchasePrice.vue";
+import project from "~/components/columnRenderings/project.vue";
+import created_at from "~/components/columnRenderings/created_at.vue";
+import profile from "~/components/columnRenderings/profile.vue";
+import profiles from "~/components/columnRenderings/profiles.vue";
+import vehicle from "~/components/columnRenderings/vehicle.vue"
+import usePlanning from "~/components/columnRenderings/usePlanning.vue"
+import sellingPriceComposedMaterial from "~/components/columnRenderings/sellingPriceComposedMaterial.vue"
+import sellingPriceComposedWorker from "~/components/columnRenderings/sellingPriceComposedWorker.vue"
+import sellingPriceComposedTotal from "~/components/columnRenderings/sellingPriceComposedTotal.vue"
+import startDate from "~/components/columnRenderings/startDate.vue"
+import endDate from "~/components/columnRenderings/endDate.vue"
+import startDateTime from "~/components/columnRenderings/startDateTime.vue"
+import endDateTime from "~/components/columnRenderings/endDateTime.vue"
+import serviceCategories from "~/components/columnRenderings/serviceCategories.vue"
+import phase from "~/components/columnRenderings/phase.vue"
+import vehiclesWithLoad from "~/components/columnRenderings/vehiclesWithLoad.vue"
+import inventoryitemsWithLoad from "~/components/columnRenderings/inventoryitemsWithLoad.vue"
+import inventoryitemgroupsWithLoad from "~/components/columnRenderings/inventoryitemgroupsWithLoad.vue"
+import space from "~/components/columnRenderings/space.vue"
+import driver from "~/components/columnRenderings/driver.vue"
+
+import quantity from "~/components/helpRenderings/quantity.vue"
+import {useFunctions} from "~/composables/useFunctions.js";
+import signDate from "~/components/columnRenderings/signDate.vue";
+import sepaDate from "~/components/columnRenderings/sepaDate.vue";
+
+// @ts-ignore
+export const useDataStore = defineStore('data', () => {
+
+
+
+    const dataTypes = {
+        tasks: {
+            isArchivable: true,
+            label: "Aufgaben",
+            labelSingle: "Aufgabe",
+            isStandardEntity: true,
+            redirect: true,
+            historyItemHolder: "task",
+            supabaseSelectWithInformation: "*, plant(*), project(*), customer(*)",
+            filters: [
+                {
+                    name: "Nur Offene Aufgaben",
+                    default: true,
+                    "filterFunction": function (row) {
+                        if(row.categorie !== "Erledigt") {
+                            return true
+                        } else {
+                            return false
+                        }
+                    }
+                },{
+                    name: "Archivierte ausblenden",
+                    default: true,
+                    "filterFunction": function (row) {
+                        if(!row.archived) {
+                            return true
+                        } else {
+                            return false
+                        }
+                    }
+                }
+            ],
+            templateColumns: [
+                {
+                    key: "created_at",
+                    label: "Erstellt am",
+                    component: created_at,
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },{
+                    key: "name",
+                    label: "Name",
+                    title: true,
+                    required: true,
+                    inputType: "text",
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },{
+                    key: "categorie",
+                    label: "Kategorie",
+                    required: true,
+                    inputType: "select",
+                    selectValueAttribute: "label",
+                    selectManualOptions: [
+                        {label:"Offen"},
+                        {label:"In Bearbeitung"},
+                        {label:"Abgeschlossen"}
+                    ],
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },{
+                    key: "profile",
+                    label: "Mitarbeiter",
+                    component: profile,
+                    inputType: "select",
+                    selectDataType: "profiles",
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                    inputColumn: "Zuweisungen"
+                },{
+                    key: "project",
+                    label: "Projekt",
+                    component: project,
+                    inputType: "select",
+                    selectDataType: "projects",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    inputColumn: "Zuweisungen"
+                },{
+                    key: "customer",
+                    label: "Kunde",
+                    component: customer,
+                    inputType: "select",
+                    selectDataType: "customers",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    inputColumn: "Zuweisungen"
+                },{
+                    key: "plant",
+                    label: "Objekt",
+                    component: plant,
+                    inputType: "select",
+                    selectDataType: "plants",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    inputColumn: "Zuweisungen"
+                },{
+                    key: "description",
+                    label: "Beschreibung",
+                    inputColumn: "Allgemeines"
+                },
+            ],
+            inputColumns: [
+                "Allgemeines",
+                "Zuweisungen"
+            ],
+            showTabs: [{label: 'Informationen'}]
+        },
+        customers: {
+            isArchivable: true,
+            label: "Kunden",
+            labelSingle: "Kunde",
+            isStandardEntity: true,
+            redirect:true,
+            numberRangeHolder: "customerNumber",
+            historyItemHolder: "customer",
+            supabaseSortColumn: "customerNumber",
+            supabaseSelectWithInformation: "*, projects(*), plants(*), contracts(*), contacts(*), createddocuments(*, statementallocations(*)), files(*), events(*)",
+            filters: [{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            inputColumns: [
+                "Allgemeines",
+                "Kontaktdaten"
+            ],
+            templateColumns: [
+                {
+                    key: 'customerNumber',
+                    label: "Kundennummer",
+                    inputIsNumberRange: true,
+                    inputType: "text",
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                }, {
+                    key: "isCompany",
+                    label: "Firmenkunde",
+                    component: isCompany,
+                    inputType: "bool",
+                    inputColumn: "Allgemeines"
+                }, {
+                    key: "name",
+                    label: "Firmenname",
+                    required: true,
+                    title: true,
+                    inputType: "text",
+                    disabledFunction: function (item) {
+                        return !item.isCompany
+                    },
+                    showFunction: function (item) {
+                        return item.isCompany
+                    },
+                    inputColumn: "Allgemeines",
+                    sortable: true,
+                    maxLength: 20,
+                    distinct: true,
+                }, {
+                    key: "nameAddition",
+                    label: "Firmenname Zusatz",
+                    inputType: "text",
+                    disabledFunction: function (item) {
+                        return !item.isCompany
+                    },
+                    showFunction: function (item) {
+                        return item.isCompany
+                    },
+                    inputColumn: "Allgemeines",
+                    maxLength: 20,
+                    distinct: true,
+                },{
+                    key: "salutation",
+                    label: "Anrede",
+                    inputType: "text",
+                    inputChangeFunction: function (row) {
+                        row.name = ""
+                        if(row.salutation) {
+                            row.name += `${row.salutation}`
+                        }
+                        if(row.title) {
+                            row.name += ` ${row.title}`
+                        }
+                        if(row.firstname) {
+                            row.name += ` ${row.firstname}`
+                        }
+                        if(row.lastname) {
+                            row.name += ` ${row.lastname}`
+                        }
+                    },
+                    disabledFunction: function (item) {
+                        return item.isCompany
+                    },
+                    showFunction: function (item) {
+                        return !item.isCompany
+                    },
+                    inputColumn: "Allgemeines",
+                    sortable: true,
+                    distinct: true
+                },{
+                    key: "title",
+                    label: "Titel",
+                    inputType: "text",
+                    inputChangeFunction: function (row) {
+                        row.name = ""
+                        if(row.salutation) {
+                            row.name += `${row.salutation}`
+                        }
+                        if(row.title) {
+                            row.name += ` ${row.title}`
+                        }
+                        if(row.firstname) {
+                            row.name += ` ${row.firstname}`
+                        }
+                        if(row.lastname) {
+                            row.name += ` ${row.lastname}`
+                        }
+                    },
+                    disabledFunction: function (item) {
+                        return item.isCompany
+                    },
+                    showFunction: function (item) {
+                        return !item.isCompany
+                    },
+                    inputColumn: "Allgemeines"
+                },{
+                    key: "firstname",
+                    label: "Vorname",//TODO: Add Conditional Rendering to Datatypes
+                    title: true,
+                    inputType: "text",
+                    inputChangeFunction: function (row) {
+                        row.name = ""
+                        if(row.salutation) {
+                            row.name += `${row.salutation}`
+                        }
+                        if(row.title) {
+                            row.name += ` ${row.title}`
+                        }
+                        if(row.firstname) {
+                            row.name += ` ${row.firstname}`
+                        }
+                        if(row.lastname) {
+                            row.name += ` ${row.lastname}`
+                        }
+                    },
+                    disabledFunction: function (item) {
+                        return item.isCompany
+                    },
+                    showFunction: function (item) {
+                        return !item.isCompany
+                    },
+                    inputColumn: "Allgemeines"
+                },{
+                    key: "lastname",
+                    label: "Nachname",
+                    title: true,
+                    inputType: "text",
+                    inputChangeFunction: function (row) {
+                        row.name = ""
+                        if(row.salutation) {
+                            row.name += `${row.salutation}`
+                        }
+                        if(row.title) {
+                            row.name += ` ${row.title}`
+                        }
+                        if(row.firstname) {
+                            row.name += ` ${row.firstname}`
+                        }
+                        if(row.lastname) {
+                            row.name += ` ${row.lastname}`
+                        }
+                    },
+                    disabledFunction: function (item) {
+                        return item.isCompany
+                    },
+                    showFunction: function (item) {
+                        return !item.isCompany
+                    },
+                    inputColumn: "Allgemeines"
+                },{
+                    key: "active",
+                    label: "Aktiv",
+                    component: active,
+                    inputType: "bool",
+                    inputColumn: "Allgemeines",
+                    sortable: true,
+                    distinct: true
+                }, {
+                    key: "customPaymentDays",
+                    label: "Zahlungsziel in Tagen",
+                    inputType: "number",
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },{
+                    key: "custom_payment_type",
+                    label: "Zahlungsart",
+                    inputType: "select",
+                    selectValueAttribute:"key",
+                    selectOptionAttribute: "label",
+                    selectManualOptions: [
+                        {label:'Überweisung', key: 'transfer'},
+                        {label:'SEPA Lastschrift', key: 'direct-debit'},
+                    ],
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                }, {
+                    key: "customSurchargePercentage",
+                    label: "Individueller Aufschlag",
+                    inputType: "number",
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                }, {
+                    key: "infoData.street",
+                    label: "Straße + Hausnummer",
+                    inputType: "text",
+                    disabledInTable: true,
+                    inputColumn: "Kontaktdaten"
+                },
+                {
+                    key: "infoData.special",
+                    label: "Adresszusatz",
+                    inputType: "text",
+                    disabledInTable: true,
+                    inputColumn: "Kontaktdaten"
+                },
+                {
+                    key: "infoData.zip",
+                    label: "Postleitzahl",
+                    inputType: "number",
+                    inputChangeFunction: async function (row) {
+                        if(row.infoData.zip) {
+                            row.infoData.city = (await useFunctions().useZipCheck(row.infoData.zip)).short
+                        }
+                    },
+                    disabledInTable: true,
+                    inputColumn: "Kontaktdaten",
+                    sortable: true
+                },
+                {
+                    key: "infoData.city",
+                    label: "Stadt",
+                    inputType: "text",
+                    disabledInTable: true,
+                    inputColumn: "Kontaktdaten",
+                    sortable: true
+                },
+                {
+                    key: "infoData.country",
+                    label: "Land",
+                    inputType: "select",
+                    selectDataType: "countrys",
+                    selectOptionAttribute: "name",
+                    selectValueAttribute: "name",
+                    disabledInTable: true,
+                    inputColumn: "Kontaktdaten",
+                    sortable: true
+                },
+                {
+                    key: "address",
+                    label: "Adresse",
+                    component: address,
+                    inputColumn: "Kontaktdaten"
+                },
+                {
+                    key: "infoData.tel",
+                    label: "Telefon",
+                    inputType: "text",
+                    inputColumn: "Kontaktdaten"
+                },
+                {
+                    key: "infoData.email",
+                    label: "E-Mail",
+                    inputType: "text",
+                    inputColumn: "Kontaktdaten"
+                },
+                {
+                    key: "infoData.invoiceEmail",
+                    label: "E-Mail für Rechnungen",
+                    inputType: "text",
+                    inputColumn: "Kontaktdaten"
+                },
+                {
+                    key: "infoData.web",
+                    label: "Web",
+                    inputType: "text",
+                    inputColumn: "Kontaktdaten"
+                },
+                {
+                    key: "infoData.ustid",
+                    label: "USt-Id",
+                    inputType: "text",
+                    inputColumn: "Kontaktdaten"
+                },
+                {
+                    key: "notes",
+                    label: "Notizen",
+                    inputType: "textarea",
+                    inputColumn: "Allgemeines"
+                },
+                /*{
+                    key: "profiles",
+                    label: "Berechtigte Benutzer",
+                    inputType: "select",
+                    selectDataType: "profiles",
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                    selectMultiple: true,/!*
+                    component: profiles,*!/
+                    inputColumn: "Allgemeines"
+                },*/
+            ],
+            showTabs: [{label: 'Informationen'},{label: 'Ansprechpartner'},{label: 'Dateien'},{label: 'Ausgangsbelege'},{label: 'Projekte'},{label: 'Objekte'},{label: 'Termine'},{label: 'Verträge'}]
+        },
+        contacts: {
+            isArchivable: true,
+            label: "Kontakte",
+            labelSingle: "Kontakt",
+            isStandardEntity: true,
+            redirect:true,
+            historyItemHolder: "contact",
+            supabaseSelectWithInformation: "*, customer(*), vendor(*)",
+            filters: [{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: "fullName",
+                    label: "Name",
+                    title: true,
+                    sortable: true
+                },{
+                    key: "salutation",
+                    label: "Anrede",
+                    inputType: "text",
+                    inputChangeFunction: function (row) {
+                        row.fullName = `${row.firstName} ${row.lastName}`
+                    },
+                    sortable: true
+                },{
+                    key: "title",
+                    label: "Titel",
+                    inputType: "text",
+                    inputChangeFunction: function (row) {
+                        row.fullName = `${row.firstName} ${row.lastName}`
+                    }
+                },{
+                    key: "firstName",
+                    label: "Vorname",
+                    inputType: "text",
+                    inputChangeFunction: function (row) {
+                        row.fullName = `${row.firstName} ${row.lastName}`
+                    }
+                },{
+                    key: "lastName",
+                    label: "Nachname",
+                    required: true,
+                    inputType: "text",
+                    inputChangeFunction: function (row) {
+                        row.fullName = `${row.firstName} ${row.lastName}`
+                    }
+                },
+                {
+                    key: "active",
+                    label: "Aktiv",
+                    component: active,
+                    inputType: "bool",
+                    sortable: true
+                },
+                {
+                    key: "customer",
+                    label: "Kunde",
+                    component: customer,
+                    inputType: "select",
+                    selectDataType: "customers",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    secondInfo: true,
+                    secondInfoKey: "name"
+                },
+                {
+                    key: "vendor",
+                    label: "Lieferant",
+                    component: vendor,
+                    inputType: "select",
+                    selectDataType: "vendors",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    secondInfo: true,
+                    secondInfoKey: "name"
+                },
+                {
+                    key: "role",
+                    label: "Rolle",
+                    inputType: "text"
+                },
+                {
+                    key: "email",
+                    label: "E-Mail",
+                    inputType: "text",
+                },
+                {
+                    key: "phoneMobile",
+                    label: "Mobil",
+                    inputType: "text",
+                },
+                {
+                    key: "phoneHome",
+                    label: "Festnetz",
+                    inputType: "text",
+                },
+                {
+                    key: "birthday",
+                    label: "Geburtstag",
+                    inputType: "date",
+                    sortable: true
+                },
+                {
+                    key: "notes",
+                    label: "Notizen",
+                    inputType: "textarea",
+                },
+            ],
+            showTabs:[
+                {
+                    label: 'Informationen',
+                }
+            ]
+        },
+        contracts: {
+            isArchivable: true,
+            label: "Verträge",
+            labelSingle: "Vertrag",
+            isStandardEntity: true,
+            numberRangeHolder: "contractNumber",
+            redirect:true,
+            filters:[{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            inputColumns: [
+                "Allgemeines",
+                "Abrechnung"
+            ],
+            supabaseSelectWithInformation: "*, customer(*), files(*)",
+            templateColumns: [
+                {
+                    key: 'contractNumber',
+                    label: "Vertragsnummer",
+                    inputIsNumberRange: true,
+                    inputType: "text",
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },
+                {
+                    key: "name",
+                    required: true,
+                    label: "Name",
+                    title: true,
+                    inputType: "text",
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },{
+                    key: "active",
+                    label: "Aktiv",
+                    component: active,
+                    inputType: "bool",
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },{
+                    key: "recurring",
+                    label: "Wiederkehrend",
+                    component: recurring,
+                    inputType: "bool",
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },{
+                    key: 'customer',
+                    label: "Kunde",
+                    required: true,
+                    component: customer,
+                    inputType: "select",
+                    selectDataType: "customers",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    inputColumn: "Allgemeines"
+                },{
+                    key: 'contact',
+                    label: "Ansprechpartner",
+                    component: contact,
+                    inputType: "select",
+                    selectDataType: "contacts",
+                    selectDataTypeFilter: function (i,item) {
+                      return i.customer === item.customer
+                    },
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                    inputColumn: "Allgemeines"
+                },{
+                    key: 'duration',
+                    label: "mindest Vertragslaufzeit",
+                    inputType: "select",
+                    selectValueAttribute:"label",
+                    selectManualOptions: [
+                        {label:'12 Monate'},
+                        {label:'24 Monate'},
+                        {label:'36 Monate'},
+                        {label:'48 Monate'},
+                        ],
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },{
+                    key: 'invoiceDispatch',
+                    label: "Rechnungsversand",
+                    inputType: "select",
+                    selectValueAttribute: "label",
+                    selectManualOptions: [
+                        {label:'E-Mail'},
+                        {label:'Post'}
+                    ],
+                    inputColumn: "Abrechnung",
+                    sortable: true
+                },{
+                    key: 'paymentType',
+                    label: "Zahlungsart",
+                    inputType: "select",
+                    selectValueAttribute: "label",
+                    selectManualOptions: [
+                        {label:'Einzug'},
+                        {label:'Überweisung'}
+                    ],
+                    inputColumn: "Abrechnung"
+                },{
+                    key: 'startDate',
+                    label: "Vertragsstart",
+                    inputType: "date",
+                    inputColumn: "Allgemeines",
+                    component: startDate,
+                    sortable: true
+                },{
+                    key: 'endDate',
+                    label: "Vertragsende",
+                    inputType: "date",
+                    inputColumn: "Allgemeines",
+                    component: endDate,
+                    sortable: true
+                },{
+                    key: 'signDate',
+                    label: "Unterschrieben am",
+                    inputType: "date",
+                    inputColumn: "Allgemeines",
+                    component: signDate,
+                    sortable: true
+                },{
+                    key: 'sepaDate',
+                    label: "SEPA Datum",
+                    inputType: "date",
+                    inputColumn: "Abrechnung",
+                    component: sepaDate
+                },{
+                    key: 'sepaRef',
+                    label: "Mandatsreferenz",
+                    inputType: "text",
+                    inputColumn: "Abrechnung"
+                },{
+                    key: 'bankingIban',
+                    label: "IBAN",
+                    inputType: "text",
+                    inputColumn: "Abrechnung"
+                },{
+                    key: 'bankingOwner',
+                    label: "Inhaber",
+                    inputType: "text",
+                    inputColumn: "Abrechnung"
+                },{
+                    key: 'bankingName',
+                    label: "Bank",
+                    inputType: "text",
+                    inputColumn: "Abrechnung"
+                },{
+                    key: 'bankingBIC',
+                    label: "BIC",
+                    inputType: "text",
+                    inputColumn: "Abrechnung"
+                },{
+                    key: "notes",
+                    label: "Notizen",
+                    inputType: "textarea",
+                }
+            ],
+            showTabs: [{label: 'Informationen'},{label: 'Dateien'}]
+        },
+        absencerequests: {
+            isArchivable: true,
+            label: "Abwesenheiten",
+            labelSingle: "Abwesenheit",
+            isStandardEntity: true,
+            supabaseSortColumn:"startDate",
+            supabaseSortAscending: false,
+            supabaseSelectWithInformation: "*",
+            historyItemHolder: "absencerequest",
+            redirect:true,
+            filters:[{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns:[
+                {
+                    key: "approved",
+                    label: "Genehmigt",
+                    inputType: "select",
+                    selectValueAttribute: "label",
+                    selectManualOptions: [
+                        {label:"Offen"},
+                        {label:"Genehmigt"},
+                        {label:"Abgelehnt"}
+                    ]
+                },{
+                    key: "name",
+                    label: "Name",
+                    required: true,
+                    inputType: "text",
+                    title: true
+                },
+                {
+                    key: "profile",
+                    label: "Mitarbeiter",
+                    required: true,
+                    inputType: "select",
+                    selectDataType: "profiles",
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                    component: profile
+                },{
+                    key: "reason",
+                    label: "Grund",
+                    inputType: "select",
+                    required: true,
+                    selectValueAttribute: "label",
+                    selectManualOptions: [
+                        {label:"Urlaub"},
+                        {label:"Berufsschule"},
+                        {label:"Schlechtwetter"},
+                        {label:"Saison Kurzarbeitergeld"},
+                        {label:"unbezahlter Urlaub"},
+                        {label:"Überstundenausgleich"},
+                        {label:"Sonderurlaub(bezahlt)"},
+                        {label:"Schulung"},
+                        {label:"Mutterschutz"},
+                        {label:"Krankheit ab 2. Tag (mit Attest)"},
+                        {label:"Krankheit 1 Tag (mit Attest)"},
+                        {label:"Krankheit"},
+                        {label:"Kind krank - Kinderbetreuung"},
+                        {label:"Elternzeit"},
+                    ]
+                },{
+                    key: "startDate",
+                    required: true,
+                    label: "Start",
+                    inputType: "date",
+                    component: startDate,
+                    sortable: true
+                },{
+                    key: "endDate",
+                    required: true,
+                    label: "Ende",
+                    inputType: "date",
+                    component: endDate,
+                    sortable: true
+                },{
+                    key: "note",
+                    label: "Notizen",
+                    inputType: "textarea"
+                }
+            ],
+            showTabs: [{label: 'Informationen'}]
+        },
+        plants: {
+            isArchivable: true,
+            label: "Objekte",
+            labelSingle: "Objekt",
+            isStandardEntity: true,
+            redirect:true,
+            historyItemHolder: "plant",
+            supabaseSortColumn:"name",
+            supabaseSelectWithInformation: "*, customer(id,name)",
+            filters: [{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name",
+                    required: true,
+                    inputType: "text",
+                    title: true,
+                    sortable: true
+                },
+                {
+                    key: "customer",
+                    label: "Kunde",
+                    component: customer,
+                    inputType: "select",
+                    selectDataType: "customers",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                },{
+                    key: "description",
+                    label: "Beschreibung",
+                    inputType:"editor",
+                    component: description
+                },
+            ],
+            showTabs: [
+                {
+                label: "Informationen"
+            },{
+                label: "Projekte"
+            },{
+                label: "Aufgaben"
+            },{
+                label: "Dateien"
+            }]
+        },
+        products: {
+            isArchivable: true,
+            label: "Artikel",
+            labelSingle: "Artikel",
+            isStandardEntity: true,
+            redirect:true,
+            supabaseSelectWithInformation: "*, unit(name)",
+            historyItemHolder: "product",
+            filters: [{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: "name",
+                    label:"Name",
+                    required: true,
+                    title: true,
+                    inputType: "text"
+                },
+                {
+                    key: "manufacturer",
+                    label: "Hersteller",
+                    inputType: "text"
+                },
+                {
+                    key: "unit",
+                    label: "Einheit",
+                    required: true,
+                    component: unit,
+                    inputType: "select",
+                    selectDataType: "units",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                },
+                {
+                    key: "purchase_price",
+                    label: "Einkaufspreis",
+                    component: purchasePrice,
+                    inputType: "number",
+                    inputTrailing: "EUR",
+                    inputChangeFunction: function (row) {
+                        if(row.markup_percentage) {
+                            row.seling_price = (row.purchase_price * (1+row.markup_percentage/100)).toFixed(4)
+                        } else {
+                            row.seling_price = row.purchase_price.toFixed(4)
+                        }
+                    }
+                },{
+                    key: "markup_percentage",
+                    label: "Aufschlag",
+                    inputType: "number",
+                    inputTrailing: "%",
+                    inputChangeFunction: function (row) {
+                        if(row.purchase_price && ! row.seling_price) {
+                            row.seling_price = (row.purchase_price * (1+row.markup_percentage/100)).toFixed(4)
+                        } else if(row.seling_price && !row.purchase_price) {
+                            row.purchase_price = (row.seling_price / (1+row.markup_percentage/100)).toFixed(4)
+                        } else {
+                            row.seling_price = (row.purchase_price * (1+row.markup_percentage/100)).toFixed(4)
+                        }
+                    }
+                },{
+                    key: "selling_price",
+                    label: "Verkaufpreispreis",
+                    required: true,
+                    component: sellingPrice,
+                    inputType: "number",
+                    inputTrailing: "EUR",
+                    inputChangeFunction: function (row) {
+                        if(row.purchase_price ) {
+                            row.markup_percentage = ((row.selling_price / row.purchase_price - 1) * 100 ).toFixed(2)
+                        } else{
+                            row.purchase_price = (row.selling_price / (1+row.markup_percentage/100)).toFixed(4)
+                        }
+                    }
+                },{
+                    key: "tax_percentage",
+                    label: "Umsatzsteuer",
+                    inputType: "select",
+                    selectOptionAttribute: "label",
+                    selectValueAttribute: 'key',
+                    required: true,
+                    selectManualOptions: [
+                        {label: "19 %", key: 19},
+                        {label: "7 %", key: 7},
+                        {label: "0 %", key: 0}]
+                },
+                /*{
+                    key: "tags",
+                    label: "Tags"
+                },*/
+                {
+                    key: "productcategories",
+                    label: "Artikelkategorien",
+                    inputType: "select",
+                    selectDataType: "productcategories",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    selectMultiple: true
+                },
+                {
+                    key: "description",
+                    label: "Beschreibung",
+                    inputType:"textarea"
+                },
+            ],
+            showTabs: [
+                {
+                    label: "Informationen"
+                }
+            ]
+        },
+        projects: {
+            isArchivable: true,
+            label: "Projekte",
+            labelSingle: "Projekt",
+            isStandardEntity: true,
+            redirect:true,
+            historyItemHolder: "project",
+            numberRangeHolder: "projectNumber",
+            supabaseSelectWithInformation: "*, customer(id,name), plant(id,name), projecttype(name, id), tasks(*, project(id,name), customer(id,name), plant(id,name)), files(*), createddocuments(*, statementallocations(*)), events(*), times(*, profile(id, fullName))",
+            supabaseSortColumn: "projectNumber",
+            filters: [
+                {
+                    name: "Nur Offene Projekte",
+                    default: true,
+                    "filterFunction": function (row) {
+                        if(row.phases && row.phases.length > 0) {
+                            return row.phases.find(i => i.active).label !== "Abgeschlossen"
+
+                            //return phase.label !== "Abgeschlossen";
+
+
+                        } else {
+                            return true
+                        }
+
+                    }
+                }, {
+                    name: "Archivierte ausblenden",
+                    default: true,
+                    "filterFunction": function (row) {
+                        if(!row.archived) {
+                            return true
+                        } else {
+                            return false
+                        }
+                    }
+                }
+            ],
+            templateColumns: [
+                {
+                key: "projectNumber",
+                label: "Projektnummer",
+                    sortable: true
+                },
+                {
+                    key: "projecttype",
+                    label: "Typ",
+                    required: true,
+                    component: projecttype,
+                    inputType: "select",
+                    selectDataType: "projecttypes",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    inputChangeFunction: function (item,loadedOptions = {}) {
+                        item.phases = loadedOptions.projecttypes.find(i => i.id === item.projecttype).initialPhases
+                    },
+                    sortable: true
+                },{
+                    key: "active_phase",
+                    label: "Phase",
+                    distinct:true
+                },{
+                    key: "name",
+                    label: "Name",
+                    required: true,
+                    title: true,
+                    inputType: "text",
+                    sortable: true
+                },
+                {
+                    key: "customer",
+                    label: "Kunde",
+                    component: customer,
+                    required: true,
+                    inputType: "select",
+                    selectDataType: "customers",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    secondInfo: true,
+                    secondInfoKey: "name",
+                },{
+                    key: "plant",
+                    label: "Objekt",
+                    component: plant,
+                    inputType: "select",
+                    selectDataType: "plants",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                },{
+                    key: "customerRef",
+                    label: "Referenz des Kunden",
+                    inputType: "text"
+                },{
+                    key: "notes",
+                    label: "Notizen",
+                    inputType: "textarea"
+                },
+                /*{
+                    key: "profiles",
+                    label: "Berechtigte Benutzer",
+                    inputType: "select",
+                    selectDataType: "profiles",
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                    selectMultiple: true,/!*
+                    component: profiles,*!/
+                    inputColumn: "Allgemeines"
+                },*/],
+            showTabs: [
+                {
+                key: "information",
+                label: "Informationen"
+            },
+                {
+                    key: "phases",
+                    label: "Phasen"
+                },{
+                    key: "tasks",
+                    label: "Aufgaben"
+                },{
+                    key: "files",
+                    label: "Dateien"
+                },{
+                    label: "Zeiten"
+                },{
+                    label: "Ausgangsbelege"
+                },{
+                    label: "Termine"
+                }/*,{
+                    key: "timetracking",
+                    label: "Zeiterfassung"
+                },{
+                    key: "events",
+                    label: "Termine"
+                },{
+                    key: "material",
+                    label: "Material"
+                }*/]
+        },
+        vehicles: {
+            isArchivable: true,
+            label: "Fahrzeuge",
+            labelSingle: "Fahrzeug",
+            isStandardEntity: true,
+            redirect:true,
+            historyItemHolder: "vehicle",
+            supabaseSortColumn:"licensePlate",
+            supabaseSelectWithInformation: "*, checks(*), files(*)",
+            filters:[{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns:[
+                {
+                    key: 'active',
+                    label: "Aktiv",
+                    component: active,
+                    inputType: "bool",
+                    sortable: true
+                },{
+                    key: 'license_plate',
+                    label: "Kennzeichen",
+                    required: true,
+                    inputType: "text",
+                    title: true,
+                    sortable: true
+                },{
+                    key: 'vin',
+                    label: "Identifikationnummer",
+                    inputType: "text"
+                },
+                {
+                    key: "type",
+                    label: "Typ",
+                    inputType: "text"
+                },
+                /*{
+                    key: "driver",
+                    label: "Fahrer",
+                    inputType: "select",
+                    selectDataType: "auth_users",
+                    selectOptionAttribute: "fullName",
+                    component: driver
+                },*/
+                {
+                    key: "tank_size",
+                    label: "Tankvolumen",
+                    unit: "L",
+                    inputType: "number"
+                },
+                {
+                    key: "build_year",
+                    label: "Baujahr",
+                    inputType: "number"
+                },
+                {
+                    key: "towing_capacity",
+                    label: "Anhängelast",
+                    unit: "Kg",
+                    inputType: "number",
+                    sortable: true
+                },
+                {
+                    key: "color",
+                    label: "Farbe",
+                    inputType: "text"
+                },
+                {
+                    key: "power_in_kw",
+                    label: "Leistung",
+                    unit: "kW",
+                    inputType: "number",
+                    sortable: true
+                },
+                /*{
+                    key: "profiles",
+                    label: "Berechtigte Benutzer",
+                    inputType: "select",
+                    selectDataType: "profiles",
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                    selectMultiple: true,/!*
+                    component: profiles,*!/
+                    inputColumn: "Allgemeines"
+                },*/
+            ],
+            showTabs: [
+                {
+                    label: 'Informationen',
+                }, {
+                    label: 'Dateien',
+                }, {
+                    label: 'Überprüfungen',
+                }
+            ]
+        },
+        vendors: {
+            isArchivable: true,
+            label: "Lieferanten",
+            labelSingle: "Lieferant",
+            isStandardEntity: true,
+            redirect:true,
+            numberRangeHolder: "vendorNumber",
+            historyItemHolder: "vendor",
+            supabaseSortColumn: "vendorNumber",
+            supabaseSelectWithInformation: "*, contacts(*)",
+            filters: [{
+                name: "SEPA nicht erteilt",
+                "filterFunction": function (row) {
+                    return !row.hasSEPA
+                },
+            },{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: 'vendorNumber',
+                    label: "Lieferantennummer",
+                    inputType: "text",
+                    inputIsNumberRange: true,
+                    sortable: true
+                },
+                {
+                    key: "name",
+                    required: true,
+                    label: "Name",
+                    title: true,
+                    inputType: "text",
+                    sortable: true
+                },
+                {
+                    key: "infoData.streetNumber",
+                    label: "Straße + Hausnummer",
+                    inputType: "text",
+                    disabledInTable: true
+                },
+                {
+                    key: "infoData.special",
+                    label: "Adresszusatz",
+                    inputType: "text",
+                    disabledInTable: true
+                },
+                {
+                    key: "infoData.zip",
+                    label: "Postleitzahl",
+                    inputType: "number",
+                    disabledInTable: true,
+                    inputChangeFunction: async function (row) {
+                        if(row.infoData.zip) {
+                            row.infoData.city = (await useFunctions().useZipCheck(row.infoData.zip)).short
+                        }
+                    },
+                },
+                {
+                    key: "infoData.city",
+                    label: "Stadt",
+                    inputType: "text",
+                    disabledInTable: true
+                },
+                {
+                    key: "infoData.country",
+                    label: "Land",
+                    inputType: "select",
+                    selectDataType: "countrys",
+                    selectOptionAttribute: "name",
+                    selectValueAttribute: "name",
+                    disabledInTable: true
+                },
+                {
+                    key: "address",
+                    label: "Adresse",
+                    component: address
+                },
+                {
+                    key: "infoData.tel",
+                    label: "Telefon",
+                    inputType: "text"
+                },
+                {
+                    key: "infoData.email",
+                    label: "E-Mail",
+                    inputType: "text"
+                },
+                {
+                    key: "infoData.web",
+                    label: "Web",
+                    inputType: "text"
+                },
+                {
+                    key: "infoData.ustid",
+                    label: "USt-Id",
+                    inputType: "text"
+                },
+                {
+                    key: "hasSEPA",
+                    label: "SEPA Mandat erteilt",
+                    inputType: "bool",
+                    component: sepa
+                },
+                {
+                    key: "defaultPaymentMethod",
+                    label: "Standard Zahlungsmethode",
+                    inputType: "select",
+                    selectValueAttribute: "label",
+                    selectManualOptions: [
+                        {label:"Einzug"},
+                        {label:"Überweisung"},
+                        {label:"Kreditkarte"},
+                    ],
+                },
+                {
+                    key: "notes",
+                    label: "Notizen",
+                    inputType: "textarea"
+                },
+                /*{
+                    key: "profiles",
+                    label: "Berechtigte Benutzer",
+                    inputType: "select",
+                    selectDataType: "profiles",
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                    selectMultiple: true,/!*
+                    component: profiles,*!/
+                    inputColumn: "Allgemeines"
+                },*/
+            ],
+            showTabs: [
+                {
+                    label: 'Informationen',
+                },{
+                    label: 'Ansprechpartner',
+                }, {
+                    label: 'Dateien',
+                }
+            ]
+        },
+        messages: {
+            label: "Nachrichten",
+            labelSingle: "Nachricht"
+        },
+        spaces: {
+            isArchivable: true,
+            label: "Lagerplätze",
+            labelSingle: "Lagerplatz",
+            isStandardEntity: true,
+            supabaseSelectWithInformation: "*, files(*)",
+            supabaseSortColumn: "spaceNumber",
+            redirect: true,
+            numberRangeHolder: "spaceNumber",
+            historyItemHolder: "space",
+            filters:[{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            inputColumns: [
+                "Allgemeines",
+                "Ort"
+            ],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name",
+                    inputType: "text",
+                    required: true,
+                    title: true,
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },
+                {
+                    key: 'space_number',
+                    label: "Lagerplatznr.",
+                    inputType: "text",
+                    inputIsNumberRange: true,
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },
+                {
+                    key: "type",
+                    label: "Typ",
+                    inputType: "select",
+                    required: true,
+                    selectValueAttribute: "label",
+                    selectManualOptions: [
+                        {label:"Standort"},
+                        {label:"Regalplatz"},
+                        {label:"Kiste"},
+                        {label:"Palettenplatz"},
+                        {label:"Sonstiges"}
+                    ],
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },
+                {
+                    key: "parent_space",
+                    label: "Übergeordneter Lagerplatz",
+                    inputType: "select",
+                    selectDataType: "spaces",
+                    selectOptionAttribute: "spaceNumber",
+                    selectValueAttribute: "id",
+                    inputColumn: "Allgemeines"
+                },
+                {
+                    key: "info_data.streetNumber",
+                    label: "Straße + Hausnummer",
+                    inputType: "text",
+                    disabledInTable: true,
+                    inputColumn: "Ort"
+                },
+                {
+                    key: "info_data.special",
+                    label: "Adresszusatz",
+                    inputType: "text",
+                    disabledInTable: true,
+                    inputColumn: "Ort"
+                },
+                {
+                    key: "info_data.zip",
+                    label: "Postleitzahl",
+                    inputType: "number",
+                    disabledInTable: true,
+                    inputColumn: "Ort",
+                    inputChangeFunction: async function (row) {
+                        if(row.infoData.zip) {
+                            row.infoData.city = (await useFunctions().useZipCheck(row.infoData.zip)).short
+                        }
+                    },
+                },
+                {
+                    key: "info_data.city",
+                    label: "Stadt",
+                    inputType: "text",
+                    disabledInTable: true,
+                    inputColumn: "Ort"
+                },
+                {
+                    key: "info_data.country",
+                    label: "Land",
+                    inputType: "select",
+                    selectDataType: "countrys",
+                    selectOptionAttribute: "name",
+                    selectValueAttribute: "name",
+                    disabledInTable: true,
+                    inputColumn: "Ort"
+                },
+                {
+                    key: "address",
+                    label: "Adresse",
+                    component: address
+                },
+                {
+                    key: "description",
+                    label: "Beschreibung",
+                    inputType: "textarea",
+                }
+            ],
+            showTabs: [
+                {
+                    label: 'Informationen',
+                }, {
+                    label: 'Dateien',
+                },{label: 'Inventarartikel'}
+            ]
+        },
+        users: {
+            label: "Benutzer",
+            labelSingle: "Benutzer"
+        },
+        createddocuments: {
+            isArchivable: true,
+            label: "Dokumente",
+            labelSingle: "Dokument",
+            supabaseSelectWithInformation: "*, files(*), statementallocations(*)",
+            filters: [
+                {
+                    name: "Archivierte ausblenden",
+                    default: true,
+                    "filterFunction": function (row) {
+                        if(!row.archived) {
+                            return true
+                        } else {
+                            return false
+                        }
+                    }
+                }
+            ],
+            templateColumns: [
+                {
+                    key: "customer",
+                    distinct: true
+                }
+            ]
+        },
+        tickets: {
+            isArchivable: true,
+            label: "Tickets",
+            labelSingle: "Ticket",
+
+        },
+        ticketmessages: {
+            isArchivable: true,
+            label: "Nachrichten",
+            labelSingle: "Nachricht",
+
+        },
+        files: {
+            isArchivable: true,
+            label: "Dateien",
+            labelSingle: "Datei",
+            supabaseSelectWithInformation: "*",
+        },
+        folders: {
+            isArchivable: true,
+            label: "Ordner",
+            labelSingle: "Ordner",
+            supabaseSelectWithInformation: "*",
+        },
+        incominginvoices: {
+            label: "Eingangsrechnungen",
+            labelSingle: "Eingangsrechnung",
+            redirect:true,
+            filters: [
+                {
+                    name: "Archivierte ausblenden",
+                    default: true,
+                    "filterFunction": function (row) {
+                        if(!row.archived) {
+                            return true
+                        } else {
+                            return false
+                        }
+                    }
+                }
+            ],
+            templateColumns: [
+                {
+                    key: 'reference',
+                    label: "Referenz:",
+                    sortable: true,
+                }, {
+                    key: 'state',
+                    label: "Status:"
+                },
+                {
+                    key: "date",
+                    label: "Datum",
+                    sortable: true,
+                },
+                {
+                    key: "vendor",
+                    label: "Lieferant",
+                },
+                {
+                    key: "amount",
+                    label: "Betrag",
+                },
+                {
+                    key: "dueDate",
+                    label: "Fälligkeitsdatum",
+                    sortable: true,
+                },
+                {
+                    key: "paid",
+                    label: "Bezahlt"
+                },
+                {
+                    key: "paymentType",
+                    label: "Zahlart",
+                    sortable: true,
+                },
+                {
+                    key: "description",
+                    label: "Beschreibung"
+                }
+            ]
+        },
+        inventoryitems: {
+            isArchivable: true,
+            label: "Inventarartikel",
+            labelSingle: "Inventarartikel",
+            isStandardEntity: true,
+            supabaseSelectWithInformation: "*, files(*), vendor(id,name), currentSpace(id,name)",
+            redirect: true,
+            numberRangeHolder: "articleNumber",
+            historyItemHolder: "inventoryitem",
+            inputColumns: [
+                "Allgemeines",
+                "Anschaffung"
+            ],
+            filters:[{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name",
+                    title: true,
+                    required: true,
+                    inputType: "text",
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },
+                {
+                    key: "usePlanning",
+                    label: "In Plantafel anzeigen",
+                    inputType: "bool",
+                    inputColumn: "Allgemeines",
+                    component: usePlanning,
+                    sortable: true
+                },
+                {
+                    key: "description",
+                    label: "Beschreibung",
+                    inputType: "textarea",
+                    sortable: true
+                },
+                {
+                    key: "currentSpace",
+                    label: "Aktueller Lagerplatz",
+                    inputType: "select",
+                    selectDataType: "spaces",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    inputColumn: "Allgemeines",
+                    component: space
+                },
+                {
+                    key: "articleNumber",
+                    label: "Artikelnummer",
+                    inputType: "text",
+                    inputIsNumberRange: true,
+                    inputColumn: "Allgemeines",
+                    sortable: true
+                },
+                {
+                    key: "serialNumber",
+                    label: "Seriennummer",
+                    inputType: "text",
+                    inputColumn: "Allgemeines"
+                },
+                {
+                    key: "purchaseDate",
+                    label: "Kaufdatum",
+                    inputType: "date",
+                    inputColumn: "Anschaffung",
+                    sortable: true
+                },
+                {
+                    key: "vendor",
+                    label: "Lieferant",
+                    inputType: "select",
+                    selectDataType: "vendors",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    inputColumn: "Anschaffung",
+                    component: vendor
+                },
+                {
+                    key: "quantity",
+                    label: "Menge",
+                    inputType: "number",
+                    inputColumn: "Allgemeines",
+                    disabledFunction: function (item) {
+                        return item.serialNumber
+                    },
+                    helpComponent: quantity,
+                    sortable: true
+                },
+                {
+                    key: "purchase_price",
+                    label: "Kaufpreis",
+                    inputType: "number",
+                    inputStepSize: "0.01",
+                    inputColumn: "Anschaffung",
+                    sortable: true
+                },
+                {
+                    key: "manufacturer",
+                    label: "Hersteller",
+                    inputType: "text",
+                    inputColumn: "Anschaffung"
+                },
+                {
+                    key: "manufacturerNumber",
+                    label: "Herstellernummer",
+                    inputType: "text",
+                    inputColumn: "Anschaffung"
+                },
+                /*{
+                    key: "profiles",
+                    label: "Berechtigte Benutzer",
+                    inputType: "select",
+                    selectDataType: "profiles",
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                    selectMultiple: true,/!*
+                    component: profiles,*!/
+                    inputColumn: "Allgemeines"
+                },*/
+                {
+                    key: "currentValue",
+                    label: "Aktueller Wert",
+                    inputType: "number",
+                    inputStepSize: "0.01",
+                    inputColumn: "Anschaffung",
+                    sortable: true
+                },
+
+            ],
+            showTabs: [
+                {
+                    label: 'Informationen',
+                }, {
+                    label: 'Dateien',
+                }
+            ]
+        },
+        inventoryitemgroups: {
+            isArchivable: true,
+            label: "Inventarartikelgruppen",
+            labelSingle: "Inventarartikelgruppe",
+            isStandardEntity: true,
+            historyItemHolder: "inventoryitemgroup",
+            supabaseSelectWithInformation: "*",
+            redirect: true,
+            filters:[{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name",
+                    title: true,
+                    required: true,
+                    inputType: "text",
+                    sortable: true
+                },
+                {
+                    key: "description",
+                    label: "Beschreibung",
+                    inputType: "textarea"
+                },
+                {
+                    key: "usePlanning",
+                    label: "In Plantafel anzeigen",
+                    inputType: "bool",
+                    component: usePlanning
+                },{
+                    key: "inventoryitems",
+                    label: "Inventarartikel",
+                    inputType: "select",
+                    selectDataType: "inventoryitems",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    selectMultiple: true,
+                    required: true,
+                    component: inventoryitemsWithLoad
+                },/*{
+                    key: "profiles",
+                    label: "Berechtigte Benutzer",
+                    inputType: "select",
+                    selectDataType: "profiles",
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                    selectMultiple: true,/!*
+                    component: profiles,*!/
+                    inputColumn: "Allgemeines"
+                },*/
+
+            ],
+            showTabs: [
+                {
+                    label: 'Informationen',
+                }
+            ]
+        },
+        documentboxes: {
+            isArchivable: true,
+            label: "Dokumentenboxen",
+            labelSingle: "Dokumentenbox",
+            isStandardEntity: true,
+            supabaseSelectWithInformation: "*, space(*), files(*)",
+            redirect: true,
+            numberRangeHolder: "key",
+            historyItemHolder: "documentbox",
+            inputColumns: [
+                "Allgemeines",
+            ],
+            filters:[{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: "space",
+                    label: "Aktueller Lagerplatz",
+                    inputType: "select",
+                    selectDataType: "spaces",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    inputColumn: "Allgemeines",
+                    component: space
+                },
+                {
+                    key: "key",
+                    label: "Nummer",
+                    inputType: "text",
+                    inputIsNumberRange: true,
+                    inputColumn: "Allgemeines",
+                    title: true,
+                    required: true,
+                },
+                /*{
+                    key: "profiles",
+                    label: "Berechtigte Benutzer",
+                    inputType: "select",
+                    selectDataType: "profiles",
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                    selectMultiple: true,/!*
+                    component: profiles,*!/
+                    inputColumn: "Allgemeines"
+                },*/
+
+            ],
+            showTabs: [
+                {
+                    label: 'Informationen',
+                }, {
+                    label: 'Dateien',
+                }
+            ]
+        },
+        services: {
+            isArchivable: true,
+            label: "Leistungen",
+            labelSingle: "Leistung",
+            isStandardEntity: true,
+            redirect: true,
+            supabaseSelectWithInformation: "*, unit(*)",
+            historyItemHolder: "service",
+            filters: [{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name",
+                    required: true,
+                    title: true,
+                    inputType: "text",
+                    sortable: true
+                },
+                {
+                    key: "unit",
+                    label: "Einheit",
+                    component: unit,
+                    inputType: "select",
+                    selectDataType: "units",
+                    selectOptionAttribute: "name",
+                    required: true,
+                    selectSearchAttributes: ['name'],
+                },
+                {
+                    key: "sellingPrice",
+                    label: "Verkaufspreis",
+                    component: sellingPrice,
+                },
+                {
+                    key: "taxPercentage",
+                    label: "Umsatzsteuer",
+                    inputType: "select",
+                    selectOptionAttribute: "label",
+                    selectValueAttribute: 'key',
+                    required: true,
+                    selectManualOptions: [
+                        {label: "19 %", key: 19},
+                        {label: "7 %", key: 7},
+                        {label: "0 %", key: 0}]
+                    //TODO: Default Value
+                },
+                {
+                    key: "servicecategories",
+                    label: "Leistungskategorien",
+                    inputType: "select",
+                    selectDataType: "servicecategories",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    selectMultiple: true,
+                    component: serviceCategories
+                },
+                {
+                    key: "sellingPriceComposed.worker",
+                    label: "Verkaufspreis Personal pro Einheit",
+                    inputType: "number",
+                    inputTrailing: "EUR",
+                    inputChangeFunction: function (row) {
+                        if(row.sellingPriceComposed.worker) {
+                            row.sellingPriceComposed.total = row.sellingPriceComposed.worker + (row.sellingPriceComposed.material || 0)
+                            row.sellingPrice = row.sellingPriceComposed.total
+                        }
+                    },
+                    component: sellingPriceComposedWorker
+                },
+                {
+                    key: "sellingPriceComposed.material",
+                    label: "Verkaufspreis Material pro Einheit",
+                    inputType: "number",
+                    inputTrailing: "EUR",
+                    inputChangeFunction: function (row) {
+                        if(row.sellingPriceComposed.material) {
+                            row.sellingPriceComposed.total = (row.sellingPriceComposed.worker || 0) + row.sellingPriceComposed.material
+                            row.sellingPrice = row.sellingPriceComposed.total
+                        }
+                    },
+                    component: sellingPriceComposedMaterial
+                },
+                {
+                    key: "materialComposing",
+                    label: "Zusammensetzung Materialpreis pro Einheit",
+                    inputType: "materialComposing",
+                },
+                {
+                    key: "personalComposing",
+                    label: "Zusammensetzung Personal pro Einheit",
+                    inputType: "personalComposing",
+                },
+                {
+                    key: "sellingPriceComposed.total",
+                    label: "Verkaufspreis Gesamt pro Einheit",
+                    inputType: "number",
+                    inputTrailing: "EUR",
+                    required: true,
+                    /*disabledFunction: function (item) {
+                        return item.sellingPriceComposed.worker || item.sellingPriceComposed.material
+                    },*/
+                    inputChangeFunction: function (row) {
+                        if(row.sellingPriceComposed.worker) {
+                            row.sellingPriceComposed.material = row.sellingPriceComposed.total - row.sellingPriceComposed.worker
+                        } else if(row.sellingPriceComposed.material) {
+                            row.sellingPriceComposed.worker = row.sellingPriceComposed.total - row.sellingPriceComposed.material
+                        }
+                    },
+                    component: sellingPriceComposedTotal
+                },
+
+
+                {
+                    key: "description",
+                    label: "Beschreibung",
+                    inputType:"textarea"
+                },
+            ],
+            showTabs: [
+                {
+                    label: 'Informationen',
+                }
+            ]
+        },
+        hourrates: {
+            isArchivable: true,
+            label: "Stundensätze",
+            labelSingle: "Stundensatz",
+            isStandardEntity: true,
+            redirect: true,
+            supabaseSelectWithInformation: "*",
+            historyItemHolder: "hourrate",
+            filters: [{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name",
+                    required: true,
+                    title: true,
+                    inputType: "text",
+                    sortable: true
+                },
+                {
+                    key: "purchase_price",
+                    label: "Einkauspreis",
+                    inputType: "number",
+                    component: purchasePrice,
+                    sortable: true
+                },
+                {
+                    key: "sellingPrice",
+                    label: "Verkaufspreis",
+                    inputType: "number",
+                    component: sellingPrice,
+                    sortable: true
+                },
+            ],
+            showTabs: [
+                {
+                    label: 'Informationen',
+                }
+            ]
+        },
+        events: {
+            isArchivable: true,
+            label: "Termine",
+            labelSingle: "Termin",
+            isStandardEntity: true,
+            historyItemHolder: "event",
+            supabaseSelectWithInformation: "*, project(id,name), customer(*)",
+            redirect: true,
+            filters:[{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: 'name',
+                    label: "Name",
+                    required: true,
+                    title: true,
+                    inputType: "text",
+                    sortable: true
+                },
+                {
+                    key: "startDate",
+                    label: "Start",
+                    required: true,
+                    inputType: "datetime",
+                    component: startDateTime,
+                    sortable: true
+                },
+                {
+                    key: "endDate",
+                    label: "Ende",
+                    required: true,
+                    inputType: "datetime",
+                    component: endDateTime,
+                    sortable: true
+                },/*{
+                    key: "eventtype",
+                    label: "Typ",
+                    inputType: "select",
+                    selectManualOptions: ["Umsetzung","Vor Ort Termin", "Büro", "Sonstiges"],
+                },*/{
+                    key: "link",
+                    label: "Link",
+                    inputType: "text"
+                },{
+                    key: "notes",
+                    label: "Notizen",
+                    inputType: "textarea"
+                },
+                {
+                    key: "project",
+                    label: "Projekt",
+                    component: project,
+                    inputType: "select",
+                    selectDataType: "projects",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                },{
+                    key: "vehicles",
+                    label: "Fahrzeuge",
+                    inputType: "select",
+                    selectDataType: "vehicles",
+                    selectOptionAttribute: "license_plate",
+                    selectSearchAttributes: ['license_plate'],
+                    selectMultiple: true,
+                    component: vehiclesWithLoad,
+                },{
+                    key: "inventoryitems",
+                    label: "Inventarartikel",
+                    inputType: "select",
+                    selectDataType: "inventoryitems",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    selectMultiple: true,
+                    component: inventoryitemsWithLoad
+                },{
+                    key: "inventoryitemgroups",
+                    label: "Inventarartikelgruppen",
+                    inputType: "select",
+                    selectDataType: "inventoryitemgroups",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    selectMultiple: true,
+                    component: inventoryitemgroupsWithLoad
+                },{
+                    key: "customer",
+                    label: "Kunde",
+                    inputType: "select",
+                    selectDataType: "customers",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                    component: customer,
+                },{
+                    key: "vendor",
+                    label: "Lieferant",
+                    inputType: "select",
+                    selectDataType: "vendors",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                },{
+                    key: "profiles",
+                    label: "Beteiligte Benutzer",
+                    inputType: "select",
+                    selectDataType: "profiles",
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                    selectMultiple: true,
+                    component: profiles
+                }
+            ],
+            showTabs: [
+                {
+                    label: 'Informationen',}
+            ]
+        },
+        profiles: {
+            label: "Mitarbeiter",
+            labelSingle: "Mitarbeiter",
+            redirect: true,
+            historyItemHolder: "profile"
+        },
+        workingtimes: {
+            isArchivable: true,
+            label: "Anwesenheiten",
+            labelSingle: "Anwesenheit",
+            redirect: true,
+            redirectToList: true
+        },
+        texttemplates: {
+            isArchivable: true,
+            label: "Textvorlagen",
+            labelSingle: "Textvorlage"
+        },
+        bankstatements: {
+            isArchivable: true,
+            label: "Kontobewegungen",
+            labelSingle: "Kontobewegung",
+            historyItemHolder: "bankStatement",
+        },
+        statementallocations: {
+            label: "Bankzuweisungen",
+            labelSingle: "Bankzuweisung"
+        },
+        productcategories: {
+            isArchivable: true,
+            label: "Artikelkategorien",
+            labelSingle: "Artikelkategorie",
+            isStandardEntity: true,
+            redirect: true,
+            supabaseSortColumn: "name",
+            supabaseSelectWithInformation: "*",
+            filters: [{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name",
+                    required: true,
+                    title: true,
+                    inputType: "text",
+                    sortable: true
+                },
+                {
+                    key: "description",
+                    label: "Beschreibung",
+                    inputType: "textarea"
+                }
+            ],
+            showTabs: [
+                {
+                    label: 'Informationen',
+                }
+            ]
+        },
+        servicecategories: {
+            isArchivable: true,
+            label: "Leistungskategorien",
+            labelSingle: "Leistungskategorie",
+            isStandardEntity: true,
+            redirect: true,
+            supabaseSortColumn: "name",
+            supabaseSelectWithInformation: "*",
+            filters: [{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name",
+                    required: true,
+                    title: true,
+                    inputType: "text",
+                    sortable: true
+                },
+                {
+                    key: "description",
+                    label: "Beschreibung",
+                    inputType: "textarea"
+                }
+            ],
+            showTabs: [
+                {
+                    label: 'Informationen',
+                }
+            ]
+        },
+        trackingtrips: {
+            label: "Fahrten",
+            labelSingle: "Fahrt",
+            redirect: true,
+            historyItemHolder: "trackingtrip",
+        },
+        projecttypes: {
+            isArchivable: true,
+            label: "Projekttypen",
+            labelSingle: "Projekttyp",
+            redirect: true,
+            historyItemHolder: "projecttype"
+        },
+        checks: {
+            isArchivable: true,
+            label: "Überprüfungen",
+            labelSingle: "Überprüfung",
+            isStandardEntity: true,
+            supabaseSelectWithInformation: "*, vehicle(id,licensePlate), profile(id, fullName), inventoryitem(name), files(*)",
+            redirect: true,
+            historyItemHolder: "check",
+            filters: [{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name",
+                    title: true,
+                    required: true,
+                    inputType: "text"
+                },
+                {
+                    key: "vehicle",
+                    label: "Fahrzeug",
+                    component: vehicle,
+                    inputType: "select",
+                    selectDataType: "vehicles",
+                    selectOptionAttribute: "licensePlate",
+                    selectSearchAttributes: ['licensePlate'],
+                },
+                {
+                    key: "profile",
+                    label: "Person",
+                    component: profile,
+                    inputType: "select",
+                    selectDataType: "profiles",
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                },
+                {
+                    key: "inventoryitem",
+                    label: "Inventarartikel",
+                    inputType: "select",
+                    selectDataType: "inventoryitems",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                },
+                {
+                    key: "description",
+                    label: "Beschreibung",
+                    inputType: "textarea"
+                }
+            ],
+            showTabs: [
+                {
+                label: 'Informationen',
+            }, {label: 'Dateien'}, {label: 'Ausführungen'}]
+        },
+        roles: {
+            label: "Rollen",
+            labelSingle: "Rolle",
+            redirect:true,
+            historyItemHolder: "role",
+            filters: [],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name"
+                }, {
+                    key: "description",
+                    label: "Beschreibung"
+                }
+            ]
+        },
+        costcentres: {
+            isArchivable: true,
+            label: "Kostenstellen",
+            labelSingle: "Kostenstelle",
+            isStandardEntity: true,
+            redirect:true,
+            numberRangeHolder: "number",
+            historyItemHolder: "costcentre",
+            supabaseSortColumn: "number",
+            supabaseSelectWithInformation: "*, project(*), vehicle(*), inventoryitem(*)",
+            filters: [{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: 'number',
+                    label: "Nummer",
+                    inputIsNumberRange: true,
+                    inputType: "text",
+                    sortable: true
+                }, {
+                    key: "name",
+                    label: "Name",
+                    required: true,
+                    title: true,
+                    inputType: "text",
+                    sortable: true
+                },
+                {
+                    key: "description",
+                    label: "Beschreibung",
+                    inputType: "textarea"
+                },
+                {
+                    key: "vehicle",
+                    label: "Fahrzeug",
+                    component: vehicle,
+                    inputType: "select",
+                    selectDataType: "vehicles",
+                    selectOptionAttribute: "licensePlate",
+                    selectSearchAttributes: ['licensePlate'],
+                },
+                {
+                    key: "inventoryitem",
+                    label: "Inventarartikel",
+                    inputType: "select",
+                    selectDataType: "inventoryitems",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                },
+                {
+                    key: "project",
+                    label: "Projekt",
+                    component: project,
+                    inputType: "select",
+                    selectDataType: "projects",
+                    selectOptionAttribute: "name",
+                    selectSearchAttributes: ['name'],
+                },
+                /*{
+                    key: "profiles",
+                    label: "Berechtigte Benutzer",
+                    inputType: "select",
+                    selectDataType: "profiles",
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                    selectMultiple: true,/!*
+                    component: profiles,*!/
+                    inputColumn: "Allgemeines"
+                },*/
+            ],
+            showTabs: [{label: 'Informationen'},{label: 'Auswertung Kostenstelle'}]
+        },
+        ownaccounts: {
+            isArchivable: true,
+            label: "zusätzliche Buchungskonten",
+            labelSingle: "zusätzliches Buchungskonto",
+            isStandardEntity: true,
+            redirect:true,
+            historyItemHolder: "ownaccount",
+            supabaseSortColumn: "number",
+            supabaseSelectWithInformation: "*, statementallocations(*, bs_id(*))",
+            filters: [{
+                name: "Archivierte ausblenden",
+                default: true,
+                "filterFunction": function (row) {
+                    if(!row.archived) {
+                        return true
+                    } else {
+                        return false
+                    }
+                }
+            }],
+            templateColumns: [
+                {
+                    key: 'number',
+                    label: "Nummer",
+                    inputType: "text",
+                    sortable: true
+                }, {
+                    key: "name",
+                    label: "Name",
+                    required: true,
+                    title: true,
+                    inputType: "text",
+                    sortable: true
+                },
+                {
+                    key: "description",
+                    label: "Beschreibung",
+                    inputType: "textarea"
+                },
+                /*{
+                    key: "profiles",
+                    label: "Berechtigte Benutzer",
+                    inputType: "select",
+                    selectDataType: "profiles",
+                    selectOptionAttribute: "fullName",
+                    selectSearchAttributes: ['fullName'],
+                    selectMultiple: true,/!*
+                    component: profiles,*!/
+                    inputColumn: "Allgemeines"
+                },*/
+            ],
+            showTabs: [{label: 'Informationen'},{label: 'Buchungen'}]
+        },
+        bankaccounts: {
+            label: "Bankkonten",
+            labelSingle: "Bankkonto",
+        }
+    }
+
+    const documentTypesForCreation = ref({
+        invoices: {
+            label: "Rechnungen",
+            labelSingle: "Rechnung",
+
+        },
+        serialInvoices: {
+            label: "Serienrechnungen",
+            labelSingle: "Serienrechnung",
+        },
+        advanceInvoices: {
+            label: "Abschlagsrechnungen",
+            labelSingle: "Abschlagsrechnung"
+        },
+        cancellationInvoices: {
+            label: "Stornorechnungen",
+            labelSingle: "Storno"
+        },
+        quotes: {
+            label: "Angebote",
+            labelSingle: "Angebot"
+        },
+        deliveryNotes: {
+            label: "Lieferscheine",
+            labelSingle: "Lieferschein"
+        },
+        confirmationOrders: {
+            label: "Auftragsbestätigungen",
+            labelSingle: "Auftragsbestätigung"
+        }
+    })
+
+
+
+
+
+
+
+
+
+    return {
+        dataTypes,
+        documentTypesForCreation,
+    }
+})
\ No newline at end of file
diff --git a/frontend/stores/labelPrinter.ts b/frontend/stores/labelPrinter.ts
new file mode 100644
index 0000000..60a96a9
--- /dev/null
+++ b/frontend/stores/labelPrinter.ts
@@ -0,0 +1,190 @@
+import { defineStore } from "pinia"
+import {
+    Utils,
+    RequestCommandId,
+    ResponseCommandId,
+    NiimbotBluetoothClient,
+    NiimbotSerialClient
+} from "@mmote/niimbluelib"
+import { useToast } from "#imports"
+
+export const useLabelPrinterStore = defineStore("labelPrinter", {
+    state: () => ({
+        client: null as NiimbotBluetoothClient | NiimbotSerialClient | null,
+        connected: false,
+        connectLoading: false,
+        transportLastUsed: "",
+        printProgress: 0,
+        info: {} as any
+    }),
+
+    actions: {
+
+        /** Logging Helper */
+        logger(...args: any[]) {
+            console.debug("[Printer]", ...args)
+        },
+
+        /** --- Client erzeugen --- */
+        newClient(transport: "ble" | "serial" = "serial") {
+            const toast = useToast()
+
+            // alten Client trennen
+            if (this.client) {
+                try { this.client.disconnect() } catch {}
+            }
+
+            // neuen Client erzeugen
+            this.client =
+                transport === "ble"
+                    ? new NiimbotBluetoothClient()
+                    : new NiimbotSerialClient()
+
+            /** Events registrieren */
+
+            this.client.on("printerinfofetched", (e) => {
+                console.log("printerInfoFetched")
+                console.log(e.info)
+                this.info = e.info
+            })
+
+            this.client.on("connect", () => {
+                this.connected = true
+                toast.add({ title: "Drucker verbunden" })
+                this.logger("connected")
+            })
+
+            this.client.on("disconnect", () => {
+                this.connected = false
+                toast.add({ title: "Drucker getrennt" })
+                this.logger("disconnected")
+            })
+
+            this.client.on("printprogress", (e) => {
+                if (e.pagePrintProgress) this.printProgress = e.pagePrintProgress
+                this.logger(
+                    `Page ${e.page}/${e.pagesTotal}, Page print ${e.pagePrintProgress}%, Page feed ${e.pageFeedProgress}%`
+                )
+            })
+
+            return this.client
+        },
+
+        /** --- Verbinden --- */
+        async connect(transport: "ble" | "serial" = "serial") {
+            const toast = useToast()
+
+            this.connectLoading = true
+
+            this.newClient(transport)
+
+            try {
+                await this.client!.connect()
+                this.transportLastUsed = transport
+                this.connectLoading = false
+            } catch (err) {
+                console.error("[Printer] Connect failed:", err)
+                toast.add({ title: "Verbindung fehlgeschlagen", color: "red" })
+                this.connectLoading = false
+            }
+        },
+
+        /** --- Trennen --- */
+        async disconnect({ forget = false } = {}) {
+            const toast = useToast()
+            this.logger("Disconnect requested…")
+
+            if (!this.client) return
+
+            try {
+                // Timer stoppen
+                try {
+                    if (this.client.heartbeatTimer) {
+                        clearInterval(this.client.heartbeatTimer)
+                        this.client.heartbeatTimer = null
+                    }
+                    if (this.client.abstraction?.statusPollTimer) {
+                        clearInterval(this.client.abstraction.statusPollTimer)
+                        this.client.abstraction.statusPollTimer = null
+                    }
+                } catch {}
+
+                await this.client.disconnect?.()
+
+                // Serial-Port schließen
+                const port = (this.client as any).port
+                if (port) {
+                    try {
+                        if (port.readable) port.readable.cancel?.()
+                        if (port.writable) await port.writable.abort?.()
+                        await port.close?.()
+
+                        if (forget && navigator.serial?.forgetPort) {
+                            await navigator.serial.forgetPort(port)
+                        }
+                    } catch (err) {
+                        this.logger("Error closing port:", err)
+                    }
+                }
+
+                // BLE GATT
+                if (
+                    this.client instanceof NiimbotBluetoothClient &&
+                    this.client.device?.gatt?.connected
+                ) {
+                    try {
+                        this.client.device.gatt.disconnect()
+                    } catch {}
+                }
+
+                this.connected = false
+                this.client = null
+                toast.add({ title: "Drucker getrennt" })
+            } catch (err) {
+                console.error("[Printer] Disconnect error", err)
+                toast.add({ title: "Fehler beim Trennen", color: "red" })
+            }
+        },
+
+        /** Hilfsfunktion: EncodedImage reparieren */
+        reviveEncodedImage(encoded: any) {
+            if (!encoded?.rowsData) return encoded
+            for (const row of encoded.rowsData) {
+                if (row.rowData && !(row.rowData instanceof Uint8Array)) {
+                    row.rowData = new Uint8Array(Object.values(row.rowData))
+                }
+            }
+            return encoded
+        },
+
+        /** --- Drucken --- */
+        async print(encoded: any, options?: { density?: number; pages?: number }) {
+            const toast = useToast()
+
+            if (!this.client) throw new Error("Kein Drucker verbunden")
+
+            const fixed = this.reviveEncodedImage(encoded)
+            const taskName = this.client.getPrintTaskType() ?? "B1"
+
+            const task = this.client.abstraction.newPrintTask(taskName, {
+                totalPages: options?.pages ?? 1,
+                statusPollIntervalMs: 100,
+                statusTimeoutMs: 8000,
+                density: options?.density ?? 5
+            })
+
+            try {
+                this.printProgress = 0
+                await task.printInit()
+                await task.printPage(fixed, options?.pages ?? 1)
+                await task.waitForFinished()
+                toast.add({ title: "Druck abgeschlossen" })
+            } catch (e) {
+                console.error("[Printer] print error", e)
+                toast.add({ title: "Druckfehler", color: "red" })
+            } finally {
+                await task.printEnd()
+            }
+        }
+    }
+})
diff --git a/frontend/stores/profile.js b/frontend/stores/profile.js
new file mode 100644
index 0000000..66aebad
--- /dev/null
+++ b/frontend/stores/profile.js
@@ -0,0 +1,162 @@
+import {defineStore} from 'pinia'
+import OneSignal from "onesignal-cordova-plugin";
+import {Capacitor} from "@capacitor/core";
+// @ts-ignore
+export const useProfileStore = defineStore('profile', () => {
+
+    const supabase = useSupabaseClient()
+    const dataStore = useDataStore()
+    const user = useSupabaseUser()
+    const toast = useToast()
+    const router = useRouter()
+
+    const loaded = ref(false)
+    const showProfileSelection = ref(false)
+    const ownTenant = ref({
+        calendarConfig: {
+            eventTypes: []
+        },
+        timeConfig: {
+            timeTypes: []
+        },
+        tags: {
+            documents: [] ,
+                products: []
+        },
+        measures: []
+    })
+
+
+    const profiles = ref([])
+    const ownProfiles = ref([])
+    const activeProfile = ref([])
+    const tenants = ref([])
+    const currentTenant = ref(null)
+
+
+    async function initializeData (userId) {
+
+        let profileconnections = (await supabase.from("profileconnections").select()).data
+        let profiles = (await supabase.from("profiles").select("*, role(*)")).data
+        let activeProfileConnection = profileconnections.find(i => i.active)
+        if(activeProfileConnection) {
+            if(!await useCapacitor().getIsPhone()) {
+                toast.add({title: 'Aktives Profil ausgewählt'})
+            }
+
+            console.log("Active Profile selected")
+            activeProfile.value = profiles.find(i => i.id === activeProfileConnection.profile_id)
+            currentTenant.value = activeProfile.value.tenant
+
+            if(Capacitor.getPlatform() === "ios") {
+                OneSignal.initialize("1295d5ff-28f8-46a6-9c62-fe5d090016d7");
+                OneSignal.Location.setShared(false)
+                OneSignal.Notifications.requestPermission();
+                OneSignal.login(activeProfileConnection.user_id)
+            }
+
+
+            await fetchData()
+            await dataStore.fetchData()
+        } else {
+            toast.add({title: 'Kein aktives Profil', color: 'orange'})
+            await fetchOwnProfiles()
+            await fetchTenants()
+            showProfileSelection.value = true
+        }
+
+
+    }
+
+    async function changeProfile(newActiveProfileId) {
+        loaded.value = false
+
+        let profileconnections = (await supabase.from("profileconnections").select()).data
+
+        let oldActiveProfileConnection = profileconnections.find(i => i.active)
+
+        const {error} = await supabase.from("profileconnections").update({active: true}).eq("profile_id", newActiveProfileId)
+
+        if(error) {
+            console.log(error)
+        } else {
+            if(oldActiveProfileConnection){
+                const {error} = await supabase.from("profileconnections").update({active: false}).eq("profile_id", oldActiveProfileConnection.profile_id)
+            }
+
+            reloadNuxtApp({
+                path:"/",
+                ttl: 10000
+            })
+        }
+    }
+
+    async function fetchData () {
+        await fetchOwnProfiles()
+        await fetchProfiles()
+
+        await fetchTenants()
+        await fetchOwnTenant()
+
+        loaded.value = true
+        console.log("Finished Loading")
+    }
+
+    function clearStore () {
+        loaded.value = false
+        ownTenant.value =  {}
+        profiles.value = []
+        ownProfiles.value = []
+        tenants.value = []
+    }
+
+    async function fetchOwnTenant () {
+        ownTenant.value = (await supabase.from("tenants").select().eq('id', currentTenant.value).single()).data
+    }
+
+    async function fetchProfiles () {
+        profiles.value = (await supabase.from("profiles").select().eq("tenant",currentTenant.value).order("lastName")).data
+    }
+
+    async function fetchOwnProfiles () {
+        let profiles = (await supabase.from("profiles").select().order("tenant")).data
+        let conns = (await supabase.from("profileconnections").select()).data.map(i => i.profile_id)
+        ownProfiles.value = profiles.filter(i => conns.includes(i.id))
+    }
+
+    async function fetchTenants () {
+        tenants.value = (await supabase.from("tenants").select().order("id",{ascending: true})).data
+    }
+
+    const getOwnProfile = computed(()  => {
+        return profiles.value.find(i => i.id === user.value.id)
+
+    })
+
+    const getProfileById = computed(() => (itemId) => {
+        return profiles.value.find(item => item.id === itemId)
+    })
+
+    return {
+        //General
+        currentTenant,
+        loaded,
+        showProfileSelection,
+        ownTenant,
+        initializeData,
+        changeProfile,
+
+        //Data
+        profiles,
+        ownProfiles,
+        activeProfile,
+        tenants,
+        fetchData,
+        clearStore,
+        fetchOwnTenant,
+        getOwnProfile,
+        getProfileById
+    }
+
+
+})
\ No newline at end of file
diff --git a/frontend/stores/temp.js b/frontend/stores/temp.js
new file mode 100644
index 0000000..921157d
--- /dev/null
+++ b/frontend/stores/temp.js
@@ -0,0 +1,86 @@
+import {defineStore} from 'pinia'
+
+// @ts-ignore
+export const useTempStore = defineStore('temp', () => {
+
+    const auth = useAuthStore()
+
+    const searchStrings = ref({})
+    const filters = ref({})
+    const columns = ref({})
+    const pages = ref({})
+    const settings = ref({})
+
+    const storeTempConfig = async () => {
+        const config = {
+            searchStrings: searchStrings.value,
+            columns: columns.value,
+            pages: pages.value,
+            settings: settings.value,
+            filters: filters.value
+        }
+
+        await useNuxtApp().$api(`/api/profiles/${auth.profile.id}`,{
+            method: 'PUT',
+            body: {temp_config: config}
+        })
+    }
+
+    function setStoredTempConfig (config) {
+        searchStrings.value = config.searchStrings
+        columns.value = config.columns
+        pages.value = config.pages
+        settings.value = config.settings
+        filters.value = config.filters || {}
+    }
+
+    function modifySearchString(type,input) {
+        searchStrings.value[type] = input
+        storeTempConfig()
+    }
+
+    function clearSearchString(type) {
+        searchStrings.value[type] = ""
+        storeTempConfig()
+    }
+
+    function modifyFilter(domain,type,input) {
+        if(!filters.value[domain]) filters.value[domain] = {}
+
+        filters.value[domain][type] = input
+        storeTempConfig()
+    }
+
+    function modifyColumns(type,input) {
+        columns.value[type] = input
+        storeTempConfig()
+    }
+
+    function modifyPages(type,input) {
+        pages.value[type] = input
+        storeTempConfig()
+    }
+
+    function modifySettings(type,input) {
+        settings.value[type] = input
+        storeTempConfig()
+    }
+
+
+    return {
+        setStoredTempConfig,
+        searchStrings,
+        modifySearchString,
+        clearSearchString,
+        filters,
+        modifyFilter,
+        columns,
+        modifyColumns,
+        modifyPages,
+        pages,
+        modifySettings,
+        settings
+    }
+
+
+})
\ No newline at end of file
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
new file mode 100644
index 0000000..992bea4
--- /dev/null
+++ b/frontend/tailwind.config.ts
@@ -0,0 +1,28 @@
+import type {Config} from 'tailwindcss'
+import defaultTheme from 'tailwindcss/defaultTheme'
+
+export default <Partial<Config>>{
+    theme: {
+        extend: {
+            colors: {
+                green: {
+                    50: "#f4fbf2",
+                    100: "#E7F7E1",
+                    200: "#cdeec4",
+                    300: "#a6e095",
+                    400: "#69c350",
+                    500: "#53ad3a",
+                    600: "#418e2b",
+                    700: "#357025",
+                    800: "#2d5922",
+                    900: "#254a1d",
+                    950: "#10280b"
+
+                }
+            }
+        }
+    },
+    plugins: [
+        require('tailwindcss-safe-area-capacitor'),
+    ]
+}
\ No newline at end of file
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..a746f2a
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}