Changed STore Type and corrected all Pages

Added HistoryDisplay.vue
Added NumberRanges

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>

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