From c41b99f29da3f9e27dd7c6409678e007fc075043 Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Wed, 27 Dec 2023 21:52:55 +0100
Subject: [PATCH] Changed STore Type and corrected all Pages Added
 HistoryDisplay.vue Added NumberRanges

---
 spaces/app.vue                                |  63 +-
 spaces/components/HistoryDisplay.vue          | 153 ++++
 spaces/composables/useNumberRange.js          |  29 +
 spaces/layouts/default.vue                    |   5 +-
 spaces/package.json                           |   3 +-
 spaces/pages/banking/index.vue                |  15 +-
 .../banking/statements/[[accountId]].vue      |  22 +-
 spaces/pages/contacts/[mode]/[[id]].vue       |  18 +-
 spaces/pages/contacts/index.vue               |  11 +-
 spaces/pages/contracts/[mode]/[[id]].vue      |  13 +-
 spaces/pages/contracts/index.vue              |   9 +-
 spaces/pages/customers/[mode]/[[id]].vue      | 368 +++++-----
 spaces/pages/customers/index.vue              |   7 +-
 spaces/pages/documents.vue                    |  16 +-
 .../pages/inventory/spaces/[mode]/[[id]].vue  |  51 +-
 spaces/pages/inventory/spaces/index.vue       |   7 +-
 spaces/pages/jobs/[mode]/[[id]].vue           |  29 +-
 spaces/pages/jobs/index.vue                   |   4 +-
 spaces/pages/planningBoard.vue                |  11 +-
 spaces/pages/products/[mode]/[[id]].vue       |  35 +-
 spaces/pages/products/index.vue               |   9 +-
 spaces/pages/projects/index.vue               | 101 +--
 spaces/pages/settings/numberRanges.vue        | 102 +++
 spaces/pages/settings/users.vue               |   5 +-
 spaces/pages/tasks.vue                        |  15 +-
 spaces/pages/timetracking.vue                 |  33 +-
 spaces/pages/vehicles/[mode]/[[id]].vue       |  24 +-
 spaces/pages/vehicles/index.vue               |   6 +-
 spaces/pages/vendorinvoices/[mode]/[[id]].vue |  21 +-
 spaces/pages/vendorinvoices/index.vue         |   9 +-
 spaces/pages/vendors/[mode]/[[id]].vue        |  13 +-
 spaces/pages/vendors/index.vue                |   7 +-
 spaces/stores/data.ts                         | 692 +++++++++++-------
 33 files changed, 1094 insertions(+), 812 deletions(-)
 create mode 100644 spaces/components/HistoryDisplay.vue
 create mode 100644 spaces/composables/useNumberRange.js
 create mode 100644 spaces/pages/settings/numberRanges.vue

diff --git a/spaces/app.vue b/spaces/app.vue
index eec01bc..71f3c52 100644
--- a/spaces/app.vue
+++ b/spaces/app.vue
@@ -9,11 +9,23 @@ const route = useRoute()
 const colorMode = useColorMode()
 const supabase = useSupabaseClient()
 const tenants = (await supabase.from("tenants").select()).data
-const {loaded, profiles} = storeToRefs(useDataStore())
-const {fetchData, getProfileById, clearStore} = useDataStore()
-const userProfile = (user.value ? getProfileById(user.value.id) : {})
+
+const dataStore = useDataStore()
+
+
+const userProfile = (user.value ? dataStore.getProfileById(user.value.id) : {})
 //console.log(userProfile)
 
