Changed STore Type and corrected all Pages

Added HistoryDisplay.vue
Added NumberRanges

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>