Changed STore Type and corrected all Pages

Added HistoryDisplay.vue
Added NumberRanges

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())
     })