+
+const isLight = computed({
+  get () {
+    return colorMode.value !== 'dark'
+  },
+  set () {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+
 const viewport = useViewport()
 
 watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
@@ -21,7 +33,7 @@ watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
 })
 
 
-fetchData()
+dataStore.fetchData()
 
 const navLinks = [
   {
@@ -57,8 +69,13 @@ const navLinks = [
       {
         label: "Eingangsrechnungen",
         to: "/vendorinvoices",
-        icon: "i-heroicons-user-group"
+        icon: "i-heroicons-document-text"
       },
+      /*{
+        label: "Ausgangsrechnungen",
+        to: "/customerinvoices",
+        icon: "i-heroicons-document-text"
+      },*/
       {
         label: "Bank",
         to: "/banking",
@@ -215,6 +232,10 @@ const items = [
     label: 'Externe Geräte',
     icon: 'i-heroicons-cog-8-tooth',
     to: "/settings/externalDevices"
+  },{
+    label: 'Nummernkreise',
+    icon: 'i-heroicons-cog-8-tooth',
+    to: "/settings/numberRanges"
   },{
     label: 'Benutzer',
     icon: 'i-heroicons-user-group',
@@ -233,7 +254,7 @@ const items = [
     icon: 'i-heroicons-arrow-left-on-rectangle',
     click: async () => {
       await supabase.auth.signOut()
-      await clearStore()
+      await dataStore.clearStore()
       await router.push("/login")
 
     }
@@ -247,14 +268,8 @@ const items = [
     <template #logo>
       <div id="logo">
         <img
-            v-if="colorMode.value === 'light'"
-            alt="Logo Hell"
-            src="/spaces_hell.svg"
-        />
-        <img
-            v-else
-            src="/spaces.svg"
-            alt="Logo Dunkel"
+            :src="!isLight  ? '/spaces.svg' : '/spaces_hell.svg'"
+            alt="Logo"
         />
       </div>
 
@@ -265,7 +280,19 @@ const items = [
     </template>
 
     <template #right  v-if="user">
-      <UColorModeButton/>
+      <ClientOnly>
+        <UButton
+            :icon="!isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+            color="gray"
+            variant="ghost"
+            aria-label="Theme"
+            @click="isLight = !isLight"
+        />
+
+        <template #fallback>
+          <div class="w-8 h-8" />
+        </template>
+      </ClientOnly>
       <UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
         <UAvatar
             :alt="userProfile ? userProfile.firstName + ' ' + userProfile.lastName : '' "
@@ -275,7 +302,7 @@ const items = [
         <template #account="{ item }">
           <div class="text-left">
             <p>
-              Signed in as
+              Eingeloggt als
             </p>
             <p class="truncate font-medium text-gray-900 dark:text-white">
               {{ item.label }}
@@ -415,4 +442,8 @@ const items = [
     border: 1px solid #69c350;
   }
 
+
+  a:hover {
+    color: #69c350
+  }
 </style>
\ No newline at end of file
diff --git a/spaces/components/HistoryDisplay.vue b/spaces/components/HistoryDisplay.vue
new file mode 100644
index 0000000..f3ae541
--- /dev/null
+++ b/spaces/components/HistoryDisplay.vue
@@ -0,0 +1,153 @@
+<script setup>
+import * as dayjs from "dayjs"
+const props = defineProps({
+  type: {
+    required: true,
+    type: String
+  },
+  elementId: {
+    required: true,
+    type: String
+  }
+})
+const user = useSupabaseUser()
+const supabase = useSupabaseClient()
+const toast = useToast()
+const {type, elementId} = props
+const showAddHistoryItemModal = ref(false)
+const colorMode = useColorMode()
+/*const historyItems = ref([
+  {
+    user: "86e67794-0ea8-41b0-985a-1072e84f56e9",
+    text: "<a class='text-primary-500'>@marielesindern</a> magst du die einmal anschauen",
+  },
+  {
+    user: "3b795486-6b71-4ed8-a1f6-dbc52360d826",
+    text: "<a class='text-primary-500'>@florianfederspiel</a> Jo alles bestens",
+  },
+  {
+    user: "Spaces Bot",
+    text: "Erstellt",
+  }
+])*/
+
+const {profiles} = storeToRefs(useDataStore())
+const {getHistoryItemsByCustomer, fetchHistoryItems} = useDataStore()
+
+const historyItems = computed(() => {
+
+  let items = []
+
+  if(type === "customer") {
+    items = getHistoryItemsByCustomer(elementId)
+  }
+
+  return items.reverse()
+
+})
+const addHistoryItemData = ref({
+  text: "",
+  user: ""
+})
+
+const addHistoryItem = async () => {
+  addHistoryItemData.value.user = user.value.id
+
+  if(type === "customer") {
+    addHistoryItemData.value.customer = elementId
+  }
+
+
+  const {data,error} = await supabase
+      .from("historyItems")
+      .insert([addHistoryItemData.value])
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else {
+    toast.add({title: "Eintrag erfolgreich erstellt"})
+    showAddHistoryItemModal.value = false
+    await fetchHistoryItems()
+  }
+
+}
+
+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>
+      <template #header>
+        Eintrag hinzufügen
+      </template>
+
+      <UFormGroup
+        label="Text:"
+      >
+        <UTextarea
+          v-model="addHistoryItemData.text"
+        />
+      </UFormGroup>
+
+
+      <template #footer>
+        <UButton @click="addHistoryItem">Hinzufügen</UButton>
+      </template>
+    </UCard>
+  </UModal>
+  <UCard class="mt-5">
+    <template #header>
+      <InputGroup>
+        <UButton
+          @click="showAddHistoryItemModal = true"
+        >
+          + Eintrag
+        </UButton>
+      </InputGroup>
+    </template>
+    <div
+      v-if="historyItems.length > 0"
+      v-for="(item,index) in historyItems"
+    >
+      <UDivider
+          class="my-3"
+          v-if="index !== 0"
+      />
+      <div class="flex items-center gap-3">
+        <UAvatar
+            v-if="!item.user"
+            :src="colorMode.value === 'light' ? '/spaces_hell.svg' : '/spaces.svg' "
+        />
+        <UAvatar
+            :alt="profiles.find(profile => profile.id === item.user).fullName"
+            v-else
+        />
+        <div>
+          <h3 v-if="item.user">{{profiles.find(profile => profile.id === item.user) ? profiles.find(profile => profile.id === item.user).fullName : ""}}</h3>
+          <h3 v-else>Spaces 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>
+
+
+  </UCard>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/spaces/composables/useNumberRange.js b/spaces/composables/useNumberRange.js
new file mode 100644
index 0000000..592df85
--- /dev/null
+++ b/spaces/composables/useNumberRange.js
@@ -0,0 +1,29 @@
+
+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/spaces/layouts/default.vue b/spaces/layouts/default.vue
index 83209b3..bd25e71 100644
--- a/spaces/layouts/default.vue
+++ b/spaces/layouts/default.vue
@@ -1,12 +1,11 @@
 <script setup>
-const {loaded, profiles} = storeToRefs(useDataStore())
-
+const dataStore = useDataStore()
 </script>
 
 <template>
 
 
-  <slot v-if="loaded"/>
+  <slot v-if="dataStore.loaded"/>
 
 
   <div
diff --git a/spaces/package.json b/spaces/package.json
index 737354b..31ff846 100644
--- a/spaces/package.json
+++ b/spaces/package.json
@@ -46,6 +46,7 @@
     "pinia": "^2.1.7",
     "socket.io-client": "^4.7.2",
     "uuidv4": "^6.2.13",
-    "v-calendar": "^3.1.2"
+    "v-calendar": "^3.1.2",
+    "vuedraggable": "^4.1.0"
   }
 }
diff --git a/spaces/pages/banking/index.vue b/spaces/pages/banking/index.vue
index e9573af..4178ef9 100644
--- a/spaces/pages/banking/index.vue
+++ b/spaces/pages/banking/index.vue
@@ -31,18 +31,11 @@ definePageMeta({
   middleware: "auth"
 })
 
-
+const dataStore = useDataStore()
 const router = useRouter()
-const {bankAccounts} = storeToRefs(useDataStore())
 const mode = ref("show")
 
 const itemColumns = [
-
-  {
-    key: "name",
-    label: "Name",
-    sortable: true
-  },
   {
     key: "iban",
     label: "IBAN",
@@ -69,13 +62,13 @@ const selectItem = (item) => {
 const searchString = ref('')
 
 const filteredRows = computed(() => {
-  bankAccounts.value = bankAccounts.value.filter(account => account.used)
+  dataStore.bankAccounts = dataStore.bankAccounts.filter(account => account.used)
 
   if(!searchString.value) {
-    return bankAccounts.value
+    return dataStore.bankAccounts
   }
 
-  return bankAccounts.value.filter(item => {
+  return dataStore.bankAccounts.filter(item => {
     return Object.values(item).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
diff --git a/spaces/pages/banking/statements/[[accountId]].vue b/spaces/pages/banking/statements/[[accountId]].vue
index 675fd65..38aeb33 100644
--- a/spaces/pages/banking/statements/[[accountId]].vue
+++ b/spaces/pages/banking/statements/[[accountId]].vue
@@ -4,21 +4,20 @@ import * as dayjs from "dayjs";
 definePageMeta({
   middleware: "auth"
 })
-
+const dataStore = useDataStore()
 const route = useRoute()
 const supabase = useSupabaseClient()
 
-const {bankStatements,bankAccounts} = storeToRefs(useDataStore())
 
 const searchString = ref("")
 const showAssigned = ref(false)
 const selectedAccount = ref(0)
 
 const filteredRows = computed(() => {
-  let statements = bankStatements.value
+  let statements = dataStore.bankStatements
 
   if(!showAssigned.value) {
-    statements = statements.filter(statement => !(statement.customerInvoice || statement.vendorInvoice))
+    statements = statements.filter(statement => !statement.customerInvoice || !statement.vendorInvoice)
   }
 
   if(selectedAccount.value !== 0) {
@@ -26,17 +25,14 @@ const filteredRows = computed(() => {
   }
 
   if(searchString.value.length > 0) {
-    return statements.value.filter(item => {
+    statements = statements.filter(item => {
       return Object.values(item).some((value) => {
         return String(value).toLowerCase().includes(searchString.value.toLowerCase())
       })
     })
-  } else {
-    return statements
   }
 
-
-
+  return statements
 })
 
 
@@ -91,19 +87,19 @@ const statementColumns = [
 
   </USlideover>
 
-  <InputGroup gap="2">
+  <InputGroup :gap="2">
     <UInput
         v-model="searchString"
         placeholder="Suche..."
     />
     <USelectMenu
-      :options="bankAccounts.filter(account => account.used)"
+      :options="dataStore.bankAccounts.filter(account => account.used)"
       v-model="selectedAccount"
       option-attribute="iban"
       value-attribute="id"
     >
       <template #label>
-        {{bankAccounts.find(account => account.id === selectedAccount) ? bankAccounts.find(account => account.id === selectedAccount).iban : "Kontoauswählen"}}
+        {{dataStore.bankAccounts.find(account => account.id === selectedAccount) ? dataStore.bankAccounts.find(account => account.id === selectedAccount).iban : "Kontoauswählen"}}
       </template>
     </USelectMenu>
     <UCheckbox
@@ -113,7 +109,7 @@ const statementColumns = [
   </InputGroup>
 
   <UTable
-      :rows="bankStatements"
+      :rows="filteredRows"
       :columns="statementColumns"
       @select="selectStatement"
     >
diff --git a/spaces/pages/contacts/[mode]/[[id]].vue b/spaces/pages/contacts/[mode]/[[id]].vue
index 84bbb72..77c0221 100644
--- a/spaces/pages/contacts/[mode]/[[id]].vue
+++ b/spaces/pages/contacts/[mode]/[[id]].vue
@@ -11,9 +11,7 @@ const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
 
 //Store
-const {customers, vendors, contacts } = storeToRefs(useDataStore())
-const {fetchContacts, getContactById} = useDataStore()
-
+const dataStore = useDataStore()
 let currentContact = null
 
 
@@ -27,7 +25,7 @@ const itemInfo = ref({
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentContact = getContactById(Number(useRoute().params.id))
+    currentContact = dataStore.getContactById(Number(useRoute().params.id))
   }
 
   if(mode.value === "edit") itemInfo.value = currentContact
@@ -53,7 +51,7 @@ const createItem = async () => {
       id: 0,
     }
     toast.add({title: "Kontakt erfolgreich erstellt"})
-    await fetchContacts()
+    await dataStore.fetchContacts()
     router.push(`/contacts/show/${data[0].id}`)
     setupPage()
   }
@@ -84,7 +82,7 @@ const updateCustomer = async () => {
     name: "",
   }
   toast.add({title: "Kontakt erfolgreich gespeichert"})
-  fetchContacts()
+  dataStore.fetchContacts()
 }
 
 
@@ -125,8 +123,8 @@ setupPage()
         </UButton>
       </InputGroup>
 
-      <span v-if="currentContact.customer">Kunde: {{customers.find(customer => customer.id === currentContact.customer) ? customers.find(customer => customer.id === currentContact.customer).name : "" }}</span><br>
-      <span v-if="currentContact.vendor">Lieferant: {{vendors.find(vendor => vendor.id === currentContact.vendor) ? vendors.find(vendor => vendor.id === currentContact.vendor).name : ""}}</span><br>
+      <span v-if="currentContact.customer">Kunde: {{dataStore.customers.find(customer => customer.id === currentContact.customer) ? dataStore.customers.find(customer => customer.id === currentContact.customer).name : "" }}</span><br>
+      <span v-if="currentContact.vendor">Lieferant: {{dataStore.vendors.find(vendor => vendor.id === currentContact.vendor) ? dataStore.vendors.find(vendor => vendor.id === currentContact.vendor).name : ""}}</span><br>
 
       <span>E-Mail: {{currentContact.email}}</span><br>
       <span>Mobil: {{currentContact.phoneMobile}}</span><br>
@@ -201,7 +199,7 @@ setupPage()
           :search-attributes="['name']"
         >
           <template #label>
-            {{customers.find(customer => customer.id === itemInfo.customer) ? customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
+            {{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
           </template>
         </USelectMenu>
       </UFormGroup>
@@ -217,7 +215,7 @@ setupPage()
           :search-attributes="['name']"
         >
           <template #label>
-            {{vendors.find(vendor => vendor.id === itemInfo.vendor) ? vendors.find(vendor => vendor.id === itemInfo.vendor).name : "Lieferant auswählen"}}
+            {{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : "Lieferant auswählen"}}
           </template>
         </USelectMenu>
       </UFormGroup>
diff --git a/spaces/pages/contacts/index.vue b/spaces/pages/contacts/index.vue
index e7a30c7..a65ac3d 100644
--- a/spaces/pages/contacts/index.vue
+++ b/spaces/pages/contacts/index.vue
@@ -20,10 +20,10 @@
         :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     >
       <template #customer-data="{row}">
-        {{customers.find(customer => customer.id === row.customer) ? customers.find(customer => customer.id === row.customer).name : ''}}
+        {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : ''}}
       </template>
       <template #vendor-data="{row}">
-        {{vendors.find(vendor => vendor.id === row.vendor) ? vendors.find(vendor => vendor.id === row.vendor).name : ''}}
+        {{dataStore.vendors.find(vendor => vendor.id === row.vendor) ? dataStore.vendors.find(vendor => vendor.id === row.vendor).name : ''}}
       </template>
     </UTable>
 
@@ -36,9 +36,8 @@ definePageMeta({
   middleware: "auth"
 })
 
-
+const dataStore = useDataStore()
 const router = useRouter()
-const {contacts,customers,vendors} = storeToRefs(useDataStore())
 const mode = ref("show")
 
 const itemColumns = [
@@ -74,10 +73,10 @@ const searchString = ref('')
 
 const filteredRows = computed(() => {
   if(!searchString.value) {
-    return contacts.value
+    return dataStore.contacts
   }
 
-  return contacts.value.filter(item => {
+  return dataStore.contacts.filter(item => {
     return Object.values(item).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
diff --git a/spaces/pages/contracts/[mode]/[[id]].vue b/spaces/pages/contracts/[mode]/[[id]].vue
index f08a9e3..a0813bf 100644
--- a/spaces/pages/contracts/[mode]/[[id]].vue
+++ b/spaces/pages/contracts/[mode]/[[id]].vue
@@ -3,7 +3,7 @@ definePageMeta({
   middleware: "auth"
 })
 
-//
+const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
@@ -12,7 +12,6 @@ const id = ref(route.params.id ? route.params.id : null )
 
 //Store
 const {customers, contracts } = storeToRefs(useDataStore())
-const {fetchCustomers, getCustomerById, getContractById, fetchContracts} = useDataStore()
 
 let currentContract = null
 
@@ -29,7 +28,7 @@ const itemInfo = ref({
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentContract = getContractById(Number(useRoute().params.id))
+    currentContract = dataStore.getContractById(Number(useRoute().params.id))
   }
 
   if(mode.value === "edit") itemInfo.value = currentContract
@@ -53,7 +52,7 @@ const createItem = async () => {
       name: ""
     }
     toast.add({title: "Vertrag erfolgreich erstellt"})
-    await fetchContracts()
+    await dataStore.fetchContracts()
     router.push(`/contracts/show/${data[0].id}`)
     setupPage()
   }
@@ -84,7 +83,7 @@ const updateCustomer = async () => {
     name: "",
   }
   toast.add({title: "Vertrag erfolgreich gespeichert"})
-  fetchContracts()
+  dataStore.fetchContracts()
 }
 
 
@@ -110,7 +109,7 @@ setupPage()
         {{currentContract.name}}
       </template>
 
-      Kundennummer: {{currentContract.customer}} <br>
+      Kundennummer: {{dataStore.customers.find(customer => customer.id === currentContract.customer) ? dataStore.customers.find(customer => customer.id === currentContract.customer).name : ""}} <br>
 
       <UDivider
           class="my-2"
@@ -169,7 +168,7 @@ setupPage()
           :search-attributes="['name']"
         >
           <template #label>
-            {{customers.find(customer => customer.id === itemInfo.customer) ? customers.find(customer => customer.id === itemInfo.customer).name : itemInfo.customer}}
+            {{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : itemInfo.customer}}
           </template>
         </USelectMenu>
       </UFormGroup>
diff --git a/spaces/pages/contracts/index.vue b/spaces/pages/contracts/index.vue
index f8f1443..0c4c858 100644
--- a/spaces/pages/contracts/index.vue
+++ b/spaces/pages/contracts/index.vue
@@ -20,7 +20,7 @@
         :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     >
       <template #customer-data="{row}">
-        {{customers.find(customer => customer.id === row.customer) ? customers.find(customer => customer.id === row.customer).name : row.customer }}
+        {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : row.customer }}
       </template>
     </UTable>
 
@@ -33,9 +33,8 @@ definePageMeta({
   middleware: "auth"
 })
 
-
+const dataStore = useDataStore()
 const router = useRouter()
-const {contracts, customers } = storeToRefs(useDataStore())
 const mode = ref("show")
 
 const itemColumns = [
@@ -65,10 +64,10 @@ const searchString = ref('')
 
 const filteredRows = computed(() => {
   if(!searchString.value) {
-    return contracts.value
+    return dataStore.contracts
   }
 
-  return contracts.value.filter(item => {
+  return dataStore.contracts.filter(item => {
     return Object.values(item).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
diff --git a/spaces/pages/customers/[mode]/[[id]].vue b/spaces/pages/customers/[mode]/[[id]].vue
index 4f8c48a..ba1c1f4 100644
--- a/spaces/pages/customers/[mode]/[[id]].vue
+++ b/spaces/pages/customers/[mode]/[[id]].vue
@@ -1,20 +1,19 @@
 <script setup>
+import HistoryDisplay from "~/components/HistoryDisplay.vue";
+
 definePageMeta({
   middleware: "auth"
 })
 
-//
 const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
+const numberRange = useNumberRange("customers")
+const dataStore = useDataStore()
 
-//Store
-const {customers, contacts } = storeToRefs(useDataStore())
-const {fetchCustomers, getCustomerById, getContactsByCustomerId} = useDataStore()
-
-let currentCustomer = null
+let currentCustomer = ref(null)
 
 
 
@@ -22,24 +21,26 @@ let currentCustomer = null
 const mode = ref(route.params.mode || "show")
 const customerInfo = ref({
   name: "",
-  customerNumber: 0,
   infoData: {},
   active: true
 })
 
 //Functions
-const setupPage = () => {
+const setupPage = async () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentCustomer = getCustomerById(Number(useRoute().params.id))
+    currentCustomer.value = await dataStore.getCustomerById(Number(useRoute().params.id))
   }
 
-  if(mode.value === "edit") customerInfo.value = currentCustomer
-
+  if(mode.value === "edit") customerInfo.value = currentCustomer.value
 
 
 }
 
 const createCustomer = async () => {
+
+  if(!customerInfo.value.customerNumber) customerInfo.value.customerNumber = await numberRange.useNextNumber()
+
+
   const {data,error} = await supabase
       .from("customers")
       .insert([customerInfo.value])
@@ -55,14 +56,14 @@ const createCustomer = async () => {
       infoData: {}
     }
     toast.add({title: "Kunde erfolgreich erstellt"})
-    await fetchCustomers()
+    await dataStore.fetchCustomers()
     router.push(`/customers/show/${data[0].id}`)
     setupPage()
   }
 }
 
 const editCustomer = async () => {
-  router.push(`/customers/edit/${currentCustomer.id}`)
+  router.push(`/customers/edit/${currentCustomer.value.id}`)
   setupPage()
 }
 
@@ -88,7 +89,7 @@ const updateCustomer = async () => {
     infoData: {}
   }
   toast.add({title: "Kunde erfolgreich gespeichert"})
-  fetchCustomers()
+  dataStore.fetchCustomers()
 }
 
 
@@ -97,203 +98,194 @@ setupPage()
 </script>
 
 <template>
-  <div>
-    <UCard v-if="currentCustomer && mode == 'show'" >
-      <template #header>
-        <UBadge
-            v-if="currentCustomer.active"
-        >
-          Kunde aktiv
-        </UBadge>
-        <UBadge
+  <UCard v-if="currentCustomer && mode == 'show'" >
+    <template #header>
+      <UBadge
+          v-if="currentCustomer.active"
+      >
+        Kunde aktiv
+      </UBadge>
+      <UBadge
           v-else
           color="red"
-        >
-          Kunde gesperrt
-        </UBadge>
-        {{currentCustomer.name}}
-      </template>
+      >
+        Kunde gesperrt
+      </UBadge>
+      {{currentCustomer.name}}
+    </template>
 
-      Kundennummer: {{currentCustomer.customerNumber}} <br>
+    Kundennummer: {{currentCustomer.customerNumber}} <br>
 
-      <UDivider
-          class="my-2"
-      />
-
-      Informationen:<br>
-      {{currentCustomer.infoData}}<br>
-
-      <UDivider
+    <UDivider
         class="my-2"
-      />
+    />
 
-      Notizen:<br>
-      {{currentCustomer.notes}}<br>
+    Informationen:<br>
+    {{currentCustomer.infoData}}<br>
 
-      <UDivider
+    <UDivider
         class="my-2"
+    />
+
+    Notizen:<br>
+    {{currentCustomer.notes}}<br>
+
+    <UDivider
+        class="my-2"
+    />
+
+    Kontakte: <br>
+
+    <ul>
+      <li
+          v-for="contact in dataStore.getContactsByCustomerId(currentCustomer.id)"
+      >
+        <router-link :to="'/contacts/show/' + contact.id">{{contact.salutation}} {{contact.fullName}} - {{contact.role}}</router-link>
+      </li>
+    </ul>
+
+
+
+
+    <template #footer>
+      <UButton
+          v-if="mode == 'show' && currentCustomer.id"
+          @click="editCustomer"
+      >
+        Bearbeiten
+      </UButton>
+      <UButton
+          color="red"
+          class="ml-2"
+          disabled
+      >
+        Archivieren
+      </UButton>
+      <!-- TODO: Kunde archivieren        -->
+    </template>
+
+
+
+  </UCard>
+  <UCard v-else-if="mode == 'edit' || mode == 'create'" >
+    <template #header v-if="mode === 'edit'">
+      <UBadge>{{customerInfo.customerNumber}}</UBadge>{{customerInfo.name}}
+    </template>
+
+    <UFormGroup
+        label="Name:"
+    >
+      <UInput
+          v-model="customerInfo.name"
       />
+    </UFormGroup>
 
-      Kontakte: <br>
-      <table>
-        <tr>
-          <th>Anrede</th>
-          <th>Name</th>
-          <th>Rolle</th>
-        </tr>
-        <tr v-for="contact in getContactsByCustomerId(currentCustomer.id)">
-          <td>{{contact.salutation}}</td>
-          <td>{{contact.fullName}}</td>
-          <td>{{contact.role}}</td>
-        </tr>
-      </table>
-
-<!--      Kontakte:<br>
-      &lt;!&ndash;        <ul>
-      <li v-for="contact in currentCustomer.contacts.data">{{contact.lastName}}, {{contact.firstName}}</li>
-    </ul>&ndash;&gt;
-      &lt;!&ndash;        {{currentCustomer.contacts.data}}&ndash;&gt;
-      <br>
-      Projekte:<br>
-      &lt;!&ndash;        <ul>
-      <li v-for="project in currentCustomer.projects.data"><router-link :to="'/projects?id=' + project.id">{{project.name}}</router-link></li>
-    </ul>&ndash;&gt;-->
-
-
-
-      <template #footer>
-        <UButton
-            v-if="mode == 'show' && currentCustomer.id"
-            @click="editCustomer"
-        >
-          Bearbeiten
-        </UButton>
-        <UButton
-            color="red"
-            class="ml-2"
-            disabled
-        >
-          Archivieren
-        </UButton>
-        <!-- TODO: Kunde archivieren        -->
-      </template>
-
-
-
-    </UCard>
-    <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-      <template #header>
-        <UBadge>{{customerInfo.customerNumber}}</UBadge> {{customerInfo.name}}
-      </template>
+    <UFormGroup
+        label="Kundennummer:"
+    >
+      <UInput
+          v-model="customerInfo.customerNumber"
+          placeholder="Leer lassen für automatisch generierte Nummer"
+      />
+    </UFormGroup>
 
+    <UTooltip text="Ist ein Kunde nicht aktiv so wird er für neue Aufträge gesperrt">
       <UFormGroup
-          label="Name:"
+          label="Kunde aktiv:"
       >
-        <UInput
-            v-model="customerInfo.name"
+        <UCheckbox
+            v-model="customerInfo.active"
         />
       </UFormGroup>
+    </UTooltip>
+    <UFormGroup
+        label="Notizen:"
+    >
+      <UTextarea
+          v-model="customerInfo.notes"
+      />
+    </UFormGroup>
 
-      <UFormGroup
-          label="Kundennummer:"
-      >
-        <UInput
-            v-model="customerInfo.customerNumber"
-        />
-      </UFormGroup>
+    <UFormGroup
+        label="Straße + Hausnummer"
+    >
+      <UInput
+          v-model="customerInfo.infoData.street"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Postleitzahl"
+    >
+      <UInput
+          v-model="customerInfo.infoData.zip"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Ort"
+    >
+      <UInput
+          v-model="customerInfo.infoData.city"
+      />
+    </UFormGroup>
 
-      <UTooltip text="Ist ein Kunde nicht aktiv so wird er für neue Aufträge gesperrt">
-        <UFormGroup
-            label="Kunde aktiv:"
-        >
-          <UCheckbox
-              v-model="customerInfo.active"
-          />
-        </UFormGroup>
-      </UTooltip>
-      <UFormGroup
-          label="Notizen:"
-      >
-        <UTextarea
-            v-model="customerInfo.notes"
-        />
-      </UFormGroup>
+    <UFormGroup
+        label="Telefon:"
+    >
+      <UInput
+          v-model="customerInfo.infoData.tel"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="E-Mail:"
+    >
+      <UInput
+          v-model="customerInfo.infoData.email"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Webseite:"
+    >
+      <UInput
+          v-model="customerInfo.infoData.web"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="USt-Id:"
+    >
+      <UInput
+          v-model="customerInfo.infoData.ustid"
+      />
+    </UFormGroup>
 
-      <UFormGroup
-          label="Straße + Hausnummer"
+    <template #footer>
+      <UButton
+          v-if="mode == 'edit'"
+          @click="updateCustomer"
       >
-        <UInput
-            v-model="customerInfo.infoData.street"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Postleitzahl"
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode == 'create'"
+          @click="createCustomer"
       >
-        <UInput
-            v-model="customerInfo.infoData.zip"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Ort"
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
       >
-        <UInput
-            v-model="customerInfo.infoData.city"
-        />
-      </UFormGroup>
+        Abbrechen
+      </UButton>
+    </template>
 
-      <UFormGroup
-          label="Telefon:"
-      >
-        <UInput
-            v-model="customerInfo.infoData.tel"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="E-Mail:"
-      >
-        <UInput
-            v-model="customerInfo.infoData.email"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Webseite:"
-      >
-        <UInput
-            v-model="customerInfo.infoData.web"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="USt-Id:"
-      >
-        <UInput
-            v-model="customerInfo.infoData.ustid"
-        />
-      </UFormGroup>
+  </UCard>
 
-      <template #footer>
-        <UButton
-            v-if="mode == 'edit'"
-            @click="updateCustomer"
-        >
-          Speichern
-        </UButton>
-        <UButton
-            v-else-if="mode == 'create'"
-            @click="createCustomer"
-        >
-          Erstellen
-        </UButton>
-        <UButton
-            @click="cancelEditorCreate"
-            color="red"
-            class="ml-2"
-        >
-          Abbrechen
-        </UButton>
-      </template>
-
-    </UCard>
-  </div>
+  <HistoryDisplay
+      type="customer"
+      v-if="currentCustomer"
+      :element-id="currentCustomer.id"
+  />
 </template>
 
 <style scoped>
diff --git a/spaces/pages/customers/index.vue b/spaces/pages/customers/index.vue
index 5708878..983de45 100644
--- a/spaces/pages/customers/index.vue
+++ b/spaces/pages/customers/index.vue
@@ -30,9 +30,8 @@ definePageMeta({
   middleware: "auth"
 })
 
-
+const dataStore = useDataStore()
 const router = useRouter()
-const {customers } = storeToRefs(useDataStore())
 const mode = ref("show")
 
 const customerColumns = [
@@ -59,10 +58,10 @@ const searchString = ref('')
 
 const filteredRows = computed(() => {
   if(!searchString.value) {
-    return customers.value
+    return dataStore.customers
   }
 
-  return customers.value.filter(item => {
+  return dataStore.customers.filter(item => {
     return Object.values(item).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
diff --git a/spaces/pages/documents.vue b/spaces/pages/documents.vue
index cb978fa..e08b971 100644
--- a/spaces/pages/documents.vue
+++ b/spaces/pages/documents.vue
@@ -5,14 +5,12 @@ import {BlobReader, BlobWriter, ZipWriter} from "@zip.js/zip.js";
 definePageMeta({
   middleware: "auth"
 })
+const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const user = useSupabaseUser()
 const toast = useToast()
 
-const {documents, projects, customers} = storeToRefs(useDataStore())
-const {fetchDocuments, getDocumentTags} = useDataStore()
-
-fetchDocuments()
+dataStore.fetchDocuments()
 
 const uploadModalOpen = ref(false)
 const uploadInProgress = ref(false)
@@ -24,13 +22,13 @@ const fileUploadFormData = ref({
 })
 
 
-let tags = getDocumentTags
+let tags = dataStore.getDocumentTags
 
 const selectedTags = ref(["Eingang"])
 
 const filteredDocuments = computed(() => {
 
-  return documents.value.filter(doc => doc.tags.filter(tag => selectedTags.value.find(t => t === tag)).length > 0)
+  return dataStore.documents.filter(doc => doc.tags.filter(tag => selectedTags.value.find(t => t === tag)).length > 0)
 
 
 })
@@ -84,14 +82,14 @@ const uploadFiles = async () => {
 
   uploadModalOpen.value = false;
   uploadInProgress.value = false;
-  fetchDocuments()
+  dataStore.fetchDocuments()
 }
 
 const downloadSelected = async () => {
   const bucket = "files";
 
   let files = []
-  documents.value.filter(doc => doc.selected).forEach(doc => files.push(doc.path))
+  dataStore.documents.filter(doc => doc.selected).forEach(doc => files.push(doc.path))
 
   console.log(files)
 
@@ -154,7 +152,7 @@ const downloadSelected = async () => {
       <UButton @click="uploadModalOpen = true">Hochladen</UButton>
       <UButton
           @click="downloadSelected"
-          :disabled="documents.filter(doc => doc.selected).length === 0"
+          :disabled="dataStore.documents.filter(doc => doc.selected).length === 0"
       >Herunterladen</UButton>
 
       <USelectMenu
diff --git a/spaces/pages/inventory/spaces/[mode]/[[id]].vue b/spaces/pages/inventory/spaces/[mode]/[[id]].vue
index a78aae4..d916b63 100644
--- a/spaces/pages/inventory/spaces/[mode]/[[id]].vue
+++ b/spaces/pages/inventory/spaces/[mode]/[[id]].vue
@@ -11,20 +11,20 @@ const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
-
+const numberRange = useNumberRange("spaces")
 
 //Store
-const {spaces,movements,products,units,ownTenant} = storeToRefs(useDataStore())
-const {fetchSpaces, getSpaceById, movementsBySpace, getProductById} = useDataStore()
-
-let currentItem = null
+const {spaces,movements,products,units,ownTenant, numberRanges} = storeToRefs(useDataStore())
+const {fetchSpaces, getSpaceById, movementsBySpace, getProductById, fetchNumberRanges} = useDataStore()
 
 
+let currentItem = ref(null)
+let currentNumberRange = null
 
 //Working
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
-  spaceNumber: 0
+  spaceNumber: ""
 })
 const spaceTypes = ["Regalplatz", "Kiste", "Palettenplatz"]
 const spaceProducts = ref([])
@@ -32,11 +32,11 @@ const spaceMovements = ref([])
 
 //Functions
 const setupPage = async () => {
+  console.log("Called Setup")
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem = await getSpaceById(Number(useRoute().params.id))
-    console.log(currentItem)
+    currentItem.value = await getSpaceById(Number(useRoute().params.id))
 
-    spaceMovements.value = movementsBySpace(currentItem.id)
+    spaceMovements.value = await movementsBySpace(currentItem.value.id)
     spaceProducts.value = []
     spaceMovements.value.forEach(movement => {
       if(spaceProducts.value.filter(product => product.id === movement.productId).length === 0) spaceProducts.value.push(getProductById(movement.productId))
@@ -44,23 +44,13 @@ const setupPage = async () => {
 
   }
 
-  if(mode.value === "edit") itemInfo.value = currentItem
-
-  if(mode.value === "create") {
-    let lastSpaceNumber = 0
-    spaces.value.forEach(space => {
-      if(space.spaceNumber > lastSpaceNumber) lastSpaceNumber = space.spaceNumber
-    })
-    itemInfo.value.spaceNumber = lastSpaceNumber + 1
-  }
-
-
+  if(mode.value === "edit") itemInfo.value = currentItem.value
 
 }
 
 const createItem = async () => {
 
-
+  if(!itemInfo.value.spaceNumber) itemInfo.value.spaceNumber = await numberRange.useNextNumber()
 
   const {data,error} = await supabase
       .from("spaces")
@@ -70,17 +60,20 @@ const createItem = async () => {
   if(error) {
     console.log(error)
   } else {
+    console.log(data[0])
     mode.value = "show"
-    itemInfo.value = {}
     toast.add({title: "Lagerplatz erfolgreich erstellt"})
     await fetchSpaces()
     router.push(`/inventory/spaces/show/${data[0].id}`)
-    setupPage()
+
+
+
+    //setupPage()
   }
 }
 
 const editItem = async () => {
-  router.push(`/inventory/spaces/edit/${currentItem.id}`)
+  router.push(`/inventory/spaces/edit/${currentItem.value.id}`)
   setupPage()
 }
 
@@ -118,7 +111,7 @@ const printSpaceLabel = async () => {
 
 
   axios
-      .post(`http://${ownTenant.value.labelPrinterIp}/pstprnt`, `^XA^FO10,20^BCN,100^FD${currentItem.spaceNumber}^XZ` )
+      .post(`http://${ownTenant.value.labelPrinterIp}/pstprnt`, `^XA^FO10,20^BCN,100^FD${currentItem.value.spaceNumber}^XZ` )
       .then(console.log)
       .catch(console.log)
 }
@@ -129,6 +122,10 @@ setupPage()
 
 <template>
   <div>
+    <DevOnly>
+      {{currentItem}}
+      {{mode}}
+    </DevOnly>
     <UCard v-if="currentItem && mode == 'show'" >
       <template #header>
         <UBadge>{{currentItem.spaceNumber}}</UBadge> {{currentItem.type}}
@@ -187,8 +184,8 @@ setupPage()
 
 
     </UCard>
-    <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-      <template #header>
+    <UCard v-else-if="mode === 'edit' || mode === 'create'" >
+      <template #header v-if="mode === 'edit'">
         <UBadge>{{itemInfo.spaceNumber}}</UBadge>{{itemInfo.type}}
       </template>
 
diff --git a/spaces/pages/inventory/spaces/index.vue b/spaces/pages/inventory/spaces/index.vue
index 2cbdbe0..0de73e6 100644
--- a/spaces/pages/inventory/spaces/index.vue
+++ b/spaces/pages/inventory/spaces/index.vue
@@ -30,9 +30,8 @@ definePageMeta({
   middleware: "auth"
 })
 
-
+const dataStore = useDataStore()
 const router = useRouter()
-const {spaces } = storeToRefs(useDataStore())
 const mode = ref("show")
 
 const itemColumns = [
@@ -64,10 +63,10 @@ const searchString = ref('')
 
 const filteredRows = computed(() => {
   if(!searchString.value) {
-    return spaces.value
+    return dataStore.spaces
   }
 
-  return spaces.value.filter(item => {
+  return dataStore.spaces.filter(item => {
     return Object.values(item).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
diff --git a/spaces/pages/jobs/[mode]/[[id]].vue b/spaces/pages/jobs/[mode]/[[id]].vue
index c79255a..e9259be 100644
--- a/spaces/pages/jobs/[mode]/[[id]].vue
+++ b/spaces/pages/jobs/[mode]/[[id]].vue
@@ -3,21 +3,15 @@ definePageMeta({
   middleware: "auth"
 })
 
-//
+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 )
 
-//Store
-const {jobs, customers} = storeToRefs(useDataStore())
-const {fetchJobs, getJobById} = useDataStore()
-
 let currentItem = null
 
-
-
 //Working
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
@@ -30,7 +24,7 @@ const states = ["Offen", "In Bearbeitung", "Erledigt"]
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem = getJobById(Number(useRoute().params.id))
+    currentItem = dataStore.getJobById(Number(useRoute().params.id))
   }
 
   if(mode.value === "edit") itemInfo.value = currentItem
@@ -54,7 +48,7 @@ const createItem = async () => {
       title: "",
     }
     toast.add({title: "Job erfolgreich erstellt"})
-    await fetchJobs()
+    await dataStore.fetchJobs()
     router.push(`/jobs/show/${data[0].id}`)
     setupPage()
   }
@@ -85,7 +79,7 @@ const updateItem = async () => {
     title: ""
   }
   toast.add({title: "Job erfolgreich gespeichert"})
-  fetchJobs()
+  dataStore.fetchJobs()
 }
 
 
@@ -109,17 +103,6 @@ setupPage()
 
 
 
-      <!--      Kontakte:<br>
-            &lt;!&ndash;        <ul>
-            <li v-for="contact in currentCustomer.contacts.data">{{contact.lastName}}, {{contact.firstName}}</li>
-          </ul>&ndash;&gt;
-            &lt;!&ndash;        {{currentCustomer.contacts.data}}&ndash;&gt;
-            <br>
-            Projekte:<br>
-            &lt;!&ndash;        <ul>
-            <li v-for="project in currentCustomer.projects.data"><router-link :to="'/projects?id=' + project.id">{{project.name}}</router-link></li>
-          </ul>&ndash;&gt;-->
-
 
 
       <template #footer>
@@ -169,14 +152,14 @@ setupPage()
       >
         <USelectMenu
             v-model="itemInfo.customer"
-            :options="customers"
+            :options="dataStore.customers"
             option-attribute="name"
             value-attribute="id"
             searchable
             :search-attributes="['name']"
         >
           <template #label>
-            {{customers.find(customer => customer.id === itemInfo.customer) ? customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
+            {{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
           </template>
         </USelectMenu>
       </UFormGroup>
diff --git a/spaces/pages/jobs/index.vue b/spaces/pages/jobs/index.vue
index 40ee027..0a08ee0 100644
--- a/spaces/pages/jobs/index.vue
+++ b/spaces/pages/jobs/index.vue
@@ -4,7 +4,7 @@
     <UButton @click="router.push(`/jobs/create/`)">+ Job</UButton>
 
     <UTable
-        :rows="jobs"
+        :rows="dataStore.jobs"
         :columns="columns"
         @select="selectJob"
         :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
@@ -19,8 +19,8 @@ definePageMeta({
   middleware: "auth"
 })
 
+const dataStore = useDataStore()
 const router = useRouter()
-const {jobs } = storeToRefs(useDataStore())
 const mode = ref("show")
 
 const columns = [
diff --git a/spaces/pages/planningBoard.vue b/spaces/pages/planningBoard.vue
index 488379d..181e9e2 100644
--- a/spaces/pages/planningBoard.vue
+++ b/spaces/pages/planningBoard.vue
@@ -13,11 +13,10 @@ watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
 })
 
 const supabase = useSupabaseClient()
-
-const {getResources, getEvents, getEventTypes, fetchEvents} = useDataStore()
-const resources = getResources
-const eventTypes = getEventTypes
-const events = getEvents
+const dataStore = useDataStore()
+const resources = dataStore.getResources
+const eventTypes = dataStore.getEventTypes
+const events = dataStore.getEvents
 
 const openNewEventModal = ref(false)
 const newEventData = ref({
@@ -39,7 +38,7 @@ const createEvent = async () => {
   } else {
     openNewEventModal.value = false
     newEventData.value = {}
-    fetchEvents()
+    dataStore.fetchEvents()
   }
 
 
diff --git a/spaces/pages/products/[mode]/[[id]].vue b/spaces/pages/products/[mode]/[[id]].vue
index 4f3d9df..311c3ae 100644
--- a/spaces/pages/products/[mode]/[[id]].vue
+++ b/spaces/pages/products/[mode]/[[id]].vue
@@ -3,18 +3,13 @@ definePageMeta({
   middleware: "auth"
 })
 
-//
+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 )
 
-
-//Store
-const {products, units, ownTenant } = storeToRefs(useDataStore())
-const {fetchProducts, getProductById, getStockByProductId} = useDataStore()
-
 let currentProduct = null
 
 
@@ -29,7 +24,7 @@ const itemInfo = ref({
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentProduct = getProductById(Number(useRoute().params.id))
+    currentProduct = dataStore.getProductById(Number(useRoute().params.id))
   }
 
   if(mode.value === "edit") itemInfo.value = currentProduct
@@ -53,7 +48,7 @@ const createItem = async () => {
       name: ""
     }
     toast.add({title: "Artikel erfolgreich erstellt"})
-    await fetchProducts()
+    await dataStore.fetchProducts()
     router.push(`/products/show/${data[0].id}`)
     setupPage()
   }
@@ -87,7 +82,7 @@ const updateItem = async () => {
       name: "",
     }
     toast.add({title: "Artikel erfolgreich gespeichert"})
-    fetchProducts()
+    dataStore.fetchProducts()
   }
 
 
@@ -116,20 +111,22 @@ setupPage()
         class="my-2"
       />
 
-      Bestand: {{getStockByProductId(currentProduct.id)}} {{units.find(unit => unit.id === currentProduct.unit) ? units.find(unit => unit.id === currentProduct.unit).name : ""}}
+      Bestand: {{dataStore.getStockByProductId(currentProduct.id)}} {{dataStore.units.find(unit => unit.id === currentProduct.unit) ? dataStore.units.find(unit => unit.id === currentProduct.unit).name : ""}}
 
+      <DevOnly>
+        <UDivider
+            class="my-2"
+        />
 
-      <UDivider
-          class="my-2"
-      />
+        {{currentProduct}}
+      </DevOnly>
 
-      {{currentProduct}}
 
 
 
       <template #footer>
         <UButton
-            v-if="mode == 'show' && currentProduct.id"
+            v-if="mode === 'show' && currentProduct.id"
             @click="editItem"
         >
           Bearbeiten
@@ -148,7 +145,7 @@ setupPage()
 
     </UCard>
     <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-      <template #header>
+      <template #header v-if="mode === 'edit'">
         {{itemInfo.name}}
       </template>
 
@@ -171,12 +168,12 @@ setupPage()
       >
         <USelectMenu
           v-model="itemInfo.unit"
-          :options="units"
+          :options="dataStore.units"
           option-attribute="name"
           value-attribute="id"
         >
           <template #label>
-            {{units.find(unit => unit.id === itemInfo.unit) ? units.find(unit => unit.id === itemInfo.unit).name : itemInfo.unit }}
+            {{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : itemInfo.unit }}
           </template>
         </USelectMenu>
       </UFormGroup>
@@ -185,7 +182,7 @@ setupPage()
       >
         <USelectMenu
           v-model="itemInfo.tags"
-          :options="ownTenant.tags.products"
+          :options="dataStore.ownTenant.tags.products"
           multiple
         />
       </UFormGroup>
diff --git a/spaces/pages/products/index.vue b/spaces/pages/products/index.vue
index 7570da8..e401fc4 100644
--- a/spaces/pages/products/index.vue
+++ b/spaces/pages/products/index.vue
@@ -29,7 +29,7 @@
         <span v-else>-</span>
       </template>
       <template #unit-data="{row}">
-        {{units.find(unit => unit.id === row.unit) ? units.find(unit => unit.id === row.unit).name : row.unit}}
+        {{dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : row.unit}}
       </template>
     </UTable>
 
@@ -42,10 +42,9 @@
 definePageMeta({
   middleware: "auth"
 })
-
+const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const router = useRouter()
-const {products,units} = storeToRefs(useDataStore())
 
 const itemColumns = [
   {
@@ -79,10 +78,10 @@ const searchString = ref('')
 
 const filteredRows = computed(() => {
   if(!searchString.value) {
-    return products.value
+    return dataStore.products
   }
 
-  return products.value.filter(product => {
+  return dataStore.products.filter(product => {
     return Object.values(product).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
diff --git a/spaces/pages/projects/index.vue b/spaces/pages/projects/index.vue
index 037c673..87b1683 100644
--- a/spaces/pages/projects/index.vue
+++ b/spaces/pages/projects/index.vue
@@ -19,7 +19,7 @@
         >
           <USelectMenu
               v-model="createProjectData.customer"
-              :options="customers"
+              :options="dataStore.customers"
               option-attribute="name"
               value-attribute="id"
               searchable
@@ -45,103 +45,17 @@
     </UModal>
     <!-- TODO: USelect im Modal anpassen -->
     <UTable
-        :rows="projects"
+        :rows="dataStore.projects"
         :columns="projectColumns"
         @select="selectProject"
 
     >
       <template #customer-data="{row}">
-        {{customers.find(customer => customer.id == row.customer ) ? customers.find(customer => customer.id == row.customer ).name : row.id}}
+        {{dataStore.customers.find(customer => customer.id == row.customer ) ? dataStore.customers.find(customer => customer.id == row.customer ).name : row.id}}
       </template>
 
 
     </UTable>
-
-
-
-<!--    <div id="left">
-      <UButton @click="showCreateProject = true">+ Projekt</UButton>
-      <UModal v-model="showCreateProject">
-        <UCard>
-          <template #header>
-            Projekt erstellen
-          </template>
-
-          <UFormGroup
-            label="Name:"
-          >
-            <UInput
-              v-model="createProjectData.name"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="Kunde:"
-          >
-            <USelectMenu
-              v-model="createProjectData.customer"
-              :options="customers"
-              option-attribute="name"
-              value-attribute="id"
-              searchable
-              :search-attributes="['name']"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="Notizen:"
-          >
-            <UTextarea
-              v-model="createProjectData.notes"
-            />
-          </UFormGroup>
-
-          <template #footer>
-            <UButton
-              @click="createProject"
-            >
-              Erstellen
-            </UButton>
-          </template>
-        </UCard>
-      </UModal>
-
-      <UTable
-          :rows="projects"
-          @select="selectCustomer"
-
-      />
-
-
-      &lt;!&ndash;      <router-link v-for="item in projects" :to="`/projects/${item.id}`">
-        <UCard class="listItem">
-          <UBadge>{{item.id}}</UBadge> {{item.name}}
-        </UCard>
-      </router-link>&ndash;&gt;
-
-
-    </div>
-    <div id="right">
-      {{selectedItem}}
-      <UCard v-if="selectedItem.id">
-        <template #header>
-          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.name}}
-        </template>
-
-        Kunde:<br>
-        {{selectedItem.customer.data.name}}<br>
-
-        Notizen: <br>
-        {{selectedItem.notes}}
-
-&lt;!&ndash;        Lieferantenrechnungen: <br>
-        <UTable :rows="dataStore.getVendorInvoicesByProjectId(selectedItem.id)"></UTable>
-        {{dataStore.getVendorInvoicesByProjectId(selectedItem.id)}}&ndash;&gt;
-
-
-
-
-      </UCard>
-    </div>-->
-
   </div>
 
 </template>
@@ -152,10 +66,9 @@ definePageMeta({
   middleware: "auth"
 })
 
+const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const router = useRouter()
-const {projects,customers} = storeToRefs(useDataStore())
-const {fetchProjects} = useDataStore()
 
 const projectColumns = [
   {
@@ -184,10 +97,6 @@ const selectProject = (project) => {
   router.push(`/projects/${project.id} `)
 }
 
-
-//const projects = (await supabase.from("projects").select()).data
-//const customers = (await supabase.from("customers").select()).data
-
 const showCreateProject = ref(false)
 const createProjectData = ref({
   phases: []
@@ -210,7 +119,7 @@ const createProject = async () => {
 
   showCreateProject.value = false
   createProjectData.value = {phases: []}
-  fetchProjects()
+  dataStore.fetchProjects()
 
 
 }
diff --git a/spaces/pages/settings/numberRanges.vue b/spaces/pages/settings/numberRanges.vue
new file mode 100644
index 0000000..0feda5f
--- /dev/null
+++ b/spaces/pages/settings/numberRanges.vue
@@ -0,0 +1,102 @@
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+
+const supabase = useSupabaseClient()
+const dataStore = useDataStore()
+
+const showAddModal = ref(false)
+
+const columns = [
+  {
+    key: "resourceType",
+    label: "Typ"
+  },{
+    key: "prefix",
+    label: "Prefix"
+  },{
+    key:"nextNumber",
+    label:"Nächste Nummer"
+  },{
+    key: "suffix",
+    label: "Suffix"
+  }
+]
+
+const resources = {
+  customers: {
+    label: "Kunden"
+  },
+  vendors: {
+    label: "Lieferanten"
+  },
+  spaces: {
+    label: "Lagerplätze"
+  }
+}
+
+const updateNumberRange = async (range) => {
+  console.log(range)
+
+  const {data,error} = await supabase
+      .from("numberRanges")
+      .update(range)
+      .eq('id',range.id)
+
+  await dataStore.fetchNumberRanges()
+}
+
+
+</script>
+
+<template>
+  <UModal
+    v-model="showAddModal"
+  >
+
+  </UModal>
+
+
+  <UAlert
+    title="Änderungen an diesen Werten betreffen nur neu Erstellte Einträge."
+    color="rose"
+    variant="outline"
+    icon="i-heroicons-exclamation-triangle"
+  />
+
+  <UTable
+    :rows="dataStore.numberRanges"
+    :columns="columns"
+  >
+    <template #resourceType-data="{row}">
+      {{resources[row.resourceType] ? resources[row.resourceType].label : ""}}
+    </template>
+    <template #prefix-data="{row}">
+      <UInput
+        v-model="row.prefix"
+        @focusout="updateNumberRange(row)"
+      />
+    </template>
+    <template #suffix-data="{row}">
+      <UInput
+        v-model="row.suffix"
+        @focusout="updateNumberRange(row)"
+      />
+    </template>
+    <template #nextNumber-data="{row}">
+      <UInput
+        v-model="row.nextNumber"
+        @focusout="updateNumberRange(row)"
+      />
+    </template>
+  </UTable>
+  <DevOnly>
+    {{dataStore.numberRanges}}
+  </DevOnly>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/spaces/pages/settings/users.vue b/spaces/pages/settings/users.vue
index a59aa84..ff3d7ac 100644
--- a/spaces/pages/settings/users.vue
+++ b/spaces/pages/settings/users.vue
@@ -2,13 +2,12 @@
 definePageMeta({
   middleware: "auth"
 })
-
-const {profiles} = storeToRefs(useDataStore())
+const dataStore = useDataStore()
 
 </script>
 
 <template>
-  {{profiles}}
+  {{dataStore.profiles}}
 </template>
 
 <style scoped>
diff --git a/spaces/pages/tasks.vue b/spaces/pages/tasks.vue
index 10585d5..969c680 100644
--- a/spaces/pages/tasks.vue
+++ b/spaces/pages/tasks.vue
@@ -90,14 +90,14 @@
             label="Benutzer ändern:"
           >
             <USelectMenu
-                :options="profiles"
+                :options="dataStore.profiles"
                 @change="updateTask"
                 v-model="taskData.user"
                 option-attribute="firstName"
                 value-attribute="id"
             >
               <template #label>
-                {{profiles.find(profile => profile.id === taskData.user) ? profiles.find(profile => profile.id === taskData.user).firstName : 'Kein Benutzer ausgewählt'}}
+                {{dataStore.profiles.find(profile => profile.id === taskData.user) ? dataStore.profiles.find(profile => profile.id === taskData.user).fullName : 'Kein Benutzer ausgewählt'}}
               </template>
             </USelectMenu>
           </UFormGroup>
@@ -130,7 +130,7 @@
        {{ dayjs(row.created_at).format("DD.MM.YY HH:mm") }}
      </template>
       <template #user-data="{row}">
-        {{profiles.find(profile => profile.id === row.user ) ? profiles.find(profile => profile.id === row.user ).firstName : row.user}}
+        {{dataStore.profiles.find(profile => profile.id === row.user ) ? dataStore.profiles.find(profile => profile.id === row.user ).fullName : row.user}}
       </template>
    </UTable>
 
@@ -148,10 +148,9 @@ definePageMeta({
   middleware: "auth",
 })
 
+const dataStore = useDataStore()
 const toast = useToast()
 const supabase = useSupabaseClient()
-const {tasks, profiles} = storeToRefs(useDataStore())
-const {fetchTasks} = useDataStore()
 
 const taskColumns = [
   {
@@ -185,7 +184,7 @@ const showDoneTasks = ref(false)
 const searchString = ref("")
 const filteredRows = computed(() => {
 
-  let filteredTasks = tasks.value.filter(task =>  !showDoneTasks.value ? task.categorie !== "Erledigt" : task.categorie === "Erledigt")
+  let filteredTasks = dataStore.tasks.value.filter(task =>  !showDoneTasks.value ? task.categorie !== "Erledigt" : task.categorie === "Erledigt")
 
   if(!searchString.value) {
     return filteredTasks
@@ -224,7 +223,7 @@ const createTask = async () => {
 
   showCreateTask.value = false
   createTaskData.value = {}
-  fetchTasks()
+  dataStore.fetchTasks()
 }
 
 const updateTask = async () => {
@@ -243,7 +242,7 @@ const updateTask = async () => {
     toast.add({title: "Aufgabe aktualisiert"})
     taskData.value = {}
     showTaskModal.value = false
-    fetchTasks()
+    dataStore.fetchTasks()
   }
 
 }
diff --git a/spaces/pages/timetracking.vue b/spaces/pages/timetracking.vue
index 9c610cf6..04e4d0a 100644
--- a/spaces/pages/timetracking.vue
+++ b/spaces/pages/timetracking.vue
@@ -8,13 +8,12 @@ definePageMeta({
   middleware: "auth"
 })
 
+const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const user = useSupabaseUser()
 const toast = useToast()
 
-const {times, projects, profiles, jobs} = storeToRefs(useDataStore())
-const {fetchTimes, getTimeTypes} = useDataStore()
-const timeTypes = getTimeTypes
+const timeTypes = dataStore.getTimeTypes
 const timeInfo = ref({
   user: "",
   start: "",
@@ -100,7 +99,7 @@ const startTime = async () => {
     console.log(error)
   } else if(data) {
     timeInfo.value = data[0]
-    await fetchTimes()
+    await dataStore.fetchTimes()
     runningTimeInfo.value = times.value.find(time => time.user == user.value.id && !time.end)
   }
 
@@ -128,7 +127,7 @@ const stopStartedTime = async () => {
   } else {
     toast.add({title: "Zeit erfolgreich gestoppt"})
     runningTimeInfo.value = {}
-    fetchTimes()
+    dataStore.fetchTimes()
   }
 }
 
@@ -149,7 +148,7 @@ const createTime = async () => {
     createTimeInfo.value = {}
     toast.add({title: "Zeit erfolgreich erstellt"})
     showAddTimeModal.value = false
-    await fetchTimes()
+    await dataStore.fetchTimes()
 
   }
 }
@@ -211,13 +210,13 @@ const selectStartedTime = () => {
         label="Projekt:"
     >
       <USelectMenu
-          :options="projects"
+          :options="dataStore.projects"
           option-attribute="name"
           value-attribute="id"
           v-model="runningTimeInfo.projectId"
       >
         <template #label>
-          {{ projects.find(project => project.id === runningTimeInfo.projectId) ? projects.find(project => project.id === runningTimeInfo.projectId).name : "Projekt auswählen" }}
+          {{ dataStore.projects.find(project => project.id === runningTimeInfo.projectId) ? dataStore.projects.find(project => project.id === runningTimeInfo.projectId).name : "Projekt auswählen" }}
         </template>
       </USelectMenu>
     </UFormGroup>
@@ -226,13 +225,13 @@ const selectStartedTime = () => {
         label="Job:"
     >
       <USelectMenu
-          :options="jobs"
+          :options="dataStore.jobs"
           option-attribute="title"
           value-attribute="id"
           v-model="runningTimeInfo.job"
       >
         <template #label>
-          {{ jobs.find(job => job.id === runningTimeInfo.job) ? jobs.find(job => job.id === runningTimeInfo.job).title : "Job auswählen" }}
+          {{ dataStore.jobs.find(job => job.id === runningTimeInfo.job) ? dataStore.jobs.find(job => job.id === runningTimeInfo.job).title : "Job auswählen" }}
         </template>
       </USelectMenu>
     </UFormGroup>
@@ -302,13 +301,13 @@ const selectStartedTime = () => {
           label="Benutzer:"
       >
         <USelectMenu
-            :options="profiles"
+            :options="dataStore.profiles"
             v-model="createTimeInfo.user"
             option-attribute="firstName"
             value-attribute="id"
         >
           <template #label>
-            {{profiles.find(profile => profile.id === createTimeInfo.user) ? profiles.find(profile => profile.id === createTimeInfo.user).firstName : "Benutzer auswählen"}}
+            {{dataStore.profiles.find(profile => profile.id === createTimeInfo.user) ? dataStore.profiles.find(profile => profile.id === createTimeInfo.user).firstName : "Benutzer auswählen"}}
           </template>
         </USelectMenu>
       </UFormGroup>
@@ -316,13 +315,13 @@ const selectStartedTime = () => {
           label="Projekt:"
       >
         <USelectMenu
-            :options="projects"
+            :options="dataStore.projects"
             v-model="createTimeInfo.projectId"
             option-attribute="name"
             value-attribute="id"
         >
           <template #label>
-            {{projects.find(project => project.id === createTimeInfo.projectId) ? projects.find(project => project.id === createTimeInfo.projectId).name : "Projekt auswählen"}}
+            {{dataStore.projects.find(project => project.id === createTimeInfo.projectId) ? dataStore.projects.find(project => project.id === createTimeInfo.projectId).name : "Projekt auswählen"}}
           </template>
         </USelectMenu>
       </UFormGroup>
@@ -330,13 +329,13 @@ const selectStartedTime = () => {
           label="Job:"
       >
         <USelectMenu
-            :options="jobs"
+            :options="dataStore.jobs"
             option-attribute="title"
             value-attribute="id"
             v-model="createTimeInfo.job"
         >
           <template #label>
-            {{ jobs.find(job => job.id === runningTimeInfo.job) ? jobs.find(job => job.id === runningTimeInfo.job).title : "Job auswählen" }}
+            {{ dataStore.jobs.find(job => job.id === runningTimeInfo.job) ? dataStore.jobs.find(job => job.id === runningTimeInfo.job).title : "Job auswählen" }}
           </template>
         </USelectMenu>
       </UFormGroup>
@@ -382,7 +381,7 @@ const selectStartedTime = () => {
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
   >
     <template #user-data="{row}">
-      {{profiles.find(profile => profile.id === row.user) ? profiles.find(profile => profile.id === row.user).firstName + " " + profiles.find(profile => profile.id === row.user).lastName : row.user }}
+      {{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).firstName + " " + profiles.find(profile => profile.id === row.user).lastName : row.user }}
     </template>
 
     <template #start-data="{row}">
diff --git a/spaces/pages/vehicles/[mode]/[[id]].vue b/spaces/pages/vehicles/[mode]/[[id]].vue
index 0641a89..9f57f11 100644
--- a/spaces/pages/vehicles/[mode]/[[id]].vue
+++ b/spaces/pages/vehicles/[mode]/[[id]].vue
@@ -3,17 +3,13 @@ definePageMeta({
   middleware: "auth"
 })
 
-//
+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 )
 
-//Store
-const {vehicles, profiles } = storeToRefs(useDataStore())
-const {fetchVehicles, getVehicleById} = useDataStore()
-
 let currentItem = null
 
 
@@ -31,7 +27,7 @@ const itemInfo = ref({
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem = getVehicleById(Number(useRoute().params.id))
+    currentItem = dataStore.getVehicleById(Number(useRoute().params.id))
   }
 
   if(mode.value === "edit") itemInfo.value = currentItem
@@ -55,7 +51,7 @@ const createItem = async () => {
       name: ""
     }
     toast.add({title: "Fahrzeug erfolgreich erstellt"})
-    await fetchVehicles()
+    await dataStore.fetchVehicles()
     router.push(`/vehicles/show/${data[0].id}`)
     setupPage()
   }
@@ -92,14 +88,10 @@ const updateCustomer = async () => {
       type: ""
     }
     toast.add({title: "Fahrzeug erfolgreich gespeichert"})
-    fetchVehicles()
+    dataStore.fetchVehicles()
   }
-
-
 }
 
-
-
 setupPage()
 </script>
 
@@ -122,7 +114,7 @@ setupPage()
       </template>
 
       Typ: {{currentItem.type}} <br>
-      Fahrer: {{profiles.find(profile => profile.id === currentItem.driver) ? profiles.find(profile => profile.id === currentItem.driver).fullName : 'Kein Fahrer gewählt'}} <br>
+      Fahrer: {{dataStore.profiles.find(profile => profile.id === currentItem.driver) ? dataStore.profiles.find(profile => profile.id === currentItem.driver).fullName : 'Kein Fahrer gewählt'}} <br>
 
 
 
@@ -147,7 +139,7 @@ setupPage()
 
     </UCard>
     <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-      <template #header>
+      <template #header v-if="mode === 'edit'">
         {{itemInfo.licensePlate}}
       </template>
 
@@ -180,13 +172,13 @@ setupPage()
       >
         <USelectMenu
             v-model="itemInfo.driver"
-            :options="profiles"
+            :options="dataStore.profiles"
             option-attribute="fullName"
             value-attribute="id"
 
         >
           <template #label>
-            {{profiles.find(profile => profile.id === itemInfo.driver) ? profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer ausgewählt'}}
+            {{dataStore.profiles.find(profile => profile.id === itemInfo.driver) ? dataStore.profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer ausgewählt'}}
           </template>
         </USelectMenu>
       </UFormGroup>
diff --git a/spaces/pages/vehicles/index.vue b/spaces/pages/vehicles/index.vue
index 7a78b20..11c4c08 100644
--- a/spaces/pages/vehicles/index.vue
+++ b/spaces/pages/vehicles/index.vue
@@ -30,7 +30,7 @@ definePageMeta({
   middleware: "auth"
 })
 
-
+const dataStore = useDataStore()
 const router = useRouter()
 const {vehicles } = storeToRefs(useDataStore())
 const mode = ref("show")
@@ -58,10 +58,10 @@ const searchString = ref('')
 
 const filteredRows = computed(() => {
   if(!searchString.value) {
-    return vehicles.value
+    return dataStore.vehicles
   }
 
-  return vehicles.value.filter(item => {
+  return dataStore.vehicles.filter(item => {
     return Object.values(item).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
diff --git a/spaces/pages/vendorinvoices/[mode]/[[id]].vue b/spaces/pages/vendorinvoices/[mode]/[[id]].vue
index 0fcabec..612e3e6 100644
--- a/spaces/pages/vendorinvoices/[mode]/[[id]].vue
+++ b/spaces/pages/vendorinvoices/[mode]/[[id]].vue
@@ -1,11 +1,6 @@
 <template>
   <div id="main">
 
-
-
-
-
-
     <div
       class="previewDoc"
     >
@@ -22,14 +17,14 @@
       <UFormGroup label="Lieferant:" required>
         <USelectMenu
           v-model="itemInfo.vendor"
-          :options="vendors"
+          :options="dataStore.vendors"
           option-attribute="name"
           value-attribute="id"
           searchable
           :search-attributes="['name','vendorNumber']"
         >
           <template #label>
-            {{vendors.find(vendor => vendor.id === itemInfo.vendor) ? vendors.find(vendor => vendor.id === itemInfo.vendor).name : 'Lieferant auswählen'}}
+            {{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : 'Lieferant auswählen'}}
           </template>
         </USelectMenu>
       </UFormGroup>
@@ -109,12 +104,13 @@
 import InputGroup from "~/components/InputGroup.vue";
 import * as dayjs from "dayjs";
 
+const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const route = useRoute()
 const toast = useToast()
 
 const {vendors} = storeToRefs(useDataStore())
-const {getVendorInvoiceById, getDocumentById, fetchVendorInvoices} = useDataStore()
+const {fetchVendorInvoices} = useDataStore()
 
 let currentVendorInvoice = null
 let currentDocument  = ref(null)
@@ -125,14 +121,11 @@ const mode = ref(route.params.mode || "show")
 //Functions
 const setupPage = async () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentVendorInvoice = await getVendorInvoiceById(Number(useRoute().params.id))
-    currentDocument.value = await getDocumentById(currentVendorInvoice.document)
+    currentVendorInvoice = await dataStore.getVendorInvoiceById(Number(useRoute().params.id))
+    currentDocument.value = await dataStore.getDocumentById(currentVendorInvoice.document)
   }
 
   if(mode.value === "edit") itemInfo.value = currentVendorInvoice
-
-
-
 }
 
 
@@ -162,7 +155,7 @@ const updateItem = async () => {
       id: 0,
     }*/
     toast.add({title: "Eingangsrechnung erfolgreich gespeichert"})
-    fetchVendorInvoices()
+    dataStore.fetchVendorInvoices()
   }
 }
 
diff --git a/spaces/pages/vendorinvoices/index.vue b/spaces/pages/vendorinvoices/index.vue
index 58e384c..748efcf 100644
--- a/spaces/pages/vendorinvoices/index.vue
+++ b/spaces/pages/vendorinvoices/index.vue
@@ -33,7 +33,7 @@
         </span>
       </template>
       <template #vendor-data="{row}">
-        {{vendors.find(vendor => vendor.id === row.vendor) ? vendors.find(vendor => vendor.id === row.vendor).name : ''}}
+        {{dataStore.vendors.find(vendor => vendor.id === row.vendor) ? dataStore.vendors.find(vendor => vendor.id === row.vendor).name : ''}}
       </template>
       <template #date-data="{row}">
         {{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}
@@ -58,9 +58,8 @@ definePageMeta({
   middleware: "auth"
 })
 
-
+const dataStore = useDataStore()
 const router = useRouter()
-const {vendorInvoices, vendors} = storeToRefs(useDataStore())
 const mode = ref("show")
 
 const itemColumns = [
@@ -107,10 +106,10 @@ const searchString = ref('')
 
 const filteredRows = computed(() => {
   if(!searchString.value) {
-    return vendorInvoices.value
+    return dataStore.vendorInvoices
   }
 
-  return vendorInvoices.value.filter(item => {
+  return dataStore.vendorInvoices.filter(item => {
     return Object.values(item).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
diff --git a/spaces/pages/vendors/[mode]/[[id]].vue b/spaces/pages/vendors/[mode]/[[id]].vue
index 7ba2b5d..ecd5ce9 100644
--- a/spaces/pages/vendors/[mode]/[[id]].vue
+++ b/spaces/pages/vendors/[mode]/[[id]].vue
@@ -3,18 +3,13 @@ definePageMeta({
   middleware: "auth"
 })
 
-//
+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 )
 
-
-//Store
-const {vendors } = storeToRefs(useDataStore())
-const {fetchVendors, getVendorById} = useDataStore()
-
 let currentItem = null
 
 
@@ -26,7 +21,7 @@ const itemInfo = ref({})
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem = getVendorById(Number(useRoute().params.id))
+    currentItem = dataStore.getVendorById(Number(useRoute().params.id))
   }
 
   if(mode.value === "edit") itemInfo.value = currentItem
@@ -47,7 +42,7 @@ const createItem = async () => {
     mode.value = "show"
     itemInfo.value = {}
     toast.add({title: "Lieferant erfolgreich erstellt"})
-    await fetchVendors()
+    await dataStore.fetchVendors()
     router.push(`/vendors/show/${data[0].id}`)
     setupPage()
   }
@@ -74,7 +69,7 @@ const updateItem = async () => {
     mode.value = "show"
     itemInfo.value = {}
     toast.add({title: "Lieferant erfolgreich gespeichert"})
-    fetchVendors()
+    dataStore.fetchVendors()
   }
 
 
diff --git a/spaces/pages/vendors/index.vue b/spaces/pages/vendors/index.vue
index 02a98bb..59bad7b 100644
--- a/spaces/pages/vendors/index.vue
+++ b/spaces/pages/vendors/index.vue
@@ -29,9 +29,8 @@ definePageMeta({
   middleware: "auth"
 })
 
-
+const dataStore = useDataStore()
 const router = useRouter()
-const {vendors } = storeToRefs(useDataStore())
 const mode = ref("show")
 
 const itemColumns = [
@@ -58,10 +57,10 @@ const searchString = ref('')
 
 const filteredRows = computed(() => {
   if(!searchString.value) {
-    return vendors.value
+    return dataStore.vendors
   }
 
-  return vendors.value.filter(item => {
+  return dataStore.vendors.filter(item => {
     return Object.values(item).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
diff --git a/spaces/stores/data.ts b/spaces/stores/data.ts
index 34f0647..c472f1d 100644
--- a/spaces/stores/data.ts
+++ b/spaces/stores/data.ts
@@ -2,288 +2,424 @@ import {defineStore} from 'pinia'
 
 import {createClient} from '@supabase/supabase-js'
 
-const supabase = createClient('https://uwppvcxflrcsibuzsbil.supabase.co','eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InV3cHB2Y3hmbHJjc2lidXpzYmlsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDA5MzgxOTQsImV4cCI6MjAxNjUxNDE5NH0.CkxYSQH0uLfwx9GVUlO6AYMU2FMLAxGMrwEKvyPv7Oo')
+//const supabase = createClient('https://uwppvcxflrcsibuzsbil.supabase.co','eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InV3cHB2Y3hmbHJjc2lidXpzYmlsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDA5MzgxOTQsImV4cCI6MjAxNjUxNDE5NH0.CkxYSQH0uLfwx9GVUlO6AYMU2FMLAxGMrwEKvyPv7Oo')
 
 // @ts-ignore
-export const useDataStore = defineStore('data', {
-    state: () => ({
-        loaded: false,
-        ownTenant: {
-            calendarConfig: {
-                eventTypes: [] as any[]
-            },
-            timeConfig: {
-                timeTypes: [] as any[]
-            },
-            tags: {
-                documents: [] as any[],
+export const useDataStore = defineStore('data', () => {
+
+    const supabase = useSupabaseClient()
+    const user = useSupabaseUser()
+    const toast = useToast()
+
+    const loaded = ref(false)
+    const ownTenant = ref({
+        calendarConfig: {
+            eventTypes: [] as any[]
+        },
+        timeConfig: {
+            timeTypes: [] as any[]
+        },
+        tags: {
+            documents: [] as any[],
                 products: [] as any[]
-            }
-        },
-        profiles: [] as any[],
-        events: [] as any[],
-        customers: [] as any[],
-        tasks: [] as any[],
-        projects: [] as any[],
-        documents: [] as any[],
-        spaces: [] as any[],
-        units: [] as any[],
-        times: [] as any[],
-        products: [] as any[],
-        movements: [] as any[],
-        forms: [] as any[],
-        contracts: [] as any[],
-        jobs: [] as any[],
-        formSubmits: [] as any[],
-        contacts: [] as any[],
-        vehicles: [] as any[],
-        vendors: [] as any[],
-        vendorInvoices: [] as any[],
-        bankAccounts: [] as any[],
-        bankStatements: [] as any[]
-    }),
-    actions: {
-        async fetchData() {
-            this.fetchDocuments()
-            await this.fetchOwnTenant()
-            await this.fetchProfiles()
-            await this.fetchEvents()
-            await this.fetchTasks()
-            await this.fetchProjects()
-            await this.fetchTimes()
-            await this.fetchJobs()
-            this.loaded = true
-
-
-            await this.fetchCustomers()
-            await this.fetchContracts()
-            await this.fetchContacts()
-            await this.fetchForms()
-            await this.fetchFormSubmits()
-            await this.fetchProducts()
-            await this.fetchUnits()
-            //await this.fetchDocuments()
-            await this.fetchMovements()
-            await this.fetchSpaces()
-            await this.fetchVehicles()
-            await this.fetchVendors()
-            await this.fetchVendorInvoices()
-            await this.fetchBankAccounts()
-            await this.fetchBankStatements()
-
-
-        },
-        async clearStore() {
-            console.log("Clear")
-            this.loaded = false
-            this.ownTenant =  {}
-            this.profiles= []
-            this.events= []
-            this.customers= []
-            this.tasks= []
-            this.projects= []
-            this.documents= []
-            this.spaces= []
-            this.units= []
-            this.times= []
-            this.products= []
-            this.movements= []
-            this.forms= []
-            this.contracts= []
-            this.jobs= []
-            this.formSubmits= []
-            this.contacts= []
-            this.vehicles= []
-            this.vendors= []
-            this.vendorInvoices= []
-            this.bankAccounts= []
-            this.bankStatements= []
-        },
-        async fetchOwnTenant() {
-            //TODO: Tenant ID Dynamisch machen
-            // @ts-ignore
-            this.ownTenant = (await supabase.from("tenants").select().eq('id', 1)).data[0]
-        },
-        async fetchProfiles() {
-            // @ts-ignore
-            this.profiles = (await supabase.from("profiles").select()).data
-        },
-        async fetchBankAccounts() {
-            // @ts-ignore
-            this.bankAccounts = (await supabase.from("bankAccounts").select()).data
-        },
-        async fetchBankStatements() {
-            // @ts-ignore
-            this.bankStatements = (await supabase.from("bankStatements").select()).data
-        },
-        async fetchEvents() {
-            // @ts-ignore
-            this.events = (await supabase.from("events").select()).data
-        },
-        async fetchContracts() {
-            // @ts-ignore
-            this.contracts = (await supabase.from("contracts").select()).data
-        },
-        async fetchContacts() {
-            // @ts-ignore
-            this.contacts = (await supabase.from("contacts").select()).data
-        },
-        async fetchCustomers() {
-            // @ts-ignore
-            this.customers = (await supabase.from("customers").select().order('customerNumber', {ascending: true})).data
-        },
-        async fetchTasks() {
-            // @ts-ignore
-            this.tasks = (await supabase.from("tasks").select()).data
-        },
-        async fetchForms() {
-            // @ts-ignore
-            this.forms = (await supabase.from("forms").select()).data
-        },
-        async fetchFormSubmits() {
-            // @ts-ignore
-            this.formSubmits = (await supabase.from("formSubmits").select()).data
-        },
-        async fetchProducts() {
-            // @ts-ignore
-            this.products = (await supabase.from("products").select().order('id',{ascending: true})).data
-        },
-        async fetchUnits() {
-            // @ts-ignore
-            this.units = (await supabase.from("units").select()).data
-        },
-        async fetchProjects() {
-            // @ts-ignore
-            this.projects = (await supabase.from("projects").select()).data
-        },
-        async fetchSpaces() {
-            // @ts-ignore
-            this.spaces = (await supabase.from("spaces").select().order('spaceNumber', {ascending: true})).data
-        },
-        async fetchMovements() {
-            // @ts-ignore
-            this.movements = (await supabase.from("movements").select()).data
-        },
-        async fetchVehicles() {
-            // @ts-ignore
-            this.vehicles = (await supabase.from("vehicles").select()).data
-        },
-        async fetchTimes() {
-            // @ts-ignore
-            this.times = (await supabase.from("times").select()).data
-        },
-        async fetchJobs() {
-            // @ts-ignore
-            this.jobs = (await supabase.from("jobs").select()).data
-        },
-        async fetchVendors() {
-            // @ts-ignore
-            this.vendors = (await supabase.from("vendors").select().order('vendorNumber',{ascending: true})).data
-        },
-        async fetchVendorInvoices() {
-            // @ts-ignore
-            this.vendorInvoices = (await supabase.from("vendorInvoices").select()).data
-        },
-        async fetchDocuments() {
-            // @ts-ignore
-            this.documents = (await supabase.from("documents").select()).data
-
-            for(const [index,doc] of this.documents.entries()){
-                // @ts-ignore
-                this.documents[index].url = (await supabase.storage.from('files').createSignedUrl(doc.path, 60 * 60)).data.signedUrl
-            }
         }
-    },
-    getters: {
-        getProfileById: (state) => (userUid:string) => state.profiles.find(profile => profile.id === userUid),
-        getOpenTasksCount: (state) => state.tasks.filter(task => task.categorie != "Erledigt").length,
-        movementsBySpace: (state) => (spaceId:number) => state.movements.filter(move => move.spaceId === spaceId),
-        getStockByProductId: (state) => (productId:number) => {
-          let movements = state.movements.filter((movement:any) => movement.productId === productId)
+    })
+    const profiles = ref([])
+    const events = ref([])
+    const customers = ref([])
+    const tasks = ref([])
+    const projects = ref([])
+    const documents = ref([])
+    const spaces = ref([])
+    const units = ref([])
+    const times = ref([])
+    const products = ref([])
+    const movements = ref([])
+    const forms = ref([])
+    const contracts = ref([])
+    const jobs = ref([])
+    const formSubmits = ref([])
+    const contacts = ref([])
+    const vehicles = ref([])
+    const vendors = ref([])
+    const vendorInvoices = ref([])
+    const bankAccounts = ref([])
+    const bankStatements = ref([])
+    const historyItems = ref([])
+    const numberRanges = ref([])
 
-          let count = 0
-
-            movements.forEach(movement => count += movement.quantity)
-
-            return count
-
-        },
-        getProductById: (state) => (productId:number) => state.products.find(product => product.id === productId),
-        getVendorById: (state) => (itemId:number) => state.vendors.find(item => item.id === itemId),
-        getVendorInvoiceById: (state) => (itemId:number) => state.vendorInvoices.find(item => item.id === itemId),
-        getContractById: (state) => (itemId:number) => state.contracts.find(item => item.id === itemId),
-        getContactById: (state) => (itemId:number) => state.contacts.find(item => item.id === itemId),
-        getVehicleById: (state) => (itemId:number) => state.vehicles.find(item => item.id === itemId),
-        getDocumentById: (state) => (itemId:number) => state.documents.find(item => item.id === itemId),
-        getSpaceById: (state) => (itemId:number) => state.spaces.find(item => item.id === itemId),
-        getProjectById: (state) => (projectId:number) => {
-            let project = state.projects.find(project => project.id === projectId)
-
-            let projectHours = 0
-
-            let projectTimes = state.times.filter(time => time.projectId === projectId)
-            projectTimes.forEach(time => projectHours += time.duration)
-
-            project.projectHours = projectHours
-
-            return project
-
-        },
-        getCustomerById: (state) => (customerId:number) => state.customers.find(customer => customer.id === customerId),
-        getJobById: (state) => (jobId:number) => state.jobs.find(job => job.id === jobId),
-        getContactsByCustomerId: (state) => (customerId) => state.contacts.filter(contact => contact.customer === customerId),
-        getTimesByProjectId: (state) => (projectId:number) => {
-            let times = state.times.filter(time => time.projectId === projectId)
-            console.log(times.length)
-
-            /*const mapNumRange = (num, inMin, inMax, outMin, outMax) =>
-                ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
-
-            times.forEach((time,index) => {
-                times[index].duration = Math.round(mapNumRange(Math.abs(new Date(time.end) - new Date(time.start))/1000/60,0,60,0,1)*100)/100
-
-            })*/
-
-            return times
-
-        },
-        getDocumentsByProjectId:(state) => (itemId: number) => state.documents.filter(item => item.project == itemId ),
-        getFormSubmitsWithLabelProp: (state) => (state.formSubmits.map(submit => {return{...submit, label: submit.id}})),
-        getResources: (state) => {
-            return [
-                ...state.profiles.map(profile => {
-                    return {
-                        type: 'person',
-                        title: profile.firstName + ' ' + profile.lastName,
-                        id: profile.id
-                    }
-                }),
-                ...state.vehicles.map(vehicle => {
-                    return {
-                        type: 'vehicle',
-                        title: vehicle.licensePlate,
-                        id: vehicle.licensePlate
-                    }
-                })
-            ]
-        },
-        getEvents: (state) => {
-
-            return [
-                ...state.events.map(event => {
-                    let eventColor = state.ownTenant.calendarConfig.eventTypes.find(type => type.label === event.type).color
-
-                    return {
-                        ...event,
-                        borderColor: eventColor,
-                        textColor: eventColor,
-                        backgroundColor: "black"
-                    }
-                }),
-            ]
-        },
-        getEventTypes: (state) => state.ownTenant.calendarConfig.eventTypes,
-        getTimeTypes: (state) => state.ownTenant.timeConfig.timeTypes,
-        getDocumentTags: (state) => state.ownTenant.tags.documents,
+    async function fetchData () {
+        fetchDocuments()
+        await fetchOwnTenant()
+        await fetchProfiles()
+        await fetchEvents()
+        await fetchTasks()
+        await fetchProjects()
+        await fetchTimes()
+        await fetchJobs()
+        await fetchCustomers()
+        await fetchContracts()
+        await fetchContacts()
+        await fetchForms()
+        await fetchFormSubmits()
+        await fetchProducts()
+        await fetchUnits()
+        //await fetchDocuments()
+        await fetchMovements()
+        await fetchSpaces()
+        await fetchVehicles()
+        await fetchVendors()
+        await fetchVendorInvoices()
+        await fetchBankAccounts()
+        await fetchBankStatements()
+        await fetchHistoryItems()
+        await fetchNumberRanges()
+        loaded.value = true
     }
+
+    function clearStore () {
+        console.log("Clear")
+        loaded.value = false
+        ownTenant.value =  {}
+        profiles.value= []
+        events.value= []
+        customers.value= []
+        tasks.value= []
+        projects.value= []
+        documents.value= []
+        spaces.value= []
+        units.value= []
+        times.value= []
+        products.value= []
+        movements.value= []
+        forms.value= []
+        contracts.value= []
+        jobs.value= []
+        formSubmits.value= []
+        contacts.value= []
+        vehicles.value= []
+        vendors.value= []
+        vendorInvoices.value= []
+        bankAccounts.value= []
+        bankStatements.value= []
+        historyItems.value = []
+        numberRanges.value = []
+    }
+
+    async function fetchOwnTenant () {
+        ownTenant.value = (await supabase.from("tenants").select().eq('id', user.value?.app_metadata.tenant)).data[0]
+    }
+
+    async function fetchProfiles () {
+        profiles.value = (await supabase.from("profiles").select()).data
+    }
+    async function fetchBankAccounts () {
+        bankAccounts.value = (await supabase.from("bankAccounts").select()).data
+    }
+    async function fetchBankStatements () {
+        bankStatements.value = (await supabase.from("bankStatements").select()).data
+    }
+    async function fetchEvents () {
+        events.value = (await supabase.from("events").select()).data
+    }
+    async function fetchContracts () {
+        contracts.value = (await supabase.from("contracts").select()).data
+    }
+    async function fetchContacts () {
+        contacts.value = (await supabase.from("contacts").select()).data
+    }
+    async function fetchCustomers () {
+        customers.value = (await supabase.from("customers").select().order("customerNumber", {ascending:true})).data
+    }
+    async function fetchTasks () {
+        tasks.value = (await supabase.from("tasks").select()).data
+    }
+    async function fetchForms () {
+        forms.value = (await supabase.from("forms").select()).data
+    }
+    async function fetchFormSubmits () {
+        formSubmits.value = (await supabase.from("formSubmits").select()).data
+    }
+    async function fetchProducts () {
+        products.value = (await supabase.from("products").select()).data
+    }
+    async function fetchUnits () {
+        units.value = (await supabase.from("units").select()).data
+    }
+    async function fetchProjects () {
+        projects.value = (await supabase.from("projects").select()).data
+    }
+    async function fetchSpaces () {
+        spaces.value = (await supabase.from("spaces").select()).data
+    }
+    async function fetchMovements () {
+        movements.value = (await supabase.from("movements").select()).data
+    }
+    async function fetchVehicles () {
+        vehicles.value = (await supabase.from("vehicles").select()).data
+    }
+    async function fetchTimes () {
+        times.value = (await supabase.from("times").select()).data
+    }
+    async function fetchJobs () {
+        jobs.value = (await supabase.from("jobs").select()).data
+    }
+    async function fetchHistoryItems () {
+        historyItems.value = (await supabase.from("historyItems").select()).data
+    }
+    async function fetchVendors () {
+        vendors.value = (await supabase.from("vendors").select()).data
+    }
+    async function fetchVendorInvoices () {
+        vendorInvoices.value = (await supabase.from("vendorInvoices").select()).data
+    }
+    async function fetchNumberRanges () {
+        numberRanges.value = (await supabase.from("numberRanges").select()).data
+    }
+
+    async function fetchDocuments () {
+        documents.value = (await supabase.from("documents").select()).data
+
+        for(const [index,doc] of documents.value.entries()){
+            // @ts-ignore
+            documents.value[index].url = (await supabase.storage.from('files').createSignedUrl(doc.path, 60 * 60)).data.signedUrl
+        }
+    }
+
+    async function addHistoryItem(text: String, user: String, elementId: String, resourceType: String) {
+        let data = {
+            user: user,
+            text: text
+        }
+
+        if(resourceType === "customers") {
+            data.customer = elementId
+        }
+
+        const {data:insertData,error:insertError} = await supabase
+            .from("historyItems")
+            .insert([addHistoryItemData.value])
+            .select()
+
+        if(insertError) {
+            console.log(insertError)
+        } else {
+            toast.add({title: "Eintrag erfolgreich erstellt"})
+            await fetchHistoryItems()
+        }
+
+    }
+
+    //Getters
+
+    const getOpenTasksCount = computed(() => {
+        return tasks.value.filter(task => task.categorie != "Erledigt").length
+    })
+
+    const getMovementsBySpace = computed(() => (spaceId:string) => {
+        return movements.value.filter(movement => movement.spaceId === spaceId)
+    })
+
+    const getContactsByCustomerId = computed(() => (customerId:string) => {
+        return contacts.value.filter(item => item.customer === customerId)
+    })
+
+    const getDocumentsByProjectId = computed(() => (projectId:string) => {
+        return documents.value.filter(item => item.project === projectId)
+    })
+
+    const getTimesByProjectId = computed(() => (projectId:string) => {
+        return times.value.filter(time => time.projectId === projectId)
+    })
+
+    const getHistoryItemsByCustomer = computed(() => (customerId:string) => {
+        return historyItems.value.filter(item => item.customer === customerId)
+    })
+
+    const getEventTypes = computed(() => {
+        return ownTenant.value.calendarConfig.eventTypes
+    })
+
+    const getTimeTypes = computed(() => {
+        return ownTenant.value.timeConfig.timeTypes
+    })
+
+    const getDocumentTags = computed(() => {
+        return ownTenant.value.tags.documents
+    })
+
+    const getResources = computed(() => {
+        return [
+            ...profiles.value.map(profile => {
+                return {
+                    type: 'person',
+                    title: profile.fullName,
+                    id: profile.id
+                }
+            }),
+            ...vehicles.value.map(vehicle => {
+                return {
+                    type: 'vehicle',
+                    title: vehicle.licensePlate,
+                    id: vehicle.licensePlate
+                }
+            })
+        ]
+    })
+
+    const getEvents = computed(() => {
+        return [
+            ...events.value.map(event => {
+                let eventColor = ownTenant.value.calendarConfig.eventTypes.find(type => type.label === event.type).color
+
+                return {
+                    ...event,
+                    borderColor: eventColor,
+                    textColor: eventColor,
+                    backgroundColor: "black"
+                }
+            }),
+        ]
+    })
+
+
+    //Get Item By Id
+    const getProductById = computed(() => (itemId:string) => {
+        return products.value.find(item => item.id === itemId)
+    })
+
+    const getVendorById = computed(() => (itemId:string) => {
+        return vendors.value.find(item => item.id === itemId)
+    })
+
+    const getVendorInvoiceById = computed(() => (itemId:string) => {
+        return vendorInvoices.value.find(item => item.id === itemId)
+    })
+
+    const getContractById = computed(() => (itemId:string) => {
+        return contracts.value.find(item => item.id === itemId)
+    })
+
+    const getContactById = computed(() => (itemId:string) => {
+        return contacts.value.find(item => item.id === itemId)
+    })
+
+    const getVehiclesById = computed(() => (itemId:string) => {
+        return vehicles.value.find(item => item.id === itemId)
+    })
+
+    const getDocumentById = computed(() => (itemId:string) => {
+        return documents.value.find(item => item.id === itemId)
+    })
+
+    const getSpaceById = computed(() => (itemId:string) => {
+        return spaces.value.find(item => item.id === itemId)
+    })
+
+    const getCustomerById = computed(() => (itemId:number) => {
+        return customers.value.find(item => item.id === itemId)
+    })
+
+    const getJobById = computed(() => (itemId:string) => {
+        return jobs.value.find(item => item.id === itemId)
+    })
+
+    const getProfileById = computed(() => (itemId:string) => {
+        return profiles.value.find(item => item.id === itemId)
+    })
+
+    const getProjectById = computed(() => (itemId:string) => {
+        let project = projects.value.find(project => project.id === itemId)
+
+        let projectHours = 0
+
+        let projectTimes = times.value.filter(time => time.projectId === itemId)
+        projectTimes.forEach(time => projectHours += time.duration)
+
+        project.projectHours = projectHours
+
+        return project
+    })
+
+    return {
+        loaded,
+        ownTenant,
+        profiles,
+        events,
+        customers,
+        tasks,
+        projects,
+        documents,
+        spaces,
+        units,
+        times,
+        products,
+        movements,
+        forms,
+        contracts,
+        jobs,
+        formSubmits,
+        contacts,
+        vehicles,
+        vendors,
+        vendorInvoices,
+        bankAccounts,
+        bankStatements,
+        historyItems,
+        numberRanges,
+        //Functions
+        fetchData,
+        clearStore,
+        fetchOwnTenant,
+        fetchProfiles,
+        fetchBankAccounts,
+        fetchBankStatements,
+        fetchEvents,
+        fetchContracts,
+        fetchContacts,
+        fetchCustomers,
+        fetchTasks,
+        fetchForms,
+        fetchFormSubmits,
+        fetchProducts,
+        fetchUnits,
+        fetchProjects,
+        fetchSpaces,
+        fetchMovements,
+        fetchVehicles,
+        fetchTimes,
+        fetchJobs,
+        fetchHistoryItems,
+        fetchVendors,
+        fetchVendorInvoices,
+        fetchNumberRanges,
+        fetchDocuments,
+        addHistoryItem,
+        //Getters
+        getOpenTasksCount,
+        getMovementsBySpace,
+        getContactsByCustomerId,
+        getDocumentsByProjectId,
+        getTimesByProjectId,
+        getHistoryItemsByCustomer,
+        getEventTypes,
+        getTimeTypes,
+        getDocumentTags,
+        getResources,
+        getEvents,
+        getProductById,
+        getVendorById,
+        getVendorInvoiceById,
+        getContractById,
+        getContactById,
+        getVehiclesById,
+        getDocumentById,
+        getSpaceById,
+        getCustomerById,
+        getJobById,
+        getProjectById,
+        getProfileById
+    }
+
+
 })
\ No newline at end of file